/* landing page start */
/* Build your brand (/build-your-brand/, page 2471). Everything between
   these two markers belongs to that page only. Rules that touch the
   shared header or footer are prefixed with body.page-id-2471 so the rest
   of the site keeps its own logo behaviour and its footer map. */

/* --- sticky header CTA ------------------------------------------------ */
.dgt-header-bar{
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 95px;
	z-index: 998;
	pointer-events: none;
	background: rgba(31,41,43,.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity .3s ease;
}
body:not(.scrolled_top) .dgt-header-bar{ opacity: 1; }
/* the theme fades the logo out while scrolling down; on the funnel it stays
   put so the bar keeps reading as a header rather than a floating pill */
body.page-id-2471.scrolling_down .site-logo{ opacity: 1 !important; left: 5vw !important; }
body.page-id-2471 .site-logo{ z-index: 1001 !important; }
.dgt-header-cta{
	position: fixed;
	top: 10px;
	right: 5vw;
	z-index: 1000;
	border: 0;
	cursor: pointer;
	background: #ffc20e;
	color: #1f292b;
	font-family: 'Inter-Regular', sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .02em;
	line-height: 1;
	padding: 20px 34px;
	border-radius: 50px;
	box-shadow: 0 6px 24px rgba(0,0,0,.28);
	transition: transform .25s ease, background-color .25s ease;
}
.dgt-header-cta:hover,
.dgt-header-cta:focus-visible{ background:#ffd043; transform: translateY(-2px); }
.dgt-header-cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* --- hero ------------------------------------------------------------- */
body.page-id-2471 .funnel-hero{ padding: 150px 10px 90px !important; }
.funnel-hero h2{ font-size: 64px !important; line-height: 1.12; margin: 0 auto; max-width: 1000px; }
.funnel-hero .funnel-hero-sub p{ font-size: 20px !important; margin: 26px auto 0; max-width: 900px; }

/* --- shared dark blocks ----------------------------------------------- */
.funnel-section.funnel-deliver,
.funnel-section.funnel-brands,
.funnel-section.funnel-belief,
.funnel-section.funnel-cta{
	background: #1f292b;
	text-align: center;
	padding: 0 10px !important;
}
.funnel-section.funnel-deliver > .e-con-inner,
.funnel-section.funnel-brands > .e-con-inner,
.funnel-section.funnel-belief > .e-con-inner,
.funnel-section.funnel-cta > .e-con-inner,
.funnel-section.funnel-case-studies > .e-con-inner{ text-align: center; 
gap: 0;}
.funnel-deliver{ padding-top: 10px !important; }
.funnel-deliver p, .funnel-belief p{ font-size: 26px !important; line-height: 1.4; margin: 12px auto 0; max-width: 900px; }
.funnel-belief{ padding-top: 60px !important; }
.funnel-belief .funnel-highlight{ color:#ffc20e; }
body.page-id-2471 .funnel-section .e-con-inner .elementor-widget-text-editor p,
body.page-id-2471 .funnel-section .e-con-inner .elementor-widget-text-editor.funnel-subtitle p{
	margin-left: auto;
	margin-right: auto;
}
.funnel-section .funnel-subtitle p{
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 20px !important;
}

/* --- selected brands -------------------------------------------------- */
.funnel-brands{ padding-top: 60px !important; }
.funnel-brands-grid{
	list-style: none;
	margin: 34px auto 0;
	padding: 0;
	max-width: 1020px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 34px 30px;
}
.funnel-brands-grid li{ flex: 0 1 150px; height: 72px; display: flex; align-items: center; justify-content: center; }
.funnel-brands-grid img{
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 72px;
	opacity: .92;
}

/* --- case studies ----------------------------------------------------- */
body.page-id-2471 .funnel-case-studies{ padding-top: 70px !important; }
body.page-id-2471 .funnel-case-studies > .e-con-inner{ padding-bottom: 0; }
body.page-id-2471 .funnel-videos > .e-con-inner{ padding-top: 0; }
/* Slick reflows four stacked slides into one when it initialises. Showing a
   single slide from the first paint keeps that reflow off the layout. */
.funnel-videos > .e-con-inner:not(.slick-initialized) > .e-con:not(:first-child){ display: none; }
.funnel-videos .elementor-widget-video .elementor-wrapper{ aspect-ratio: 16 / 9; }

/* --- closing CTA ------------------------------------------------------ */
.funnel-cta{ padding: 80px 10px 40px !important; }
.funnel-cta h2{ color:#ffc20e !important; font-size: 44px !important; margin: 0 auto; max-width: 1000px; }
/* only Elementor's 20px container gap comes out here; the heading keeps
   its own padding and the paragraph keeps its margin, so the two stay
   related without touching */
.funnel-cta > .e-con-inner{ gap: 0; }
.funnel-cta p{ font-size: 22px !important; margin: 18px auto 0; max-width: 860px; }
.funnel-cta .dgt-cta-button{
	display: inline-block;
	margin-top: 26px;
	border: 0;
	cursor: pointer;
	background:#ffc20e;
	color:#1f292b;
	font-family:'Inter-Regular', sans-serif;
	font-weight:700;
	font-size:19px;
	line-height:1;
	padding: 20px 40px;
	border-radius:50px;
	transition: transform .25s ease, background-color .25s ease;
}
.funnel-cta .dgt-cta-button:hover{ background:#ffd043; transform: translateY(-2px); }

/* --- footer ------------------------------------------------------------
   On the funnel the footer is contact details only: the map column is
   dropped, what is left is centred, and the fixed 80px menu bar gets clear
   space underneath so it never covers the policy links. */
/* the two column grid and its background are set with !important in the
   Customizer, and this block only ever prints on the funnel page */
body.page-id-2471 #footer{ background: #1f292b !important; padding-bottom: 130px !important; }
body.page-id-2471 #footer .footer-col-1{ display: none !important; }
body.page-id-2471 #footer .footer-columns-inner{ display: block !important; grid-template-columns: 1fr !important; }
body.page-id-2471 #footer .footer-col-2{
	width: 100% !important;
	padding: 40px 10px 0 !important;
	display: block !important;
	text-align: center !important;
}
body.page-id-2471 #footer .footer-col-2 .widget_block{ height: auto !important; margin: 0 auto !important; }
body.page-id-2471 #footer .footer-col-2 a{ color: #ffffff; }
body.page-id-2471 #footer .footer-col-2 a:hover{ color: #ffc20e; }
body.page-id-2471 #footer .footer_policies{ text-align: center !important; margin-top: 6px; }
body.page-id-2471 #footer .partners_footer{justify-content: center ;}

/* --- lightbox --------------------------------------------------------- */
.dgt-modal[hidden]{ display:none !important; }
.dgt-modal{
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.dgt-modal__backdrop{ position: fixed; inset: 0; background: rgba(10,15,16,.72); }
.dgt-modal__panel{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 620px;
	margin: auto;
	background: #dadada;
	color: #1f292b;
	border-radius: 14px;
	padding: 34px 40px 40px;
	font-family: 'Inter-Regular', sans-serif;
	box-shadow: 0 30px 80px rgba(0,0,0,.45);
	animation: dgt-pop .22s ease-out;
}
@keyframes dgt-pop{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .dgt-modal__panel{ animation: none; } }
.dgt-modal__close{
	position: absolute; top: 18px; right: 18px;
	background: none; border: 0; padding: 4px; cursor: pointer; color: #1f292b; line-height: 0;
	border-radius: 6px;
}
.dgt-modal__close:hover{ opacity:.65; }
.dgt-modal__logo{ display:block; width: 150px; height:auto; margin: 0 0 10px; }
.dgt-modal__title{ font-size: 32px; margin: 0 0 10px; text-align: center; color:#1f292b; }
.dgt-modal__sub{ font-size: 17px; line-height: 1.45; margin: 0 0 26px; text-align: center; color:#1f292b; }

/* the form itself reuses the existing .funnel-form field styling */
.dgt-modal__form label{ display:block; margin-bottom: 18px; font-size: 20px; }
.dgt-modal__form input[type=text],
.dgt-modal__form input[type=email],
.dgt-modal__form input[type=tel]{ width:100%; }
.dgt-modal__form .wpcf7-form-control-wrap{ display:block; }
.dgt-modal__form .wpcf7-acceptance{ display:block; margin: 6px 0 18px; }
.dgt-modal__form .wpcf7-list-item{ margin:0; }
.dgt-modal__form .wpcf7-spinner{ display:block; margin: 8px auto 0; }
.dgt-modal__form .success-message p{ color:#1f292b !important; }
.dgt-modal__form input.wpcf7-submit{ color:#1f292b !important; font-weight:700; font-size:19px; cursor:pointer; }
.dgt-modal__form input.wpcf7-submit:hover{ background:#ffd043 !important; }
.dgt-modal__form .wpcf7-response-output{ margin: 14px 0 0; font-size: 15px; }
body.dgt-modal-open{ overflow: hidden; }

/* --- one rhythm between sections, wide screens ---------------------------
   Same system as the phone layout at twice the step: 100px from the end of
   one block to the label of the next, and 24px from a label to its content.
   Elementor's inner padding is cleared so the step is the only thing that
   sets the distance. The narrow overrides further down take over at 768. */
body.page-id-2471 .funnel-section > .e-con-inner{ padding-top: 0; padding-bottom: 0; }
body.page-id-2471 .funnel-hero{ padding-bottom: 0 !important; }
body.page-id-2471 .funnel-hero > .e-con-inner{ gap: 0; }
body.page-id-2471 .funnel-hero h2{ padding-bottom: 0; }
body.page-id-2471 .funnel-section.funnel-deliver,
body.page-id-2471 .funnel-section.funnel-brands,
body.page-id-2471 .funnel-section.funnel-belief,
body.page-id-2471 .funnel-section.funnel-case-studies{ padding: 100px 10px 0 !important; }
body.page-id-2471 .funnel-deliver p{ margin-top: 24px; }
body.page-id-2471 .funnel-brands-grid{ margin-top: 24px; }
body.page-id-2471 .funnel-belief p{ margin-top: 0; }
body.page-id-2471 .funnel-case-studies .elementor-widget-text-editor > .elementor-widget-container{ padding-bottom: 24px; }
body.page-id-2471 .funnel-videos{ padding-bottom: 0 !important; }
body.page-id-2471 .funnel-videos > .e-con-inner{ padding-top: 0; padding-bottom: 0; }
body.page-id-2471 .funnel-section.funnel-cta{ padding: 84px 10px 40px !important; }

/* --- responsive ------------------------------------------------------- */
@media screen and (max-width: 1024px){
	body.page-id-2471 .funnel-hero h2{ font-size: 48px !important; }
	body.page-id-2471 .funnel-cta h2{ font-size: 36px !important; }
	.funnel-brands-grid{ max-width: 640px; }
	.funnel-brands-grid li{ flex: 0 1 128px; }
}
@media screen and (max-width: 768px){
	.dgt-header-cta{ font-size: 13px; padding: 14px 20px; right: 4vw; top: 22px; }
	body.page-id-2471 .funnel-hero{ padding: 105px 14px 40px !important; }
	body.page-id-2471 .funnel-hero h2{ font-size: clamp(20px, 6.1vw, 28px) !important; }
	.funnel-hero .funnel-hero-sub p{ font-size: 13px !important; margin-top: 16px; }
	.funnel-section .funnel-subtitle p{ font-size: 14px !important; }
	.funnel-deliver p, .funnel-belief p{ font-size: 16px !important; }
	body.page-id-2471 .funnel-cta h2{ font-size: 23px !important; margin-bottom: 0 !important; padding-bottom: 0 !important}
	.funnel-deliver p br,
	.funnel-belief p br,
	.funnel-cta p br,
	.dgt-modal__sub br{ display: none; }
	.funnel-cta p{ font-size: 15px !important; }
	/* the one thing a phone visitor has to hit, so 20% up on every axis */
	.funnel-cta .dgt-cta-button{ font-size: 18px; padding: 19px 34px; margin-top: 18px; }
	/* five logos then four, the way the mockup lays them out. min-width:0 is
	   what lets a logo shrink below its own intrinsic width instead of
	   pushing the row down to three across. */
	.funnel-brands-grid{ gap: 18px 7px; max-width: 100%; margin-top: 12px; }
	.funnel-brands-grid li{ flex: 0 0 66px; min-width: 0; height: 40px; }
	.funnel-brands-grid img{ max-width: 100%; max-height: 34px; }

	/* --- one rhythm between sections ---------------------------------
	   Every step from the end of one block to the label of the next is
	   SECTION_STEP, taken from the hero to "what we deliver" spacing.
	   Elementor's own 10px inner padding is cleared so the step is the
	   only thing setting the distance. Inside a block, a label sits 12px
	   above its content. */
	body.page-id-2471 .funnel-section > .e-con-inner{ padding-top: 0; padding-bottom: 0; }
	body.page-id-2471 .funnel-hero{ padding-bottom: 0 !important; }
	body.page-id-2471 .funnel-section.funnel-deliver,
	body.page-id-2471 .funnel-section.funnel-brands,
	body.page-id-2471 .funnel-section.funnel-belief,
	body.page-id-2471 .funnel-section.funnel-case-studies{ padding: 50px 10px 0 !important; }
	body.page-id-2471 .funnel-belief p{ margin-top: 0; }
	/* half the desktop step from a label to its content */
	body.page-id-2471 .funnel-deliver p{ margin-top: 12px; }
	body.page-id-2471 .funnel-brands-grid{ margin-top: 12px; }
	/* the CASE STUDIES label carries a 20px pad set on the widget itself in
	   Elementor; the others sit 12px above their content, so it matches here */
	body.page-id-2471 .funnel-case-studies .elementor-widget-text-editor > .elementor-widget-container{ padding-bottom: 12px; }
	body.page-id-2471 .funnel-videos{ padding-bottom: 0 !important; }
	body.page-id-2471 .funnel-videos > .e-con-inner{ padding-top: 0; padding-bottom: 0; }
	body.page-id-2471 .funnel-section.funnel-cta{ padding: 34px 10px 16px !important; }
	/* the heading keeps its own margin, only Elementor's container gap goes */
	body.page-id-2471 .funnel-hero > .e-con-inner{ gap: 0; }
	body.page-id-2471 #footer .footer-col-2{ padding-top: 26px !important; }
	.dgt-modal{ padding: 12px; }
	.dgt-modal__panel{ padding: 26px 20px 30px; border-radius: 10px; }
	.dgt-modal__title{ font-size: 24px; }
	.dgt-modal__sub{ font-size: 15px; }
	.dgt-modal__form label{ font-size: 17px; }
	.funnel-form form input, .funnel-form form select{ font-size: 17px !important; }
}

/* landing page end */


/*
.entry-content > div.elementor > div:not(#clients){ display: none !important; }
*/

/*
#1f292b

#ffc20e
*/


.funnel-form .elementor-widget-container:has(.success-message){
    display: flex;
    align-items: center;
}



@font-face {
    font-family: 'Inter-Regular';
	src: url('/assets/Inter_18pt-Regular.woff2') format('woff2'), url('/assets/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.funnel-section{
	overflow-x: hidden !important;
	max-width: 100vw !important;
}
.funnel-section, .funnel-section p, .funnel-section span, .funnel-section div{
    font-family: 'Inter-Regular';
}

.funnel-section div h2{
    font-family: 'Inter-Regular';
	transform: unset !important;
}

.funnel-section .e-con-inner .elementor-widget-text-editor.funnel-subtitle, .funnel-section .e-con-inner .elementor-widget-text-editor.funnel-subtitle p{
	margin: 0;
	font-size: 18px;
	color: #ffc20e;
}


.funnel-section .elementor-widget-container h2, .funnel-section .elementor-widget-container p{
	color: #ffffff;
}


.funnel-hero{
    font-family: 'Inter-Regular' !important;
	margin:0;
	text-align: center;
	padding: 100px 10px !important;
	background: #1f292b;
	color: #ffffff;
}

.funnel-hero h2 span{
	color: #ffc20e;
}

.funnel-hero .elementor-widget-text-editor{
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 870px !important;
}


.funnel-problem{
	background: #dadada;
	color: #1f292b;
	text-align: left !important;
	padding: 50px 10px !important;
}

.funnel-problem .e-con-inner .elementor-widget-text-editor.funnel-subtitle, .funnel-problem .e-con-inner .elementor-widget-text-editor.funnel-subtitle p{
	margin: 0;
	font-size: 18px;
	color: #1f292b;
}
.funnel-problem .e-con-inner{
	display: grid;
	gap: 30px;
	grid-template-columns: 3fr 2fr;
}

.funnel-problem h2{
	text-align: left !important;
	font-size: 70px !important;
	color: #1f292b !important
}

.funnel-problems-carousel{
	gap: 15px;
}


.funnel-problems-carousel .elementor-widget-text-editor{
	background: #1f292b10;
	padding: 20px;
	color: #1f292b;
    margin: 0 10px;
}


.funnel-problems-carousel .elementor-widget-text-editor b, .funnel-problems-carousel .elementor-widget-text-editor strong{
	font-size: 28px !important;
	color: #1f292b;
	margin: 0;
}
.funnel-problems-carousel .elementor-widget-text-editor p{
	margin: 0;
}
.funnel-problems-carousel .elementor-widget-text-editor h3{
	margin: 10px 0 0 0;
	font-size: 20px !important;
	color: #1f292b;
}



.funnel-path{
	background: #1f292b;
	padding: 50px 10px !important;
	text-align: center;
}
.funnel-path h2{
	color: #ffffff !important;
	font-size: 70px !important;
}

.funnel-path .e-con-full{
	display: flex;
	flex-direction: row;
	text-align: left;
	margin-top: 40px;
	position: relative;
}

.funnel-path .e-con-full .elementor-widget-text-editor{
	flex: 1;
}
.funnel-path .e-con-full:before{
	content:"";
	width: 77%;
	height: 2px;
	background: #ffc20e;
	top: 29px;
	left: 25px;
}
.funnel-path .e-con-full .elementor-widget-container div{
	aspect-ratio: 1;
	background: #ffc20e;
	display: inline-flex;
	height: 60px;
	justify-content: center;
	align-items: center;
	font-size: 28px;
	letter-spacing: -1px;
	border-radius: 60px;
}
.funnel-path .e-con-full .elementor-widget-container h4{
	color: #ffffff;
	font-size: 28px;
	margin: 10px 0;
}
.funnel-path .e-con-full .elementor-widget-container p{
	font-size: 22px;
	margin: 0 0 10px 0
}





.funnel-case-studies{
	
background: #1f292b;
	padding: 50px 20px 0px 20px !important;
    max-width: 100vw !important;
	display: block !important;
	overflow:hidden;
	text-align: center;
}


.funnel-videos{
background: #1f292b;
	padding: 0 20px 50px 20px !important;
    max-width: 100vw !important;
	display: block !important;
	overflow:hidden;
}

.funnel-videos > .e-con-inner{
	display: block !important;
	position: relative;
}

.funnel-videos .slick-slide{
	max-width: 100vw !important;
}
.funnel-videos iframe{
	max-width: 100vw !important;
	width: 100% !important;
}


.funnel-videos .slick-dots{
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
	gap: 15px;
	padding: 0;
}
.funnel-videos .elementor-heading-title{
	padding: 10px;
	font-size: 24px;
	text-align: center;
	color: #ffffff;
}
.funnel-videos .slick-dots button{
	font-size: 0px;
	border: none;
	width: 10px;
	height: 10px;
	border-radius: 50px;
	display: inline-block;
	padding:0;
	color: #ffc20e;
	background: #ffc20e;
}

.funnel-videos .slick-dots .slick-active button{
	color: #ffffff;
	background: #ffffff;
}


.funnel-videos { position: relative; padding-bottom: 60px; }

.funnel-videos .slick-dots { bottom: 20px; }

.funnel-videos .slick-prev,
.funnel-videos .slick-next {
	position: absolute;
    top: auto;
	bottom: 20px;
    width: 40px;
    height: 40px;
    z-index: 2;
    background: transparent;
    border: 0;
    font-size: 0;
    cursor: pointer;
    transform: none;
}

.funnel-videos .slick-prev { left: 0px; }
.funnel-videos .slick-next { right: 0px; }

.funnel-videos .slick-prev::before,
.funnel-videos .slick-next::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border-top: 2px solid #ffc20e;
    border-right: 2px solid #ffc20e;
    opacity: 1;
}

.funnel-videos .slick-prev::before { transform: rotate(-135deg); }
.funnel-videos .slick-next::before { transform: rotate(45deg); }

.funnel-videos .slick-prev:hover::before,
.funnel-videos .slick-next:hover::before { border-color: #ffffff; }




.funnel-form{
	padding: 50px 10px !important;
}

.funnel-form > .e-con-inner{
	display: grid;
	grid-template-columns: 1fr 1fr;
	text-align: left;
	color: #1f292b;
}


.funnel-form .e-con-inner .elementor-widget-text-editor.funnel-subtitle, .funnel-form .e-con-inner .elementor-widget-text-editor.funnel-subtitle p{
	margin: 0;
	font-size: 18px;
	color: #1f292b;
}

.funnel-form > .e-con-inner h2{
	text-align: left;
	font-size: 70px;
	color: #1f292b;
}
.funnel-form > .e-con-inner p,
.funnel-form > .e-con-inner ul{
	color: #1f292b;
	font-size: 22px;
	margin-top: 0;
}
.funnel-form > .e-con-inner ul {
  list-style: none;
  margin: 0;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.funnel-form > .e-con-inner ul li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.funnel-form > .e-con-inner ul li::before {
  content: '';
  width: 20px;
  height: 20px;
  background: #F0C040;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%231A1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}



.funnel-form form input{
	border: none;
	border-bottom: 2px solid #1f292b;
	background: unset;
	font-size: 22px;
	padding: 10px;
}

.funnel-form form select{
	width: 100%;
	border: none;
	border-bottom: 2px solid #1f292b;
	background: unset;
	font-size: 22px;
	padding: 10px;
}

.funnel-form form p label span{
	position: relative;
}
.funnel-form form p label span:has(select):before{
	content:"";
	width: 12px;
	height: 12px;
	border-top: 5px solid transparent;
	border-right: 2px solid #1f292b;
	border-bottom: 2px solid #1f292b;
	border-left: 5px solid transparent;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: rotate(45deg);
}
.funnel-form .wpcf7-acceptance{
	font-size: 16px;
}
.funnel-form .wpcf7-acceptance a{
	text-decoration: underline;
}
.funnel-form form input.wpcf7-submit{
	border: none;
	background: #ffc20e;
	width: 100%;
	padding: 20px;
	border-radius: 50px;
}

.funnel-form form span.required_field{
	color: #933;
	font-size: 16px;
}
.funnel-form form span.required_fields{
	font-size: 16px;
}
.funnel-form .wpcf7-not-valid-tip{
	font-size: 16px;
}



@media screen and (max-width: 768px) {
	
	.funnel-section h2{
		font-size: 50px !important
	}
	.funnel-path .e-con-full{
		flex-direction: column !important;
	}
	.funnel-problem .e-con-inner{
		grid-template-columns: 1fr;
	}
	.funnel-problems-carousel{
		display: block;
	}
	
	.funnel-path .e-con-full:before{
		width: 2px;
		height: 83%;
		left:30px
	}
	.funnel-path .e-con-full .elementor-widget-container div{
		position: absolute;
		top: 0;
		left: 0;
	}
	.funnel-path .e-con-full div.elementor-widget-text-editor{
		position: relative;
		padding-left: 70px;
}

	.funnel-form > .e-con-inner{
		grid-template-columns: 1fr;
	}
	
}















.text_anim p{
	position: relative;
}

.text_anim p span.taoriginal{
	position: relative;
	color: #505050;
	display: block;
}

.text_anim p span.taclone{
	position: absolute;
	color: #151515;
	top:0;
	left: 0;
    width: 0%;
    overflow: hidden;
    white-space: nowrap;
}

.text_anim p br{
	display: none;
}





*, *:focus, *:active, *:focus *, *:active * {
    outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

img::selection {
  color: inherit;
  background: inherit;
}
img{
	display: block;
	width: 100%;
}

html { scroll-behavior: smooth; }


::selection {
  color: #ffffff;
  background: #f6c600;
}

.elementor-widget-text-editor p, .elementor-widget-text-editor span{
	font-size: inherit;
	background: inherit;
}


@font-face {
    font-family: 'Aeonik-Regular';
    src: url('/assets/Aeonik-Regular-opt.woff2') format('woff2'),
        url('/assets/Aeonik-Regular.woff') format('woff'),
        url('/assets/Aeonik-Regular.otf') format('otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aeonik-bold';
    src: url('/assets/Aeonik-Bold-opt.woff2') format('woff2'),
        url('/assets/Aeonik-Bold.woff') format('woff'),
        url('/assets/Aeonik-Bold.otf') format('otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*standards - start*/
html{
	margin: 0;
	padding: 0;
}
body{
    font-family: 'Aeonik-Regular';
	background: #dadada !important;
	padding: 0px;
	line-height: 1.3;
	color: #232323
}
a{
	color: inherit;
	text-decoration: inherit;
}
.elementor-element{
	padding:0;
}
/*standards - end*/



/*animations - start*/
.works-slider .post-item, .latest-works .post-item{
	
	
	opacity: 0;
	transform: translatey(20px);
	transition-duration: 0.8s !important;
	transition-delay: 0s;
  transition: transform 0.8s ease-out 0s, opacity 0.8s ease-out 0s !important;
}

#services li, .work_flip, .team_cards > .e-con-inner > .e-con-boxed img, footer #block-3 > *, .about_reward, .e-con-boxed.e_flip, .contact_page_row .elementor-widget-text-editor .elementor-widget-container > *, .contact_page_row form{
	opacity: 0;
	transform: translatey(20px);
	transition-duration: 0.8s !important;
	transition-delay: 0.5s;
  transition: transform 0.8s ease-out 0.5s, opacity 0.8s ease-out 0.5s !important;
}
.works-slider .post-item.flipped, .latest-works .post-item.flipped, #services li.flipped, .work_flip.flipped, .team_cards > .e-con-inner > .e-con-boxed.flipped img, footer #block-3 > .flipped, .about_reward.flipped,
.e-con-boxed.e_flip.flipped,
.contact_page_row .elementor-widget-text-editor .elementor-widget-container > .flipped, .contact_page_row form.flipped{
	opacity: 1;
	transform: translatey(0px);
}
footer .widget_block .footer_policies {
	opacity: 1 !important;
	transform: unset !important;
}
/*animations - end*/














.elementor-element h2{
    font-family: 'Aeonik-Bold';
	font-size: 100px;
	text-align: center;
	padding-bottom:10px;
	z-index: 1;
	position: relative;
}
.elementor-widget-container{
	overflow: hidden !important;
}
.elementor-widget-text-editor p {
	font-size: 28px;
}
.elementor-widget-text-editor p b{
	font-size: 40px;
}



.elementor-button-warning .elementor-button, .button_to_center button{
	margin: 5px;
	padding: 0;
	width: 100px;
	height: 100px;
	border: none;
	border-radius: 100px;
	position: relative;
	background: #f6c600 !important;
	font-size: 0;
	transition-duration: 0.2s;
}
.elementor-button-warning .elementor-button span{
	display: none;
}

.elementor-button-warning .elementor-button:before, .button_to_center button:before{
	position: absolute;
	content: "";
	width: 2px;
	height: 22px;
	background: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition-duration: 0.2s;
	opacity: 1;
}
.elementor-button-warning .elementor-button:after, .button_to_center button:After{
	position: absolute;
	content: "";
	width: 22px;
	height: 2px;
	background: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition-duration: 0.2s;
	opacity: 1;
}


.elementor-button-warning .elementor-button:hover, .button_to_center button:hover{
	transform: scale(1.1);
}
.elementor-button-warning .elementor-button:hover:before, .button_to_center button:hover:before{
	width: 2px;
	height: 42px;
}
.elementor-button-warning .elementor-button:hover:after, .button_to_center button:hover:after{
	width: 42px;
	height: 2px;
}


.scrolling_texts{
	position: absolute;
	top: 30%;
	left: 0;
  width: 100vw;
	transform: translatey(-50%);
	overflow: hidden;
	z-index: 0;
}
.scrolling_texts .elementor-widget-container div {
    position: relative;
	display: block;
    overflow: hidden;
}

.scrolling_texts span {
    font-size: 150px;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #203403 !important;
    white-space: nowrap;
    top: 0;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    min-width: 100vw;
    text-align: center;
    display: block;
    position: relative;
    font-family: 'Aeonik-bold';
}

.scrolling_texts .scrolling_ltr {
    left: 0;
}
.scrolling_texts .scrolling_rtl {
    right: 0;
}



.infinite_scrolltext_container{
	position: absolute;
	top: 70px;
	left: 0;
	overflow: hidden;
}

.infinite_scrolltext{
	transform: translatey(-50%);
	z-index: 0;
white-space: nowrap;
}
.infinite_scrolltext .elementor-widget-container{
	display: inline-block;
	padding: 2px;
	font-size: 230px;
    color: transparent;
    -webkit-text-stroke-width: 1.6px;
    -webkit-text-stroke-color: #5c6061 !important;
    white-space: nowrap;
    top: 0;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    min-width: 100vw;
    text-align: center;
    position: relative;
    font-family: 'Aeonik-bold';
	margin-right: 50px;
}


.infinite_scrolltext  {
    display: inline-flex;
    animation: scrollToLeft_html 25s linear infinite; /* Adjust the duration as needed */
  }
  @keyframes scrollToLeft_html {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-2770px);
    }
  }

.e-con-inner:has(.infinite_scrolltext){
overflow: hidden;
}
.infinite_scrolltext{
    white-space: nowrap;
    will-change: transform;
}
.infinite_scrolltext div {
  height: auto;
	float: unset !important;
  display: inline-block;
    flex-shrink: 0;
	width: 2720px;
	overflow: visible;
  }









/* header - start */
.site-logo{
	position: fixed;
	top: 10px;
	left: 5vw;
	z-index:1;
	transition-duration: 0.5s;
	z-index: 2;
}
.site-logo img{
	max-width: 15vw;
	height: auto;
	min-width: 110px;
}
.scrolling_down .site-logo{
	opacity: 0;
	left: 0px;
}

body header#masthead{
	bottom: 0;
	top: unset !important;
	width: 100% !important;
	background: unset !important;
	z-index:999;
}

header#masthead .header-container{
	margin: 0px 8px 16px 8px !important;
	background: #ffffff;
	max-width: 100%;
	min-height: 0px;
	border-radius: 60px;
	padding: 7px;
}
header#masthead .social_icons{
	display: flex;
	align-items: center;
	gap: 20px;
	padding-left: 30px;
}
.social_icons a{
	width: auto;
	height: 22px;
	opacity: 0.8;
}
.social_icons img{
	width: auto;
	height: 100%;
	max-height: 18px;
}
header#masthead #header_moto{
	text-align: center;
	font-size: 40px;
	line-height: 1;
}
header#masthead #header_moto span{
	display: inline-block;
	text-align: center;
	font-size: 40px;
	vertical-align: middle;
	line-height: 1;
}

#header_moto_img{
	position: relative;
	height: 100%;
	width: 245px;
	opacity: 0.85;
}
#header_moto_img img{
	position: absolute;
	top: 50%;
	left: 0;
	height: 100%;
	width: auto;
	max-height: 50px;
	transform: translatey(-50%);
    display: block;
    transition: opacity 2s !important;
		transition-duration: 1s !important;
    opacity: 0 !important;
  }
  #header_moto_img img.active {
    opacity: 1 !important;
		transition-delay: 1s;
  }



#site-navigation{
	z-index:-1;
	background: #ffffff !important;
}
#site-navigation a{
	font-size: 70px !important;
	text-align: center;
  font-family: 'Aeonik-bold';
	transition-duration: 0.5s;
  color: #232323 !important;
	position: relative;
	padding: 0 20px;
}

#site-navigation a:before{
	content:"";
	position: absolute;
	top:56% !important;
	left: 0;
	height: 6px;
	width: 0%;
	background: #f6c600;
	transition-duration: 0.5s;
}

#site-navigation a:hover:before {
	width: 100%;
}







header.site-header.menu-closed #site-navigation{
	transition-delay: 0.4s !important;
	transition-duration: 0.3s !important;
}
header.site-header li{
	position: relative;
	opacity:0;
	transition-duration: 0.5s;
	transform: translatey(40px);
}
header.site-header li.flipped{
	opacity:1;
	transform: translatey(0px);
}
header.site-header li:before{
	content:"";
	width: 100%;
	height: 100%;
	background: #ffffff;
	top:0;
	left: 0;
	position: absolute;
	transition-duration: 0.5s;
}
header.site-header li.flipped:before{
	height: 0% !important;
	z-index: 1;
}
/* header - end */






/*burger - start*/
.menu-button{
	display: flex;
	gap: 15px;
	align-items: center;
    background: none;
	border: none;
  width: auto;
  height: 50px;
  position: relative;
	padding: 15px 35px;
	background: #ccc;
	border-radius: 100px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
	-webkit-appearance: unset;
	border: unset !important;
	text-transform: uppercase;
	
	color: #232323;
}
.menu-button div {
	display: inline-block;
	width: 50px;
	height: 26px;
	position: relative;
	vertical-align: middle;
}
.menu-button span {
  display: block;
  position: absolute;
  height: 3px;
  width: 50%;
  background: #000000;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.menu-button span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}
.menu-button span:nth-child(odd) {
  left:0px;
  border-radius: 9px 0 0 9px;
}
.menu-button span:nth-child(1), .menu-button span:nth-child(2) {
  top: 0px;
}
.menu-button span:nth-child(3), .menu-button span:nth-child(4) {
  top: 12px;
}
.menu-button span:nth-child(5), .menu-button span:nth-child(6) {
  top: 24px;
}
.menu-opened .menu-button span:nth-child(1),.menu-opened .menu-button span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-opened .menu-button span:nth-child(2),.menu-opened .menu-button span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-opened .menu-button span:nth-child(1) {
  left: 5px;
  top: 4px;
}
.menu-opened .menu-button span:nth-child(2) {
  left: calc(50% - 5px);
  top: 4px;
}
.menu-opened .menu-button span:nth-child(3) {
  left: -50%;
  opacity: 0;
}
.menu-opened .menu-button span:nth-child(4) {
  left: 100%;
  opacity: 0;
}
.menu-opened .menu-button span:nth-child(5) {
  left: 5px;
  top: 19px;
}
.menu-opened .menu-button span:nth-child(6) {
  left: calc(50% - 5px);
  top: 19px;
}
.menu-opened .menu-button span{
	background: #232323;
}
.menu-button-container{
    z-index: 9999;
    position: relative;
}
/*burger - end*/


/* footer - start*/
footer iframe{
	display: block !important;
	transition-duration: 0.3s;
}
footer iframe:hover{
	filter: unset;
}
footer .footer-inner{
	max-width: 100%;
	padding:0;
	background: #1f292b;
	color: #ffffff;
	font-size: 30px;
}
footer .footer_policies{
	font-size: 18px;
}
.footer-columns-inner{
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0;
}
footer .widget_block{
	height: 100%;
}
footer iframe{
	width: 100%;
	height: 100%;
	min-height: 500px;
	max-height: 200vw;
}
.footer-col-2{
	padding: 150px 10px;
	display: flex;
	align-items: center;
}
footer .widget_block a.fudln{
	text-decoration: underline;
}
footer .partners_footer{
	display: flex;
	flex-direction: row;
	padding-bottom: 40px;
	gap: 20px;
}
@media only screen and (max-width: 768px) {
footer .partners_footer{
	justify-content: center
}
}
footer .partners_footer img{
	max-width: 40%;
	max-height: 50px !important;
	width: auto;
	height: 50px;
}
/* footer - end*/


/*hero banner - start*/
#hero_video{
	gap:0;
}
.scrolled_top #hero_video .elementor-widget-html{
	opacity: 1;
}
#hero_video .elementor-widget-html{
	opacity: 0;
	transition-duration: 0.5s;
	display: inline-block;
	width: auto;
	max-width: unset;
	position: fixed;
	bottom: 100px;
	right: 0;
	pointer-events: none;
	z-index: 1;
}
#hero_video .elementor-widget-html .elementor-widget-container span{
	position: absolute;
	color: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
}
#hero_video .text {
      font-weight: 100;
      letter-spacing: 2.1px;
      text-transform: uppercase;
      font-size: 15px;
      fill: #ffffff;
}

