.elementor-10 .elementor-element.elementor-element-4fbf3fa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:12px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-8116279{text-align:center;}.elementor-10 .elementor-element.elementor-element-d609cc3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10 .elementor-element.elementor-element-d609cc3:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-d609cc3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #000000 0%, #0C0820 100%);}.elementor-10 .elementor-element.elementor-element-d6655fc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-21cac52{margin:31px 0px calc(var(--kit-widget-spacing, 0px) + 12px) 0px;}.elementor-10 .elementor-element.elementor-element-21cac52 .elementor-heading-title{font-size:22px;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-aa73d53 .elementor-heading-title{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-7bb2229 .elementor-heading-title{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-1cbf94a .elementor-button{background-color:transparent;background-image:linear-gradient(180deg, #13064B 0%, #1F105C 100%);}.elementor-10 .elementor-element.elementor-element-4c630be{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-1154491{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-88ceb03{margin:21px 0px calc(var(--kit-widget-spacing, 0px) + 6px) 0px;text-align:center;}.elementor-10 .elementor-element.elementor-element-be4e146{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10 .elementor-element.elementor-element-be4e146:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-be4e146 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #0D1D33 0%, #0D1D33 100%);}.elementor-10 .elementor-element.elementor-element-b23719a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-340e3f9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-7860d8c .elementor-heading-title{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-b9d44b0 .elementor-heading-title{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-48aea20{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-1a6dce2{text-align:center;}.elementor-10 .elementor-element.elementor-element-b28afeb{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:11px 11px;--row-gap:11px;--column-gap:11px;}.elementor-10 .elementor-element.elementor-element-af57554{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-56643dd .elementor-heading-title{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-a3157b9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-7b763cf .elementor-heading-title{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-6573e8e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-bacb7eb .elementor-heading-title{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-fe9cb88{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-7f0d8e7 .elementor-heading-title{color:#FFF9F9;}.elementor-10 .elementor-element.elementor-element-94b3210{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-2957bc6{text-align:center;}.elementor-10 .elementor-element.elementor-element-3d488ee{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-10 .elementor-element.elementor-element-3d488ee.e-con{--order:-99999 /* order start hack */;}.elementor-10 .elementor-element.elementor-element-f0d74bc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-7f15ad6 img{height:337px;}.elementor-10 .elementor-element.elementor-element-a8eb951{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-079f36e img{height:336px;}.elementor-10 .elementor-element.elementor-element-8967890{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-6d520a1 img{height:329px;}.elementor-10 .elementor-element.elementor-element-16f452e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-7a097c1{text-align:center;}.elementor-10 .elementor-element.elementor-element-7a097c1 .elementor-heading-title{color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-f50a4b4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-f50a4b4:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-f50a4b4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #0D1D33 0%, #0D1D33 100%);}.elementor-10 .elementor-element.elementor-element-0ebfb91 .elementor-heading-title{color:#FFFFFF;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-10 .elementor-element.elementor-element-d6655fc{--width:50%;}.elementor-10 .elementor-element.elementor-element-4c630be{--width:50%;}.elementor-10 .elementor-element.elementor-element-b23719a{--width:50%;}.elementor-10 .elementor-element.elementor-element-340e3f9{--width:50%;}.elementor-10 .elementor-element.elementor-element-af57554{--width:25%;}.elementor-10 .elementor-element.elementor-element-a3157b9{--width:25%;}.elementor-10 .elementor-element.elementor-element-6573e8e{--width:25%;}.elementor-10 .elementor-element.elementor-element-fe9cb88{--width:25%;}.elementor-10 .elementor-element.elementor-element-f0d74bc{--width:33%;}.elementor-10 .elementor-element.elementor-element-a8eb951{--width:33%;}.elementor-10 .elementor-element.elementor-element-8967890{--width:33%;}}/* Start custom CSS for button, class: .elementor-element-1cbf94a *//* ========================================= DIGITALPROMOVA PREMIUM ANIMATED BUTTON ========================================= */ #digital-button { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; min-width: 190px; border: none !important; border-radius: 14px; background: linear-gradient( 135deg, #071426, #0b2b52, #063b70 ) !important; color: #ffffff !important; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; overflow: hidden; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 80, 180, 0.25), inset 0 1px 0 rgba(255,255,255,0.12); transition: transform 0.4s ease, box-shadow 0.4s ease; } /* ========================================= MOVING LIGHT ========================================= */ #digital-button::before { content: ""; position: absolute; top: -80%; left: -70%; width: 45%; height: 260%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.35), transparent ); transform: rotate(25deg); animation: buttonLight 4s ease-in-out infinite; pointer-events: none; } /* ========================================= SOFT BLUE GLOW ========================================= */ #digital-button::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 50% 100%, rgba(0,150,255,0.28), transparent 60% ); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } /* ========================================= BUTTON TEXT ========================================= */ #digital-button .elementor-button-text { position: relative; z-index: 3; transition: letter-spacing 0.4s ease, text-shadow 0.4s ease; } /* ========================================= HOVER ========================================= */ #digital-button:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 18px 45px rgba(0,110,255,0.35), 0 0 35px rgba(0,140,255,0.20), inset 0 1px 0 rgba(255,255,255,0.18); } /* ========================================= HOVER GLOW ========================================= */ #digital-button:hover::after { opacity: 1; } /* ========================================= HOVER TEXT ========================================= */ #digital-button:hover .elementor-button-text { letter-spacing: 0.7px; text-shadow: 0 0 15px rgba(120,200,255,0.7); } /* ========================================= SHINE ANIMATION ========================================= */ @keyframes buttonLight { 0% { left: -70%; } 45% { left: 130%; } 100% { left: 130%; } } /* ========================================= CLICK EFFECT ========================================= */ #digital-button:active { transform: scale(0.97); } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { #digital-button { min-width: 170px; padding: 14px 25px; font-size: 15px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4c630be *//* ========================================= DIGITALPROMOVA - IMAGE ZOOM + BORDER ========================================= */ #digital-growth-image { position: relative; overflow: hidden; border-radius: 18px; /* Premium border */ border: 1px solid rgba(70, 190, 255, 0.45); /* Outer glow */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 15px 45px rgba(0, 90, 180, 0.20); transition: box-shadow 0.5s ease, border-color 0.5s ease; } /* IMAGE ZOOM */ #digital-growth-image img { display: block; width: 100%; transform: scale(1); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease; } /* HOVER ZOOM */ #digital-growth-image:hover img { transform: scale(1.08); filter: brightness(1.05) contrast(1.03); } /* BORDER + GLOW ON HOVER */ #digital-growth-image:hover { border-color: rgba(80, 200, 255, 0.9); box-shadow: 0 0 0 1px rgba(80, 200, 255, 0.25), 0 0 25px rgba(0, 150, 255, 0.30), 0 20px 55px rgba(0, 80, 180, 0.28); } /* ========================================= MOVING LIGHT BORDER ========================================= */ #digital-growth-image::before { content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1.5px; background: linear-gradient( 120deg, transparent 15%, rgba(255, 255, 255, 0.9) 30%, #22bfff 45%, transparent 60%, #168cff 80%, transparent 95% ); background-size: 250% 250%; animation: imageBorderMove 6s linear infinite; pointer-events: none; z-index: 5; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* ========================================= BORDER ANIMATION ========================================= */ @keyframes imageBorderMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { #digital-growth-image { border-radius: 14px; } #digital-growth-image::before { border-radius: 14px; } #digital-growth-image:hover img { transform: scale(1.04); } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-af57554 *//* ========================================= DIGITALPROMOVA DARK NAVY / BLACK SERVICE CARDS ========================================= */ #strategy-box, #creative-box, #data-box, #growth-box { position: relative; isolation: isolate; overflow: hidden; padding: 38px 30px; min-height: 270px; border-radius: 22px; /* DARK NAVY / BLACK */ background: radial-gradient( circle at 85% 15%, rgba(0, 110, 255, 0.16), transparent 32% ), linear-gradient( 145deg, #03070d 0%, #071426 55%, #020407 100% ); border: 1px solid rgba(100, 170, 255, 0.14); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: transform 0.45s ease, box-shadow 0.45s ease; } /* ========================================= ANIMATED BORDER ========================================= */ #strategy-box::before, #creative-box::before, #data-box::before, #growth-box::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 22px; background: linear-gradient( 120deg, transparent 5%, rgba(255,255,255,0.7) 20%, #168cff 38%, transparent 52%, #4db5ff 70%, transparent 90% ); background-size: 300% 300%; animation: darkCardBorder 7s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 10; } /* ========================================= BLUE GLOW ========================================= */ #strategy-box::after, #creative-box::after, #data-box::after, #growth-box::after { content: ""; position: absolute; width: 220px; height: 220px; top: -130px; right: -100px; border-radius: 50%; background: rgba(0, 115, 255, 0.16); filter: blur(60px); transition: transform 0.6s ease, opacity 0.6s ease; z-index: -1; } /* ========================================= HEADINGS ========================================= */ #strategy-box h2, #creative-box h2, #data-box h2, #growth-box h2 { position: relative; z-index: 5; color: #ffffff; font-size: 32px; font-weight: 750; letter-spacing: -1px; transition: color 0.35s ease, transform 0.35s ease; } /* ========================================= PARAGRAPHS ========================================= */ #strategy-box p, #creative-box p, #data-box p, #growth-box p { position: relative; z-index: 5; color: rgba(255,255,255,0.65); font-size: 17px; line-height: 1.55; transition: color 0.35s ease; } /* ========================================= HOVER ========================================= */ #strategy-box:hover, #creative-box:hover, #data-box:hover, #growth-box:hover { transform: translateY(-9px); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 35px rgba(0, 110, 255, 0.14), inset 0 1px 0 rgba(255,255,255,0.10); } /* ========================================= HEADING HOVER ========================================= */ #strategy-box:hover h2, #creative-box:hover h2, #data-box:hover h2, #growth-box:hover h2 { color: #55b5ff; transform: translateX(6px); text-shadow: 0 0 18px rgba(40,160,255,0.35); } /* ========================================= TEXT HOVER ========================================= */ #strategy-box:hover p, #creative-box:hover p, #data-box:hover p, #growth-box:hover p { color: rgba(255,255,255,0.82); } /* ========================================= GLOW HOVER ========================================= */ #strategy-box:hover::after, #creative-box:hover::after, #data-box:hover::after, #growth-box:hover::after { transform: scale(1.5); opacity: 1; } /* ========================================= ANIMATION ========================================= */ @keyframes darkCardBorder { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { #strategy-box, #creative-box, #data-box, #growth-box { min-height: auto; padding: 30px 24px; border-radius: 18px; } #strategy-box:hover, #creative-box:hover, #data-box:hover, #growth-box:hover { transform: translateY(-5px); } }/* End custom CSS */