/* ===================================================================================

* Theme Name: Nimo Child
* Theme URI: https://themexriver.com/wp/Nimo
* Author: ThemeXriver
* Author URI: https://themeforest.net/user/themexriver
* Description: Creative Digital Agency WordPress Theme
* Version: 1.0.6
* Template: nimo
* Text Domain: nimo-child
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready
* Tested up to: 6.6
* Requires PHP: 7.4

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of Nimo updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

html body div.wa-cursor.wa-cursor::before {
	background: #00bceb !important;
	background-color: #00bceb !important;
	background-image: none !important;
	border: 1px solid #ff9966 !important;
}
html body div.wa-cursor.wa-cursor::before,
html body div.wa-cursor.wa-cursor.-pointer::before {
	background: #00bceb !important;
	background-color: #00bceb !important;
	background-image: none !important;
	border-color: #ff9966 !important;
}
/* Disable the entire preloader on all non-home pages */
/*
body:not(.home) .nm-preloader {
    display: none !important;
}
*/
.nm-preloader-logo img{width:300px !important;height:auto !important;}
/* Hide Nimo circle cursor */
.wa-cursor {
	display: none !important;
}

/* Keep the normal mouse pointer visible */
html,
body,
a,
button,
input,
textarea,
select {
	cursor: auto !important;
}
html body.elementor-page-333 .wa_backToTop{
	color:#00CCFF !important;
	border-color: #00CCFF !important;
}
@media (min-width: 768px) {
    .e-con.e-con-boxed > .e-con-inner {
        max-width: 1200px !important;
        width: 100%;
    }
}

@media (min-width: 1600px) {
    .e-con.e-con-boxed > .e-con-inner {
        max-width: 1300px !important;
    }
}

@media (min-width: 1800px) {
    .e-con.e-con-boxed > .e-con-inner {
        max-width: 1400px !important;
    }
    .vibes-animation{
        margin-left: -170px !important;
    }
    .vibes-no-animation{
        margin-left:-275px !important;
    }
}
@media (max-width:767px) {
    .vibes-wrap{
      margin-top:-60px !important;
      margin-left:15px !important;
    }
    .vibes-no-wrap{margin-top:80px !important;margin-left:35px !important;}
}

a,
button,
[role="button"] {
	cursor: pointer !important;
}

/* Cursor sparkle */
.cursor-sparkle {
	--sparkle-color: #00bceb;

	position: fixed;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	z-index: 999999;
	pointer-events: none;
	background: var(--sparkle-color);

	/* six-point star */
	clip-path: polygon(
		50% 0%,
		61% 35%,
		98% 35%,
		68% 57%,
		79% 91%,
		50% 70%,
		21% 91%,
		32% 57%,
		2% 35%,
		39% 35%
	);

	transform: translate(-50%, -50%) scale(0) rotate(0deg);
	animation: cursor-sparkle-animation 700ms ease-out forwards;
	will-change: transform, opacity;
}

.cursor-sparkle.is-small {
	width: 14px;
	height: 14px;
}

.cursor-sparkle.is-large {
	width: 34px;
	height: 34px;
}

@keyframes cursor-sparkle-animation {
	0% {
		opacity: 0;
		transform:
			translate(-50%, -50%)
			translate(0, 0)
			scale(0)
			rotate(0deg);
	}

	20% {
		opacity: 1;
		transform:
			translate(-50%, -50%)
			translate(calc(var(--move-x) * 0.2), calc(var(--move-y) * 0.2))
			scale(1)
			rotate(45deg);
	}

	100% {
		opacity: 0;
		transform:
			translate(-50%, -50%)
			translate(var(--move-x), var(--move-y))
			scale(0.15)
			rotate(160deg);
	}
}