#rotatingText{
  -webkit-animation: rotate 15s normal linear infinite;
  animation: rotate 15s normal linear infinite;
}
#static_arrow{
	width: 30px;
	height: 30px;
	background-image: url("https://digitall.gr/wp-content/uploads/2024/03/arrow_down.svg");
	background-size: cover;
	filter: invert(1);
	background-position: center center;
	background-repeat: no-repeat;
}



@keyframes rotate {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, 270deg);
    transform: rotate3d(0, 0, 1, 270deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}


@media only screen and (min-width: 768px) {
.hero_desktop .e-hosted-video{
	aspect-ratio: unset !important;
}
.hero_mobile .e-hosted-video{
	aspect-ratio: unset !important;
	display: none;
}
}


@media only screen and (max-width: 768px) {
	
.hero_desktop .e-hosted-video{
	aspect-ratio: unset !important;
	display: none;
}
.hero_mobile .e-hosted-video{
	aspect-ratio: unset !important;
}
}
/*hero banner - end*/


/* about - start */
#about .scrolling_texts{
	top: 245px;
}
.home #about .scrolling_texts{
	top: calc(50vh - 140px);
}
#about .scrolling_texts span{
	font-size: 200px;
    -webkit-text-stroke-width: 1.6px;
    -webkit-text-stroke-color: #5c6061 !important;
    -webkit-text-stroke-color: #aaa !important;
}

