#chatbox {
	line-height:24px !important;
}
.animated-typed-js-shortcode{
	font-size: 12px !important;
	line-height: 15px !important;
	font-family: "Lato" !important;
}


/* SVG reveal */

#portfolioGal .fwds3dcov-thumbnail {
	overflow:hidden !important;
	border-radius: 11px;
}
.title-svg-filter {
	font-family: itc-avant-garde-gothic-pro, sans-serif !important;
	font-weight:700 !important;
	letter-spacing: -.05em;
	text-transform:uppercase;
	font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "dlig";
  -webkit-font-feature-settings: "dlig";
  font-feature-settings: "dlig";
}

.title--up {
	font-style:normal;
}


.stratum-advanced-tabs__content {
	border-radius: 19px;
}
.mejs-controls {
    display: none !important;
}
/* tabs css */
.elementor-7403 .elementor-element.elementor-element-f1e3b7a .stratum-advanced-tabs .stratum-advanced-tabs__title {
	padding-bottom: 5%;
}
.elementor-7403 .elementor-element.elementor-element-f1e3b7a .stratum-advanced-tabs .stratum-advanced-tabs__navigation-item.active-nav {
	border-color: #7096A6;

}

.elementor-7403 .elementor-element.elementor-element-f1e3b7a .stratum-advanced-tabs .stratum-advanced-tabs__navigation-item:hover {
	border-color: #111C20;
}
/*expanding row */
.expandable-grid .extra-rows {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    padding: 0;
}

.expandable-grid.expanded .extra-rows {
    max-height: 2000px; /* Ensure this is large enough for your content */
    padding: 20px; /* Adjust to match your design */
}
.expand-button {
		font-family: "Space Grotesk", Sans-serif !important;
	text-transform:uppercase;
	font-weight: 700 !important;
	
}
.expand-button .tt-btn-light-outline {
	box-shadow: inset 0 0 0 2px #1D3037;
}


/*    3d gallery css */
#fwds3dcovDiv0 {
	text-align:center !important;
	font-size: 16px;
}

#fwds3dcovDiv1 {
	text-align:center !important;
	font-size: 16px;
}

/* Henry Logo   */
#henry-logo {
	height:200px;
	width:200px;
}

/*   theme css   */
.tt-pn-image {
	
	display:inline;
	border-radius: 50% !important;
	margin:auto !important;
	top: 0px !important;
	bottom: 30px !important;
	transition: width 0.3s ease-in-out, height 0.3s ease-in-out, opacity .3s ease-in-out; 
  width: 150px; 
	height: 150px;
	overflow:hidden;
	opacity: .7;
}
.tt-page-nav.tt-pn-scroll a:hover ~ .tt-pn-image {
    width: 170px;
		height: 170px;
		opacity: 1;
} 
.tt-pn-subtitle {
    position: relative; /* Ensure position is relative initially */
    top: 0; /* Initial top position */
    transition: top 0.5s ease-in-out, color 0.3s ease-in-out;
}

.companion-hero {
    filter: none !important;
}
.bgcolorVideo{
	
}
.tt-pn-subtitle {
	display:none;
}

.tt-page-nav.tt-pn-scroll a:hover ~ .tt-pn-subtitle {
    position:relative;
		
		color: #fff !important;
}
.tt-pn-title {
	opacity: .8 !important;
}

.tt-section {
    padding: 80px 0 10% 0 !important;
}
.tt-page-nav {
	border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 0px;
  text-shadow: none;
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
	padding: 15px 50px;
	border-radius: 60px;
	display:block;
	width:260px;
	text-align:center;
}

.tt-page-nav:hover {
	box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
  border: 1px solid;
  outline-offset: 20px;
  outline-color: rgba(255, 255, 255, .1);
	letter-spacing: 1px;
	font-size:.9em !important;
 	width: 450px;
}
.tt-btn-link > *, .tt-btn-link > *::after, .tt-btn-link:hover > *{
	font-size:.9em;
}

/* ---- Fox page: solid black body background ----
   All sections below the header macOS-mockup inherit their background from
   the body. Setting black here covers every transparent section at once
   without needing per-element overrides. The header section (87f020c) has its
   own video background that paints on top of the body colour. */
body.elementor-page-439 {
    background-color: #000000;
}

/*noise BG color control */
.postid-7403 .bg-noise,
.postid-635 .bg-noise,
.postid-4751 .bg-noise,
.postid-5246 .bg-noise,
.postid-4736 .bg-noise {
    display: none;
}
/* light page color controls */


.postid-635 .tt-pn-hover-title span::after,
.postid-4751 .tt-pn-hover-title span::after,
.postid-5246 .tt-pn-hover-title span::after,
.postid-4736 .tt-pn-hover-title span::after {
    background-color: #000 !important; /* Change the background color to black */
}