@media (hover: none), (pointer: coarse) {
	.cursor-sparkle {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cursor-sparkle {
		display: none !important;
	}
}

.nm-main-navigation .navbar-nav li a{
	font-family: "Acumin Variable Font", Sans-serif !important;
	font-weight:600 !important;
	font-size: 14px !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
}
.wa_sticky_header{z-index: 9999 !important;}

@media screen and (min-width:768px){
	.nm-header-1-area{background: #000;border-bottom: 1px solid rgba(255,255,255,0.1);}
	.nm-header-1-wrap {
	    background: #000;
	    box-shadow: none !important;
	    border-radius: 0 !important;
	    border: 0 !important;
	}
	.nm-main-navigation .navbar-nav li .dropdown-menu{
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
	.wa_sticky_header:is(.wa_sticky) {
	  transform: translateY(0) !important;
	}
	header .nm-header-1-container{max-width: 1200px !important;}
	header .nm-pr-btn-1 span.text{font-size:16px !important;}
	header .nm-pr-btn-1 .icon{
		width:41px !important;
		height: 41px !important;
	}
}

/*---main menu---*/
#main-nav .current-menu-item a{
	color:#00CCFF !important;
}
/*home six things section*/
.icon-wrap{width:80px;}
.icon-wrap img{
	width:50px;
	margin:0 auto;
}
.icon-wrap2{width:100px;}
.icon-wrap2 img{
	width:70px;
	margin:0 auto;
}
.icon-wrap3{width:120px;}
.icon-wrap3 img{
	width:70px;
	margin:0 auto;
}
.icon-wrap-service-page{width:230px;padding:35px 20px !important;}
.icon-wrap-service-page img{
	width:120px;
	margin:0 auto;
}
@media (max-width:767px){
    .icon-wrap-service-page{width:150px !important;padding:20px !important;}
    .icon-wrap-service-page img{
    	width:90px !important;
    	margin:0 auto;
    }
}
.blue-circle {
	position: absolute;
	top: 35px;
	right: 35px;

	width: 25px;
	height: 25px;

	border-radius: 50%;
	background-color: #00ccff;
	border: 3px solid #000;
}
.orange-circle {
	position: absolute;
	top: 35px;
	right: 35px;

	width: 25px;
	height: 25px;

	border-radius: 50%;
	background-color: #FF9966;
	border: 3px solid #000;
}
.yellow-circle {
	position: absolute;
	top: 35px;
	right: 35px;

	width: 25px;
	height: 25px;

	border-radius: 50%;
	background-color: #FFFF66;
	border: 3px solid #000;
}
/* Service card */
.service-card.no-rotate.entrance-motion,
.entrance-motion-pop {
    opacity: 0;
    transform: scale(0.4) rotate(-12deg);
    transition:
        opacity 0.2s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card.no-rotate.entrance-motion.in,
.entrance-motion-pop.in {
    opacity: 1;
    transform: none;
}
.platform{
    width:60px;
    height:50px;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.service-card {
    position: relative;
    display: block;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 20px;
    overflow: hidden;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transition:
        transform 0.35s ease-in-out,
        box-shadow 0.35s ease-in-out;
}

.service-card:hover {
    transform: rotate(-1.5deg) !important;
    box-shadow: 10px 10px 0 #000000 !important;
}

/* Prevent Elementor heading artifacts */
.service-card .elementor-widget-heading,
.service-card .elementor-widget-heading .elementor-widget-container,
.service-card .elementor-heading-title {
    position: relative;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove any generated lines */
.service-card .elementor-widget-heading::before,
.service-card .elementor-widget-heading::after,
.service-card .elementor-widget-heading .elementor-widget-container::before,
.service-card .elementor-widget-heading .elementor-widget-container::after {
    content: none !important;
    display: none !important;
}
/* Cover the rendering seam without changing the heading background */
.service-card .elementor-heading-title::after {
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    bottom: 0;
    width: 3px;
    background: inherit;
    pointer-events: none;
}
.service-card.no-rotate {
    position: relative;
    display: block;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 20px;

    transform: translateY(0);

    transition:
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease;
}

.service-card.no-rotate:hover {
    transform: translateY(-5px) !important;
    box-shadow: 10px 10px 0 0 #000000;
}
.service-card-two {
    position: relative;
    display: block;
    background: #fff;
    border: 2px solid #000;
    border-radius: 20px;
    transition: box-shadow .2s ease;
}

.service-card-two:hover {
    transform: translateY(-10px) !important;
    box-shadow: 10px 10px 0px 0px #000000 !important;
}
.service-card-two .elementor-icon-box-description{
	align-items: center;
    display: inline-block;
    flex: 0 0 auto;
}
.service-card-two .check-box.yellow-equip {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.service-card-two:hover .check-box.yellow-equip {
    opacity: 1;
    visibility: visible;
}
/*
.service-card-two:hover,
.service-card-two:hover * {
    cursor: url("https://it.com.sg/wtfok/wp-content/uploads/2026/09/plus-sign-icon.png") 8 8, auto !important;
}
*/

/* Target the actual Elementor image */
.service-card .service-icon img,.service-card-two .service-icon img {
	display: block;
	transform-origin: center;
	will-change: transform;
}

/* Animate the actual image on card hover */
.service-card:hover .service-icon img, .service-card-two:hover .service-icon img{
    animation: iconWiggle 1.2s cubic-bezier(.34,1.56,.64,1);
}

@keyframes iconWiggle{

    0%{
        transform:rotate(0deg) scale(1);
    }

    20%{
        transform:rotate(-12deg) scale(1.08);
    }

    40%{
        transform:rotate(10deg) scale(1.12);
    }

    60%{
        transform:rotate(-6deg) scale(1.06);
    }

    80%{
        transform:rotate(3deg) scale(1.02);
    }

    100%{
        transform:rotate(0deg) scale(1);
    }
}

@keyframes blue-circle-pop {
	0% {
		transform: scale(1);
	}

	35% {
		transform: scale(1.4);
	}

	65% {
		transform: scale(0.86);
	}

	100% {
		transform: scale(1);
	}
}

/*end six things*/

.get-my-free-audit-btn .nm-pr-btn-1:is(.has-v2){
	background: #00BCEB !important;
}
.get-my-free-audit-btn .nm-pr-btn-1:is(.has-v2):hover{
	background: #FF9966 !important;
}
.get-my-free-audit-btn .nm-pr-btn-1:is(.has-v2) .icon{
	background:#000 !important;
	color:#fff !important;
}
.see-the-work .nm-pr-btn-1:is(.has-v2){
	background: #fff !important;
}
.see-the-work .nm-pr-btn-1:is(.has-v2) .text{color:#000 !important;}
.see-the-work .nm-pr-btn-1:is(.has-v2):hover{
	background: #FF9966 !important;
}
.see-the-work .nm-pr-btn-1:is(.has-v2) .icon{
	background:#000 !important;
	color:#fff !important;
}
.all-services .nm-pr-btn-1:is(.has-v2){
	background:#000 !important;
}
.all-services .nm-pr-btn-1:is(.has-v2):hover{
	background:#FF9966 !important;
}
.all-services .nm-pr-btn-1:is(.has-v2):hover .text{color:#000 !important;}

/*
.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 28px 28px;
}*/
/*
.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
  
    background-color: #0f172a; 
    
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 35px 35px;
}
*/
.grid-glow {
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 90, 60, .16) 0%, rgba(124, 107, 255, .08) 45%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: center top;
    opacity: .35;
    -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, black 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 10%, transparent 75%);
}

/*
.grid-bg{
    position: fixed;
    inset: 0;
    z-index:0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.055) 30%, transparent 32%);
    background-size: 18px 18px;
}*/

.hero {
	position: relative;
	overflow: hidden;

	background-color: #000;
	background-image: url("https://wtfok.sg/wp-content/uploads/2026/08/gridhypno-dark-023.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.wa_sticky_header:is(.nm-header-1-area){
	top: 0 !important;
}


.hero-inner{
    position: relative;
    overflow: hidden;
    /* 1. Added a dark base color here */
     background-color:#0f172a;

    background-image:
        linear-gradient(rgba(180,220,255,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180,220,255,.14) 1px, transparent 1px);

    background-size:40px 40px;
}
.hero-inner-black{
    position: relative;
    overflow: hidden;
    /* 1. Added a dark base color here */
    background-color: #000; 
    
    /* 2. Increased line opacity from .035 to .1 */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 35px 35px;
}
.hero-inner-yellow {
    position: relative;
    overflow: hidden;

    background-color: #FFFF66;
    background-image: radial-gradient(
        rgba(0, 0, 0, 0.1) 3px,
        transparent 2px
    );

    background-size: 28px 28px;
}

.why-pick-us .stroke{
	-webkit-text-stroke: 3px #fff;
    color: #fff !important;
    text-shadow: 4px 4px 0 #000;
    paint-order: stroke;

}
.comparison-row {
    display: flex;
    width: 100%;
    gap: 0;
}
.comparison-table {
        border: 4px solid #000;
	    border-radius: 24px;
	    overflow: hidden;
	    transform: translate(-10px, -10px);
	    box-shadow: 10px 10px 0 #000 !important;
    }

.comparison-cell {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 30px;
}

.comparison-label-cell {
    width: 41%;
    justify-content: flex-start;
}

.comparison-wtfok-cell {
    width: 29%;
    border-left: 4px solid #000;
    border-right: 4px solid #000;
    background: #dff7ff;
    text-align: center;
}

.comparison-agency-cell {
    width: 30%;
    text-align: center;
}

.comparison-header {
    border-bottom: 4px solid #000;
}

.comparison-header .comparison-wtfok-cell {
    background: #19c4ef;
}

.comparison-header .comparison-cell {
    min-height: 104px;
}
.comparison-content-row {
    border-bottom: 3px solid #dedede;
}

.comparison-content-row:last-child {
    border-bottom: 0;
}

.comparison-content-row .comparison-cell {
    min-height: 114px;
}

.comparison-content-row .comparison-wtfok-cell {
    background: #dff7ff;
}

.comparison-label-cell h2,
.comparison-label-cell h3,
.comparison-label-cell h4 {
    margin: 0;
}
.comparison-check .elementor-icon,
.comparison-cross .elementor-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #000;
    border-radius: 50%;
    font-size: 20px;
}

.comparison-check .elementor-icon {
    background: #16c8f4;
    color: #000;
}

.comparison-cross .elementor-icon {
    background: #fff;
    color: #555;
}
@media (max-width: 1024px) {
    .comparison-section {
        padding: 30px 20px;
    }

    .comparison-cell {
        padding: 18px 15px;
    }

    .comparison-label-cell h2,
    .comparison-label-cell h3,
    .comparison-label-cell h4 {
        font-size: 21px;
    }

    .comparison-table {
        border: 4px solid #000;
	    border-radius: 24px;
	    overflow: hidden;
	    transform: translate(-10px, -10px);
	    box-shadow: 10px 10px 0 #000 !important;
    }
}
@media (max-width: 767px) {

    .comparison-section {
        padding: 25px 10px;
    }

    /* Keep every row in 3 columns */
    .comparison-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    /* Reset existing mobile styles */
    .comparison-label-cell,
    .comparison-wtfok-cell,
    .comparison-agency-cell {
        box-sizing: border-box !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    /* COLUMN 1 - Labels */
    .comparison-label-cell {
        display: flex !important;

        width: 24% !important;
        flex: 0 0 24% !important;

        padding: 10px 5px !important;

        justify-content: center !important;
        text-align: center !important;
    }

    /* COLUMN 2 - WTFOK */
    .comparison-wtfok-cell {
        width: 38% !important;
        flex: 0 0 38% !important;

        padding: 10px 6px !important;
    }

    /* COLUMN 3 - Agency */
    .comparison-agency-cell {
        width: 38% !important;
        flex: 0 0 38% !important;

        padding: 10px 6px !important;
    }

    /* DON'T hide first header cell */
    .comparison-header .comparison-label-cell {
        display: flex !important;
    }

    /* Override old 50% header CSS */
    .comparison-header .comparison-wtfok-cell,
    .comparison-header .comparison-agency-cell {
        width: 38% !important;
        flex: 0 0 38% !important;
    }

    /* Allow text to wrap */
    .comparison-table .elementor-heading-title {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    /* Label text */
    .comparison-label-cell h5 {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    /* Header */
    .comparison-header h3{
        font-size:17px !important;
        line-height: 1.2 !important;
    }
    }
    .comparison-header h5 {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    /* Description text */
    .comparison-content-row p {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    /* Icons */
    .comparison-check,
    .comparison-cross {
        flex-shrink: 0 !important;
    }

    .comparison-content-row .comparison-cell {
        min-height: 90px;
    }
}

@media (max-width: 767px) {
    
    .wa_sticky_header:is(.wa_sticky){translateY(0px) !important;}
    
}

/* WTFOK drag me and smiling monster */


/* Main monster */
.wtfok-monster {
	--monster-x: 0px;
	--monster-y: 0px;
	--monster-rotate: 0deg;

	position: absolute;
	top: 50%;
	right: -145px;

	z-index: 30;
	width: clamp(500px, 43vw, 650px);
	margin: 0;

	cursor: grab;
	user-select: none;
	touch-action: none;

	transform:
		translate3d(
			var(--monster-x),
			calc(-75% + var(--monster-y)),
			0
		)
		rotate(var(--monster-rotate));

	transform-origin: center;
	will-change: transform;
}

.wtfok-monster.is-dragging {
	cursor: grabbing;
}

.wtfok-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;

	filter:
		drop-shadow(
			11px 17px 0 rgba(0, 0, 0, 0.34)
		);

	animation:
		wtfok-monster-float
		3.1s
		ease-in-out
		infinite;
}

.wtfok-monster.is-dragging .wtfok-svg {
	animation-play-state: paused;
}

.wtfok-body {
	fill: #08bfea;
	stroke: #050505;
	stroke-width: 6;
	stroke-linejoin: round;
}

.wtfok-eye-white {
	fill: #ffffff;
	stroke: #050505;
	stroke-width: 5;
}

/*
 * Blink the whole eye group.
 * The pupil JavaScript still works because it moves
 * the pupil circle inside each eye group.
 */
.wtfok-eye-left,
.wtfok-eye-right {
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform;

	animation:
		wtfok-eye-blink
		4.8s
		infinite;
}

.wtfok-eye-right {
	animation-delay: 0.04s;
}

/*
 * Only the black pupils move.
 * The white eye circles remain fixed.
 */
.wtfok-pupil {
	fill: #050505;
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform;
}

.wtfok-smile {
	fill: none;
	stroke: #050505;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Yellow WTFOK speech bubble */
.wtfok-bubble {
	position: relative;
	top: 4px;
	left: 19%;
	z-index: 8;

	padding: 19px 31px 17px;

	border: 4px solid #050505;
	border-radius: 18px;

	background: #f7f34c;
	color: #050505;

	font-family:
		"Acumin Variable Font",
		sans-serif;

	font-weight: 900;
	font-size: clamp(34px, 4.2vw, 35px);
	line-height: 1;
	letter-spacing: 0.005em;

	transform: rotate(-5deg);
	box-shadow: 11px 11px 0 #050505;

	pointer-events: none;

	animation:
		wtfok-bubble-float
		2.1s
		ease-in-out
		infinite;
}
@media screen and (max-width:767px){
    .wtfok-bubble{z-index:2 !important;}
}

.wtfok-bubble::after {
	content: "";
	position: absolute;
	left: 62px;
	bottom: -27px;

	width: 0;
	height: 0;

	border: 15px solid transparent;
	border-top-color: #050505;

	transform: rotate(9deg);
}

.wtfok-bubble::before {
	content: "";
	position: absolute;
	left: 66px;
	bottom: -18px;
	z-index: 2;

	width: 0;
	height: 0;

	border: 11px solid transparent;
	border-top-color: #f7f34c;

	transform: rotate(9deg);
}

/* Floating DRAG ME text */
.wtfok-drag-label {
	position: absolute !important;
	top: calc(100% + 6px) !important;
	left: 50% !important;
	z-index: 9;

	margin: 0 !important;

	color: #f7f34c;
	font-family: "Acumin Variable Font", sans-serif;
	font-size: clamp(14px, 1.45vw, 14px);
	font-weight: 600;
	letter-spacing: 0.07em;
	white-space: nowrap;
	margin-top:15px !important;
	/* text-shadow: 2px 2px 0 #050505;*/
	pointer-events: none;
	transform: translateX(-50%) !important;

	animation:
		wtfok-label-float
		1.55s
		ease-in-out
		infinite;
}

/* Comic click word */
.wtfok-click-word {
	position: absolute;
	left: 50%;
	top: 52%;
	z-index: 40;

	min-width: 150px;
	padding: 15px 22px;

	border: 5px solid #050505;
	background: #ff9966;
	color: #f7f34c;

	font-family:
		"Acumin Variable Font",
		sans-serif;

	font-weight: 900;
	font-size: clamp(34px, 4vw, 58px);
	line-height: 1;
	text-align: center;
	white-space: nowrap;

	box-shadow: 8px 8px 0 #050505;

	opacity: 0;
	pointer-events: none;

	transform:
		translate(-50%, -50%)
		rotate(-8deg)
		scale(0.2);
}

.wtfok-click-word.is-active {
	animation:
		wtfok-comic-pop
		720ms
		cubic-bezier(.18, .89, .32, 1.28)
		both;
}

.wtfok-particle {
	position: fixed;
	z-index: 99999;

	width: var(--particle-size);
	height: var(--particle-size);

	background: var(--particle-color);

	clip-path: polygon(
		50% 0%,
		61% 35%,
		98% 35%,
		68% 57%,
		79% 91%,
		50% 70%,
		21% 91%,
		32% 57%,
		2% 35%,
		39% 35%
	);

	pointer-events: none;

	transform: translate(-50%, -50%);

	animation:
		wtfok-particle-burst
		720ms
		ease-out
		forwards;
}

/* Decorative star */
.wtfok-deco-star {
	position: absolute;
	left: 30%;

	width: 28px;

	fill: #00ccff;
	stroke: #111111;
	stroke-width: 3.5;
	stroke-linejoin: round;

	filter: drop-shadow(3px 3px 0 #111111);

	transform-origin: center;
	will-change: transform;

	animation:
		wtfok-float-star
		3.5s
		ease-in-out
		infinite;
}

/* Lightning icons */
.wtfok-deco-bolt {
	animation:
		wtfok-float-bolt
		4.2s
		ease-in-out
		infinite;
}

.bolt-orange {
	position: absolute;
	width: 50px;
	margin-left: -15%;
	fill: #ff8b22;
}

.bolt-yellow {
	position: absolute;
	right: 0;

	width: 38px;
	margin-right: 20%;
	margin-top: -5%;

	fill: #ffd83d;
	animation-delay: -1.5s;
}

/* Eye blink */
@keyframes wtfok-eye-blink {
	0%,
	44%,
	48%,
	100% {
		transform: scaleY(1);
	}

	45%,
	47% {
		transform: scaleY(0.08);
	}
}

@keyframes wtfok-monster-float {
	0%,
	100% {
		transform:
			translateY(0)
			rotate(-0.8deg);
	}

	50% {
		transform:
			translateY(-13px)
			rotate(0.8deg);
	}
}

@keyframes wtfok-bubble-float {
	0%,
	100% {
		transform:
			translateY(0)
			rotate(-5deg);
	}

	50% {
		transform:
			translateY(-7px)
			rotate(-3deg);
	}
}

@keyframes wtfok-label-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes wtfok-comic-pop {
	0% {
		opacity: 0;

		transform:
			translate(-50%, -50%)
			rotate(-18deg)
			scale(0.15);
	}

	34% {
		opacity: 1;

		transform:
			translate(-50%, -58%)
			rotate(7deg)
			scale(1.3);
	}

	68% {
		opacity: 1;

		transform:
			translate(-50%, -62%)
			rotate(-3deg)
			scale(1);
	}

	100% {
		opacity: 0;

		transform:
			translate(-50%, -92%)
			rotate(5deg)
			scale(0.72);
	}
}

@keyframes wtfok-particle-burst {
	from {
		opacity: 1;

		transform:
			translate(-50%, -50%)
			rotate(0deg)
			scale(1);
	}

	to {
		opacity: 0;

		transform:
			translate(
				calc(-50% + var(--particle-x)),
				calc(-50% + var(--particle-y))
			)
			rotate(var(--particle-rotation))
			scale(0.15);
	}
}

@keyframes wtfok-float-star {
	0%,
	100% {
		transform:
			translateY(0)
			rotate(-8deg)
			scale(1);

		opacity: 0.9;
	}

	50% {
		transform:
			translateY(-12px)
			rotate(8deg)
			scale(1.15);

		opacity: 1;
	}
}

@keyframes wtfok-float-bolt {
	0%,
	100% {
		transform:
			translateY(0)
			rotate(-8deg)
			scale(1);
	}

	20% {
		transform:
			translateY(-6px)
			rotate(3deg)
			scale(1.04);
	}

	50% {
		transform:
			translateY(-14px)
			rotate(-5deg)
			scale(1.08);
	}

	75% {
		transform:
			translateY(-8px)
			rotate(6deg)
			scale(1.02);
	}
}

/* Tablet */
@media (max-width: 1024px) {
	.wtfok-monster-wrapper {
		min-height: 570px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.wtfok-monster-wrapper {
		min-height: 470px;
	}

	.wtfok-monster {
		position: absolute;
		top: 50%;
		right: -115px;

		width: min(470px, 115vw);
		margin: 0;

		transform:
			translate3d(
				var(--monster-x),
				calc(-50% + var(--monster-y)),
				0
			)
			rotate(var(--monster-rotate));
	}

	.wtfok-bubble {
		top: 10px;
		left: 17%;
		padding: 13px 22px 12px;
		font-size: 15px;
	}

	.wtfok-drag-label {
		top: 105px;
		left: 35%;
		font-size: 11px;
	}
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wtfok-svg,
	.wtfok-bubble,
	.wtfok-drag-label,
	.wtfok-eye-left,
	.wtfok-eye-right,
	.wtfok-deco-star,
	.wtfok-deco-bolt {
		animation: none;
	}
}

/* Full-width hero section */
.wtfok-peek-section {
	position: relative !important;
	overflow: hidden !important;
	min-height: 760px;
}

/* Monster column */
.wtfok-monster-wrapper {
	position: relative !important;
	min-height: 650px;
	overflow: visible !important;
}

/* Monster */
#wtfok-monster {
	--monster-x: 0px;
	--monster-y: 0px;
	--monster-rotate: 0deg;
	--peek-right-offset: 0px;

	position: absolute !important;
	top: 50% !important;
	right: var(--peek-right-offset) !important;
	left: auto !important;
	padding-top: 80px;

	width: clamp(540px, 43vw, 680px) !important;
	max-width: none !important;
	margin: 0 !important;

	transform:
		translate3d(
			var(--monster-x),
			calc(-80% + var(--monster-y)),
			0
		)
		rotate(var(--monster-rotate)) !important;

	transform-origin: center;
	will-change: transform;
}
.wtfok-drag-section {
    position: relative !important;
}

/* Tablet */
@media (max-width: 1024px) {
	.wtfok-peek-section {
		min-height: 650px;
	}

	.wtfok-monster-wrapper {
		min-height: 570px;
	}

	#wtfok-monster {
		width: 590px !important;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.wtfok-peek-section {
		min-height: 520px;
	}

}

.wtfok-drag-wrap {
	position: absolute;
	z-index: 999;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.wtfok-drag-wrap.is-dragging {
	cursor: grabbing;
}

.wtfok-drag-wrap .wtfok-bubble,
.wtfok-drag-wrap .wtfok-drag-text {
	pointer-events: none;
}

.rotateStar-black{
	position: absolute;
    right: 5%;
    bottom: 20px;
    width: 64px;
    height: 64px;
    background: #000;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: 18s linear 0s infinite normal none running wtfokSpinR;
}
@keyframes wtfokSpinR {
    100% {
        transform: rotate(-360deg);
    }
}

.rotateStar-yellow{
	position: absolute;
    right: -10px;
    top: -80px;
    width: 74px;
    height: 74px;
    background: #FFFF66;
    border: 0px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: 14s linear 0s infinite normal none running wtfokSpin;
    cursor: pointer;
}
@keyframes wtfokSpin{
	100% {
	    transform: rotate(360deg);
	}
}

/* Existing Elementor image widget */
.loud-icon-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    isolation: isolate;
}

/* Large pulse ring */
.loud-icon-box::before {
    content: "";
    position: absolute;
    inset: -4px;

    border: 4px solid #000;
    border-radius: 16px;

    animation: wtfokPulseRing 2.4s ease-out infinite;
    pointer-events: none;

    z-index: 0;
    transform-origin: center;
}

/* Keep the icon above the pulse ring */
.loud-icon-box img {
    position: relative;
    z-index: 1;
    display: block;
    transform: none !important;
}

@keyframes wtfokPulseRing {
    0% {
        transform: scale(0.9);
        opacity: 0.65;
    }

    70% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .loud-icon-box::before {
        animation: none;
    }
}
.noise-btn .nm-pr-btn-1 .text{
	text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
}
.title-tag h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    line-height: 1;
}

.dash-icon {
    display: block;
    width: 22px;
    height: 3px;
    background: #000;
    position: relative;
    top: -2px; /* Try 1px or -1px until it's visually centered */
}
.dash-icon.dark-blue {
    background: #00CCFF;
}
.dash-icon.grey{
	background: rgba(0, 0, 0, 0.55);
}

/*Services*/
.search-motion-wrap{
    position: relative; 
    width: 64px; 
    height: 64px; 
    flex: 0 0 auto; 
    animation: 3.5s ease-in-out 0s infinite normal none running wtfokWiggle;
}
@keyframes wtfokWiggle{
    0%, 100% {
        transform: rotate(-3deg);
    }
    
    50% {
        transform: rotate(3deg);
    }
}
.search-motion-wrap .layer-one{
    position: absolute; 
    left: 2px; 
    top: 2px; 
    width: 40px; 
    height: 40px; 
    border: 6px solid #FFFF66; 
    border-radius: 999px; 
    background: rgba(255, 255, 102, 0.12);
}
.search-motion-wrap .layer-two{
    position: absolute; 
    right: 4px; 
    bottom: 2px; 
    width: 22px; 
    height: 9px; 
    background: #FFFF66; 
    border-radius: 6px; 
    transform: rotate(45deg);
}
.search-motion-wrap .layer-three{
    position: absolute; 
    left: 15px; 
    top: 10px; 
    font-family: "Acumin Variable Font", Sans-serif; 
    font-weight:900;
    font-size: 20px; color: #FFFF66;
}
.check-box .elementor-icon-box-wrapper{
	border: 3px solid #000;
    border-radius: 20px;
    padding: 2px 10px;
    width:fit-content;
    max-width: 100%;
}
.check-box .elementor-icon{
	width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000 !important;
    border-radius: 50%;
    font-size: 10px !important;
    background-color: #00CCFF !important;
    fill: #000 !important;
    color: #000 !important;
}
.check-box .elementor-icon i{
	height: 0.9em !important;
}

.check-box.orange .elementor-icon{
	width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000 !important;
    border-radius: 50%;
    font-size: 10px !important;
    background-color: #FF9966 !important;
    fill: #000 !important;
    color: #000 !important;
}
.check-box.yellow .elementor-icon{
	width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000 !important;
    border-radius: 50%;
    font-size: 10px !important;
    background-color: #FFFF66 !important;
    fill: #000 !important;
    color: #000 !important;
}
.check-box.blue .elementor-icon-box-wrapper{
    border: 3px solid #000;
    border-radius: 20px;
    padding: 2px 10px;
    width:fit-content;
    max-width: 100%;
    background-color:#00CCFF;
}
.check-box.blue .elementor-icon-box-description{
    font-weight:900 !important;
}
.check-box.orange-right .elementor-icon-box-wrapper{
    border: 3px solid #000;
    border-radius: 20px;
    padding: 2px 10px;
    width:fit-content;
    max-width: 100%;
    background-color:#FF9966;
}
.check-box.orange-right .elementor-icon-box-description{
    font-weight:900 !important;
}
.check-box.yellow-right .elementor-icon-box-wrapper{
    border: 3px solid #000;
    border-radius: 20px;
    padding: 2px 10px;
    width:fit-content;
    max-width: 100%;
    background-color:#FFFF66;
}
.check-box.yellow-right .elementor-icon-box-description{
    font-weight:900 !important;
}
.check-box.yellow-equip .elementor-icon-box-wrapper{
    border: 3px solid #000;
    border-radius: 20px;
    padding: 2px 18px;
    width:fit-content;
    max-width: 100%;
    background-color:#FFFF66;
}
.check-box.yellow-equip .elementor-icon-box-description{
    font-weight:800 !important;
    letter-spacing:2px;
    font-size:13px !important;
}

.dotted-card{
	max-height: 230px; /* or height: 280px */
    display: flex;
    flex-direction: column !important;
    justify-content: center !important; /* Vertical center */
    text-align: center !important;
}
.dotted-card .elementor-flip-box__front{
    border-radius: 18px;
    border: 4px solid #fff;
    background-size: 18px 18px;
}
.dotted-card.blue .elementor-flip-box__front{
    background-color: #08bfee;
    background-image:radial-gradient(circle, rgba(0,0,0,.12) 2px, transparent 2px);
}
.dotted-card.orange .elementor-flip-box__front{
    background-color: #FF9966;
    background-image:radial-gradient(circle, rgba(0,0,0,.12) 2px, transparent 2px);
}
.dotted-card.yellow .elementor-flip-box__front{
    background-color: #FFFF66;
    background-image:radial-gradient(circle, rgba(0,0,0,.12) 2px, transparent 2px);
}
.dotted-card.light-blue .elementor-flip-box__front{
    background-color: #99CCCC;
    background-image:radial-gradient(circle, rgba(0,0,0,.12) 2px, transparent 2px);
}
.dotted-card .elementor-flip-box__back {
	width: fit-content;
    max-width: 100%;
    border:3px solid #00CCFF;
    border-radius: 20px;
    padding-left:10px !important;
    padding-right: 10px !important;
}
.dotted-card.blue .elementor-flip-box__back {
    border:3px solid #00CCFF;
}
.dotted-card.orange .elementor-flip-box__back {
    border:3px solid #FF9966;
}
.dotted-card.yellow .elementor-flip-box__back {
    border:3px solid #FFFF66;
}
.dotted-card.light-blue .elementor-flip-box__back {
    border:3px solid #99CCCC;
}
.dotted-card .elementor-flip-box__front 
.elementor-flip-box__layer__description{
	width: fit-content;
    max-width: 100%;
    border:3px solid #000;
    border-radius: 25px;
    color:#000;
    padding: 3px 12px 0px !important;
    letter-spacing: 1.3px !important;
}
.dotted-card.blue .elementor-flip-box__front 
.elementor-flip-box__layer__description{
    background: rgba(140, 232, 255, 0.5);
}
.dotted-card.orange .elementor-flip-box__front 
.elementor-flip-box__layer__description{
    background: rgba(255, 153, 102, 0.5);
}
.dotted-card.yellow .elementor-flip-box__front 
.elementor-flip-box__layer__description{
    background: rgba(255, 255, 102, 0.5);
}
.dotted-card.light-blue .elementor-flip-box__front 
.elementor-flip-box__layer__description{
    background: rgba(153, 204, 204, 0.5);
}
.dotted-card .elementor-flip-box__front 
.elementor-flip-box__layer__inner{
	display: inline-grid !important;
	justify-content: center;
}

.dotted-card .elementor-flip-box__back{
	background: #1F1F1F !important;	
}
.dotted-card .elementor-flip-box__back
.elementor-flip-box__layer__overlay{padding:15px !important;}
.dotted-card .elementor-flip-box__back .elementor-flip-box__layer__title{
	margin-bottom: 5px !important;
}
.dotted-card .elementor-flip-box__back .sub-title{
	font-size:19px;
	font-weight: 900 !important;
	color:#fff !important;
}
.dotted-card .elementor-flip-box__back .desc{
	line-height: 1.5em !important;
}
/* Keep the 3D flip setup */
.dotted-card .elementor-flip-box {
    position: relative;
    perspective: 1000px;
    cursor: pointer;
}

/* Smooth animation */
.dotted-card .elementor-flip-box__layer {
    transition: transform 0.6s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Default state */
.dotted-card .elementor-flip-box__front {
    transform: rotateY(0deg) !important;
}

.dotted-card .elementor-flip-box__back {
    transform: rotateY(180deg) !important;
}

/* Clicked state */
.dotted-card.is-flipped .elementor-flip-box__front {
    transform: rotateY(-180deg) !important;
}

.dotted-card.is-flipped .elementor-flip-box__back {
    transform: rotateY(0deg) !important;
}

/* Prevent Elementor hover from flipping it */
.dotted-card .elementor-flip-box:hover .elementor-flip-box__front {
    transform: rotateY(0deg) !important;
}

.dotted-card .elementor-flip-box:hover .elementor-flip-box__back {
    transform: rotateY(180deg) !important;
}

/* Keep clicked state even while hovering */
.dotted-card.is-flipped .elementor-flip-box:hover .elementor-flip-box__front {
    transform: rotateY(-180deg) !important;
}

.dotted-card.is-flipped .elementor-flip-box:hover .elementor-flip-box__back {
    transform: rotateY(0deg) !important;
}

.card-blue {
    background-color: #08BFEA;
}

.card-orange {
    background-color: #FFA373;
}

.card-yellow {
    background-color: #FFF46B;
}

.card-grey {
    background-color: #BFD7DC;
}

/*-------------Services seo page----------------*/

.seo-panel-progress{
	height: 22px;
	width: 100%;
    background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0px, rgba(0, 0, 0, 0.16) 12px, transparent 12px, transparent 26px) !important;
    border: 4px solid #000;
    border-radius: 8px;
}

/* ==================================
   PILLAR BODY DEFAULT
================================== */

.pillar-body {
    background-color: #f8f8f8;
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 13px,
        rgba(0, 0, 0, 0.12) 13px,
        rgba(0, 0, 0, 0.12) 16px
    );
}


/* ==================================
   PILLARS ROW
================================== */

.seo-pillars-row {
    align-items: flex-end;
    gap: 20px;
}


/* ==================================
   MAIN PILLAR
================================== */

.seo-pillar {
    position: relative;
    flex: 1 1 0;
    cursor: pointer;
    padding: 0 12px 16px;

    transition:
        transform 0.45s cubic-bezier(.22, 1, .36, 1),
        opacity 0.35s ease;

    will-change: transform;
}


/* ==================================
   ACTIVE PILLAR POSITION
================================== */

.seo-pillar[data-pillar="1"].is-active {
    transform: translateY(-10px) !important;
    z-index: 5;
}

.seo-pillar[data-pillar="2"].is-active {
    transform: translateY(-20px) !important;
    z-index: 5;
}

.seo-pillar[data-pillar="3"].is-active {
    transform: translateY(-30px) !important;
    z-index: 5;
}


/* ==================================
   PILLAR PIECES
================================== */

.seo-pillar > .pillar-top,
.seo-pillar > .pillar-bottom,
.seo-pillar > .pillar-body {
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* ==================================
   TOP CAP
================================== */

.seo-pillar > .pillar-top {
    position: relative;
    width: calc(100% + 24px);
    height: 15px;
    margin-left: -12px;
    margin-bottom: 14px;
    background-color: #f8f8f8;
    border: 3px solid #000;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 !important;
    
    box-shadow:
        0 10px 0 #000,
        -7px 15px 0 rgba(255, 255, 255, 0.15);
    
}
.seo-pillar > .pillar-top.second{
	width: 97%;
    margin: 0 auto;
    margin-top: -36px;
    border-radius: 0 !important;
}

.seo-pillar > .pillar-number{
	background: rgba(255, 255, 255, 0.65);
    border: 3px solid #000;
    border-radius: 999px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}



/* ==================================
   PILLAR BODY DEFAULT
================================== */

.seo-pillar > .pillar-body {
    position: relative;
    min-height: 220px;
    width: calc(100% - 24px);
    margin-top: -20px;
    margin-bottom: -30px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 28px 20px;

    background-color: #f8f8f8;
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 13px,
        rgba(0, 0, 0, 0.12) 13px,
        rgba(0, 0, 0, 0.12) 16px
    );
}


/* ==================================
   NUMBER BADGE
================================== */

/*
Add the class "pillar-number" to each number widget.
*/

.seo-pillar .pillar-number {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;

    background-color: rgba(255,255,255,0.5);
    border: 3px solid #000;
    border-radius: 50%;
    color: #000;

    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}


/* Elementor heading support */

.seo-pillar .pillar-number .elementor-heading-title {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    padding-top: 3px;
}


/* ==================================
   PILLAR TITLE
================================== */

/*
Add the class "pillar-title" to each pillar title widget.
*/

.seo-pillar .pillar-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 92%;
    margin: 0;
    padding: 7px 12px;

    background-color: rgba(255, 255, 255, 0.5);
    border: 3px solid #000;
    border-radius: 8px;
    color: #000;

    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}


/* Elementor heading support */

.seo-pillar .pillar-title .elementor-heading-title {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


/* ==================================
   BOTTOM CAP
================================== */

.seo-pillar > .pillar-bottom {
    position: relative;
    width: calc(100% + 24px);
    height: 25px !important;
    padding: 0;
    margin-left: -12px;
    margin-top: -22px;

    background-color: #f8f8f8;
    border: 3px solid #000;
    border-radius: 5px;
    box-shadow:
        0 10px 0 #000,
        -7px 15px 0 rgba(255, 255, 255, 0.15);
}
.seo-pillar > .pillar-bottom.inner{
	height: 15px !important;
	width: 97%;
	margin:0 auto;
	border-radius: 0 !important;
}


/* ==================================
   PILLAR 01 — BLUE
================================== */

.seo-pillar[data-pillar="1"].is-active > .pillar-top,
.seo-pillar[data-pillar="1"].is-active > .pillar-bottom,
.seo-pillar[data-pillar="1"].is-active > .pillar-body {
    background-color: #08bfea !important;
}


/* ==================================
   PILLAR 02 — ORANGE
================================== */

.seo-pillar[data-pillar="2"].is-active > .pillar-top,
.seo-pillar[data-pillar="2"].is-active > .pillar-bottom,
.seo-pillar[data-pillar="2"].is-active > .pillar-body {
    background-color: #ff9966 !important;
}


/* ==================================
   PILLAR 03 — YELLOW
================================== */

.seo-pillar[data-pillar="3"].is-active > .pillar-top,
.seo-pillar[data-pillar="3"].is-active > .pillar-bottom,
.seo-pillar[data-pillar="3"].is-active > .pillar-body {
    background-color: #ffff66 !important;
}


/* Keep the vertical pattern visible */

.seo-pillar.is-active > .pillar-body {
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 13px,
        rgba(0, 0, 0, 0.13) 13px,
        rgba(0, 0, 0, 0.13) 16px
    ) !important;
}


/* ==================================
   PANELS
================================== */

.seo-panel {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    position: relative;
    width: 100%;
    max-width: 780px;
    margin: 34px auto 0;
    padding: 42px 34px 32px;
    margin:0 auto;

    background-color: #202020;
    border-radius: 18px;
    transform: translateY(12px);
}


/* Active panel */

.seo-panel.is-active {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    animation: seoPanelIn 0.4s ease forwards;
}
.seo-panel[data-panel="1"].is-active,
.seo-panel[data-panel="2"].is-active,
.seo-panel[data-panel="3"].is-active{
	margin: 0 auto;
    border-radius: 20px;
    padding: 35px;
}


/* ==================================
   FLOATING PANEL LABEL
================================== */

/*
Add the class "panel-label" to the small
PILLAR 01 / PILLAR 02 / PILLAR 03 widget.
*/

.seo-panel .panel-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 140px;
    padding: 8px 18px;

    background-color: #fff;
    border: 3px solid #000;
    border-radius: 999px;
    color: #000;

    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}


/* Elementor heading support */

.seo-panel .panel-label .elementor-heading-title {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


/* ==================================
   PANEL HEADING
================================== */

/*
Add the class "panel-heading" to each
main panel heading.
*/

.seo-panel .panel-heading {
    margin-bottom: 8px;
}

.seo-panel .panel-heading .elementor-heading-title {
    margin: 0;
}

/* ==================================
   PANEL STICKY LABEL
================================== */
.pillar-label.blue .elementor-heading-title{
	background-color: #00CCFF;
}
.pillar-label.orange .elementor-heading-title{
	background-color: #FF9966;
}
.pillar-label.yellow .elementor-heading-title{
	background-color: #FFFF66;
}

.pillar-label .elementor-heading-title{
	width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    border: 3px solid #000;
    padding: 10px 30px 6px 30px;
    border-radius: 30px;
    margin-top: -55px;
    transform: rotate(-2deg);
  }

/* ==================================
   PANEL 01 — BLUE
================================== */

.seo-panel[data-panel="1"].is-active {
    background-color: #202020 !important;
    border: 4px solid #08bfea;
}

.seo-panel[data-panel="1"] .panel-label {
    background-color: #08bfea;
}

.seo-panel[data-panel="1"] .panel-heading,
.seo-panel[data-panel="1"] .panel-heading .elementor-heading-title {
    color: #08bfea;
}


/* ==================================
   PANEL 02 — ORANGE
================================== */

.seo-panel[data-panel="2"].is-active {
    background-color: #202020 !important;
    border: 4px solid #ff9966;
}

.seo-panel[data-panel="2"] .panel-label {
    background-color: #ff9966;
}

.seo-panel[data-panel="2"] .panel-heading,
.seo-panel[data-panel="2"] .panel-heading .elementor-heading-title {
    color: #ff9966;
}


/* ==================================
   PANEL 03 — YELLOW
================================== */

.seo-panel[data-panel="3"].is-active {
    background-color: #202020 !important;
    border: 4px solid #ffff66;
}

.seo-panel[data-panel="3"] .panel-label {
    background-color: #ffff66;
}

.seo-panel[data-panel="3"] .panel-heading,
.seo-panel[data-panel="3"] .panel-heading .elementor-heading-title {
    color: #ffff66;
}


/* ==================================
   PANEL ANIMATION
================================== */

@keyframes seoPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==================================
   TABLET
================================== */

@media (max-width: 1024px) {
    .seo-pillars-row {
        gap: 14px;
    }

    .seo-pillar > .pillar-body {
        min-height: 200px;
        padding: 25px 14px;
    }

    .seo-pillar .pillar-title {
        font-size: 17px;
    }
}


/* ==================================
   MOBILE
================================== */

@media (max-width: 767px) {

    .seo-pillars-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch;

        overflow-x: auto !important;
        overflow-y: hidden;

        gap: 12px;
        padding-bottom: 12px;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        /* Always start from the first card */
        scroll-behavior: smooth;
    }

    .seo-pillars-row > .seo-pillar {
        flex: 0 0 75% !important;
        width: 75% !important;
        min-width: 75% !important;
        max-width: 75% !important;

        scroll-snap-align: start;
    }
}


/*-----------SEM STACK -----------------*/
/* ==================================
   SEM STACKS ROW
================================== */

.sem-stacks-row {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}


/* ==================================
   MAIN CLICKABLE STACK
================================== */

.sem-stack {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    padding: 0 12px 16px;

    transform: translateY(0);

    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.35s ease;

    will-change: transform;
}

.sem-stack.is-active {
    /*transform: translateY(-14px);*/
    z-index: 5;
}

.sem-stack:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 6px;
}


/* ==================================
   STACK LABEL
================================== */

.sem-stack .stack-label {
    position: relative;
    z-index: 5;
    margin-bottom: 18px;
}

.sem-stack .stack-title {
    display: flex;
    justify-content: center;
    width: 100%;
}

.sem-stack .stack-title .elementor-heading-title {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 30px 6px;
    border: 3px solid #000;
    border-radius: 30px;
    color: #000;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}


/* Label colours */

.sem-stack[data-stack="1"] .stack-title .elementor-heading-title {
    background-color: #fff;
}

.sem-stack[data-stack="2"] .stack-title .elementor-heading-title {
    background-color: #fff;
}

.sem-stack[data-stack="3"] .stack-title .elementor-heading-title {
    background-color: #fff;
}


/* ==================================
   STACK GRAPHIC
================================== */

.sem-stack .stack-graphic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 190px;
}
.sem-stack.is-active .stack-graphic {
    min-height: 190px;
    gap: 18px;
}

.sem-stack:not(.is-active) .stack-graphic {
    min-height: 145px;
    gap: 8px;
}
.sem-stack .stack-number{margin-bottom: -30px !important;}


/* ==================================
   DOLLAR CIRCLE
================================== */

.sem-stack .stack-number {
    position: relative;
    z-index: 4;
    width: 64px;
    height: 64px;
    min-width: 64px;
    margin: 0 0 -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #fff;
    border: 3px solid #000;
    border-radius: 50%;
    color: #000;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.sem-stack .stack-number .elementor-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sem-stack .stack-number .elementor-heading-title {
    margin: 0;
    padding: 3px 0 0;
    color: inherit;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}


/* ==================================
   HTML WIDGET CONTAINING BLOCKS
================================== */

.sem-stack .stack-graphic .elementor-widget-html {
    width: 100%;
}

.sem-stack .stack-graphic .elementor-widget-html > .elementor-widget-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100%;
}


/* ==================================
   INDIVIDUAL BLOCKS
================================== */

.sem-stack .stack-block {
    display: block;
    width: 100%;
    height: 23px !important;
    min-height: 0;
    max-height: 23px !important;
    margin-top: -5px !important;
    box-sizing: border-box;
    background-color: #f8f8f8;
    border: 3px solid #000;
    border-radius: 7px;
    opacity: 1;
    transform: scaleY(1);
    transform-origin: bottom;
    overflow: hidden;
    box-shadow: 0 5px 0 #000;
    transition:
        height 0.35s cubic-bezier(.22, 1, .36, 1),
        max-height 0.35s cubic-bezier(.22, 1, .36, 1),
        margin 0.35s cubic-bezier(.22, 1, .36, 1),
        border-width 0.25s ease,
        opacity 0.25s ease,
        transform 0.35s cubic-bezier(.22, 1, .36, 1),
        background-color 0.3s ease;
}


/* Slight width differences for stacked appearance */

.sem-stack .block-1,.sem-stack .block-2,
.sem-stack .block-3,.sem-stack .block-4,
.sem-stack .block-5,.sem-stack .block-6,
.sem-stack .block-7 {
    width: 35%;
    margin: 0 auto;
}


/* ==================================
   INACTIVE = 4 BLOCKS
================================== */

.sem-stack:not(.is-active) .block-1,
.sem-stack:not(.is-active) .block-2,
.sem-stack:not(.is-active) .block-3 {
    height: 0;
    max-height: 0;
    margin-top: 0;
    border-width: 0;
    opacity: 0;
    transform: scaleY(0);
    box-shadow: none;
}


/* ==================================
   ACTIVE = 7 BLOCKS
================================== */

.sem-stack.is-active .stack-block {
    height: 23px;
    max-height: 23px;
    margin-top: -5px;
    border-width: 3px;
    opacity: 1;
    transform: scaleY(1);
}

.sem-stack.is-active .stack-number {
    transform: translateY(-3px);
}


/* Active colours */

.sem-stack[data-stack="1"].is-active .stack-block,
.sem-stack[data-stack="1"].is-active .stack-number {
    background-color: #08bfea;
}

.sem-stack[data-stack="2"].is-active .stack-block,
.sem-stack[data-stack="2"].is-active .stack-number {
    background-color: #ff9966;
}

.sem-stack[data-stack="3"].is-active .stack-block,
.sem-stack[data-stack="3"].is-active .stack-number {
    background-color: #ffff66;
}


/* ==================================
   ACTIVE STACK POSITION
================================== */

.sem-stack.is-active {
    transform: translateY(-12px);
    z-index: 5;
}

/* ==================================
   SEM PANEL
================================== */

.sem-panel {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    position: relative;
    width: 100%;
    max-width: 780px;
    margin: 34px auto 0;
    padding: 42px 34px 32px;
    margin:0 auto;

    background-color: #202020;
    border-radius: 18px;
    transform: translateY(12px);
}


/* Active SEM panel */

.sem-panel.is-active {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    animation: semPanelIn 0.4s ease forwards;
}
.sem-panel[data-panel="1"].is-active,
.sem-panel[data-panel="2"].is-active,
.sem-panel[data-panel="3"].is-active{
	margin: 0 auto;
    border-radius: 20px;
    padding: 35px;
}


/* ==================================
   FLOATING SEM PANEL LABEL
================================== */

/*
Add the class "panel-label" to the small
PILLAR 01 / PILLAR 02 / PILLAR 03 widget.
*/

.sem-panel .panel-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 140px;
    padding: 8px 18px;

    background-color: #fff;
    border: 3px solid #000;
    border-radius: 999px;
    color: #000;

    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}


/* Elementor heading support */

.sem-panel .panel-label .elementor-heading-title {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


/* ==================================
   SEM PANEL HEADING
================================== */

/*
Add the class "panel-heading" to each
main panel heading.
*/

.sem-panel .panel-heading {
    margin-bottom: 8px;
}

.sem-panel .panel-heading .elementor-heading-title {
    margin: 0;
}

/* ==================================
   SEM PANEL 01 — BLUE
================================== */

.sem-panel[data-panel="1"].is-active {
    background-color: #202020 !important;
    border: 4px solid #08bfea;
}

.sem-panel[data-panel="1"] .panel-label {
    background-color: #08bfea;
}

.sem-panel[data-panel="1"] .panel-heading,
.sem-panel[data-panel="1"] .panel-heading .elementor-heading-title {
    color: #08bfea;
}


/* ==================================
   SEM PANEL 02 — ORANGE
================================== */

.sem-panel[data-panel="2"].is-active {
    background-color: #202020 !important;
    border: 4px solid #ff9966;
}

.sem-panel[data-panel="2"] .panel-label {
    background-color: #ff9966;
}

.sem-panel[data-panel="2"] .panel-heading,
.sem-panel[data-panel="2"] .panel-heading .elementor-heading-title {
    color: #ff9966;
}


/* ==================================
   SEM PANEL 03 — YELLOW
================================== */

.sem-panel[data-panel="3"].is-active {
    background-color: #202020 !important;
    border: 4px solid #ffff66;
}

.sem-panel[data-panel="3"] .panel-label {
    background-color: #ffff66;
}

.sem-panel[data-panel="3"] .panel-heading,
.sem-panel[data-panel="3"] .panel-heading .elementor-heading-title {
    color: #ffff66;
}


/* ==================================
   SEM PANEL ANIMATION
================================== */

@keyframes semPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================================
   TABLET
================================== */

@media (max-width: 1024px) {
    .sem-stacks-row {
        gap: 14px;
    }

    .sem-stack {
        padding-right: 8px;
        padding-left: 8px;
    }

    .sem-stack .stack-title .elementor-heading-title {
        padding-right: 20px;
        padding-left: 20px;
    }

    .sem-stack .stack-graphic {
        min-height: 175px;
    }
}


/* ==================================
   MOBILE
================================== */

@media (max-width: 767px) {

    /* Main row */
    .sem-stacks-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        gap: 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        padding-bottom: 12px;
    }

    /* Each stack/card */
    .sem-stacks-row > .sem-stack {
        flex: 0 0 65% !important;

        width: 65% !important;
        min-width: 65% !important;

        scroll-snap-align: start;

        /* Prevent Elementor from shrinking */
        --flex-grow: 0 !important;
        --flex-shrink: 0 !important;
    }

    /* Remove active movement on mobile */
    .sem-stack.is-active {
        transform: none !important;
    }
    .sem-stack .stack-title .elementor-heading-title{font-size:15px !important;}
}
/* =========================================
   SEM STACK — REFERENCE STYLE OVERRIDES
========================================= */

/* Main row */
.sem-stacks-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Remove the space below each stack */
.sem-stack {
    padding: 0 12px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* Active stack moves upward */
.sem-stack.is-active {
    transform: translateY(-14px);
    z-index: 5;
}

/* =========================================
   LABEL
========================================= */

.sem-stack .stack-label {
    width: 100%;
    margin-bottom: 18px;
}

.sem-stack .stack-title .elementor-heading-title {
    width: fit-content;
    max-width: 100%;
    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px 12px;
    margin: 0 auto;

    background: #fff;
    border: 4px solid #000;
    border-radius: 8px;

    color: #000;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* =========================================
   STACK GRAPHIC
========================================= */

.sem-stack .stack-graphic,
.sem-stack.is-active .stack-graphic,
.sem-stack:not(.is-active) .stack-graphic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    width: 100%;
    min-height: 0;
    gap: 0;
}

/* Remove the conflicting -30px margin */
.sem-stack .stack-number {
    width: 58px;
    height: 58px;
    min-width: 58px;

    margin: 0 0 -2px !important;

    background: #fff;
    border: 4px solid #000;
    border-radius: 50%;

    position: relative;
    z-index: 4;
}

.sem-stack .stack-number .elementor-heading-title {
    padding: 2px 0 0;
    font-size: 29px;
    line-height: 1;
}

/* Do not separately move the active coin */
.sem-stack.is-active .stack-number {
    transform: none;
}

/* =========================================
   STACK BLOCKS
========================================= */

.sem-stack .stack-graphic .elementor-widget-html {
    width: 132px;
    max-width: 100%;
}

.sem-stack .stack-graphic
.elementor-widget-html > .elementor-widget-container {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

/* All blocks */
.sem-stack .stack-block,
.sem-stack .block-1,
.sem-stack .block-2,
.sem-stack .block-3,
.sem-stack .block-4,
.sem-stack .block-5,
.sem-stack .block-6,
.sem-stack .block-7 {
    display: block;

    width: 132px;
    max-width: 100%;
    height: 26px !important;
    min-height: 26px;
    max-height: 26px !important;

    margin: -12px auto 0 !important;

    box-sizing: border-box;
    background-color: #fff;
    border: 4px solid #000;
    border-radius: 999px;

    opacity: 1;
    transform: scaleY(1);
    transform-origin: bottom;
    overflow: hidden;

    /* Reference does not have the heavy bottom shadow */
    box-shadow: none;

    transition:
        height 0.35s cubic-bezier(.22, 1, .36, 1),
        min-height 0.35s cubic-bezier(.22, 1, .36, 1),
        max-height 0.35s cubic-bezier(.22, 1, .36, 1),
        margin 0.35s cubic-bezier(.22, 1, .36, 1),
        border-width 0.25s ease,
        opacity 0.25s ease,
        transform 0.35s cubic-bezier(.22, 1, .36, 1),
        background-color 0.3s ease;
}

/* The bottom block should sit on the striped platform */
.sem-stack .stack-block:last-child {
    margin-bottom: 0 !important;
}

/* Hidden blocks on inactive stacks */
.sem-stack:not(.is-active) .block-1,
.sem-stack:not(.is-active) .block-2,
.sem-stack:not(.is-active) .block-3 {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin-top: 0 !important;

    border-width: 0;
    opacity: 0;
    transform: scaleY(0);
}

/* All seven blocks visible on active stack */
.sem-stack.is-active .stack-block {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;

    margin-top: -12px !important;

    border-width: 4px;
    opacity: 1;
    transform: scaleY(1);
}

/* =========================================
   ACTIVE COLOURS
========================================= */

.sem-stack[data-stack="1"].is-active .stack-block,
.sem-stack[data-stack="1"].is-active .stack-number {
    background-color: #08bfea;
}

.sem-stack[data-stack="2"].is-active .stack-block,
.sem-stack[data-stack="2"].is-active .stack-number {
    background-color: #ff9966;
}

.sem-stack[data-stack="3"].is-active .stack-block,
.sem-stack[data-stack="3"].is-active .stack-number {
    background-color: #ffff66;
}

/* =========================================
   STRIPED PLATFORM
========================================= */

/*
Add the class "sem-stack-platform" to the Elementor
container or HTML element directly below the stacks.
*/

.sem-stack-platform {
    display: block;
    width: 100%;
    height: 22px;
    min-height: 22px;
    flex: 0 0 22px;

    margin-top: 0;
    box-sizing: border-box;

    background-color: #fff;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(0, 0, 0, 0.16) 0,
        rgba(0, 0, 0, 0.16) 12px,
        transparent 12px,
        transparent 26px
    );

    border: 4px solid #000;
    border-radius: 8px;

    position: relative;
    z-index: 1;
}

/*-----------SOCIAL SPEAKER----------------*/
/*
.social-speakers-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 26px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 8px 12px;
}
*/

.social-speaker {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transform: translateY(0);
    transition:
        transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
        opacity 0.3s ease;
}

.social-speaker.is-active {
    transform: translateY(-14px);
    z-index: 3;
}

.speaker-graphic-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 92px;
}

.social-speaker .speaker-number {
    width: 92px;
    height: 92px;
    min-width: 92px;
    flex: 0 0 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    background-color: #fff;
    border: 4px solid #000;
    border-radius: 16px;
    color: #000;
    box-sizing: border-box;
    transition:
        background-color 0.25s ease,
        transform 0.3s ease;
}

.social-speaker .speaker-number .elementor-widget-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-speaker .speaker-number .elementor-heading-title {
    margin: 0;
    padding: 4px 0 0;
    color: inherit;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.speaker-bars {
    height: 92px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
}

.speaker-bar {
    display: block;
    width: 12px;
    background-color: #fff;
    border: 3px solid #000;
    border-radius: 6px;
    box-sizing: border-box;
    transform-origin: center bottom;
    animation: none;
    transition:
        background-color 0.25s ease,
        height 0.2s ease,
        transform 0.2s ease;
}
/* ==================================
   PANEL STICKY LABEL
================================== */
.speaker-label.blue .elementor-heading-title{
	background-color: #00CCFF;
}
.speaker-label.orange .elementor-heading-title{
	background-color: #FF9966;
}
.speaker-label.yellow .elementor-heading-title{
	background-color: #FFFF66;
}

.speaker-label .elementor-heading-title{
width: fit-content;
max-width: 100%;
margin: 0 auto;
border: 3px solid #000;
padding: 10px 30px 6px 30px;
border-radius: 30px;
margin-top: -55px;
transform: rotate(-2deg);
}
/* Active SEM panel */

.social-panel.is-active {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    animation: semPanelIn 0.4s ease forwards;
}
.social-panel[data-panel="1"].is-active,
.social-panel[data-panel="2"].is-active,
.social-panel[data-panel="3"].is-active{
	margin: 0 auto;
    border-radius: 20px;
    padding: 35px;
}
.social-panel[data-panel="1"].is-active {
    border: 4px solid #08bfea;
}

.social-panel[data-panel="2"].is-active {
    border: 4px solid #ff9966;
}

.social-panel[data-panel="3"].is-active {
    border: 4px solid #ffff66;
}
/* Speaker Title */
.speaker-title .elementor-heading-title {
    width: fit-content;
    max-width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    margin: 0 auto;
    background: #fff;
    border: 4px solid #000;
    border-radius: 8px;
    color: #000;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Default inactive heights */

.speaker-bar.bar-1 {
    height: 20px;
}

.speaker-bar.bar-2 {
    height: 34px;
}

.speaker-bar.bar-3 {
    height: 48px;
}

.speaker-bar.bar-4 {
    height: 62px;
}

.speaker-bar.bar-5 {
    height: 76px;
}

/* Only active speaker bars animate */

.social-speaker.is-active .bar-1 {
    animation: speakerBar1 0.62s ease-in-out infinite alternate;
}

.social-speaker.is-active .bar-2 {
    animation: speakerBar2 0.74s ease-in-out -0.15s infinite alternate;
}

.social-speaker.is-active .bar-3 {
    animation: speakerBar3 0.58s ease-in-out -0.28s infinite alternate;
}

.social-speaker.is-active .bar-4 {
    animation: speakerBar4 0.8s ease-in-out -0.1s infinite alternate;
}

.social-speaker.is-active .bar-5 {
    animation: speakerBar5 0.68s ease-in-out -0.34s infinite alternate;
}

@keyframes speakerBar1 {
    from {
        height: 12px;
    }

    to {
        height: 28px;
    }
}

@keyframes speakerBar2 {
    from {
        height: 20px;
    }

    to {
        height: 44px;
    }
}

@keyframes speakerBar3 {
    from {
        height: 28px;
    }

    to {
        height: 58px;
    }
}

@keyframes speakerBar4 {
    from {
        height: 38px;
    }

    to {
        height: 72px;
    }
}

@keyframes speakerBar5 {
    from {
        height: 48px;
    }

    to {
        height: 84px;
    }
}

.social-speaker .speaker-title {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 !important;
}

.social-speaker .speaker-title .elementor-heading-title {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 7px 10px 4px 10px;
    background-color: #fff;
    border: 3px solid #000;
    border-radius: 8px;
    color: #000;
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
}

/* Active colours */

.social-speaker[data-stack="1"].is-active .speaker-number,
.social-speaker[data-stack="1"].is-active .speaker-bar {
    background-color: #08bfea;
}

.social-speaker[data-stack="2"].is-active .speaker-number,
.social-speaker[data-stack="2"].is-active .speaker-bar {
    background-color: #ff9966;
}

.social-speaker[data-stack="3"].is-active .speaker-number,
.social-speaker[data-stack="3"].is-active .speaker-bar {
    background-color: #ffff66;
}

/* Horizontal line */

.social-speaker-line {
    width: 100%;
    max-width: 1100px;
    height: 4px;
    margin: 8px auto 0;
    background-color: #08bfea;
    border-radius: 999px;
    transition: background-color 0.3s ease;
}

.social-speakers-wrapper:has(
    .social-speaker[data-stack="1"].is-active
) .social-speaker-line {
    background-color: #08bfea;
}

.social-speakers-wrapper:has(
    .social-speaker[data-stack="2"].is-active
) .social-speaker-line {
    background-color: #ff9966;
}

.social-speakers-wrapper:has(
    .social-speaker[data-stack="3"].is-active
) .social-speaker-line {
    background-color: #ffff66;
}

/* Panels */

.social-panel {
    display: none !important;
    width: calc(100% - 280px);
    max-width: 780px;
    margin: 28px auto 0;
    padding: 42px 34px 32px;
    position: relative;
    background-color: #202020;
    border-radius: 18px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
}

.social-panel.is-active {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    animation: socialPanelIn 0.4s ease forwards;
}

.social-panel[data-panel="1"].is-active {
    border: 4px solid #08bfea;
}

.social-panel[data-panel="2"].is-active {
    border: 4px solid #ff9966;
}

.social-panel[data-panel="3"].is-active {
    border: 4px solid #ffff66;
}

@keyframes socialPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced-motion settings */

@media (prefers-reduced-motion: reduce) {
    .social-speaker,
    .speaker-bar,
    .social-panel {
        transition: none;
    }

    .social-speaker.is-active .speaker-bar {
        animation: none;
    }
}
@media (max-width: 767px) {

    /* Main speakers row */
    .social-speakers-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        gap: 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        padding-bottom: 12px;
    }

    /* Individual speaker cards */
    .social-speakers-row > .social-speaker {
        flex: 0 0 65% !important;

        width: 60% !important;
        min-width: 60% !important;
        max-width: 60% !important;

        --flex-grow: 0 !important;
        --flex-shrink: 0 !important;

        scroll-snap-align: start;
    }

    /* Don't move active card on mobile */
    .social-speakers-row > .social-speaker.is-active {
        transform: none !important;
    }
}

/*----------WEB SERVICES---------------*/
/* ==================================
   BROWSER DOTS
================================== */
.browser-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.browser-dots span {
    display: block;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 4px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
}
/* ==================================
   CONTAINER
================================== */

.web-service {
    position: relative;
    cursor: pointer;
    transition:
        transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
        opacity 0.3s ease;
}

.web-service::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    width: 100%;
    height: 100%;
    background: #2b2b2b;
    border-radius: 14px;
    z-index: -1;
}

.web-service.is-active {
    transform: translateY(-18px);
    z-index: 3;
}
/* ==================================
   BROWSER TOP
================================== */
.web-service .browser-top {
    min-height: 40px;
    padding: 0 14px;
    background: #fff;
    border: 4px solid #000;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    box-sizing: border-box;
}
/* ==================================
   BROWSER BODY
================================== */
.web-service .browser-body {
    min-height: 160px;
    padding: 30px 20px;
    background: #fff;
    border: 4px solid #000;
    border-radius: 0 0 14px 14px;
    box-sizing: border-box;
}
/* ==================================
   BROWSER TOP DOTS DATA COLORS
================================== */
.web-service[data-stack="1"].is-active .browser-top {
    background-color: #08bfea;
}

.web-service[data-stack="2"].is-active .browser-top {
    background-color: #ff9966;
}

.web-service[data-stack="3"].is-active .browser-top {
    background-color: #ffff66;
}
.web-service:hover {
    transform: translateY(-8px);
}

.web-service.is-active:hover {
    transform: translateY(-20px);
}

/* ==================================
   WEB SERVICES PANEL
================================== */

.web-panel {
    display: none !important;
    width: calc(100% - 280px);
    max-width: 780px;
    margin: 28px auto 0;
    padding: 42px 34px 32px;
    position: relative;
    background-color: #202020;
    border-radius: 18px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
}
/* ==================================
   WEB PANEL LABEL
================================== */
.web-label.blue .elementor-heading-title{
	background-color: #00CCFF;
}
.web-label.orange .elementor-heading-title{
	background-color: #FF9966;
}
.web-label.yellow .elementor-heading-title{
	background-color: #FFFF66;
}

.web-label .elementor-heading-title{
width: fit-content;
max-width: 100%;
margin: 0 auto;
border: 3px solid #000;
padding: 10px 30px 6px 30px;
border-radius: 30px;
margin-top: -55px;
transform: rotate(-2deg);
}
/* ==================================
   WEB PANEL
================================== */
.web-panel.is-active {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    animation: semPanelIn 0.4s ease forwards;
}
.web-panel[data-panel="1"].is-active,
.web-panel[data-panel="2"].is-active,
.web-panel[data-panel="3"].is-active{
	margin: 0 auto;
    border-radius: 20px;
    padding: 35px;
}
.web-panel[data-panel="1"].is-active {
    border: 4px solid #08bfea;
}

.web-panel[data-panel="2"].is-active {
    border: 4px solid #ff9966;
}

.web-panel[data-panel="3"].is-active {
    border: 4px solid #ffff66;
}
@keyframes socialPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 767px) {

    /* Main row */
    .web-services-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        gap: 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        padding-bottom: 12px;
    }

    /* Each service card */
    .web-services-row > .web-service {
        flex: 0 0 65% !important;

        width: 65% !important;
        min-width: 65% !important;
        max-width: 65% !important;

        --flex-grow: 0 !important;
        --flex-shrink: 0 !important;

        scroll-snap-align: start;
    }

    /* Remove active card movement on mobile */
    .web-services-row > .web-service.is-active {
        transform: none !important;
    }

    /* Optional: visible scrollbar */
    .web-services-row::-webkit-scrollbar {
        height: 5px;
    }

    .web-services-row::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

    .web-services-row {
        scrollbar-width: thin;
    }
}
/* ==================================
   COPYWRITING SECTION
================================== */

.copywriting-wrapper {
    position: relative;
}

/* Cards row */
.copywriting-cards-row {
    display: flex;
    align-items: stretch;
    gap: 30px;
}

/* Main clickable card */
.copy-card {
    position: relative;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    transition:
        transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
        opacity 0.3s ease;
}

/* Existing middle Elementor container */
.copy-card > .stack-label {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Dark offset shadow */
.copy-card::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    width: 100%;
    height: 100%;
    background: #2b2b2b;
    border-radius: 22px;
    z-index: 0;
    pointer-events: none;
}

/* Speech-bubble tail */
.copy-card-inner::after {
    content: "";
    position: absolute;
    right: 42px;
    bottom: -14px;

    width: 26px;
    height: 26px;

    background-color: #fff;
    border-right: 4px solid #000;
    border-bottom: 4px solid #000;

    transform: rotate(45deg);
    transform-origin: center;

    z-index: 3;
    pointer-events: none;
    transition: background-color 0.3s ease;
}
.copy-card.is-active[data-copy="1"] .copy-card-inner,
.copy-card.is-active[data-copy="1"] .copy-card-inner::after {
    background-color: #08bfea !important;
}

.copy-card.is-active[data-copy="2"] .copy-card-inner,
.copy-card.is-active[data-copy="2"] .copy-card-inner::after {
    background-color: #ff9966 !important;
}

.copy-card.is-active[data-copy="3"] .copy-card-inner,
.copy-card.is-active[data-copy="3"] .copy-card-inner::after {
    background-color: #ffff66 !important;
}

/* Inner card */
.copy-card-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 230px;
    padding: 28px 28px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff !important;
    background-image: none !important;
    border: 4px solid #000;
    border-radius: 22px;
    box-sizing: border-box;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

/* Prevent an Elementor background overlay from covering the colour */
.copy-card-inner::before {
    background: transparent !important;
}

/* Card number */
.copy-card-number .elementor-heading-title {
    margin: 0;
    font-size: 54px;
    line-height: 1;
    font-weight: 900;
}

/* Card title */
.copy-card-title .elementor-heading-title {
    margin: 8px 0 0;
    font-size: 27px;
    line-height: 1.1;
    font-weight: 800;
}

/* Optional decorative line */
.copy-card-line {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 22px;
    height: 5px;
    background: #000;
    border-radius: 10px;
}

/* Hover state */

/* Active state */
.copy-card.is-active {
    transform: translateY(-18px);
    z-index: 5;
}

/* Active card 01 */
.copy-card.is-active[data-copy="1"] .copy-card-inner,
.copy-card.is-active[data-copy="1"]::after {
    background-color: #08bfea !important;
}

/* Active card 02 */
.copy-card.is-active[data-copy="2"] .copy-card-inner,
.copy-card.is-active[data-copy="2"]::after {
    background-color: #ff9966 !important;
}

/* Active card 03 */
.copy-card.is-active[data-copy="3"] .copy-card-inner,
.copy-card.is-active[data-copy="3"]::after {
    background-color: #ffff66 !important;
}


/* ==================================
   COPYWRITING PANELS
================================== */
.copy-panel {
    display: none !important;
    position: relative;
    width: 100%;
    max-width: 780px;
    margin: 34px auto 0;
    padding: 35px;
    box-sizing: border-box;
    background-color: #202020 !important;
    border-radius: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
}
/* Active panel */
.copy-panel[data-panel="1"].is-active,
.copy-panel[data-panel="2"].is-active,
.copy-panel[data-panel="3"].is-active{
	margin: 0 auto;
    border-radius: 20px;
    padding: 35px;
}
.copy-panel.is-active {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    animation: copyPanelIn 0.4s ease forwards;
}

/* Panel 01 */
.copy-panel[data-panel="1"].is-active {
    border: 4px solid #08bfea;
}

.copy-panel[data-panel="1"] .panel-heading,
.copy-panel[data-panel="1"] .panel-heading .elementor-heading-title {
    color: #08bfea;
}

/* Panel 02 */
.copy-panel[data-panel="2"].is-active {
    border: 4px solid #ff9966;
}

.copy-panel[data-panel="2"] .panel-heading,
.copy-panel[data-panel="2"] .panel-heading .elementor-heading-title {
    color: #ff9966;
}

/* Panel 03 */
.copy-panel[data-panel="3"].is-active {
    border: 4px solid #ffff66;
}

.copy-panel[data-panel="3"] .panel-heading,
.copy-panel[data-panel="3"] .panel-heading .elementor-heading-title {
    color: #ffff66;
}


/* ==================================
   PANEL LABELS
================================== */

.copywriting-label .elementor-heading-title {
    width: fit-content;
    max-width: 100%;
    margin: -55px auto 0;
    padding: 10px 30px 6px;
    color: #000;
    border: 3px solid #000;
    border-radius: 30px;
    transform: rotate(-2deg);
}

.copywriting-label.blue .elementor-heading-title {
    background-color: #00ccff;
}

.copywriting-label.orange .elementor-heading-title {
    background-color: #ff9966;
}

.copywriting-label.yellow .elementor-heading-title {
    background-color: #ffff66;
}


/* ==================================
   PANEL ANIMATION
================================== */

@keyframes copyPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==================================
   TABLET
================================== */

@media (max-width: 1024px) {
    .copywriting-cards-row {
        gap: 20px;
    }

    .copy-card-title .elementor-heading-title {
        font-size: 23px;
    }

    .copy-panel {
        width: calc(100% - 100px);
    }
}


/* ==================================
   MOBILE
================================== */

@media (max-width: 767px) {

    /* Main row */
    .copywriting-cards-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        gap: 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        padding-bottom: 12px;
    }

    /* Each card */
    .copywriting-cards-row > .copy-card {
        flex: 0 0 75% !important;

        width: 75% !important;
        min-width: 75% !important;
        max-width: 75% !important;

        --flex-grow: 0 !important;
        --flex-shrink: 0 !important;

        scroll-snap-align: start;
    }

    /* Remove active card movement on mobile */
    .copywriting-cards-row > .copy-card.is-active {
        transform: none !important;
    }

    /* Horizontal scrollbar */
    .copywriting-cards-row::-webkit-scrollbar {
        height: 5px;
    }

    .copywriting-cards-row::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

    .copywriting-cards-row {
        scrollbar-width: thin;
    }
}
/* ==================================
   BRANDING SECTION
================================== */

.branding-wrapper {
    position: relative;
}

/* Cards row */
.branding-cards-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
}