#about{
	min-height: 100vh;
}

#about h2{
	margin-bottom: 100px;
}
#about .elementor-widget-text-editor p{
	margin: 0;
}
#about .elementor-widget-text-editor p em{
	font-size: 18px;
	line-height: 1.2;
	font-style: unset;
}

.awards_grid .elementor-widget-container{
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	justify-content: center;
}
.awards_grid img{
	max-height: 50px;
	width: auto;
}
.awards .about_reward{
	font-size: 16px;
}
/* about - end */


/* works - start*/
#works .scrolling_texts span{
    -webkit-text-stroke-width: 1.6px;
    -webkit-text-stroke-color: #70777f !important;
	font-size: 200px;
}
#works{
	padding: 100px 10px;
	background: #e66465;
	background: radial-gradient(#e66465, #9198e5);
	background: radial-gradient(#6f7172  , #1f282b);
}
#works h2{
	color: #ffffff;
}
#works .scrolling_texts {
	color: #424a4d;
}

.works-slider{
	padding: 20px 0 120px 20%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4vw;
}
.works-slider a:nth-child(even){
	margin-top: 80px;
	margin-bottom: -80px;
}
.works-slider a img{
	border-radius: 20px;
	aspect-ratio: 3/4;
	object-fit: cover;
	margin-bottom: 5px;
}
.works-slider span{
	color: #ffffff;
	font-size: 20px;
  font-family: 'Aeonik-Bold';
	text-transform: uppercase;
}
.works-slider h3{
	color: #ffffff;
	font-size: 36px;
	margin: 0;
	font-weight: 500;
}
#works .elementor-button-wrapper{
	text-align: center;
	margin-top: 10px;
}
/* works - end*/