/* Keep the rest of the color changes as they are */
.postid-635 .tt-pn-subtitle,
.postid-4751 .tt-pn-subtitle,
.postid-5246 .tt-pn-subtitle,
.postid-4736 .tt-pn-subtitle,
.postid-635 .tt-pn-title,
.postid-4751 .tt-pn-title,
.postid-5246 .tt-pn-title,
.postid-4736 .tt-pn-title,
.postid-635 .tt-pn-hover-title,
.postid-4751 .tt-pn-hover-title,
.postid-5246 .tt-pn-hover-title,
.postid-4736 .tt-pn-hover-title,
.postid-635 .tt-main-menu-list > li > a,
.postid-4751 .tt-main-menu-list > li > a,
.postid-5246 .tt-main-menu-list > li > a,
.postid-4736 .tt-main-menu-list > li > a,
.postid-635 .tt-main-menu-list > li > .tt-submenu-trigger > a,
.postid-4751 .tt-main-menu-list > li > .tt-submenu-trigger > a,
.postid-5246 .tt-main-menu-list > li > .tt-submenu-trigger > a,
.postid-4736 .tt-main-menu-list > li > .tt-submenu-trigger > a {
    color: #000 !important; /* Keep existing color changes */
}

.pli-title{
	text-transform:uppercase;
	letter-spacing:-4px;
font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "ss03","liga", "clig";
  -webkit-font-feature-settings: "ss03","liga", "clig";
  font-feature-settings: "ss03","liga", "clig";
}

.postid-4751 .tt-page-nav,
.postid-5246 .tt-page-nav,
.postid-4736 .tt-page-nav,
.postid-635 .tt-page-nav {
  outline-color: rgba(0, 0, 0, 0);
  outline-color: rgba(0, 0, 0, 0.5);
}

.postid-4751 .tt-page-nav:hover,
.postid-5246 .tt-page-nav:hover,
.postid-4736 .tt-page-nav:hover,
.postid-635 .tt-page-nav:hover {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
  outline-color: rgba(0, 0, 0, .1);
}

.postid-4751 .tt-logo-dark,
.postid-5246 .tt-logo-dark,
.postid-4736 .tt-logo-dark,
.postid-635 .tt-logo-dark {
	display: block !important;
}

.postid-4751 .tt-logo-light,
.postid-5246 .tt-logo-light,
.postid-4736 .tt-logo-light,
.postid-635 .tt-logo-light {
	display: none !important;
}

.locked-text {
    position: fixed;
    top: 30vh;
    right: 10px; /* Adjust to position it correctly */
    z-index: 100;
    background-color: white; /* Ensure it stands out */
    width: 50vh; /* Set a fixed width */
    padding: 0; /* Add padding to match original spacing */
    
}

/* timeline css: -----*/

.the-heading {
	font-family: "Space Grotesk", Sans-serif !important;
	color: #C6F1FF !important;
	text-transform:capitalize;
	font-weight: 300 !important;
}

.zoomtimeline.mode-3dslider .yearlist-con .yearlist .year .the-year {
	font-family: itc-avant-garde-gothic-pro, sans-serif !important;
	font-weight:700 !important;
	text-transform: uppercase;
	letter-spacing: -.05em;
	font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "ss03","liga", "clig";
  -webkit-font-feature-settings: "ss03","liga", "clig";
  font-feature-settings: "ss03","liga", "clig";
}
.zoomtimeline.mode-3dslider .details-container > .detail .detail-excerpt {
	color: #70919C;
}
/* custom button animation: -----*/


.btnfos-5 {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 0px;
  text-shadow: none;
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
	padding: 15px 50px;
	font-family:'Space Grotesk' !important;
	font-weight:700 !important;
	text-transform:uppercase !important;
	font-size: .8em !important;
	border-radius: 60px;
	display:block;
	width:270px;
	text-align:center;
}

.btnfos-5:hover {
	box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
  border: 1px solid;
  outline-offset: 20px;
  outline-color: rgba(255, 255, 255, .1);
	letter-spacing: 1px;
	font-size:.9em !important;
 
}

/*         homepage animation      */
.canvas-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Adjust this depending on how much space you want */
    overflow: hidden;
    z-index: 1;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 1;
}

/* ============================================================
   Portfolio thumbnails: 3D tilt-to-face-cursor
   .tilt-perspective sets the 3D depth context (on the column);
   .tilt-plane is the plane that rotates (the image holder).
   JS drives the rotateX/rotateY inline; this supplies perspective,
   transform-style, and the settle-back transition.
   ============================================================ */