/* =========================================
   Clickable card
========================================= */
.branding-card {
    position: relative;
    flex: 1;
    min-width: 0;
    cursor: pointer;

    isolation: isolate;
    z-index: 0;

    transition:
        transform .35s cubic-bezier(.34, 1.56, .64, 1),
        opacity .3s ease;
}

/* Inner coloured card */
.branding-card-inner {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 105px;
    padding: 18px 24px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: #fff;
    border: 4px solid #000;
    border-radius: 20px;
    box-sizing: border-box;

    transition: all .3s ease;
}

.branding-card-inner.blue {
    background: #00CCFF;
}

.branding-card-inner.orange {
    background: #FF9966;
    border-radius: 70px;
    transform: rotate(6deg);
}

.branding-card-inner.yellow {
    background: #FFFF66;
}

/* Offset background layer */
.branding-card::after {
    content: "";
    position: absolute;
    inset: 0;

    transform: translate(8px, 8px);

    background: #2E2E2E;
    border-radius: 20px;

    z-index: -1;
    pointer-events: none;

    transition:
        background-color .3s ease,
        box-shadow .3s ease,
        border-radius .3s ease,
        transform .3s ease;
}

/* Match orange shape */
.branding-card:has(.branding-card-inner.orange)::after {
    border-radius: 70px;
    transform: translate(8px, 8px) rotate(6deg);
}