/* services - start*/
#services{
	background: #FEC10E;
	background: linear-gradient(135deg, #e2a33b, #ffc10e);
	padding: 100px 10px;
	min-height: 100vh;
}
#services h2{
	color: #ffffff;
}
#services ol{
	max-width: 1400px;
	margin: auto;
	padding: 0;
}


#services ol li {
	font-size: 30px;
  display: flex;
	align-items: center;
	padding: 20px 10px;
  counter-increment: items;
	border-bottom: 2px solid #000000;
	padding-right: 256px;
}
#services ol li div{
	font-size: 22px;
}
@media only screen and (max-width: 768px) {
	#services ol li{
		padding-right: 56px;
	}
	#services ol li div{
		padding-left: 56px;
	}
}
#services ol li div b{
	font-size: 26px;
	text-transform: uppercase
}
#services ol li:first-child{
	border-top: 2px solid #000000;
}
#services ol li:before {
	font-size: 40px;
	padding-right: 7vw;
  content: "0" counter(items)". ";
	width: 160px;
}
#services ol li:after {
	content:"";
	width: 48px;
	height: 48px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translatey(-50%);
	background-image:url("https://digitall.gr/wp-content/uploads/2024/03/services-arrow.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 48px 48px;
}

/* services - end*/



/* clients - start*/
#clients{
	padding: 100px 0px;
}

