generically * inside the same widget, which means visual hierarchy needs to come * from the widget settings. Default to our type tokens so unstyled * widgets still feel coherent. */ .elementor-widget-heading .elementor-heading-title { font-family: var(--dfdc-font-sans); letter-spacing: var(--dfdc-tracking-tight); line-height: var(--dfdc-leading-tight); } .elementor-widget-heading h1.elementor-heading-title { font-weight: 600; font-size: var(--dfdc-text-4xl); } .elementor-widget-heading h2.elementor-heading-title { font-weight: 600; font-size: var(--dfdc-text-3xl); } .elementor-widget-heading h3.elementor-heading-title { font-weight: 600; font-size: var(--dfdc-text-2xl); } .elementor-widget-heading h4.elementor-heading-title { font-weight: 500; font-size: var(--dfdc-text-xl); } .elementor-widget-heading p.elementor-heading-title { font-family: var(--dfdc-font-sans); font-weight: 400; letter-spacing: 0; line-height: var(--dfdc-leading-normal); } /* ---- Compliance page (page-id-2282) ------------------------------- * The team built each cert as two side-by-side Elementor containers: * a white text column on the left and a fully mint-saturated image * column on the right. Dark blue ISO globes on a saturated mint clash * hard, the join between the two columns reads as a broken split, and * the dotted Elementor row outline shows through. Rework: * 1. dim the mint cell to a soft brand tint that doesn't fight logos * 2. wrap the row as a single rounded card with a subtle border * 3. drop the dotted row outline */ .page-id-2282 .elementor-element { border-style: none !important; } .page-id-2282 .e-con-full { background-color: transparent; background-image: none; } /* The cert row pattern: a 2-column container where one column holds an * image widget. Match only that exact shape so the page wrapper (which * also has multiple .e-con-full children) doesn't get the card style. */ .page-id-2282 .e-con-full:has(> .e-con-full:nth-child(2):last-child > .elementor-widget-image) { background-color: var(--dfdc-surface) !important; border: 1px solid rgba(15, 21, 19, 0.08) !important; border-radius: var(--dfdc-radius-lg) !important; box-shadow: var(--dfdc-shadow-sm); overflow: hidden; margin-block: var(--dfdc-space-5); } /* Both columns inside the unified card become transparent so the * parent card's white surface shows through cleanly. */ .page-id-2282 .e-con-full > .e-con-full:nth-child(1), .page-id-2282 .e-con-full > .e-con-full:nth-child(2) { background-color: transparent !important; background-image: none !important; } /* Subtle mint accent strip down the LEFT edge of each cert card to * keep the brand cue without flooding the cell. */ .page-id-2282 .e-con-full:has(> .e-con-full:nth-child(2):last-child > .elementor-widget-image) { border-left: 4px solid var(--dfdc-mint) !important; } /* Center the cert logos in their cell. */ .page-id-2282 .e-con-full > .e-con-full:nth-child(2) .elementor-widget-image { display: flex; align-items: center; justify-content: center; } .page-id-2282 .e-con-full > .e-con-full:nth-child(2) .elementor-widget-image img { max-height: 220px; width: auto; } /* Title row: the file icon is decorative; tighten its scale + gap. */ .page-id-2282 .elementor-icon-list-item img, .page-id-2282 .e-con-full .elementor-icon img { max-height: 28px; width: auto; } /* ---- Hide counter widgets ---------------------------------------- * Per the team's positioning: we are a single-location boutique * facility — quantitative counters ("0+", "165 racks", "0.05%") work * against the brand. Hide them site-wide; the underlying widgets * stay in the page so they can be re-enabled or replaced later. */ .elementor-widget-counter { display: none !important; } /* When a row is composed entirely of counter widgets, also hide the * containing column / row so we don't leave a blank gap. */ .e-con-full:has(> .elementor-widget-counter:only-child), .e-con-full:not(:has(> :not(.elementor-widget-counter, .e-con-full:has(> .elementor-widget-counter:only-child)))) { display: none !important; } /* ---- Section rhythm ------------------------------------------------- */ .section, section[class*="-section"]:not(.elementor-section):not(.dfdc-hero) { padding-block: var(--dfdc-space-9); } .ms-container, .section-container { width: var(--dfdc-container); margin-inline: auto; } /* ---- Inline style anti-patterns: defang the worst offenders -------- */ /* The team scattered margin-top:-125px on .inner-banner; replace at the class level so we can stop using inline styles in templates. */ .inner-banner { margin-top: 0; } /* ---- A11y helpers --------------------------------------------------- */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* ---- Smooth Elementor / vendor link/button hover transitions ------- */ a { transition: color var(--dfdc-duration-fast) var(--dfdc-ease); } /* ---- Site header backdrop ----------------------------------------- * The Elementor / ElementsKit header ships transparent. With a light * page body that turns white-text nav invisible. Give the header its * own dark backdrop everywhere so the nav stays readable; on the home * page the hero takes over and the header sits over it transparently * with a thin scrim for legibility. * * ElementsKit renders the header via .ekit-template-content-header, * not via [data-elementor-type=header] — that's how Pro packages it. */ .ekit-template-content-header, .elementor-location-header { background-color: var(--dfdc-bg); color: var(--dfdc-text); position: relative; z-index: var(--dfdc-z-header); } body.home .ekit-template-content-header, body.home .elementor-location-header { background-color: transparent; background-image: linear-gradient(180deg, rgba(11, 19, 17, 0.72) 0%, rgba(11, 19, 17, 0.32) 60%, transparent 100%); position: absolute; top: 0; left: 0; right: 0; } /* Pull the homepage hero up flush with the page top so the header floats over it; off-home pages render normally with header above. */ body.home .dfdc-hero { margin-top: 0; } /* Nav link contrast — readable text on the dark header. The active / hover state uses our mint accent. */ .ekit-template-content-header .ekit-menu-nav-link, .elementor-location-header .ekit-menu-nav-link { color: var(--dfdc-text) !important; } .ekit-template-content-header .ekit-menu-nav-link:hover, .ekit-template-content-header .ekit-menu-nav-link.active, .elementor-location-header .ekit-menu-nav-link:hover, .elementor-location-header .ekit-menu-nav-link.active { color: var(--dfdc-mint) !important; } /* Dropdown panel — dark elevated surface, mint hover, rounded card. * !important everywhere because ElementsKit ships !important defaults * for radius / padding / border / shadow on .elementskit-submenu-panel. * * NO `margin-top`: a margin between parent and dropdown means the * cursor leaves :hover when crossing the gap and the panel collapses. * Instead we draw the panel flush with the parent — clip-path keeps * the visual gap on the painted surface only. */ .ekit-template-content-header .elementskit-dropdown, .ekit-template-content-header .elementskit-submenu-panel, .ekit-template-content-header .elementskit-megamenu-panel { background-color: var(--dfdc-bg-elev-1) !important; border: 1px solid var(--dfdc-line) !important; box-shadow: var(--dfdc-shadow-lg) !important; border-radius: var(--dfdc-radius-md) !important; padding: var(--dfdc-space-2) !important; min-width: 240px !important; margin-top: 0 !important; top: 100% !important; overflow: visible !important; } /* Invisible hover bridge — pseudo-element above the dropdown that * keeps :hover continuous when moving from the parent label down. */ .ekit-template-content-header .elementskit-dropdown::before, .ekit-template-content-header .elementskit-submenu-panel::before, .ekit-template-content-header .elementskit-megamenu-panel::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; background: transparent; } .ekit-template-content-header .elementskit-dropdown a, .ekit-template-content-header .elementskit-submenu-panel a, .ekit-template-content-header .elementskit-megamenu-panel a { color: var(--dfdc-text) !important; padding: 10px 14px !important; border-radius: var(--dfdc-radius-sm) !important; font-size: 0.95em !important; white-space: nowrap; transition: color var(--dfdc-duration-fast) var(--dfdc-ease), background-color var(--dfdc-duration-fast) var(--dfdc-ease) !important; } .ekit-template-content-header .elementskit-dropdown a:hover, .ekit-template-content-header .elementskit-megamenu-panel a:hover { color: var(--dfdc-mint) !important; background-color: rgba(255, 255, 255, 0.06) !important; } /* Drop-down indicator caret — sits flush after the parent label. * ElementsKit emits * with float:right + display:block which stacks the caret on a new line * inside the flex parent . Kill the float and force inline-flex. */ .ekit-template-content-header .elementskit-submenu-indicator, .ekit-template-content-header .ekit-menu-dropdown-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; float: none !important; margin-left: 6px !important; margin-top: 0 !important; font-size: 0.65em !important; line-height: 1 !important; vertical-align: middle !important; position: static !important; top: auto !important; transition: transform var(--dfdc-duration-fast) var(--dfdc-ease); color: currentColor; } /* The link itself — keep label and indicator on a single inline row. */ .ekit-template-content-header .ekit-menu-nav-link { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; } .ekit-template-content-header li:hover > a > .elementskit-submenu-indicator, .ekit-template-content-header li:hover > a > .ekit-menu-dropdown-icon, .ekit-template-content-header li.ekit-active > a > .elementskit-submenu-indicator, .ekit-template-content-header li.ekit-active > a > .ekit-menu-dropdown-icon, .ekit-template-content-header li.elementskit-dropdown-open > a > .elementskit-submenu-indicator, .ekit-template-content-header li.elementskit-dropdown-open > a > .ekit-menu-dropdown-icon { transform: rotate(180deg); color: var(--dfdc-mint); } /* Off-canvas sidebar trigger — borderless icon, no button chrome. Just a centered icon with mint hover. The wrapper anchor still gets a 44x44 hit area for tap, but visually it's icon-only. */ .ekit-template-content-header .ekit_navSidebar-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; border: none !important; border-radius: 0 !important; background-color: transparent !important; color: var(--dfdc-text) !important; font-size: 22px !important; padding: 0 !important; line-height: 1 !important; transition: color var(--dfdc-duration-fast) var(--dfdc-ease); } .ekit-template-content-header .ekit_navSidebar-button:hover { background-color: transparent !important; color: var(--dfdc-mint) !important; } /* Inner icon centring — many ElementsKit/icomoon glyphs use line-height that drifts to the corner inside an inline-flex parent. Force it. */ .ekit-template-content-header .ekit_navSidebar-button > i, .ekit-template-content-header .ekit_navSidebar-button > span, .ekit-template-content-header .ekit_navSidebar-button > svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; line-height: 1 !important; } /* Site-wide sticky header behaviour — added .is-sticky class via JS in mu-plugins/dfdc-perf.php once the page scrolls past 80px. We stay transparent on top, then snap to a solid dark bar with a subtle bottom shadow. */ .ekit-template-content-header.is-sticky, body.home .ekit-template-content-header.is-sticky { position: fixed !important; top: 0; left: 0; right: 0; background-color: var(--dfdc-bg) !important; background-image: none !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30); transform: translateY(0); animation: dfdc-header-drop 320ms var(--dfdc-ease-out); } @keyframes dfdc-header-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* ---- Logo swap: light wordmark on the dark header ------------------ * The team's logo PNG ships dark navy ("DFDC") on a transparent bg — * unreadable on our dark header. Swap to a light-wordmark SVG variant * that we ship in the theme. Targets the Elementor logo widget by * the ID we observed in the rendered template (888745c). */ .ekit-template-content-header .elementor-element-888745c img, .ekit-template-content-header.sticky .elementor-element-888745c img, .ekit-template-content-header:hover .elementor-element-888745c img { content: url("https://dfdc.io/wp-content/themes/WPMLS/images/dfdc-logo-white.svg") !important; } /* ---- Kill ElementsKit's "header turns white on hover" feature ------ * The header template ships an inline rule that overlays a white * ::before on hover and flips nav text to black. Our header is dark * by design, so neutralise both so hovering doesn't blank out the menu. */ .ekit-template-content-header::before, .ekit-template-content-header:hover::before { content: none !important; display: none !important; } .ekit-template-content-header:hover .ekit-menu-nav-link, .ekit-template-content-header:hover #menu-header-menu li > a, .ekit-template-content-header:hover .ekit-offcanvas-toggle-wraper > a { color: var(--dfdc-text) !important; } .ekit-template-content-header:hover .ekit-menu-nav-link:hover, .ekit-template-content-header:hover #menu-header-menu li > a:hover { color: var(--dfdc-mint) !important; } /* Re-assert .active state AFTER the hover-override block so the active link doesn't lose its mint colour when the user is hovering the header (which fires `:hover` on the wrapper, equal-specificity to .active). */ .ekit-template-content-header .ekit-menu-nav-link.active, .ekit-template-content-header:hover .ekit-menu-nav-link.active, .ekit-template-content-header #menu-header-menu li.current-menu-item > a, .ekit-template-content-header #menu-header-menu li.current-menu-parent > a, .ekit-template-content-header:hover #menu-header-menu li.current-menu-item > a, .ekit-template-content-header:hover #menu-header-menu li.current-menu-parent > a { color: var(--dfdc-mint) !important; } /* Same for the sticky-on-scroll variant — keep dark, kill the swap. */ .ekit-template-content-header.sticky { background-color: var(--dfdc-bg) !important; background-image: none !important; } .sticky.ekit-template-content-header #menu-header-menu li > a, .sticky.ekit-template-content-header .ekit_navSidebar-button { color: var(--dfdc-text) !important; } .sticky.ekit-template-content-header #menu-header-menu li > a:hover { color: var(--dfdc-mint) !important; } *{margin:0;padding:0;box-sizing:border-box}html,body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}body{font-family:"Poppins",sans-serif;font-size:16px;font-weight:400;color:#000;position:relative;overflow-x:hidden;outline:none}a{text-decoration:none;font-size:18px;color:#000}a:hover{transition:all .3s ease-in-out}@media(max-width: 1200px){a{font-size:16px}}label{font-weight:normal}@media(max-width: 1400px){p{font-size:16px}}ul{margin:0;padding:0}ul li{margin:0;padding:0;list-style:none}a,input[type=submit]{transition:all ease-out .2s;-webkit-transition:all ease-out .2s;-moz-transition:all ease-out .2s;-ms-transition:all ease-out .2s;-o-transition:all ease-out .2s}figure{margin:0}h1,h2,h3,h4,h5,h6{font-weight:500;font-style:normal;line-height:110%;margin:0;padding:0}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.mt-4{margin-top:40px}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.ms-container{max-width:1920px;padding:0 80px;margin:0 auto}@media(max-width: 576px){.ms-container{padding:0 20px}}.pt-0{padding:0}.pt-large{padding-top:var(--section-gap1)}@media(max-width: 576px){.container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl{padding-right:20px !important;padding-left:20px !important}}@keyframes slide-down{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}.inner-banner{min-height:470px;padding:200px 0 100px;background:#2ed2a0}.inner-banner .ms-container{display:flex;justify-content:space-between;align-items:self-end;gap:30px}@media(max-width: 1199.98px){.inner-banner .ms-container{flex-direction:column;justify-content:center;align-items:center;text-align:center}}.inner-banner h1{max-width:523px;color:#fff;font-size:clamp(32px,4vw,60px);font-style:normal;font-weight:500;line-height:110%}.inner-banner .heading-label{color:hsla(0,0%,100%,.7);font-size:18px;font-style:normal;font-weight:400;line-height:100%;letter-spacing:.72px;display:inline-block;margin:0 0 20px 0}.inner-banner .breadcrumb{display:flex;align-items:center;gap:17px}.inner-banner .breadcrumb li{color:#fff;line-height:100%;padding:12px 20px;border-bottom:1px solid hsla(0,0%,100%,.4);position:relative}.inner-banner .breadcrumb li a{display:block;color:#fff;max-height:38px;line-height:100%}.inner-banner .breadcrumb li.no-link{background:linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%)}.inner-banner .breadcrumb li.icon_arrow{padding:0;border:none}.blog-top-section{padding:100px 0 0 0}@media(max-width: 1198.98px){.blog-top-section{padding:60px 0 0}}.blog-top-section .heading-label{color:#3b4b45;font-size:18px;font-style:normal;font-weight:400;line-height:100%;letter-spacing:.72px;display:inline-block;margin:0 0 60px 0}@media(max-width: 991.98px){.blog-top-section .heading-label{margin:0 0 30px 0}}.pinned-blog{display:flex;gap:40px;border-bottom:dashed 2px rgba(59,75,69,.3);padding:0 0 60px}.pinned-blog--left{width:60%}.pinned-blog--right{width:40%}@media(max-width: 1399.98px){.pinned-blog{gap:40px}}@media(max-width: 1199.98px){.pinned-blog{flex-direction:column}.pinned-blog--left{width:100%}.pinned-blog--right{width:100%}}.pinned-blog .blog-image{display:block}.pinned-blog h2{color:#000;font-size:clamp(22px,2.5vw,40px);font-style:normal;font-weight:400;line-height:130%}.pinned-blog .pinned-blogs-card{display:grid;grid-template-columns:190px 1fr;gap:32px;margin:0 0 32px 0}.pinned-blog .pinned-blogs-card:last-child{margin:0}.pinned-blog .pinned-blogs-card img{display:block;width:190px;height:190px;object-fit:cover;object-position:left}.pinned-blog .pinned-blogs-card .heading-holder{display:flex;flex-direction:column;justify-content:space-between;padding:15px 0}.pinned-blog .pinned-blogs-card h3{color:#000;font-size:clamp(16px,1.2vw,24px);font-style:normal;font-weight:400;line-height:130%}@media(max-width: 1399.98px){.pinned-blog .pinned-blogs-card{grid-template-columns:120px 1fr}.pinned-blog .pinned-blogs-card img{width:120px;height:120px}}@media(max-width: 1199.98px){.pinned-blog .pinned-blogs-card{grid-template-columns:100px 1fr;gap:20px}.pinned-blog .pinned-blogs-card img{width:100px;height:100px}}.pinned-blog--left .blog-image{width:100%;display:block;margin:0 0 20px 0}.pinned-blog--left .blog-date{margin:32px 0 0 0}.pinned-blog--right .heading-label{color:#3b4b45}.blog-date{position:relative;display:flex;align-items:flex-end;gap:10px;color:#3b4b45}.blog-date::after{content:"";width:32px;height:1px;background:#3b4b45;margin-bottom:5px}.blog-card-holder{padding:60px 0}.blog-card-holder .section-holder{display:grid;gap:40px;grid-template-columns:75% 25%;align-items:flex-start}@media(max-width: 1600px){.blog-card-holder .section-holder{grid-template-columns:70% 30%}}@media(max-width: 1199.98px){.blog-card-holder .section-holder{grid-template-columns:repeat(1, 1fr)}}.blog-listing-cards{display:grid;gap:30px;grid-template-columns:repeat(2, 1fr)}@media(max-width: 991.98px){.blog-listing-cards{gap:20px}}@media(max-width: 575.98px){.blog-listing-cards{grid-template-columns:repeat(1, 1fr)}}.blog-listing-cards img{width:100%;height:280px;margin:0 0 20px 0;object-fit:cover;object-position:center}@media(max-width: 1198.98px){.blog-listing-cards img{height:230px}}.blog-listing-cards h4{color:#000;font-size:clamp(18px,1.2vw,24px);font-style:normal;font-weight:400;line-height:130%}.blog-listing-cards .blog-date{margin:20px 0 0 0}.blog-listing-cards .pagination{grid-column:span 2;display:flex;justify-content:space-between}.blog-listing-cards .pagination ul{display:flex;gap:8px}.blog-listing-cards .pagination ul a{color:rgba(59,75,69,.5);font-size:14px;font-style:normal;font-weight:500;line-height:100%;letter-spacing:.56px;display:block;padding:8px 6px;background:rgba(46,210,160,.1)}.blog-listing-cards .pagination ul a:hover{background-color:#2ed2a0;color:#fff}.blog-listing-cards .pagination .arrows{display:flex;align-items:center;gap:5px}.blog-listing-cards .pagination .arrows a{display:flex;width:30px;height:30px;justify-content:center;align-items:center;background-color:#2ed2a0;color:#fff}.blog-listing-cards .pagination .arrows a:hover{background:#0f1513}@media(max-width: 991.98px){.blog-listing-cards .pagination{flex-direction:column;justify-content:center;gap:10px;margin-top:30px}.blog-listing-cards .pagination ul{justify-content:center}.blog-listing-cards .pagination .arrows{justify-content:center}}@media(max-width: 575.98px){.blog-listing-cards .pagination{grid-column:span 1}}.search-section{padding:30px;background:#f7f7f7}@media(max-width: 1399.98px){.search-section{padding:20px}}.search-section .search-field{position:relative;display:block;margin:0 0 60px 0}.search-section .search-field input{font-family:"Poppins",sans-serif;font-size:18px;width:100%;display:flex;padding:20px 60px 20px 30px;justify-content:center;align-items:center;line-height:100%;border:1px solid rgba(59,75,69,.3)}.search-section .search-field input:focus{border-color:#2ed2a0;outline:none;box-shadow:none}.search-section .search-field span{font-size:24px;color:#3b4b45;position:absolute;right:30px;top:50%;transform:translateY(-50%)}@media(max-width: 1399.98px){.search-section .search-field input{padding:15px 40px 15px 15px;font-size:16px}.search-section .search-field span{right:15px}}.search-section .categery-list{margin:40px 0 0 0;background:#0f1513;padding:30px}@media(max-width: 1399.98px){.search-section .categery-list{padding:20px}}.search-section .categery-list ul{display:100%;margin:0;padding:0}.search-section .categery-list li{width:100%;margin:0 0 32px 0;position:relative;display:flex;justify-content:space-between}.search-section .categery-list li .count{color:#2ed2a0;order:3}.search-section .categery-list li .text-sm{white-space:nowrap;display:block}.search-section .categery-list li a{width:100%;display:flex;align-items:end;justify-content:space-between;gap:20px}.search-section .categery-list li a::after{content:"";background:#3b4b45;height:1px;width:100%}.search-section .categery-list li:last-child{margin:0}.search-section .categery-list a{color:hsla(0,0%,100%,.7);font-size:18px;font-style:normal;font-weight:400;line-height:130%}@media(max-width: 1399.98px){.search-section .categery-list a{font-size:16px}}.recent-list-holder{margin:60px 0 0 0}.recent-list-holder .heading-label{display:block;margin:0 0 40px 0;color:#3b4b45;font-size:18px;font-style:normal;font-weight:400;line-height:150%;letter-spacing:.72px}.recent-list{border-bottom:dashed 1px rgba(59,75,69,.3);padding-bottom:32px;margin-bottom:32px}.recent-list:last-child{margin-bottom:0}.recent-list h4{color:#000;font-size:clamp(18px,1.2vw,24px);font-style:normal;font-weight:400;line-height:130%}.recent-list .blog-date{margin-top:32px}.blog-heading h1{max-width:816px;margin:0 0 32px 0;color:#000;font-size:clamp(28px,4vw,40px);font-weight:400;line-height:130%}.blog-heading img{width:100%;display:block;margin:40px 0 0 0}.blog-details .blog-text-wraper{display:flex;align-items:flex-start;gap:60px;margin:40px 0 0 0}@media(max-width: 991.98px){.blog-details .blog-text-wraper{gap:24px}}@media(max-width: 767.98px){.blog-details .blog-text-wraper{flex-direction:column}}.blog-details .content-holder{margin:0;padding:0 0 0;position:relative}.blog-details .share-blog{position:sticky;top:100px;width:80px;left:0}.blog-details .share-blog .heading-small{display:block;margin:0 0 20px 0}.blog-details .share-blog ul{display:flex;flex-direction:column;gap:10px}.blog-details .share-blog a{width:48px;height:48px;display:flex;justify-content:center;align-items:center;background-color:#000;color:#fff;font-size:22px}@media(max-width: 767.98px){.blog-details .share-blog{position:relative;top:0}.blog-details .share-blog ul{gap:3px;flex-direction:row}.blog-details .share-blog a{width:36px;height:36px;font-size:18px}}.blog-details .content-block{border-bottom:dashed 2px rgba(59,75,69,.3);padding:0 0 40px 0;margin:40px 0 0 0}.blog-details .content-block h2{margin:0 0 10px 0;padding-left:20px;font-size:24px;font-style:normal;font-weight:400;line-height:130%;position:relative}.blog-details .content-block h2::after{content:"";width:12px;height:12px;border-radius:20px;background:#2ed2a0;position:absolute;left:0;top:9px}.blog-details .content-block p{margin:0 0 8px 0;color:#3b4b45;font-weight:400;line-height:150%}.blog-details .content-block p:last-child{margin:0}.blog-details .content-block:first-child{margin-top:0}/*# sourceMappingURL=main.css.map */ .ms-container { width: 100% !important; padding-top: 0 !important; padding-right: 20px !important; padding-bottom: 0 !important; padding-left: 20px !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; } @media (min-width: 576px) { .ms-container { max-width: 540px !important; } } @media (min-width: 768px) { .ms-container { max-width: 720px !important; } } @media (min-width: 992px) { .ms-container { max-width: 960px !important; } } @media (min-width: 1200px) { .ms-container { max-width: 1140px !important; } } @media (min-width: 1400px) { .ms-container { max-width: 1320px !important; } } @media (min-width: 1600px){ .ms-container{ max-width: 1508px !important; } .ms-container.large{ max-width: 1704px !important; } } .banner-text-holder{ max-width: 800px !important; } .btn-primary .elementor-button-icon{ position: absolute; right: 4px; font-size: 50px; top: 5px; } .btn-primary .elementor-button-text{ display: block; transform-style: preserve-3d; transition: transform 0.6s ease; } .btn-primary:hover .elementor-button-text { transform: rotateX(360deg); } .talk-specialist{ display: flex !important; align-items: center !important; justify-content: center !important; } .ms-btn a.elementor-button { display: inline-block; font-weight: 400; font-size: 18px; text-decoration: none; height: 60px; line-height: 60px; padding: 17px 40px; padding-right: 75px; border-radius: 0; border: none; text-align: center; position: relative; transition: all .3s ease; overflow: hidden } .ms-btn.primary-solid a.elementor-button{ color: #0f1513; background-color: #2ed2a0 } .ms-btn a.elementor-button .elementor-button-content-wrapper { display: block; line-height: 147%; overflow: hidden; } .ms-btn a.elementor-button .elementor-button-text{ text-shadow: 0 45px #0f1513; position: relative; top: 0; transition: .5s ease-in-out } .ms-btn a.elementor-button .elementor-button-icon { width: 50px; height: 50px; background-color: #0f1513; position: absolute; top: 5px; right: 5px; overflow: hidden } .ms-btn a.elementor-button .elementor-button-icon i { font-size: 20px; position: absolute; top: 0px; right: 0px; transform: rotate(45deg); color: #fff; font-weight: 400; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; text-shadow: 0px 46px #fff; transition: .5s ease-in-out } .ms-btn a.elementor-button:hover .elementor-button-text { top: -45px } .ms-btn a.elementor-button:hover .elementor-button-icon i { top: -32px; right: -32px } .ms-btn.text-white a.elementor-button { color: #fff; } .ms-btn.text-white .elementor-button-text, .ms-btn.text-white:hover .elementor-button-text{ text-shadow: 0 45px #fff; } .ms-btn.primary-white a.elementor-button{ color: #0f1513; background-color: #fff } .ms-btn.border-white a.elementor-button { color: #0f1513; background-color: transparent; box-shadow: inset 0 0 0 1px #fff; } @media (max-width: 767.98px){ .ms-btn a.elementor-button{ font-size: 16px; padding: 17px 25px; } .ms-btn a.elementor-button .elementor-button-icon{ display: none; } } .talk-specialist .elementor-icon-box-description{ max-width: 137px; } /* Sticky side heading */ .sticky-section-holder{ position: relative !important; } .sticky-right-heading{ position: sticky !important; top: 100px !important; } .hero-banner{ overflow: hidden; } /** Slick slider **/ .ourclient-holder { position: relative; } .ourclient-holder::before, .ourclient-holder::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 130px; background: linear-gradient(270deg, #F4FDFA 0%, rgba(244, 253, 250, 0.00) 100%); } .ourclient-holder::before { left: 0; transform: scaleX(-1); } .ourclient-holder::after { right: 0; } @media (max-width: 1199.98px) { .ourclient-holder::before, .ourclient-holder::after { display: none; } } .ourclient-logos { padding: 0; margin-top: 0; } .ourclient-logos img { max-height: 60px; margin: 0; } @media (max-width: 1199.98px) { .ourclient-logos img { width: auto !important; max-height: 40px; } } @media (max-width: 991.98px) { .ourclient-logos .slick-track .slick-slide { padding: 0 15px; } } .ourclient-logos .slick-track { display: flex; align-items: center; } .ourclient-logos .slick-track .slick-slide { padding: 0 30px; } .card_minheight .elementor-icon-box-wrapper{ row-gap: 124px !important; } .card_minheight .elementor-icon-box-wrapper .elementor-icon-box-title{ padding-bottom: 16px; margin-bottom: 16px; border-bottom: dashed 1px rgba(59, 75, 69, 0.30); } @media (max-width: 1199.98px){ .card_minheight .elementor-icon-box-wrapper{ row-gap: 80px !important; } } /**************akk************/ .wp-block-separator { border: none; border-top: dashed 2px rgba(59, 75, 69, .3); padding: 0 0 40px 0; margin: 40px 0 0 0; } /**************akk***********/ .liststyle1.listbggray { background: #F7F7F7; padding: 40px 52px; margin-top: 16px; } .liststyle1 ul { margin-top: 16px; } .liststyle1.headlinebullet ul{ margin-left: 24px; } .liststyle1 ul li { position: relative; padding-left: 24px; margin-bottom: 8px; } .liststyle1 ul li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 10px; height: 10px; border: 2px solid #2ED2A0; /* Your green border */ border-radius: 50%; /* Make it a circle */ background-color: transparent; /* Hollow inside */ } .liststyle1 h3::before { content: ''; display: inline-block; width: 12px; height: 12px; aspect-ratio: 1 / 1; border-radius: 20px; background: #2ED2A0; margin-right: 8px; vertical-align: middle; } .liststyle1 h3{ padding-bottom: 20px; padding-top: 20px; color: #000; font-size: 24px; } .prvcysection h3{ color: #000; font-size: 24px; padding-bottom: 10px; } .page-id-372 span.elementor-divider-separator { border: none; border-bottom: dashed 2px rgba(59, 75, 69, .3) !important; border-block-start: none !important; } .page-id-372 p{ margin-top: 10px; } /**********************************************************************/ .blog-section { color: #fff; margin-top: 100px; } .blog-header h2 { color: #fff; font-family: Poppins; font-size: 40px; font-style: normal; font-weight: 400; line-height: 110%; /* 44px */ } .blog-container { display: flex; gap: 40px; flex-wrap: wrap; } .left-blog, .right-blogs { flex: 1; min-width: 300px; } .left-blog img { width: 100%; height: auto; border-radius: 5px; } .blog-meta { display: flex; align-items: center; gap: 20px; font-size: 14px; margin: 15px 0 10px; color: #9ca3af; justify-content: space-between; } .left-blog h3 { margin-bottom: 20px; color: #fff; font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120%; text-transform: capitalize; width: 72%; } .btn-green { display: inline-flex; align-items: center; gap: 10px; background-color: #2ed2a0; color: #000; padding: 10px 20px; transition: background 0.3s; font-family: Poppins; font-size: 18px; font-style: normal; font-weight: 400; line-height: 110%; /* 19.8px */ margin-top: 20px; white-space: nowrap; } .btn-green:hover { background-color: #2ed2a0; } .right-blog-item { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px dashed #0f4232; padding: 32px 0px 19px; } .right-blog-item:first-child { padding: 0px 0px 19px; } .right-blog-content { flex: 1; } .right-blog-content h4 { margin-bottom: 15px; margin-top: 0px; color: #fff; font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120%; text-transform: capitalize; width: 95%; } .blog-meta-sm { display: flex; justify-content: space-between; gap: 15px; font-size: 13px; color: rgba(46, 210, 160, 0.6); } .icon-btn { display: flex; justify-content: center; align-items: center; background-color: rgba(59, 75, 69, 0.3); color: #000; border: none; border-radius: 50%; padding: 10px 10px; cursor: pointer; font-weight: bold; transition: background 0.3s; } .right-blog-item:hover .icon-btn .arrow-change { background-color: #2ed2a0; content: url("https://dfdc.io/wp-content/themes/WPMLS/images/Arrow_upword.svg"); } .right-blog-item:hover .icon-btn { background-color: #2ed2a0; } .explore-btn { display: inline-flex; align-items: center; padding: 5px 5px 5px 42px; border: 1px solid white; text-decoration: none; color: #000000; margin-top: 24px; background: white; font-weight: 600; transition: background 0.3s, color 0.3s; } a.explore-btn img { padding-left: 16px; } .bottom-blogsec { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; } .blog-meta span img { width: 14px; } .explore-btn:hover { background: white; color: #000; } .explore-btn-wrapper { text-align: right; } button#wpforms-submit-621 { position: relative; padding-right: 60px; border-radius: unset; color: #0F1513; font-family: Poppins; font-size: 18px; font-style: normal; font-weight: 400; line-height: 110%; } button#wpforms-submit-621::after { content: ""; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 34px; height: 34px; background: url(https://dfdc.io/wp-content/themes/WPMLS/images/learn-more-arrow.svg) no-repeat center; background-size: contain; pointer-events: none; left: auto; } @media (max-width: 768px) { .blog-container { flex-direction: column; } .right-blogs { margin-top: 20px; } } .sticky-column { position: sticky; top: 0; height: 100vh; align-self: self-start; overflow-y: hidden; } .ekit-wid-con .ekit-sidebar-widget { max-width: 100% !important; } .remotehandssec h3.elementor-icon-box-title::after { content: ""; display: block; border-top: 1px dashed #0F4232; margin: 32px 0; } h4.search-pageconthtag { padding: 38px 0px; } h4.search-pageconthtag a { color: #000; font-size: clamp(18px, 1.2vw, 24px); font-style: normal; font-weight: 400; line-height: 130%; } /* * Bespoke site footer. * * Same design language as the .dfdc-th flagship pages: * - dark bg (--dfdc-bg) * - dashed dividers * - bracket eyebrows in mint * - Inter Tight throughout * - 1240px max content width, left-aligned */ .dfdc-footer { background: var(--dfdc-bg); color: var(--dfdc-text); font-family: var(--dfdc-font-sans); border-top: 1px dashed rgba(45, 212, 163, 0.35); } .dfdc-footer__inner { width: min(100% - 48px, 1240px); margin-inline: auto; padding-block: clamp(56px, 6vw, 88px) clamp(40px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.2fr); gap: clamp(40px, 5vw, 80px); align-items: start; } @media (max-width: 980px) { .dfdc-footer__inner { grid-template-columns: 1fr; } } /* ---------- Lede column (brand + pitch + address + social) ---------- */ .dfdc-footer__brand { display: inline-flex; color: inherit; margin: 0 0 18px; } .dfdc-footer__brand img { height: 32px; width: auto; } .dfdc-footer__pitch { margin: 0 0 24px; max-width: 42ch; color: rgba(233, 244, 240, 0.78); line-height: 1.55; font-size: 15px; } .dfdc-footer__address { margin: 0 0 24px; font-style: normal; color: var(--dfdc-text); font-size: 15px; line-height: 1.55; } .dfdc-footer__address strong { font-weight: 500; } .dfdc-footer__address a { color: rgba(233, 244, 240, 0.85); text-decoration: none; transition: color 160ms ease; } .dfdc-footer__address a:hover { color: var(--dfdc-mint); } .dfdc-footer__address-divider { display: block; width: 32px; height: 1px; background: rgba(255, 255, 255, 0.18); margin: 12px 0; } .dfdc-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; } .dfdc-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px dashed rgba(255, 255, 255, 0.25); color: rgba(233, 244, 240, 0.85); transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } .dfdc-footer__social a:hover { border-color: var(--dfdc-mint); color: var(--dfdc-mint); background: rgba(45, 212, 163, 0.08); } .dfdc-footer__social svg { display: block; } .dfdc-footer__pdb { font-family: var(--dfdc-font-sans); font-weight: 500; letter-spacing: 0.06em; font-size: 12px; } /* ---------- Link columns ---------- */ .dfdc-footer__columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 36px) clamp(20px, 2.4vw, 40px); } @media (max-width: 1100px) { .dfdc-footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .dfdc-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dfdc-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .dfdc-footer__eyebrow { margin: 0 0 16px; font-family: var(--dfdc-font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--dfdc-mint); } .dfdc-footer__col a { font-family: var(--dfdc-font-sans); font-size: 14px; color: rgba(233, 244, 240, 0.78); text-decoration: none; transition: color 160ms ease; line-height: 1.5; } .dfdc-footer__col a:hover { color: var(--dfdc-mint); } .dfdc-footer__col a span[aria-hidden] { font-size: 0.85em; margin-left: 4px; color: rgba(233, 244, 240, 0.45); } /* ---------- Base bar (copyright + legal) ---------- */ .dfdc-footer__base { border-top: 1px dashed rgba(255, 255, 255, 0.16); } .dfdc-footer__base-inner { width: min(100% - 48px, 1240px); margin-inline: auto; padding-block: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .dfdc-footer__copyright { margin: 0; font-size: 12px; letter-spacing: 0.04em; color: rgba(233, 244, 240, 0.55); } .dfdc-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; } .dfdc-footer__legal a { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(233, 244, 240, 0.55); text-decoration: none; transition: color 160ms ease; } .dfdc-footer__legal a:hover { color: var(--dfdc-mint); } @font-face { font-family: 'icomoon'; src: url('https://dfdc.io/wp-content/themes/WPMLS/fonts/icomoon/fonts/icomoon.eot?ud7rf'); src: url('https://dfdc.io/wp-content/themes/WPMLS/fonts/icomoon/fonts/icomoon.eot?ud7rf#iefix') format('embedded-opentype'), url('https://dfdc.io/wp-content/themes/WPMLS/fonts/icomoon/fonts/icomoon.ttf?ud7rf') format('truetype'), url('https://dfdc.io/wp-content/themes/WPMLS/fonts/icomoon/fonts/icomoon.woff?ud7rf') format('woff'), url('https://dfdc.io/wp-content/themes/WPMLS/fonts/icomoon/fonts/icomoon.svg?ud7rf#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-date:before { content: "\e908"; } .icon-time:before { content: "\e909"; } .icon-btn-arrow:before { content: "\e90a"; } .icon-arrow-left:before { content: "\e900"; } .icon-arrow-right:before { content: "\e901"; } .icon-fb:before { content: "\e902"; } .icon-insta:before { content: "\e903"; } .icon-linkedin:before { content: "\e904"; } .icon-search:before { content: "\e905"; } .icon-whatsapp:before { content: "\e906"; } .icon-x:before { content: "\e907"; }