/* Inactive */
.branding-card:not(.is-active)::after {
    background: #2E2E2E;
    box-shadow: 1px 5px 2px rgba(255, 255, 255, .18);
}

/* Active */
.branding-card.is-active::after {
    background: #fff;
    box-shadow: none;
}
/* Number */
.branding-card-inner {
    align-items: center !important;
    text-align: center;
}

.branding-card-number {
    width: 55px !important;
    height: 55px !important;
    flex: 0 0 55px !important;

    margin: 0 auto 15px !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    background: #fff;
    border: 4px solid #000 !important;
    border-radius: 50%;
}

.branding-card-number .elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 32px;
    line-height: 1 !important;
    font-weight: 900;

    transform: translateY(2px);
}

/* Title */
.branding-card-title .elementor-heading-title {
    margin: 0;
    padding-top: 20px;
    font-size: 25px;
    line-height: 1.15;
    font-weight: 800;
    text-align: center;
}

/* Hover */
.branding-card:hover {
    transform: translateY(-6px) rotate(-1deg);
}

/* Active */
.branding-card.is-active {
    transform: translateY(-12px) rotate(-1deg);
    z-index: 5;
}

.branding-card.is-active:hover {
    transform: translateY(-14px) rotate(-1deg);
}


/* ==================================
   BRANDING PANELS
================================== */