#clients > .e-con-full{
	gap: 0px !important;
}


@keyframes scrollToLeft {
    from {
      transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
			
    }
    to {
      transform: translate3d(-50%,0,0);
    -webkit-transform: translate3d(-50%,0,0);
    -moz-transform: translate3d(-50%,0,0);
    -ms-transform: translate3d(-50%,0,0);
    -o-transform: translate3d(-50%,0,0);
    }
  }


#clients{
	overflow: hidden;
}
#clients .elementor-widget-container{
	transition: none;
  overflow: hidden;
}
.clients_carousel{
	gap: 0px;
	flex-wrap: unset !important;
    position: relative !important;
	display: inline-flex !important;
    width: fit-content !important;
	will-change: transform;
    animation: scrollToLeft 25s linear infinite; 
    box-sizing: border-box;
    animation-play-state: running;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
  overflow: hidden;
}
.clients_carousel .e-con-full{
	gap: 0px;
	flex-wrap: unset !important;
    position: relative !important;
	display: inline-flex !important;
    width: fit-content !important;
    box-sizing: border-box;
}
.clients_carousel .elementor-widget-image{
    width: 15vw !important;
}
.clients_carousel .elementor-widget-image img{
	filter: grayscale(1);
	transition-duration: 0.5s;
	pointer-events: none;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	object-fit: contain;
	aspect-ratio: unset;
	overflow-clip-margin: unset;
	opacity: 0.99;
  transform: translate3d(0,0,0);

}
.clients_carousel .elementor-widget-image:hover img{
	filter: grayscale(0);
}


/* clients - end*/




/*about page - start*/


#about.about_page_section{
	min-height: 0vh;
}
.about_page_section:before{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(50% - 10px);
	background: linear-gradient(135deg, #C5836B, #ffca0e);
}


#wework{
	text-align: right;
	padding: 20px;
	display: block;
	font-size: 100px;
  font-family: 'Aeonik-bold';
}


#webelieve{
	text-align: left;
	display: block;
	font-size: 100px;
  font-family: 'Aeonik-bold';
	margin-bottom: 20px;
}
#webelieve span{
	vertical-align: text-bottom;
}
.beliefs { display: none; 
font-size: 25px;}
.beliefs_carousel{
	text-align: right;
}
.beliefs span{
	padding-left: 20px;
	position: relative;
}
.beliefs span:before{
	position: absolute;
	content:"";
	width: 20px;
	height: 1px;
	background: #232323;
	bottom:0;
	left:0;
}
.believe_row .believe_row *{
	display: flex;
	justify-content: center;
	align-items: middle;
}

.our_team > .e-con-boxed > .e-con-inner{
	display: flex;
	flex-direction: row;
}
.our_team .e-con-inner img{
	object-fit: cover;
	object-position: top center;
	border-radius: 10px;
	transition-duration: 0.3s;
	padding: 0;
}

.our_team .e-con-inner .elementor-widget-image:nth-child(2){
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	width: 100%;
	opacity: 0;
	transition-duration: 0.3s;
}
.our_team .e-con-inner:hover .elementor-widget-image:nth-child(2){
	opacity: 1;
}
.our_team .e-con-inner div, 
.our_team .e-con-inner img, {
	display: block;
}


.our_team, .our_team *{
	box-sizing: border-box;
}
.our_team > .e-con-full{
	display: block;
	padding: 100px 0;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    width: calc(100vw - 20px);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none;
  }
.our_team > .e-con-full > .e-con-boxed{
    display: inline-block;
    width: calc((100vw / 3.5) - 10px);
  }
.our_team > .e-con-full > .e-con-boxed > .e-con-inner{
	padding: 0;
}

  .our_team > .e-con-full::-webkit-scrollbar {
    display: none;
  }

.our_team > .e-con-full > .e-con-boxed h2{
	margin: 0 auto;
	font-size: 20px;
	text-align: center;
	transform: scale(1) !important;
}
.our_team > .e-con-full > .e-con-boxed p{
	margin: 0 auto;
	font-size: 18px;
	text-align: center;
}

/*about page - end*/



/*work - start*/
.latest-works-container h1, #work_heading{
	font-size: 100px;
    font-family: 'Aeonik-Bold';
	color: #1f2729;
	display: block;
	text-align: center;
	padding-top: 50px;
	margin-top: 0;
	margin-bottom: 0;
}
.awards{
	text-align: center;
	font-size: 20px;
}
.awards h2{
	margin-bottom: 40px;
}
.awards img{
	max-height: 90px;
	width: auto;
	display: block;
	margin: auto;
	max-width: 18vw;
}
.awards span{
	display: block;
	font-size: 40px;
	margin-top: 0px;
	margin-bottom: 10px;
}
.awards .elementor-widget-html .elementor-widget-container{
	display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
	text-align: center;
	gap: 20px;
}
/*work - end*/


/*work archive - start*/
.latest-works-container{
	text-align: center;
	background: #e66465;
	background: radial-gradient(#e66465, #9198e5);
	background: radial-gradient(#6f7172  , #1f282b);
	padding-top: 150px;
	padding-bottom: 150px;
	min-height: 100vh;
}

.latest-works-container h1{
	position: sticky;
	top: calc(50vh - 120px);
	right: 58.5%;
	z-index: 1;
	color: #ffffff;
	margin-top: 0 !important;
	padding-top: 0 !important;
	width: auto;
	display: inline-block;
	margin-bottom: 230px;
}

.work-w-filters-container{
	display: grid;
	grid-template-columns: 1fr 2fr;
	max-width: 80%;
	margin: 0 auto;
}
.filter-buttons{
	position: sticky !important;
	top: calc(50vh + 25px);
	left:10%;
	max-width: 100%;
	width: 100%;;
	display: inline-block;
}
.filter-buttons button{
	border: 1px solid #ffffff;
	border-radius: 30px;
	background: transparent;
	color: #ffffff;
	padding: 5px 20px;
	transition-duration: 0.5s;
	display: inline-block;
	margin: 5px;
	font-size: 24px;
}
.filter-buttons button.active, .filter-buttons button:hover{
	background: #f6c600;
	color: #ffffff;
	border-color: #f6c600;
}
.latest-works-container .latest-works{
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 130px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px 30px;
}
.post-item{
	position: relative;
	transition-delay: 0s !important;
}
.post-item:before{
	content:"+";
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #f6c600;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	font-size: 70px;
	color: #ffffff;
	opacity:0;
	transition-duration: 0.5s;
	pointer-events: none;
	font-weight: 100 !important;
	font-family: Times New Roman;
}
.post-item:hover{
	transform: translatey(-20px) !important;
	transition-delay: 0 !important;
	transition-duration: 0.5s;
}

.post-item:hover:before{
	opacity: 1;
}
.post-item img{
	border-radius: 10px;
	border-radius: 20px;
	aspect-ratio: 3/4;
	object-fit: cover;
	margin-bottom: 5px;
}
.post-item:nth-child(even){
	margin-top: 80px;
	margin-bottom: -80px;
}

.post-item{
	text-align: left;
}
.post-item span{
	color: #ffffff;
	font-size: 18px;
  font-family: 'Aeonik-Bold';
	text-transform: uppercase;
}
.post-item h3{
	color: #ffffff;
	font-size: 32px;
	margin: 0;
	font-weight: 500;
}

@media only screen and (min-width: 1100px) {
.latest-works-container{
	margin-top: -360px;
	}
	.filter-buttons{
		margin-left: -30%;
		width: 130%;
		max-width: 130%;
	}
}
/*work archive - end*/



/*work inner - start*/
.single-works #content{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 100px auto;
}


.work-meta-titles-container{
	margin: auto;
	max-width: 1120px;
	padding-bottom: 10px;
}
.work-meta-shortcode-container{
	margin: auto;
	max-width: 1120px;
	padding-bottom: 50px;
}
.back_to_works {
	font-size: 22px;
	color: #1f2729;
	display: block;
	text-align: center;
	margin: auto;
	width: auto !important;
}
.back_to_works a{
	font-size: 22px;
	color: #1f2729;
	text-align: center;
	display: inline-block;
	margin: auto;
	width: auto !important;
	position: relative;
}

.back_to_works a:before{
	content:"";
	position: absolute;
	background: #1f2729;
	width: 0%;
	height: 2px;
	bottom:0;
	left: 0;
	transition-duration: 0.3s;
}
.back_to_works a:hover:before{
	width: 100%;
}



.work_top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 20px;
	padding-bottom: 5px;
}
.work_top:not(:has(a)){
	align-items: flex-end;
}