.tilt-perspective {
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

.tilt-plane {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* no easing lag while actively tracking the cursor */
.tilt-plane.is-tracking {
    transition: transform 0.12s ease-out;
}

/* keep the media inside the plane crisp and let the video fill it */
.tilt-plane .pli-image,
.tilt-plane .pli-zoom {
    transform-style: preserve-3d;
}

.tilt-plane .pli-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .tilt-plane {
        transition: none;
        transform: none !important;
    }
}

/* ---- Unified entrance: fade + slide-up ----
   Site-wide enter-viewport animation. site.js reveals .elementor-invisible
   elements on scroll by adding `.animated <_animation>`; every page's
   data-settings animation now resolves to this single name (cath-slide-in) —
   a gentle 50px rise while fading in — so the whole site shares one
   entrance feel. */
@keyframes cath-slide-in {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: none; }
}

.animated.cath-slide-in {
    animation: cath-slide-in 1550ms ease both;
}

@media (prefers-reduced-motion: reduce) {
    .animated.cath-slide-in {
        animation: none;
    }
}

/* ---- Content Studio interactive-demo video: kill the 1px black seam ----
   Elementor paints the hosted <video> box #000. The wrapper is locked to a
   fractional aspect-ratio (1.77777), so a sub-pixel gap between the box and
   the covering video leaves a thin black line on the right edge — glaring
   against this section's white background. The video is object-fit:cover,
   so a transparent box removes the black without exposing any real gap. */
.elementor-5246 .elementor-element.elementor-element-0632d2f .elementor-wrapper video {
    background-color: transparent;
}

/* ---- CyberU CMS/CCMS hero: flat background color ----
   The hero was an EAE animated-gradient (data-color) + video background, but
   neither renders in this static rebuild (EAE/video plugin JS dropped), so the
   section had no fill. Set the chosen flat cyan. The dormant
   .eae-animated-gradient-yes only animates background-size, so it can't
   override this color. */
.elementor-4751 .elementor-element.elementor-element-a8de2eb {
    background-color: rgba(0, 209, 255, 0.42);
}

/* ---- CyberU hero: flat background color ----
   Both video containers don't render in this static rebuild, so they had no
   fill. Give them the light grey the device mockups sit on (#e4e4e4 — a grey
   already used in theme.css). adfaac6 is the outer wrapper with 14vw padding
   that was showing as the white bar at the very top of the page. */
.elementor-635 .elementor-element.elementor-element-adfaac6,
.elementor-635 .elementor-element.elementor-element-57872f6 {
    background-color: #e4e4e4;
}

/* ---- CyberU pre-canvas sections: opaque white background ----
   The TRX bg-canvas is position:fixed; z-index:-1, viewport-wide. When the
   "Establishing a roadmap" section (a43f863) scrolls into view the purple
   circle begins drawing across the whole viewport — including whatever is
   still visible above it. Sections c221a70, 44669c5, and 233c0c4 inherit the
   body white but don't block the fixed canvas because the smooth-scroll
   container's transform makes position:fixed resolve to the container, not
   the viewport. Explicit background-color gives them the opacity they need. */
.elementor-635 .elementor-element.elementor-element-c221a70,
.elementor-635 .elementor-element.elementor-element-44669c5,
.elementor-635 .elementor-element.elementor-element-233c0c4 {
    background-color: #fff;
}

/* ---- CyberU canvas-zone adaptive text colours ----
   Sections 08d5444 ("Redefining the UI" heading) and 81093d9 (two paragraph
   columns) sit inside the purple bg-canvas zone. TRX bg-canvas.js adds
   trx_effects_bg_canvas_covered to every section between the start and end
   elements once JS runs, making their backgrounds transparent so the purple
   canvas shows through.
   Default: dark text — readable on any light/grey fallback (pre-JS or
   no-JS). Covered override: white — matches the purple canvas behind them. */
.elementor-635 .elementor-element.elementor-element-763a6a7 .elementor-heading-title {
    color: #000000;
}
.elementor-635 .elementor-element.elementor-element-d825945,
.elementor-635 .elementor-element.elementor-element-97cfc46 {
    color: #5D5D5D;
}

.elementor-635 .trx_effects_bg_canvas_covered .elementor-element.elementor-element-763a6a7 .elementor-heading-title {
    color: #FFFFFF;
}
.elementor-635 .trx_effects_bg_canvas_covered .elementor-element.elementor-element-d825945,
.elementor-635 .trx_effects_bg_canvas_covered .elementor-element.elementor-element-97cfc46 {
    color: #FFFFFF;
}

/* ---- CyberU "Developing an Identity" container: desktop top padding ----
   This flex container only defines --padding-top inside the tablet/mobile
   media queries, so on desktop it resolves to 0. Add a desktop value using
   the same --padding-top var Elementor consumes; scoped to >1024px so the
   existing 4%/2% breakpoints are untouched. */
@media (min-width: 1025px) {
    .elementor-635 .elementor-element.elementor-element-c221a70 {
        --padding-top: 19px;
    }
}