.branding-panel {
    display: none !important;
    position: relative;

    width: 100%;
    max-width: 780px;
    margin: 32px auto 0;
    padding: 35px;

    background-color: #202020 !important;
    border-radius: 18px;
    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
}

.branding-panel.is-active {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    animation: brandingPanelIn 0.4s ease forwards;
}

.branding-panel[data-brand-panel="1"].is-active {
    border: 4px solid #00ccff;
}

.branding-panel[data-brand-panel="2"].is-active {
    border: 4px solid #ff9966;
}

.branding-panel[data-brand-panel="3"].is-active {
    border: 4px solid #ffff66;
}


/* Panel heading colours */
.branding-panel[data-brand-panel="1"] .panel-heading,
.branding-panel[data-brand-panel="1"] .panel-heading .elementor-heading-title {
    color: #00ccff;
}

.branding-panel[data-brand-panel="2"] .panel-heading,
.branding-panel[data-brand-panel="2"] .panel-heading .elementor-heading-title {
    color: #ff9966;
}

.branding-panel[data-brand-panel="3"] .panel-heading,
.branding-panel[data-brand-panel="3"] .panel-heading .elementor-heading-title {
    color: #ffff66;
}


/* ==================================
   PANEL LABEL
================================== */

.branding-label .elementor-heading-title {
    width: fit-content;
    max-width: 100%;
    margin: -55px auto 10px;
    padding: 9px 28px 6px;

    color: #000;
    border: 3px solid #000;
    border-radius: 30px;
    transform: rotate(-2deg);
}