.work_top h1{
	margin: 0;
}
.work_top h1.work_long_title{
	font-size: 32px;
	line-height: 1.1;
}
.work_top h1.work_short_title{
	font-size: 50px;
	line-height: 1;
}
.work_metas{
	text-align: right;
}

.work-cover, .work-cover img{
	position: relative;
	display: block;
	max-width: 100%;
	height: auto;
	width: 100%;
}

.works-video-container{
	text-align: center;
	max-width: 100%;
}
.works-video-container video{
	margin: 20px auto;
	max-width: 100%;
}
.works-video-container iframe{
	width: 100%;
	aspect-ratio: 16/9;
	height: auto;
	margin: 20px auto;
}
.works-slider_container{
	margin-top: 50px;
}

.works-slider_container img{
	margin-top: 50px;
	max-height: 70vh !important;
}

.sl_img_cont img{
	object-fit: contain;
	cursor: grab;
}

.works-slider_container .slick-dots{
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 50px;
}
.works-slider_container .slick-dots li{
	list-style: none;
	
}
.works-slider_container .slick-dots li button{
	font-size: 0;
	border: none;
	width: 8px;
	height: 8px;
	padding:0;
	border-radius: 10px;
	background: #1f292b;
}

.works-slider_container .slick-dots li.slick-active button{
	background: #ffc20e;
}
/*work inner - end*/







/*contact page - start*/
.contact_page_row{
    background: #1f292b;
    color: #ffffff;
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 100%;
}
body:has(.contact_page_row) footer{
	display:none;
}

.contact_page_row .elementor-widget.elementor-widget-html iframe{
	height: 100%;
	min-height: 100vh;
}

.contact_page_row .e-con.e-flex>.e-con-inner{
	padding: 0;
	margin: 0;
	display: block;
	gap: 0;
}
.contact_page_row .elementor-widget-container{
	padding: 0;
	margin: 0;
	display: block;
}

.contact_page_row{
	
}
.contact_page_row .e-con.e-flex>.e-con-inner{
	justify-content: center;
	align-items: center;
	display: flex;
	flex-direction: column
}

.contact_page_row .e-con.e-flex>.e-con-inner .elementor-widget-html{
	width: 100%;
}


.contact_page_row h1{
	color: #ffc20e;
	text-align: left !important;
		margin-left: 0 !important;
	display: block;
}

.contact_page_row > .e-con.e-flex:first-child{
	max-width: 600px;
	margin: auto;
	padding: 50px 10px;
}

.contact_page_row > .elementor-element.e-flex:last-child, .contact_page_row > .elementor-element.e-flex:last-child div{
	height: 100%;
}

.contact_page_row p{
	margin-bottom: 0;
	font-size: 22px;
}
.contact_page_row p span input.wpcf7-text{
	width: 100%;
	display: block;
}

.contact_page_row h3{
	margin-bottom: 0;
	font-size: 22px;
	color: #ffc20e;
	font-weight: 500;
}

.contact_page_row .e-con.e-flex>.e-con-inner .elementor-heading-title,
.contact_page_row .e-con.e-flex>.e-con-inner  .elementor-widget-text-editor,
.contact_page_row .e-con.e-flex>.e-con-inner .elementor-widget-shortcode{
	max-width:  100%;
	margin: 0 auto;
	text-align: left;
	width: 100%;
}
.contact_page_row form input.wpcf7-submit{
	border: none;
	font-size: 30px;
	color:#1f292b;
	padding: 8px 40px 10px 40px;
	border-radius: 50px;
	position: relative;
	background: #ffc20e;
	margin-bottom: 100px;
}



.contact_page_row form input.wpcf7-submit:before{
	content: "";
	width: 100%;
	height: 100%;
	left:0;
	top:0;
	position: absolute;
	z-index:-1;
	border: none;
	font-size: 30px;
	color: #1f292b;
	padding: 8px 40px 10px 40px;
	border-radius: 50px;
	font-weight:900;
	background: #ffc20e;
background: linear-gradient(90deg, #ffffff 50%, #ffc20e 50%);
	background-size: 200% !important;
	background-position:100%;
	z-index:1;
	transition-duration: 0.3s;
}
.contact_page_row form input.wpcf7-submit:hover:before{
	background-position:0%;}
.contact_page_row form input.wpcf7-submit:after{
	content: "Send";
	font-weight:900;
	width: 100%;
	height: 100%;
	left:0;
	top:0;
	position: absolute;
	z-index:2;
	font-size: 30px;
	color: #1f292b;
	padding: 8px 40px 10px 40px;
}



.contact_page_row form label{
	font-size: 22px;
	color: #464d4f;
	font-weight:500;
}
.contact_page_row form input, .contact_page_row form textarea{
	background: none;
	border: none;
	border-bottom: 1px solid #ffffff;
	font-size: 22px !important;
	color: #ffffff;
	padding: 10px 0;
	font-weight:500 !important;
	font-family: 'Aeonik-Regular' !important;
}
.contact_page_row form textarea{
	min-height: 100px;
	height: 100px;
}
.contact_page_row form input[type="checkbox"]{
  accent-color: #ffc20e;
}

.contact_page_row .elementor-widget-html:before{
	content:"";
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	background: #20292b;
	position: absolute;
}
.contact_page_row .elementor-widget-html{
	overflow: hidden;
}
.contact_page_row .elementor-widget-html.flipped:before{
	
	left:100%;
	transition-duration:0.6s;
	transition-delay: 1s;
}

.contact_page_row form{
	padding: 10px;
}

@media screen and (min-width: 768px) {
	.contact_page_row form{
		padding: 0px;
	}
}
@media screen and (max-width: 768px) {
	.contact_page_row form{
		padding: 10px;
	}
}

.wpcf7-response-output{
	text-align: center;
}
/*contact page - end*/



.narrow_cont{
	max-width: 750px;
	margin: 150px auto;
	padding: 10px;
}




/* responsive - start*/
@media only screen and (max-width: 1100px) {
	header #header_moto{
		display: none;
	}
	
.work_text_content{
	padding: 10px;
}
	
	.latest-works-container h1{
		position: relative;
		right: unset;
		top: unset;
		font-size: 60px;
		margin-bottom: 20px;
	}
	.filter-buttons{
		position: relative !important;
		left: unset;
		top: unset;
		display: block;
		max-width: unset;
		transform: unset;
		margin-bottom: 30px;
	}
	.work-w-filters-container{
		display: block;
		width: 100%;
		max-width: 100%;
	}
	
}

@media only screen and (max-width: 768px) {
	.site-logo{
		top: 25px;
	}
	
	#site-navigation #primary-menu-list a{
		font-size: 50px !important;
		line-height: 1.2;
	}
	
	header .header-container{
		min-height: 54px;
	}
	header .social_icons{
		gap: 3vw;
		padding-left: 15px;
	}
	.social_icons a{
		height: 18px;
	}
header #header_moto{
	display: none;
}
	header .menu-button{
		height: 40px;
		padding: 10px 20px;
		gap: 10px;
	}
	.menu-button div{
		width: 34px;
	}
	.menu-opened .menu-button span{
		background: #000;
	}
	.menu-button span:nth-child(1),
	.menu-button span:nth-child(2){
		top: 2px;
	}
	.menu-button span:nth-child(5),
	.menu-button span:nth-child(6){
		top: 21px;
	}
	.menu-opened .menu-button span:nth-child(1),
	.menu-opened .menu-button span:nth-child(2){
		top: 9px;
	}
	.menu-opened .menu-button span:nth-child(5),
	.menu-opened .menu-button span:nth-child(6){
		top: 16px;
	}
	
	header#masthead .header-container{
		min-height: unset;
	}
	
	
	.elementor-element h2{
		font-size: 60px;
	}
	.footer-columns-inner{
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 0;
}
.footer-col-2{
	padding: 50px 10px 100px 10px;
	display: flex;
	align-items: center;
	justify-content:center;
	text-align: center;
}
	
	
	#about h2{
		margin-top: 50px;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	
	.awards_grid .elementor-widget-container{
		text-align: center;
		padding-top: 50px;
		gap: 0;
	}
	.awards_grid .elementor-widget-container span{
		position: absolute;
		top: 0;
		left: 50%;
		transform: translatex(-50%);
	}
	.awards_grid img{
		margin: auto;
		width: 18vw;
	}
	.post-item h3{
		font-size: 21px;
	}
	.post-item span{
		font-size: 15px;
	}
	.elementor-widget-text-editor{
		padding-left: 10px;
		padding-right: 10px;
	}
	.elementor-button-wrapper{
		text-align: center;
	}
	.works-slider{
		padding-left: 0;
	}
	
	
	
	
	ol li{
		padding-top: 35px;
		font-size: 25px !important;
	}
	ol li:before{
		position: absolute;
		top: 5px;
		padding-right: 0px;
		width: auto;
		min-width: 80px;
		font-size: 25px;
	}
	.about_page_section:before{
		width: 100%;
	}
	#wework{
		text-align: left;
		margin-bottom: 0;
		padding-bottom: 0;
		margin-top: 0;
		padding-top: 0;
		font-size: 60px;
		padding-left: 10px;
	}
	
	.wework p{
		margin-top: 0;
		padding-top: 0;
	}
	.wework > .e-con-inner{
		gap: 0;
	}
	
	.believe_row{
		margin-bottom: 30px;
	}
	.believe_row .e-con-inner > .e-con-full:first-child{
		order: 1 !important;
	}
	
	.webelieve > .e-con-inner{
		display: flex;
		flex-direction: row !important;
		justify-items: center;
	}
	.beliefs{
		text-align: center !important;
		min-height: 100px;
		font-size: 28px;
	}
	#webelieve{
		text-align:  center;
		margin-bottom: 0px;
		font-size: 24px;
		margin-left: 10px;
		font-size: 60px;
	}
	.hide_on_mobile{
		display: none;
	}
	.awards .elementor-widget-html .elementor-widget-container{
		gap: 2vw;
	}
	
	
	.about_rewards_row.elementor-widget-html .elementor-widget-container{
    display: flex;
    flex-wrap: wrap;
		max-width: 95%;
		margin: auto;
	}
	.awards .about_reward{
  flex: 0 30%;
  box-sizing: border-box; 
	}
	
	
	
	
	.team_cards > .e-con-inner{
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
	}
	