.branding-label.brand-blue .elementor-heading-title {
    background-color: #00ccff;
}

.branding-label.brand-orange .elementor-heading-title {
    background-color: #ff9966;
}

.branding-label.brand-yellow .elementor-heading-title {
    background-color: #ffff66;
}


/* Animation */
@keyframes brandingPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================================
   PANELS
================================== */

.branding-panel {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    position: relative;
    width: 100%;
    max-width: 780px;
    margin: 34px auto 0;
    padding: 42px 34px 32px;
    margin:0 auto;

    background-color: #202020;
    border-radius: 18px;
    transform: translateY(12px);
}


/* Active panel */

.branding-panel.is-active {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    animation: seoPanelIn 0.4s ease forwards;
}
.branding-panel[data-brand-panel="1"].is-active,
.branding-panel[data-brand-panel="2"].is-active,
.branding-panel[data-brand-panel="3"].is-active{
	margin: 0 auto;
    border-radius: 20px;
    padding: 35px;
}
/* ==================================
   PANEL STICKY LABEL
================================== */
.branding-label.blue .elementor-heading-title{
	background-color: #00CCFF;
}
.branding-label.orange .elementor-heading-title{
	background-color: #FF9966;
}
.branding-label.yellow .elementor-heading-title{
	background-color: #FFFF66;
}

.branding-label .elementor-heading-title{
	width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    border: 3px solid #000;
    padding: 10px 30px 6px 30px;
    border-radius: 30px;
    margin-top: -55px;
    transform: rotate(-2deg);
  }



/* Tablet */
@media (max-width: 1024px) {
    .branding-cards-row {
        gap: 16px;
    }

    .branding-card-title .elementor-heading-title {
        font-size: 16px;
    }

    .branding-panel {
        width: calc(100% - 80px);
    }
}


/* Mobile */
@media (max-width: 767px) {

    /* Main row */
    .branding-cards-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        gap: 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        padding-bottom: 12px;
    }

    /* Each branding card */
    .branding-cards-row > .branding-card {
        flex: 0 0 75% !important;

        width: 75% !important;
        min-width: 75% !important;
        max-width: 75% !important;

        --flex-grow: 0 !important;
        --flex-shrink: 0 !important;

        scroll-snap-align: start;
    }

    /* Remove active movement on mobile */
    .branding-cards-row > .branding-card.is-active {
        transform: none !important;
    }

    /* Horizontal scrollbar */
    .branding-cards-row::-webkit-scrollbar {
        height: 5px;
    }

    .branding-cards-row::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

    .branding-cards-row {
        scrollbar-width: thin;
    }
}



.why-seo-wins .five-star-icon{
	flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: #00CCFF;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 400;
    color: #000;
}
.five-star-icon-orange{
	flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: #FF9966;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 400;
    color: #000;
}
.five-star-icon-yellow{
	flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: #FFFF66;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 400;
    color: #000;
}

.process-timeline {
	position: relative !important;
	overflow: visible !important;
	z-index: 1;
	min-height: 100px;
}

.process-timeline::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;

	left: 2% !important;
	right: 2% !important;
	top: 50px !important;
	height: 8px !important;

	border-radius: 8px;

	background-image: repeating-linear-gradient(
		90deg,
		#ffff66 0,
		#ffff66 26px,
		transparent 26px,
		transparent 50px
	) !important;

	background-size: 50px 8px !important;
	background-repeat: repeat-x !important;
	background-position: 0 0;

	animation-name: wtfokDash !important;
	animation-duration: 0.7s !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;

	z-index: 0;
	pointer-events: none;
}

@keyframes wtfokDash {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 50px 0;
	}
}

.process-step {
	position: relative;
	z-index: 2;
}

.process-circle {
	width: 64px !important;
	height: 64px !important;
	min-width: 64px;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	padding: 0 !important;
	margin-left: auto;
	margin-right: auto;

	border: 3px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
}

.process-circle > .elementor-heading-title {
	display: block;
	margin: 0 !important;
	padding: 0 !important;

	font-size: 22px;
	font-weight: 900;
	line-height: 1 !important;

	transform: translateY(2px);
}
.process-circle.blue{
    background:#08BFEA;
}

.process-circle.orange{
    background:#FF9966;
}

.process-circle.yellow{
    background:#F7F34C;
}

.process-circle.light-blue{
    background:#99CCCC;
}
@media (max-width: 767px) {

    .process-timeline {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px !important;
        position: relative;
    }

    /* Vertical animated line */
    .process-timeline::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;

        /* Center line with 60px number circles */
        left: 50px !important;
        transform: translateX(-50%) !important;

        right: auto !important;
        top: 30px !important;
        bottom: 30px !important;

        width: 8px !important;
        height: auto !important;

        background-image: repeating-linear-gradient(
            180deg,
            #ffff66 0,
            #ffff66 26px,
            transparent 26px,
            transparent 50px
        ) !important;

        background-size: 8px 50px !important;
        background-repeat: repeat-y !important;

        animation-name: wtfokDashVertical !important;
        animation-duration: 0.7s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;

        z-index: 0;
        pointer-events: none;
    }

    .process-timeline > .process-step {
        position: relative;
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto;

        column-gap: 18px;
        row-gap: 5px;

        align-items: start !important;
    }

    .process-step > .process-circle {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;

        margin: 0 !important;

        position: relative;
        z-index: 2;
    }

    .process-step > :nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .process-step > :nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }
}
/* Mobile vertical animation */
@keyframes wtfokDashVertical {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 50px;
    }
}

/* Parent containing all three cards */
.scope-cards-row {
	display: flex !important;
	align-items: stretch !important;
}

/* Three outer cards */
.scope-cards-row > .scope-card {
	display: flex !important;
	flex-direction: column !important;
	align-self: stretch !important;
	height: auto !important;
}

/* First inner container inside each card */
.scope-cards-row > .scope-card > .e-con {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 100% !important;
	justify-content: flex-start !important;
}

/* Push only the button container to the bottom */
.scope-cards-row > .scope-card > .e-con > .scope-button-wrap {
	margin-top: auto !important;
	margin-block-start: auto !important;
}
.check-box.most-popular .elementor-icon-box-wrapper{
	border: 3px solid #000;
    border-radius: 20px;
    padding: 2px 10px 0px;
    width: fit-content;
    max-width: 100%;
    background: #FFFF66;
}
.check-box.most-popular .elementor-icon-box-wrapper p{
	font-size:11px !important;
	text-transform: uppercase;
	font-weight: 800 !important;
	letter-spacing: 1.5px !important;
}
.nm-pr-btn-1 span.text{
	text-transform: uppercase !important;
	font-weight: 800 !important;
	letter-spacing: 0.5px !important;
}
.scope-button-wrap .scope-btn.black .nm-pr-btn-1 span.text{
	color:#000 !important;
	text-transform: uppercase;
}
.scope-button-wrap .scope-btn.blue .nm-pr-btn-1{
	background:#000 !important;
}
.scope-button-wrap .scope-btn.blue .nm-pr-btn-1:hover{
	background:#FF9966 !important;
}
.scope-button-wrap .scope-btn.blue .nm-pr-btn-1 span.text{
	color:#fff !important;
	text-transform: uppercase;
}
.scope-button-wrap .scope-btn.blue .nm-pr-btn-1:hover span.text{
	color:#000 !important;
	text-transform: uppercase;
}
.scope-button-wrap .scope-btn.blue .nm-pr-btn-1 span.icon{
	background:#00CCFF !important;
}
.check-box-two .elementor-icon-box-wrapper{
	border: 2px solid #000;
    border-radius: 20px;
    padding: 2px 15px;
    width:fit-content;
    max-width: 100%;
}
.check-box-two .elementor-icon-box-wrapper .elementor-icon-box-description{
	font-weight: 600 !important;
	text-transform: uppercase;
	font-size:12px !important;
	letter-spacing: -0.1px !important;
}
/*-----------About Us--------------*/
.home-counter .elementor-counter-title,.about-counter .elementor-counter-title{margin-top:-10px !important;}
.team-box {
   transition: transform 0.35s ease-in-out;
}
.team-box:hover {
    transform: rotate(-5deg) !important;
}
.team-photo {
	position: relative;
	z-index: 1;
	overflow: visible !important;
}

/* Blue card behind */
.team-photo::before {
	content: "";
	position: absolute;
	inset: 0;

	background: #08bfea;
	border: 4px solid #000;
	border-radius: 10px;

	transform: translate(12px, 12px);
	z-index: 0;
	pointer-events: none;
}

/* White card on top */
.team-photo .elementor-image-box-wrapper {
	position: relative;
	z-index: 2;

	background: #fff;
	border: 4px solid #000;
	border-radius: 10px;
	padding: 16px;

	box-sizing: border-box;
}

/* Keep image area white */
.team-photo .elementor-image-box-img {
	background: #fff;
}

/* Remove Elementor default spacing if needed */
.team-photo .elementor-image-box-img {
	margin: 0 0 15px !important;
}

.team-photo .elementor-image-box-content {
	position: relative;
	z-index: 3;
}
.team-photo .elementor-image-box-img img{
	width: 200px;
	border: 1px dashed #b5b5b5;
}
.four-rules{
	width: min(440px, 70%);
    height: 28px;
    border: 4px solid #000;
    border-radius: 6px;
    background-color: #fff;
    background-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 36px);
    background-size: 100% 13px;
    background-repeat: no-repeat;
    background-position: left bottom;
    margin: 0px 0px 44px;
}
.no-fluff-reports{
	position: relative; height: 80px;
}
.no-fluff-reports .first-circle{
	position: absolute; left: 0px; top: 24px; width: 42px; height: 42px; border-radius: 999px; background: #fff; border: 4px solid #000;
}
.no-fluff-reports .second-circle{
	position: absolute; left: 26px; top: 8px; width: 56px; height: 56px; border-radius: 999px; background: #fff; border: 4px solid #000;
}
.no-fluff-reports .third-circle{
	position: absolute; left: 60px; top: 26px; width: 40px; height: 40px; border-radius: 999px; background: #fff; border: 4px solid #000;
}
.no-fluff-reports .cross-line{
	position: absolute; left: -8px; top: 38px; width: 122px; height: 10px; background: #000; border-radius: 6px; transform: rotate(-22deg);
}
.no-fluff-reports .banned-text{
	position: absolute; right: 0px; top: 10px; transform: rotate(8deg); 
	font-family: "Acumin Variable Font"; 
	font-size: 14px; 
	font-weight: 900;
	letter-spacing: 0.08em; 
	color: #000; border: 3px solid #000; 
	border-radius: 6px; 
	padding: 3px 9px; 
	background: #fff;
}
.numbers-over-vibes{
	height: 80px; display: flex; align-items: flex-end; gap: 7px;
}
.numbers-over-vibes .block-one{
	width: 36px; 
	height: 50px; 
	background: #fff; 
	border: 4px solid #000; 
	border-radius: 8px; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	font-family: "Acumin Variable Font"; 
	font-weight: 900;
	font-size: 26px; color: #000;
}
.numbers-over-vibes .block-two{
	width: 36px; 
	height: 50px; 
	background: #fff; 
	border: 4px solid #000; 
	border-radius: 8px; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	font-family: "Acumin Variable Font";
	font-weight: 900; 
	font-size: 26px; color: #000;
}
.numbers-over-vibes .block-three{
	width: 36px; 
	height: 50px; 
	background: #fff; 
	border: 4px solid #000; 
	border-radius: 8px; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	font-family: "Acumin Variable Font"; 
	font-weight: 900;
	font-size: 26px; color: #000;
}
.numbers-over-vibes .block-four{
	font-family: "Acumin Variable Font";
	font-size: 30px; 
	font-weight: 900;
	color: #000; 
	margin: 0px 2px 4px 0px;
}
.numbers-over-vibes .vibes{
	display: flex; 
	align-items: 
	flex-end; gap: 5px; 
	margin-left: auto;
}
.vibes .block-five{
	width: 14px; 
	height: 22px; 
	background: #fff; 
	border: 3px solid #000; 
	border-radius: 4px;
}
.vibes .block-six{
	width: 14px; 
	height: 38px; 
	background: #fff; 
	border: 3px solid #000; 
	border-radius: 4px;
}
.vibes .block-seven{
	width: 14px; 
	height: 56px; 
	background: #FF9966; 
	border: 3px solid #000; 
	border-radius: 4px;
}
.loud-and-proud{
	position: relative; 
	height: 80px;
}
.loud-and-proud .lnd-wrap{
	position: absolute; 
	left: 0px; 
	top: 8px; 
	width: 62px; 
	height: 62px; 
	border-radius: 999px; 
	background: #fff; 
	border: 4px solid #000;
}
.lnd-wrap .block-one{
	position: absolute; 
	left: 50%; 
	top: 50%; 
	width: 7px; 
	height: 26px; 
	background: #000; 
	border-radius: 4px; 
	transform-origin: 50% 0px; 
	transform: translateX(-50%) rotate(140deg);
}
.loud-and-proud .block-two{
	position: absolute; 
	left: 74px; 
	top: 12px; 
	width: 22px; 
	height: 8px; 
	background: #000; 
	border-radius: 4px; 
	transform: rotate(-32deg);
}
.loud-and-proud .block-three{
	position: absolute; 
	left: 80px; 
	top: 32px; 
	width: 26px; 
	height: 8px; 
	background: #000; 
	border-radius: 4px;
}
.loud-and-proud .block-four{
	position: absolute; 
	left: 74px; 
	top: 52px; 
	width: 22px; 
	height: 8px; 
	background: #000; 
	border-radius: 4px; 
	transform: rotate(32deg);
}
.loud-and-proud .block-five{
	position: absolute; 
	right: 0px; 
	top: 6px; 
	transform: rotate(-7deg); 
	font-family: "Acumin Variable Font"; 
	font-size: 14px; 
	font-weight: 900;
	letter-spacing: 0.08em; 
	color: #000; 
	border: 3px solid #000; 
	border-radius: 6px; padding: 3px 9px; 
	background: #FFFF66;
}
.made-in-singapore{
	position: relative; 
	height: 80px;
}
.made-in-singapore .mis-wrap{
	position: absolute; 
	left: 0px; 
	top: 0px; 
	width: 76px; 
	height: 76px; 
	border: 4px dashed #000; 
	border-radius: 999px; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	transform: rotate(-10deg); 
	background: rgba(255, 255, 255, 0.55);
}
.mis-wrap .block-one{
	text-align: center; 
	font-family: "Acumin Variable Font";
	font-size: 13px; 
	font-weight: 900;
	line-height: 1.2; 
	letter-spacing: 0.05em; 
	color: #000;
}
.made-in-singapore .mis-wrap-two{
	position: absolute; 
	left: 88px; 
	top: 22px; 
	width: 44px; 
	height: 32px; 
	border: 3px solid #000; 
	border-radius: 6px; 
	overflow: hidden; 
	transform: rotate(4deg);
}
.mis-wrap-two .block-two{
	height: 50%; 
	background: rgb(238, 37, 54); 
	display: flex; 
	align-items: center; 
	padding-left: 4px;
}
.mis-wrap-two .block-two span{
	color: #fff; 
	font-size: 9px; 
	line-height: 1;
}
.mis-wrap-two .block-three{
	height: 50%; 
	background: #fff;
}
.can-lah{
	position: absolute; 
	right: 12px; 
	top: 8px; 
	transform: rotate(6deg); 
	font-family: "Acumin Variable Font"; 
	font-size: 14px; 
	font-weight: 900;
	letter-spacing: 0.08em; 
	color: #000; 
	border: 3px solid #000; 
	border-radius: 6px; 
	padding: 3px 9px; 
	background: #fff;
}
.team .designation{
	color:#99CCCC;
	font-size:12px;
	text-transform: uppercase;
	font-weight: 800;
}