.latest-works-container h1,	#work_heading{
		padding-top: 80px;
		font-size: 40px;
	}
	.work_top{
	display: block;
		text-align: center;
		padding-bottom: 10px;
	}
	.work_top *{
		text-align: center;
	}
	.work_long_title br{
		display: none;
	}
	.our_team {
		margin: auto;
		padding: 10px;
	}

	.our_team .e-con-inner{
		display: block;
	}
	
	
	
	.latest-works{
		padding-left: 10px;
	}

.clients_carousel{
    animation: scrollToLeft 25s linear infinite; 
}
.clients_carousel .elementor-widget-image{
    width: 35vw!important;
}
	.our_team > .e-con-full{
		max-width: calc(100vw - 27px);
	}
	.our_team > .e-con-full > .e-con-boxed{
    display: inline-block;
    width: 65%;
  }
	
	.contact_page_row{
		padding-top: 20px;
		display: block;
	}
	
	
	
#hero_video .elementor-widget-html{
	bottom: 150px;
	zoom: 0.5;
}
	

.infinite_scrolltext_container {
	top: 150px !important;
	display: none !important;
}
	
	
	
	
	.latest-works-container{
		padding-top: 80px;
	}
	.filter-buttons button{
		font-size: 18px !important;
	}
	
	
	
	.post-item:before{
		width: 70px;
		height: 70px;
	}
	
	.contact_page_row iframe{
		height: 75vh;
	overflow: hidden;
	}
	
	
	.elementor-button-warning .elementor-button, .button_to_center button{
		
    width: 80px;
    height: 80px;
	}
	footer iframe{
		aspect-ratio: 4/3 !important;
		min-height: unset;
		height: auto !important;
	}
	footer div:not(.footer_policies) > a{
		font-size: 22px;
	}
}
/* responsive - end*/







/*fix carousel on sucking iphone - start*/
@keyframes scrollToLeftmargin {
    from {
      margin-left:0;
      margin-right:0;
    }
    to {
      /*margin-left:-2100px;
      margin-right:2100px;*/
      margin-left:-3150px;
      margin-right:3150px;
  }
}
.ios-device
#clients .clients_carousel{
    animation: scrollToLeftmargin 20s linear infinite; 
}
.ios-device
.clients_carousel .elementor-widget-image{
    width: 150px !important;
}
/*fix carousel on sucking iphone - end*/


/* stories blog - start */
/* ------------------------------------------------------------------------
   STORIES: the blog grid, its archive and the article page.

   Markup comes from functions.php (dgt_stories_card and the [stories]
   shortcode) and from archive-stories.php, taxonomy-story_category.php and
   single-stories.php.

   This block is written with SPACES ONLY and contains no backslash. It is
   edited over an API, and a tab that survives one escaping round arrives
   here as the two characters backslash and t, which silently kills the rule
   it lands in. Keep it that way.

   Anything that could sit inside an Elementor container is written with two
   class selectors, because .elementor-element h2 is 100px and centred and
   would otherwise win on specificity.
   ------------------------------------------------------------------------ */

/* Aeonik carries no Greek glyphs at all: the face has one codepoint in the
   whole Greek block, so Greek copy set in it falls back to the browser's
   default serif, mid sentence, next to Latin words still in Aeonik. Inter
   covers Greek in full and is already a digitall face (the whole of
   /build-your-brand/ is set in it), so the blog is set in Inter throughout.
   The bold cut was subset to exactly the same 1104 codepoints as the regular
   and recompressed to woff2, 68KB, and lives next to it in /assets/. */
@font-face {
    font-family: 'Inter-Bold';
    src: url('/assets/Inter_18pt-Bold-opt.woff2') format('woff2'),
         url('/assets/Inter_18pt-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- the grid ---------------------------------------------------------- */
.dgt-stories{
    display: block;
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 10px;
}
.dgt-stories .dgt-stories__heading{
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 64px;
    line-height: 1.05;
    color: #1f2729;
    text-align: center;
    margin: 0 0 40px 0;
    padding: 0;
    /* footer.php scales every h2 on scroll from an inline style */
    transform: none !important;
}
.dgt-stories__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}
.dgt-stories__grid[data-columns="1"]{ grid-template-columns: minmax(0, 1fr); }
.dgt-stories__grid[data-columns="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dgt-stories__grid[data-columns="4"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- one card ---------------------------------------------------------- */
.dgt-stories .dgt-story-card{
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: #1f292b;
    color: #ffffff;
    text-decoration: none;
    isolation: isolate;
    transition: transform 0.5s ease;
}
.dgt-stories .dgt-story-card:hover{ transform: translateY(-8px); }
.dgt-stories .dgt-story-card:focus-visible{ outline: 3px solid #ffc20e; outline-offset: 3px; }

.dgt-story-card__media{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.dgt-stories .dgt-story-card__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    transition: transform 0.8s ease;
}
.dgt-stories .dgt-story-card:hover .dgt-story-card__img{ transform: scale(1.05); }

/* No cover image: a grey square carrying the logo, as agreed. */
.dgt-story-card__ph{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background-color: #6f7172;
    background-image: url('/wp-content/uploads/2024/02/digitall-logo.webp');
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 38% auto;
}

/* The gradient shadow, matched to requests/new-blog.png: flat over the top
   half of the card, then a ramp to almost black at the bottom edge. */
.dgt-story-card__veil{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 48%,
        rgba(0, 0, 0, 0.30) 66%,
        rgba(0, 0, 0, 0.66) 84%,
        rgba(0, 0, 0, 0.95) 100%);
}

.dgt-story-card__body{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 24px;
}
.dgt-story-card__meta{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0 0 10px 0;
    font-family: 'Inter-Regular', 'Aeonik-Regular', sans-serif;
    font-size: 14px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.88);
}
.dgt-story-card__cat{
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 17px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffc20e;
}
.dgt-story-card__read{
    position: relative;
    padding-left: 15px;
}
.dgt-story-card__read:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.85);
}
.dgt-stories .dgt-story-card__title{
    margin: 0;
    padding: 0;
    font-family: 'Inter-Regular', 'Aeonik-Regular', sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.2;
    color: #ffffff;
    text-align: left;
    /* the reference tops out at four lines; anything longer is trimmed */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- empty state, CTA, pagination -------------------------------------- */
.dgt-stories .dgt-stories__empty{
    margin: 0;
    padding: 40px 0;
    font-family: 'Inter-Regular', 'Aeonik-Regular', sans-serif;
    font-size: 20px;
    color: #5c6061;
    text-align: center;
}
.dgt-stories__more{
    margin-top: 40px;
    text-align: center;
}
.dgt-stories__more a{
    display: inline-block;
    padding: 14px 34px;
    border-radius: 50px;
    background: #f6c600;
    color: #1f292b;
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 18px;
    transition: transform 0.25s ease, background-color 0.25s ease;
}
.dgt-stories__more a:hover{
    background: #ffd043;
    transform: translateY(-2px);
}

.dgt-stories__pagination{ margin-top: 60px; }
.dgt-stories__pagination ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dgt-stories__pagination li{ margin: 0; }
.dgt-stories__pagination a,
.dgt-stories__pagination span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #8b9092;
    border-radius: 30px;
    font-family: 'Inter-Regular', 'Aeonik-Regular', sans-serif;
    font-size: 18px;
    color: #1f292b;
    transition-duration: 0.4s;
}
.dgt-stories__pagination a:hover,
.dgt-stories__pagination .current{
    background: #f6c600;
    border-color: #f6c600;
    color: #ffffff;
}
.dgt-stories__pagination .dots{
    border-color: transparent;
    min-width: 0;
    padding: 0 4px;
}