/*--------Our Work -----------*/
.triangle-divider{
	position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 20px;
    background-image: linear-gradient(135deg, #000 25%, transparent 25%), linear-gradient(225deg, #000 25%, transparent 25%);
    background-size: 30px 20px;
    background-repeat: repeat-x;
}

.work-filter-btn {
	cursor: pointer;
}

.work-filter-btn.is-active{
	background: #08bfea;
}
.work-filter-item.is-filter-hidden {
	display: none !important;
}

.work-filter-item.is-filter-entering {
	animation: workFilterIn 0.4s
		cubic-bezier(.22, 1, .36, 1);
}

@keyframes workFilterIn {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.97);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
.our-work-counter-box .elementor-counter-title{
	font-size: 16px !important;
    text-transform: uppercase !important;
    margin-top: -15px !important;
    font-weight: 600 !important;
	margin-top:-15px !important;
}
@media screen and (max-width:767px){
    .our-work-counter-box .elementor-counter-title{margin-top:-5px !important;}
    .our-work-box .small-text{font-size:17px !important;line-height:27px !important;}
}
.our-work-box .small-text{
	color:rgba(0, 0, 0, 0.7);
	font-size:14px;
	font-weight: 400;
	line-height: 23px;
	display: block;
	margin-top: 15px;
}
.striped-line{
	width:100%;
	height:22px;
	border:4px solid #000;
	border-radius:8px;
	background:repeating-linear-gradient(
	    -45deg,
	    #D6D6D6 0 12px,
	    #fff 12px 24px
	);
}
.vibes-animation{
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    gap: 5px; flex: 0 0 auto; 
    transform: rotate(-4deg);
    margin-left:-40px;
}
.vibes-animation .animation-one{
    width: 8px;
    height: 26px;
    background: #99CCCC;
    border: 3px solid #000000;
    border-radius: 6px;
    opacity: 0.7;
    animation: 1.6s ease-in-out 0s infinite normal none running wtfokEq;
}
.vibes-animation .animation-two{
    width: 8px;
    height: 38px;
    background: #99CCCC;
    border: 3px solid #000000;
    border-radius: 6px;
    opacity: 0.7;
    animation: 1.6s ease-in-out 0.2s infinite normal none running wtfokEq;
}
.vibes-animation .animation-three{
    width: 8px;
    height: 20px;
    background: #99CCCC;
    border: 3px solid #000000;
    border-radius: 6px;
    opacity: 0.7;
    animation: 1.6s ease-in-out 0.4s infinite normal none running wtfokEq;
}
@keyframes wtfokEq{
    0%, 100% {
    transform: scaleY(0.45);
    }
    50% {
        transform: scaleY(1);
    }
}
.vibes-animation .cross-line{
    position: absolute;
    left: -12px;
    top: 50%;
    width: 74px;
    height: 8px;
    background: #FF9966;
    border: 3px solid #000000;
    border-radius: 6px;
    transform: translateY(-50%) rotate(-18deg);
}
.vibes-no-animation{
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
    flex: 0 0 auto;
    transform: rotate(3deg);
    margin-left: -115px;
}
.vibes-no-animation .no-animation-one{
    width: 14px;
    height: 18px;
    background: #00CCFF;
    border: 3px solid #000000;
    border-radius: 4px;
}
.vibes-no-animation .no-animation-two{
    width: 14px;
    height: 32px;
    background: #00CCFF;
    border: 3px solid #000000;
    border-radius: 4px;
}
.vibes-no-animation .no-animation-three{
    width: 14px;
    height: 48px;
    background: #FF9966;
    border: 3px solid #000000;
    border-radius: 4px;
}
.vibes-no-animation .no-animation-four{
    font-family: "Acumin Variable Font", Sans-serif;
    font-size: 24px;
    color: #FFFF66;
    margin-left: 2px;
}
.services-right-hero-container{
    position: relative;
    width: 100px;
    height: 100px;
    flex: 0 0 auto;
    margin-bottom: 4px;
}
.services-right-hero-container .inner-one{
    position: absolute;
    inset: 0px;
    border: 5px solid #00CCFF;
    border-radius: 999px;
}
.services-right-hero-container .inner-two{
    position: absolute;
    inset: 18px;
    border: 4px solid #00CCFF;
    border-radius: 999px;
}
.services-right-hero-container .inner-three{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #FF9966;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}
.services-right-hero-container .animation-spin{
    position: absolute;
    inset: -6px;
    animation: 16s linear 0s infinite normal none running wtfokSpin;
}
@keyframes wtfokSpin{
    100% {
        transform: rotate(360deg);
    }
}
.services-right-hero-container .animation-spin .spin-one{
    position: absolute;
    left: 50%;
    top: 0px;
    width: 6px;
    height: 16px;
    background: #00CCFF;
    border-radius: 4px;
    transform: translateX(-50%);
}
.services-right-hero-container .animation-spin .spin-two{
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: 6px;
    height: 16px;
    background: #00CCFF;
    border-radius: 4px;
    transform: translateX(-50%);
}
.services-right-hero-container .animation-spin .spin-three{
    position: absolute;
    left: 0px;
    top: 50%;
    width: 16px;
    height: 6px;
    background: #00CCFF;
    border-radius: 4px;
    transform: translateY(-50%);
}
.services-right-hero-container .animation-spin .spin-four{
    position: absolute;
    right: 0px;
    top: 50%;
    width: 16px;
    height: 6px;
    background: #00CCFF;
    border-radius: 4px;
    transform: translateY(-50%);
}
.services-right-hero-container .animation-ring{
    position: absolute;
    inset: 0px;
    border: 4px solid #00CCFF;
    border-radius: 999px;
    animation: 2.6s ease-out 0s infinite normal none running wtfokPulseRing;
}
@keyframes wtfokPulseRing{
   0% {
    transform: scale(0.9);
    opacity: 0.55;
    }
    
    70% {
        transform: scale(1.5);
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    } 
}
/*-----------contact us-----------*/
.contact-form label{
	display: block !important;
}
.contact-form .wpcf7-form-control-wrap{display: block !important;}
.contact-form .nm-faqs-1-contact-form .form-input {
	font-family: "Acumin Variable Font";
    height: 55px !important;
    background: #fff !important;
    border-radius: 30px;
    border: 3px solid #000;
}
.contact-form .nm-faqs-1-contact-form select{
    font-family: "Acumin Variable Font";
    height: 55px !important;
    background: #fff !important;
    border-radius: 30px;
    border: 3px solid #000;
    width:100%;
    padding-left:15px;
    padding-right:15px;
}

.contact-form label{
	font-family: "Acumin Variable Font";
	color: #000 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    font-weight: 600;
}
/* Typed text color */
.contact-form .wpcf7 input[type="text"],
.contact-form .wpcf7 input[type="email"],
.contact-form .wpcf7 textarea {
    color: #000000;
}

/* Placeholder color */
.contact-form .wpcf7 input::placeholder,
.contact-form .wpcf7 textarea::placeholder {
    color: #b5b5b5;
    opacity: 1; /* Required for Firefox */
}

/* Cross-browser support */
.contact-form .wpcf7 input::-webkit-input-placeholder,
.contact-form .wpcf7 textarea::-webkit-input-placeholder {
    color: #b5b5b5;
}

.contact-form .wpcf7 input::-moz-placeholder,
.contact-form .wpcf7 textarea::-moz-placeholder {
    color: #b5b5b5;
    opacity: 1;
}

.contact-form .wpcf7 input:-ms-input-placeholder,
.contact-form .wpcf7 textarea:-ms-input-placeholder {
    color: #b5b5b5;
}
/*footer*/
.main-footer .nm-footer-1-widget img{width:150px !important;}
.main-footer h4, .main-footer p, .nm-footer-1-widget .widget-title{font-family: "Acumin Variable Font", Sans-serif;}
.main-footer h4{color:#00CCFF !important;font-size:15px !important;text-transform: uppercase;}
.wa-ul.nm-footer-1-bottom-link li{display: inline-block !important;}
.nm-footer-1-menu a{color:#fff !important;}
.nm-footer-1-bottom-link a{
	font-family: "Acumin Variable Font", Sans-serif !important;
	color:#68696c !important;
}
.nm-footer-1-bottom-link .nm-p-1{
	font-family: "Acumin Variable Font", Sans-serif !important;
	color:#68696c !important;
	font-size:16px !important;
}
.nm-footer-1-bottom-link a:hover{
	color:#00CCFF !important;
}
@media screen and (min-width:768px){
	footer.pt-140{padding-top:80px !important;}
	.nm-footer-1-main.mb-80{margin-bottom: 50px !important;}
	.nm-footer-1-bottom{padding:20px 0 !important;}
}
@media screen and (max-width:767px){
    footer.pt-140{
        padding-top:50px !important;
        padding-left:15px;
        padding-right:15px;
    }
    .nm-footer-1-main{gap:20px !important;}
    .nm-footer-1-hire {
        margin-top: 10px !important;
    }
    .nm-footer-1-bottom{gap:0 !important;}
    .nm-header-1-wrap{margin-top:5px !important;}
}

/* ==========================================================
   WTFOK — Off-canvas menu: light colour refresh
   Mobile only (below 992px, matching your theme's d-lg-none).
   Keeps your theme's layout, sizes and fonts.
   ========================================================== */
@media (max-width: 991.98px) {

  .wa-offcanvas-area {
    --wt-ink: #12303A;      /* dark text colour for readability */
    --wt-cream: #F5ECD7;
    --wt-cyan: #00CCFF;
    --wt-teal: #99CCCC;
    --wt-orange: #FF9966;
    --wt-yellow: #FFFF66;
  }

  .nm-header-3-area.txa_sticky_header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 990;
    background-color: rgba(0, 0, 0, 1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(153, 204, 204, 0.3);
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .nm-header-3-action-link .nm-offcanvas-btn-1 {
    background: linear-gradient(135deg, #00CCFF 0%, #99CCCC 50%, #FF9966 100%);
    color: #12303A;
  }
  .nm-header-3-action-link .nm-offcanvas-btn-1:hover {
    background: linear-gradient(135deg, #FF9966 0%, #FFFF66 100%);
    color: #12303A;
  }

  .mobile-main-navigation ul li .dropdown-menu { margin-left: 0px !important; }
  .mobile-main-navigation ul li .dropdown-menu li { padding: 7px 0 !important; }

  /* Panel background */
  .wa-offcanvas-area .wa-offcanvas-wrap {
    background-color: var(--wt-cream);
    color: var(--wt-ink);
  }

  .wa-offcanvas-area.active {
    background-color: var(--wt-cream) !important;
  }

  /* Thin divider under the logo row */
  .wa-offcanvas-area .wa-offcanvas-top {
    border-bottom: 2px solid var(--wt-teal);
    padding-bottom: 16px;
    margin-top: 60px;
    margin-bottom: 30px !important;
  }

  /* Close button lines */
  .wa-offcanvas-area .wa-offcanvas-close span {
    background-color: var(--wt-ink);
    transition: background-color .2s ease;
  }
  .wa-offcanvas-area .wa-offcanvas-close:hover span {
    background-color: var(--wt-orange);
  }

  /* Parent menu links: no underline */
  .wa-offcanvas-area #m-main-nav > li > a,
  .wa-offcanvas-area #m-main-nav > li > a:hover {
    color: var(--wt-ink);
    text-decoration: none;
  }

  /* Submenu: soft card with divider lines, row highlight on hover */
  .wa-offcanvas-area #m-main-nav .dropdown-menu {
    margin-top: 6px;
    margin-bottom: 14px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(153, 204, 204, .7);
    border-radius: 14px;
    box-shadow: 0 8px 20px -14px rgba(18, 48, 58, .35);
  }
  .wa-offcanvas-area #m-main-nav .dropdown-menu > li {
    border-bottom: 1px solid rgba(153, 204, 204, .5);
  }
  .wa-offcanvas-area #m-main-nav .dropdown-menu > li:last-child {
    border-bottom: 0;
  }
  .wa-offcanvas-area #m-main-nav .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    color: rgba(18, 48, 58, .75);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
  }
  .wa-offcanvas-area #m-main-nav .dropdown-menu > li > a:hover {
    background-color: rgba(153, 204, 204, .35);
    color: var(--wt-ink);
    padding-left: 16px;
    text-decoration: none;
  }
  /* Current page: bold with an orange dot */
  .wa-offcanvas-area #m-main-nav .dropdown-menu > li.current-menu-item > a {
    color: var(--wt-ink);
    font-weight: 600;
  }
  .wa-offcanvas-area #m-main-nav .dropdown-menu > li.current-menu-item > a::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--wt-orange);
  }

  /* Dropdown arrow */
  .wa-offcanvas-area #m-main-nav .dropdown-btn {
    color: var(--wt-ink);
    transition: color .2s ease;
  }
  .wa-offcanvas-area #m-main-nav .dropdown-btn:hover {
    color: var(--wt-orange);
  }

  /* Social */
  .wa-offcanvas-area .wa-offcanvas-social-title {
    color: var(--wt-ink);
  }
  .wa-offcanvas-area .wa-offcanvas-social-link {
    color: var(--wt-ink);
    border-color: var(--wt-ink);
    transition: transform .2s ease;
  }
  .wa-offcanvas-area .wa-offcanvas-social-link:nth-child(4n+1) { background-color: var(--wt-cyan); }
  .wa-offcanvas-area .wa-offcanvas-social-link:nth-child(4n+2) { background-color: var(--wt-teal); }
  .wa-offcanvas-area .wa-offcanvas-social-link:nth-child(4n+3) { background-color: var(--wt-yellow); }
  .wa-offcanvas-area .wa-offcanvas-social-link:nth-child(4n+4) { background-color: var(--wt-orange); }
  .wa-offcanvas-area .wa-offcanvas-social-link:hover {
    color: var(--wt-ink);
    transform: translateY(-2px);
  }

  /* Keyboard focus */
  .wa-offcanvas-area a:focus-visible,
  .wa-offcanvas-area button:focus-visible {
    outline: 2px solid var(--wt-ink);
    outline-offset: 3px;
  }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .wa-offcanvas-area * { transition: none !important; }
}