/* --- the archive: /stories/ and /stories-category/<slug>/ -------------- */
.dgt-stories-archive{
    background: radial-gradient(#6f7172, #1f282b);
    padding: 150px 0 170px 0;
    min-height: 100vh;
}
.dgt-stories-archive__inner{
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 10px;
}
.dgt-stories-archive__header{
    text-align: center;
    margin-bottom: 70px;
}
.dgt-stories-archive .dgt-stories-archive__eyebrow{
    margin: 0 0 14px 0;
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffc20e;
}
.dgt-stories-archive .dgt-stories-archive__title{
    margin: 0;
    padding: 0;
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 100px;
    line-height: 1;
    color: #ffffff;
}
.dgt-stories-archive .dgt-stories-archive__intro{
    max-width: 640px;
    margin: 18px auto 0 auto;
    font-family: 'Inter-Regular', 'Aeonik-Regular', sans-serif;
    font-size: 22px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}
.dgt-stories-archive .dgt-stories{
    max-width: none;
    padding: 0;
}
.dgt-stories-archive .dgt-stories__pagination a,
.dgt-stories-archive .dgt-stories__pagination span{
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}
.dgt-stories-archive .dgt-stories__pagination a:hover,
.dgt-stories-archive .dgt-stories__pagination .current{
    background: #f6c600;
    border-color: #f6c600;
    color: #ffffff;
}
.dgt-stories-archive .dgt-stories__empty{ color: rgba(255, 255, 255, 0.82); }

/* --- the article page: /stories/<slug>/ -------------------------------- */
.dgt-story-wrap{
    background: #dadada;
    padding: 130px 0 170px 0;
}
.dgt-story{
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
    font-family: 'Inter-Regular', 'Aeonik-Regular', sans-serif;
    color: #232323;
}

.dgt-story__crumbs ol{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 26px 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.4;
    color: #5c6061;
}
.dgt-story__crumbs li{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.dgt-story__crumbs li + li:before{
    content: "/";
    color: #9aa0a1;
}
/* Under 768px the site sets a bare "ol li{padding-top:35px;font-size:25px
   !important}" and "ol li:before{position:absolute;top:5px}" for the numbered
   services list. Unscoped, it lands on every ordered list on the site, so the
   breadcrumb separators fly to the top of the page and the article's own
   numbered lists jump to 25px. Both are pinned back here rather than by
   touching that rule, which the services list still depends on. */
.dgt-story .dgt-story__crumbs li{
    padding-top: 0;
    font-size: 14px !important;
}
.dgt-story .dgt-story__crumbs li + li:before{
    position: static;
    top: auto;
    width: auto;
    min-width: 0;
    padding-right: 0;
    font-size: inherit;
}
.dgt-story .dgt-story__content ol li{
    padding-top: 0;
    font-size: inherit !important;
}
.dgt-story .dgt-story__content ol li:before{
    position: static;
    top: auto;
    width: auto;
    min-width: 0;
}
.dgt-story__crumbs a{ color: #5c6061; }
.dgt-story__crumbs a:hover{ color: #1f292b; }
.dgt-story__crumbs li[aria-current]{ color: #1f292b; }

.dgt-story__meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 18px 0;
    font-size: 15px;
    color: #5c6061;
}
.dgt-story__cat{
    display: inline-block;
    padding: 5px 14px;
    border-radius: 30px;
    background: #1f292b;
    color: #ffc20e;
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition-duration: 0.3s;
}
.dgt-story__cat:hover{ background: #2a3739; }
.dgt-story__read{
    position: relative;
    padding-left: 15px;
}
.dgt-story__read:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    background: #8b9092;
}

.dgt-story .dgt-story__title{
    margin: 0 0 18px 0;
    padding: 0;
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 44px;
    line-height: 1.12;
    color: #1f2729;
    text-align: left;
    transform: none !important;
}
.dgt-story .dgt-story__lead{
    margin: 0 0 30px 0;
    font-size: 21px;
    line-height: 1.5;
    color: #3b4446;
}

.dgt-story__cover{ margin: 0 0 34px 0; }
.dgt-story .dgt-story__cover-img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px;
    margin: 0;
}
.dgt-story__cover figcaption{
    margin-top: 10px;
    font-size: 14px;
    color: #5c6061;
    text-align: center;
}

.dgt-story .dgt-story__content{
    font-size: 19px;
    line-height: 1.68;
    color: #232323;
}
.dgt-story .dgt-story__content > *:first-child{ margin-top: 0; }
.dgt-story .dgt-story__content p{ margin: 0 0 22px 0; font-size: inherit; }
.dgt-story .dgt-story__content h2{
    margin: 46px 0 14px 0;
    padding: 0;
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 32px;
    line-height: 1.2;
    color: #1f2729;
    text-align: left;
    transform: none !important;
}
.dgt-story .dgt-story__content h3{
    margin: 36px 0 12px 0;
    padding: 0;
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 24px;
    line-height: 1.25;
    color: #1f2729;
    text-align: left;
}
.dgt-story .dgt-story__content h4{
    margin: 28px 0 10px 0;
    padding: 0;
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 20px;
    line-height: 1.3;
    color: #1f2729;
    text-align: left;
}
.dgt-story .dgt-story__content ul,
.dgt-story .dgt-story__content ol{
    margin: 0 0 22px 0;
    padding-left: 22px;
}
.dgt-story .dgt-story__content li{ margin: 0 0 10px 0; }
.dgt-story .dgt-story__content a{
    color: #1f292b;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dgt-story .dgt-story__content a:hover{ color: #8a6b00; }
.dgt-story .dgt-story__content img{
    width: 100%;
    height: auto;
    border-radius: 20px;
    margin: 10px 0 26px 0;
}
.dgt-story .dgt-story__content figure{ margin: 0 0 26px 0; }
.dgt-story .dgt-story__content figcaption{
    margin-top: 8px;
    font-size: 14px;
    color: #5c6061;
    text-align: center;
}
.dgt-story .dgt-story__content blockquote{
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    border-left: 4px solid #f6c600;
    font-size: 22px;
    line-height: 1.45;
    color: #1f2729;
}
.dgt-story .dgt-story__content blockquote p:last-child{ margin-bottom: 0; }
.dgt-story .dgt-story__content table{
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 26px 0;
    font-size: 17px;
}
.dgt-story .dgt-story__content th,
.dgt-story .dgt-story__content td{
    border: 1px solid #c3c3c3;
    padding: 10px 12px;
    text-align: left;
}
.dgt-story .dgt-story__content th{
    background: #cfcfcf;
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
}

.dgt-story__tags{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 34px 0 0 0;
}
.dgt-story__tags a{
    display: inline-block;
    padding: 5px 16px;
    border: 1px solid #9aa0a1;
    border-radius: 30px;
    font-size: 15px;
    color: #3b4446;
    transition-duration: 0.4s;
}
.dgt-story__tags a:hover{
    background: #f6c600;
    border-color: #f6c600;
    color: #ffffff;
}
.dgt-story .dgt-story__stamp{
    margin: 30px 0 0 0;
    font-size: 14px;
    color: #5c6061;
}

/* previous and next, at the foot of the article */
.dgt-story__adjacent{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 46px 0 0 0;
    padding-top: 34px;
    border-top: 1px solid #bcbcbc;
}
.dgt-story__adjacent-link{
    display: block;
    padding: 20px 22px;
    border-radius: 20px;
    background: #1f292b;
    color: #ffffff;
    transition: transform 0.4s ease, background-color 0.4s ease;
}
.dgt-story__adjacent-link--empty{ background: transparent; }
.dgt-story__adjacent-link--next{ text-align: right; }
a.dgt-story__adjacent-link:hover{
    background: #2a3739;
    transform: translateY(-4px);
}
a.dgt-story__adjacent-link:focus-visible{ outline: 3px solid #ffc20e; outline-offset: 3px; }
.dgt-story__adjacent-label{
    display: block;
    margin-bottom: 8px;
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffc20e;
}
.dgt-story__adjacent-title{
    display: block;
    font-size: 18px;
    line-height: 1.3;
}

/* --- the footer link, the only place Stories is linked from ------------ */
/* The footer script fades block-3's children in one by one and starves the
   last ones, which is why the theme already forces .footer_policies visible.
   The Stories link sits next to it and needs the same treatment. */
footer .widget_block .footer_nav{
    opacity: 1 !important;
    transform: none !important;
}
footer .footer_nav{ margin: 0 0 12px 0; }
footer .footer_nav a{
    font-family: 'Inter-Bold', 'Aeonik-Bold', sans-serif;
    font-size: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    transition-duration: 0.3s;
}
footer .footer_nav a:hover{ color: #ffc20e; }

/* --- tablet ------------------------------------------------------------ */
@media only screen and (max-width: 1100px) {
    .dgt-stories__grid,
    .dgt-stories__grid[data-columns="3"],
    .dgt-stories__grid[data-columns="4"]{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dgt-stories .dgt-stories__heading{ font-size: 48px; }
    .dgt-stories-archive{ padding: 120px 0 150px 0; }
    .dgt-stories-archive .dgt-stories-archive__title{ font-size: 72px; }
    .dgt-stories-archive__header{ margin-bottom: 50px; }
    .dgt-story .dgt-story__title{ font-size: 38px; }
}

/* --- mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
    .dgt-stories__grid,
    .dgt-stories__grid[data-columns="2"],
    .dgt-stories__grid[data-columns="3"],
    .dgt-stories__grid[data-columns="4"]{
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .dgt-stories .dgt-story-card__title{ font-size: 24px; }
    .dgt-story-card__body{ padding: 20px; }
    .dgt-stories .dgt-stories__heading{ font-size: 38px; }
    .dgt-stories-archive{ padding: 110px 0 130px 0; }
    .dgt-stories-archive .dgt-stories-archive__title{ font-size: 52px; }
    .dgt-stories-archive .dgt-stories-archive__intro{ font-size: 18px; }
    .dgt-story-wrap{ padding: 110px 0 130px 0; }
    .dgt-story .dgt-story__title{ font-size: 30px; }
    .dgt-story .dgt-story__lead{ font-size: 18px; }
    .dgt-story .dgt-story__content{ font-size: 17px; }
    .dgt-story .dgt-story__content h2{ font-size: 26px; margin-top: 36px; }
    .dgt-story .dgt-story__content h3{ font-size: 21px; }
    .dgt-story .dgt-story__cover-img{ aspect-ratio: 4 / 3; }
    .dgt-story__adjacent{ grid-template-columns: minmax(0, 1fr); }
    .dgt-story__adjacent-link--next{ text-align: left; }
    .dgt-story__adjacent-link--empty{ display: none; }
}
/* stories blog - end */