/*-----------------------------------------------------------------------------------
	Jamie Rothwell Portfolio
	About: A shiny new Blocs website.
	Author: Jamieson Rothwell
	Version: 1.0
	Built with Blocs
-----------------------------------------------------------------------------------*/
body{
	margin:0;
	padding:0;
    background:#FFFFFF;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.page-container{overflow: hidden;} /* Prevents unwanted scroll space when scroll FX used. */
a,button{transition: background .3s ease-in-out;outline: none!important;} /* Prevent blue selection glow on Chrome and Safari */
a:hover{text-decoration: none; cursor:pointer;}
.scroll-fx-lock-init{position:fixed!important;top: 0;bottom: 0;left: 0;right: 0;z-index:99999;} /* ScrollFX Lock */
.blocs-grid-container{display: grid!important;grid-template-columns: 1fr 1fr;grid-template-rows: auto auto;column-gap: 1.5rem;row-gap: 1.5rem;} /* CSS Grid */
nav .dropdown-menu .nav-link{color:rgba(0,0,0,0.6)!important;} /* Maintain Downdown Menu Link Color in Navigation */
[data-bs-theme="dark"] nav .dropdown-menu .nav-link{color:var(--bs-dropdown-link-color)!important;} /* Maintain Downdown Menu Link Color in Navigation in Darkmode */


/* Preloader */

.page-preloader{position: fixed;top: 0;bottom: 0;width: 100%;z-index:100000;background:#FFFFFF url("img/pageload-spinner.gif") no-repeat center center;animation-name: preloader-fade;animation-delay: 2s;animation-duration: 0.5s;animation-fill-mode: both;}
.preloader-complete{animation-delay:0.1s;}
@keyframes preloader-fade {0% {opacity: 1;visibility: visible;}100% {opacity: 0;visibility: hidden;}}

/* = Web Fonts
-------------------------------------------------------------- */

@font-face {
	font-family:'LibreFranklin-Bold';
	src: url('./fonts/LibreFranklin-Bold/LibreFranklin-Bold.ttf');
	src: url('./fonts/LibreFranklin-Bold/LibreFranklin-Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

@font-face {
	font-family:'LibreFranklin-Regular';
	src: url('./fonts/LibreFranklin-Regular/LibreFranklin-Regular.ttf');
	src: url('./fonts/LibreFranklin-Regular/LibreFranklin-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

@font-face {
	font-family:'LibreFranklin-Medium';
	src: url('./fonts/LibreFranklin-Medium/LibreFranklin-Medium.ttf');
	src: url('./fonts/LibreFranklin-Medium/LibreFranklin-Medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

@font-face {
	font-family:'Manrope-Regular';
	src: url('./fonts/Manrope-Regular/Manrope-Regular.ttf');
	src: url('./fonts/Manrope-Regular/Manrope-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

/* = Blocs
-------------------------------------------------------------- */

.bloc{
	width:100%;
	clear:both;
	background: 50% 50% no-repeat;
	padding:0 20px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position:relative;
	display:flex;
}
.bloc .container{
	padding-left:0;
	padding-right:0;
	position:relative;
}


/* Sizes */

.bloc-lg{
	padding:100px 20px;
}
.bloc-md{
	padding:50px 20px;
}
.bloc-sm{
	padding:20px;
}

/* = Full Screen Blocs 
-------------------------------------------------------------- */

.bloc-fill-screen{
	min-height:100vh;
	display: flex;
	flex-direction: column;
	padding-top:20px;
	padding-bottom:20px;
}
.bloc-fill-screen > .container{
	align-self: flex-middle;
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
}
.bloc-fill-screen > .container > .row{
	flex-grow: 1;
	align-self: center;
	width:100%;
}
.bloc-fill-screen .fill-bloc-top-edge, .bloc-fill-screen .fill-bloc-bottom-edge{
	flex-grow: 0;
}
.bloc-fill-screen .fill-bloc-top-edge{
	align-self: flex-start;
}
.bloc-fill-screen .fill-bloc-bottom-edge{
	align-self: flex-end;
}

/* = Full Width Blocs 
-------------------------------------------------------------- */

.full-width-bloc{
	padding-left:0;
	padding-right:0;
}
.full-width-bloc .row{
	margin-left:0;
	margin-right:0;
}
.full-width-bloc .container{
	width:100%;
	max-width:100%!important;
}
.full-width-bloc .carousel img{
	width:100%;
	height:auto;
}


/* Background Styles */

.bg-center,.bg-l-edge,.bg-r-edge,.bg-t-edge,.bg-b-edge,.bg-tl-edge,.bg-bl-edge,.bg-tr-edge,.bg-br-edge,.bg-repeat{
	-webkit-background-size: auto!important;
	-moz-background-size: auto!important;
	-o-background-size: auto!important;
	background-size: auto!important;
}


/* Video Background Styles */

.video-bg-container, .bloc-video{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: -50%;
	overflow: hidden;
	transform: translateX(-50%);
	-webkit-transform:translateX(-50%);
}
.bloc-video, .video-bg-container iframe{
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	z-index: 0;
}


/* Light theme */

.d-bloc .card,.l-bloc{
	color:rgba(0,0,0,.5);
}
.d-bloc .card button:hover,.l-bloc button:hover{
	color:rgba(0,0,0,.7);
}
.l-bloc .icon-round,.l-bloc .icon-square,.l-bloc .icon-rounded,.l-bloc .icon-semi-rounded-a,.l-bloc .icon-semi-rounded-b{
	border-color:rgba(0,0,0,.7);
}
.d-bloc .card .divider-h span,.l-bloc .divider-h span{
	border-color:rgba(0,0,0,.1);
}
.d-bloc .card .a-btn,.l-bloc .a-btn,.l-bloc .navbar a,.l-bloc a .icon-sm, .l-bloc a .icon-md, .l-bloc a .icon-lg, .l-bloc a .icon-xl, .l-bloc h1 a, .l-bloc h2 a, .l-bloc h3 a, .l-bloc h4 a, .l-bloc h5 a, .l-bloc h6 a, .l-bloc p a{
	color:rgba(0,0,0,.6);
}
.d-bloc .card .a-btn:hover,.l-bloc .a-btn:hover,.l-bloc .navbar a:hover, .l-bloc a:hover .icon-sm, .l-bloc a:hover .icon-md, .l-bloc a:hover .icon-lg, .l-bloc a:hover .icon-xl, .l-bloc h1 a:hover, .l-bloc h2 a:hover, .l-bloc h3 a:hover, .l-bloc h4 a:hover, .l-bloc h5 a:hover, .l-bloc h6 a:hover, .l-bloc p a:hover{
	color:rgba(0,0,0,1);
}
.l-bloc .navbar-toggle .icon-bar{
	color:rgba(0,0,0,.6);
}
.d-bloc .card .btn-wire,.d-bloc .card .btn-wire:hover,.l-bloc .btn-wire,.l-bloc .btn-wire:hover{
	color:rgba(0,0,0,.7);
	border-color:rgba(0,0,0,.3);
}


/* = NavBar
-------------------------------------------------------------- */

/* Navbar Icon */
.svg-menu-icon{
	fill: none;
	stroke: rgba(0,0,0,0.5);
	stroke-width: 2px;
	fill-rule: evenodd;
}
.navbar-dark .svg-menu-icon{
	stroke: rgba(255,255,255,0.5);
}
.menu-icon-thin-bars{
	stroke-width: 1px;
}
.menu-icon-thick-bars{
	stroke-width: 5px;
}
.menu-icon-rounded-bars{
	stroke-width: 3px;
	stroke-linecap: round;
}
.menu-icon-filled{
	fill: rgba(0,0,0,0.5);
	stroke-width: 0px;
}
.navbar-dark .menu-icon-filled{
	fill: rgba(255,255,255,0.5);
}
.navbar-toggler-icon{
	background: none!important;
	pointer-events: none;
	width: 33px;
	height: 33px;
}
/* Handle Multi Level Navigation */
.dropdown-menu .dropdown-menu{
	border:none}
@media (min-width:576px){
	
.navbar-expand-sm .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,.15);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-sm .dropdown-menu .submenu-left{
	right:100%;
	left:auto}}@media (min-width:768px){
	.navbar-expand-md .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,.15);
	border:1px solid rgba(0,0,0,.15);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-md .dropdown-menu .submenu-left{
	right:100%;
	left:auto}}@media (min-width:992px){
	.navbar-expand-lg .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,.15);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-lg .dropdown-menu .submenu-left{
	right:100%;
	left:auto}
}

/* = Buttons
-------------------------------------------------------------- */

.btn-d,.btn-d:hover,.btn-d:focus{
	color:#FFF;
	background:rgba(0,0,0,.3);
}

.btn-wire{
	background:transparent!important;
	border:2px solid transparent;
}
.btn-wire:hover{
	background:transparent!important;
	border:2px solid transparent;
}
.a-block{
	width:100%;
	text-align:left;
	display: inline-block;
}
.text-center .a-block{
	text-align:center;
}

/* = Icons
-------------------------------------------------------------- */
.icon-md{
	font-size:30px!important;
}

/* Rounded Image */
.img-rd-md{
	border-radius:20px;
}
.img-rd-lg{
	border-radius:34px;
}

/* = Text & Icon Styles
-------------------------------------------------------------- */
.pressed-t{
	text-shadow:0 1px 0 #FFF;
}
.blockquote{
	padding:0 20px;
	border-left:2px solid;
}
.blockquote.text-end{
	border-left:0;
	border-right:2px solid;
}

/* = Lists
-------------------------------------------------------------- */
.list-horizontal-layout li{
	display:inline-block;
	margin:0 10px;
}
.list-sp-md li:last-child,.list-sp-lg li:last-child,.list-sp-xl li:last-child{
	padding-bottom:0;
}

/* = Cards
-------------------------------------------------------------- */
.card-sq, .card-sq .card-header, .card-sq .card-footer{
	border-radius:0;
}
.card-rd{
	border-radius:30px;
}
.card-rd .card-header{
	border-radius:29px 29px 0 0;
}
.card-rd .card-footer{
	border-radius:0 0 29px 29px;
}
/* = Masonary
-------------------------------------------------------------- */
.card-columns .card {
	margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
	.card-columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 1.25rem;
	-moz-column-gap: 1.25rem;
	column-gap: 1.25rem;
	orphans: 1;
	widows: 1;
}
.card-columns .card {
	display: inline-block;
	width: 100%;
}
}



/* ScrollToTop button */

.scrollToTop{
	width:36px;
	height:36px;
	padding:5px;
	position:fixed;
	bottom:20px;
	right:20px;
	opacity:0;
	z-index:999;
	transition: all .3s ease-in-out;
	pointer-events:none;
}
.showScrollTop{
	opacity: 1;
	pointer-events:all;
}
.scroll-to-top-btn-icon{
	fill: none;
	stroke: #fff;
	stroke-width: 2px;
	fill-rule: evenodd;
	stroke-linecap:round;
}

/* = Custom Styling
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6,p,label,.btn,a{
	font-family:"LibreFranklin-Medium";
}
.container{
	max-width:1140px;
}
.h1-style{
	font-family:"LibreFranklin-Bold";
	font-weight:500;
}
h1{
	font-family:"LibreFranklin-Regular";
}
.grid-style{
	grid-template-columns:1fr 1fr 1fr;
}
.h2-2-style{
	font-family:"Libre Franklin";
	font-weight:500;
}
.h2-15-style{
	font-family:"Libre Franklin";
	font-weight:500;
}
.h2-testimonials-style{
	font-family:"LibreFranklin-Bold";
}
.h2-bloc-10-style{
	font-family:"LibreFranklin-Bold";
}
.situation-background{
	background:linear-gradient(100deg, var(--swatch-var-4776) 0%, var(--swatch-var-6754) 100%);
	border-width:0px 0px 0px 4px;
	border-color:var(--swatch-var-223)!important;
}
.solution-background{
	border-width:0px 0px 0px 4px;
	border-color:var(--swatch-var-6887)!important;
	background:linear-gradient(100deg, var(--swatch-var-5459) 0%, var(--swatch-var-4245) 100%);
	border-style:solid;
}
.process-impact-background{
	border-width:0px 0px 0px 4px;
	border-color:var(--swatch-var-1623)!important;
	background:linear-gradient(100deg, var(--swatch-var-7600) 1%, var(--swatch-var-4665) 100%);
}
.business-impact-card{
	background:linear-gradient(100deg, var(--swatch-var-5459) 0%, var(--swatch-var-4245) 100%);
	border-width:1px 1px 1px 1px;
	border-color:var(--swatch-var-6887)!important;
}
.crisis-background{
	border-width:0px 0px 0px 4px;
	border-color:var(--swatch-var-4392)!important;
	background:linear-gradient(100deg, var(--swatch-var-3083) 0%, var(--swatch-var-2343) 100%);
}
.innovation-metrics{
	background-color:var(--swatch-var-5290);
	border-width:1px 1px 1px 1px;
	border-color:var(--swatch-var-2491)!important;
	border-style:solid;
}
.grid-0-style{
	grid-template-rows:auto auto auto;
	grid-template-columns:1fr 1fr 1fr;
}
.timeline-item{
	border-width:0px 0px 0px 4px;
	border-color:var(--swatch-var-1465)!important;
	background-color:var(--swatch-var-7185);
}
.translucent-white-border{
	border-width:1px 1px 1px 1px;
	border-color:var(--swatch-var-5252)!important;
}
.img-style{
	width:1700px;
}
p{
	font-family:"Manrope-Regular";
}
a{
	font-family:"LibreFranklin-Regular";
}
.grid-bloc-12-style{
	grid-template-columns:1fr 1fr 1fr;
}
.h2-bloc-21-style{
	font-family:"LibreFranklin-Bold";
}
.btn-info{
	background-color:var(--swatch-var-7719);
	color:#FFFFFF!important;
}
.border-20{
	border-radius:20px 20px 20px 20px;
}
.border-10{
	border-radius:10px 10px 10px 10px;
}
.liquidglass-tint-dark{
	background-color:transparent;
}
.site-title{
	font-family:"Manrope-Bold";
}
.link-style{
	font-size:30px;
	font-family:"LibreFranklin-Bold";
}
.h1-bloc-9-style{
	font-family:"LibreFranklin-Medium";
}
.h1-5-style{
	font-family:"LibreFranklin-Medium";
}
.h1-4-style{
	font-family:"LibreFranklin-Medium";
}
.h1-bloc-40-style{
	font-family:"LibreFranklin-Medium";
}
.h1-3-style{
	font-family:"LibreFranklin-Medium";
}

/* = Colour
-------------------------------------------------------------- */

/* Swatch Variables */
:root{
	
	--swatch-var-3329:rgba(0,0,0,1.00);
	
	--swatch-var-6201:rgba(15,20,25,1.00);
	
	--swatch-var-2501:rgba(26,29,35,1.00);
	
	--swatch-var-667:rgba(33,38,45,1.00);
	
	--swatch-var-7325:rgba(48,54,61,1.00);
	
	--swatch-var-4504:rgba(72,79,88,1.00);
	
	--swatch-var-6365:rgba(0,0,0,1.00);
	
	--swatch-var-3766:rgba(255,255,255,1.00);
	
	--swatch-var-1597:rgba(248,250,252,1.00);
	
	--swatch-var-3381:rgba(241,245,249,1.00);
	
	--swatch-var-2850:rgba(226,232,240,1.00);
	
	--swatch-var-102:rgba(203,213,225,1.00);
	
	--swatch-var-3662:rgba(148,163,184,1.00);
	
	--swatch-var-269:rgba(100,116,139,1.00);
	
	--swatch-var-3765:rgba(224,231,255,1.00);
	
	--swatch-var-1997:rgba(199,210,254,1.00);
	
	--swatch-var-4532:rgba(165,180,252,1.00);
	
	--swatch-var-4080:rgba(129,140,248,1.00);
	
	--swatch-var-3394:rgba(99,102,241,1.00);
	
	--swatch-var-4427:rgba(79,70,229,1.00);
	
	--swatch-var-4432:rgba(243,232,255,1.00);
	
	--swatch-var-7427:rgba(233,213,255,1.00);
	
	--swatch-var-665:rgba(216,180,254,1.00);
	
	--swatch-var-3706:rgba(192,132,252,1.00);
	
	--swatch-var-1079:rgba(168,85,247,1.00);
	
	--swatch-var-2924:rgba(147,51,234,1.00);
	
	--swatch-var-1192:rgba(253,242,248,1.00);
	
	--swatch-var-2673:rgba(252,231,243,1.00);
	
	--swatch-var-4143:rgba(251,207,232,1.00);
	
	--swatch-var-2714:rgba(249,168,212,1.00);
	
	--swatch-var-3682:rgba(236,72,153,1.00);
	
	--swatch-var-4840:rgba(219,39,119,1.00);
	
	--swatch-var-1762:rgba(16,185,129,1.00);
	
	--swatch-var-739:rgba(245,158,11,1.00);
	
	--swatch-var-1616:rgba(239,68,68,1.00);
	
	--swatch-var-2050:rgba(102,183,63,0.20);
	
	--swatch-var-223:rgba(174,30,68,1.00);
	
	--swatch-var-4776:rgba(241,66,66,0.10);
	
	--swatch-var-6754:rgba(221,37,37,0.10);
	
	--swatch-var-6887:rgba(16,185,129,1.00);
	
	--swatch-var-5459:rgba(16,185,129,0.10);
	
	--swatch-var-4245:rgba(5,150,105,0.10);
	
	--swatch-var-1623:rgba(99,102,241,1.00);
	
	--swatch-var-7600:rgba(99,102,241,0.10);
	
	--swatch-var-4665:rgba(168,85,247,0.10);
	
	--swatch-var-4392:rgba(245,158,11,1.00);
	
	--swatch-var-3083:rgba(245,158,11,0.10);
	
	--swatch-var-2343:rgba(217,119,6,0.10);
	
	--swatch-var-5290:rgba(168,85,247,0.10);
	
	--swatch-var-2491:rgba(168,85,247,0.30);
	
	--swatch-var-1465:rgba(168,85,247,1.00);
	
	--swatch-var-7185:rgba(255,255,255,0.02);
	
	--swatch-var-5252:rgba(255,255,255,0.10);
	
	--swatch-var-5234:rgba(255,255,255,0.00);
	
	--swatch-var-7719:#009068;
	
	--swatch-var-1961:#465F5A;
	
}


/* Background colour styles */

.bgc-3766{
	background-color:var(--swatch-var-3766);
}
.bgc-7325{
	background-color:var(--swatch-var-7325);
}
.bgc-2501{
	background-color:var(--swatch-var-2501);
}
.bgc-7185{
	background-color:var(--swatch-var-7185);
}

/* Text colour styles */

.tc-2501{
	color:var(--swatch-var-2501)!important;
}
.tc-1465{
	color:var(--swatch-var-1465)!important;
}

/* Link colour styles */

.ltc-4532{
	color:var(--swatch-var-4532)!important;
}
.ltc-4532:hover{
	color:#7281C9!important;
}
.ltc-3766{
	color:var(--swatch-var-3766)!important;
}
.ltc-3766:hover{
	color:#CCCCCC!important;
}

/* Icon colour styles */

.icon-1961{
	color:var(--swatch-var-1961)!important;
	border-color:var(--swatch-var-1961)!important;
}

/* Bloc image backgrounds */


/* = Custom Bric Data
-------------------------------------------------------------- */

.social-link-bric a svg{
	transition: all 0.3s ease-in-out;
}
.social-hover-fade a:hover svg{
	opacity: 0.5;
}
.social-hover-grow a:hover svg{
	transform: scale(1.2);
}
.social-hover-shrink a:hover svg{
	transform: scale(0.9);
}
.social-hover-shadow a:hover svg{
	filter: drop-shadow(0px 6px 2px rgba(0,0,0,0.3));
	overflow: visible;
}

/* = Additional CSS
-------------------------------------------------------------- */
:root {
  overscroll-behavior: none;
}

body {
 /* @keyframes gradient {
  0% { background: #333333; }
  50% { background: #151515; }
  100% { background: #333333; }
} */

}


/* Particle system overlay */
.particle-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(1px 1px at 30px 40px, rgba(255, 255, 255, 0.03), transparent),
        radial-gradient(1px 1px at 80px 20px, rgba(255, 255, 255, 0.02), transparent),
        radial-gradient(2px 2px at 120px 80px, rgba(99, 102, 241, 0.04), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(59, 130, 246, 0.03), transparent);
    background-size: 150px 150px, 200px 200px, 180px 180px, 220px 220px;
    animation:
        enhanced-particles-1 40s linear infinite,
        enhanced-particles-2 50s linear infinite reverse,
        enhanced-particles-3 35s linear infinite,
        enhanced-particles-4 45s linear infinite reverse;
    pointer-events: none;
    z-index: 1;
}

/* Gradient animations */
@keyframes enhanced-gradient {
    0%, 100% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }
    25% {
        background-position: 100% 0%;
        filter: hue-rotate(5deg);
    }
    50% {
        background-position: 100% 100%;
        filter: hue-rotate(10deg);
    }
    75% {
        background-position: 0% 100%;
        filter: hue-rotate(5deg);
    }
}

@keyframes gradient-drift {
    0%, 100% {
        transform: rotate(0deg) scale(1) translate(0%, 0%);
        opacity: 1;
    }
    25% {
        transform: rotate(1deg) scale(1.05) translate(2%, -3%);
        opacity: 0.9;
    }
    50% {
        transform: rotate(0deg) scale(1.1) translate(-1%, 2%);
        opacity: 0.8;
    }
    75% {
        transform: rotate(-1deg) scale(1.05) translate(-2%, -1%);
        opacity: 0.9;
    }
}

@keyframes gradient-counter-drift {
    0%, 100% {
        transform: rotate(0deg) scale(1) translate(0%, 0%);
        opacity: 0.8;
    }
    33% {
        transform: rotate(-1deg) scale(0.95) translate(-3%, 2%);
        opacity: 0.9;
    }
    66% {
        transform: rotate(1deg) scale(1.02) translate(2%, -2%);
        opacity: 0.7;
    }
}

/* Enhanced particle animations */
@keyframes enhanced-particles-1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-150px, -150px) rotate(360deg); }
}

@keyframes enhanced-particles-2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(200px, -180px) rotate(-360deg); }
}

@keyframes enhanced-particles-3 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
    50% { opacity: 1; }
    100% { transform: translate(-180px, 200px) rotate(180deg); opacity: 0.5; }
}

@keyframes enhanced-particles-4 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { transform: translate(220px, -220px) rotate(-180deg); opacity: 0.3; }
}

/* Animated gradient text */
.text-gradient-animated {
    background: linear-gradient(45deg, #6366f1, #a855f7, #ec4899, #6366f1);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Bootstrap 5 compatible animated gradient text */
.text-gradient-animated {
  background: linear-gradient(45deg, #6366f1, #a855f7, #ec4899, #6366f1);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 8s ease-in-out infinite;
}

/* Alternative slower version */
.text-gradient-animated-slow {
  background: linear-gradient(45deg, #6366f1, #a855f7, #ec4899, #6366f1);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 12s ease-in-out infinite;
}

/* Subtle version with less movement */
.text-gradient-animated-subtle {
  background: linear-gradient(90deg, #6366f1, #a855f7, #6366f1);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 10s ease-in-out infinite;
}

/* Animation keyframes */
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .text-gradient-animated,
  .text-gradient-animated-slow,
  .text-gradient-animated-subtle {
    animation: none;
    background: linear-gradient(45deg, #6366f1, #a855f7);
    background-size: 100% 100%;
  }
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
  .text-gradient-animated,
  .text-gradient-animated-slow,
  .text-gradient-animated-subtle {
    background: none;
    color: #6366f1;
  }
}

/* Animated gradient for main headline */
.hero-title {
  background: linear-gradient(45deg, #6366f1, #a855f7, #ec4899, #6366f1);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 8s ease-in-out infinite;
}

/* Improved text hierarchy */
.hero-subtitle {
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgba(148, 163, 184, 0.9);
  max-width: 700px;
  margin: 0 auto;
}

/* Better paragraph spacing */
.content-paragraph {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: rgba(226, 232, 240, 0.95);
}

.philosophy-quote {
  font-size: 1.3rem;
  font-style: italic;
  border-left: 4px solid #6366f1;
  padding-left: 2rem;
  margin: 2rem 0;
  background: rgba(99, 102, 241, 0.05);
  border-radius: 0 12px 12px 0;
  padding: 1.5rem 2rem;
}

.metric-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-12px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(99, 102, 241, 0.1);
}

.metric-card:hover::before {
  opacity: 1;
}

.metric-number {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.metric-card:hover .metric-number {
  transform: scale(1.1);
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.metric-card:hover {
  /* Subtle scale instead of translation */
  transform: scale(1.02);
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow:
    0 8px 32px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.metric-number {
  transition: all 0.3s ease;
}

.metric-card:hover .metric-number {
  color: #6366f1;
  /* Subtle glow effect */
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3));
}

html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .metric-card {
    padding: 1.5rem;
  }

  .metric-number {
    font-size: 2rem;
  }

  .section {
    padding: 3rem 0;
  }
}

/* Touch-friendly hover states */
@media (hover: none) {
  .metric-card:hover,
  .case-study-card:hover {
    transform: none;
  }

  .metric-card:active {
    transform: scale(0.98);
  }
}

.case-study-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Option A: Border gradient animation */
.case-study-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Option B: Corner accent */
.case-study-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  transition: width 0.4s ease;
  border-radius: 16px 0 0 0;
}

.case-study-card:hover::before {
  width: 40px;
}

.impact-hero-panel {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 32px;
    padding: 4rem 3rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
}

.impact-hero-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.04) 40%, transparent 70%);
    animation: rotate-slow 30s linear infinite;
    pointer-events: none;
}

.hero-stat-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-stat-card::before
 {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
    animation: rotate-glow 25s linear infinite;
    pointer-events: none;
}

.hero-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    animation: number-glow 3s ease-in-out infinite;
}

.hero-stat-card:nth-child(2) .hero-stat-emoji {
    animation-delay: 1s;
}

.hero-stat-emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    animation: float-gentle 4s ease-in-out infinite;
}

.hero-stat-label {
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.hero-stat-period {
    color: #64748b;
    font-size: 0.8rem;
    font-style: italic;
}


/* Hero Stats Enhancement */
        .hero-stats-enhanced {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .hero-stat-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero-stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
            animation: rotate-glow 25s linear infinite;
            pointer-events: none;
        }

        .hero-stat-card:nth-child(2)::before {
            background: radial-gradient(circle, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
            animation-delay: 5s;
        }

        .hero-stat-card:nth-child(3)::before {
            background: radial-gradient(circle, rgba(236, 72, 153, 0.05) 0%, transparent 70%);
            animation-delay: 10s;
        }

        .hero-stat-card:nth-child(4)::before {
            background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
            animation-delay: 15s;
        }

        @keyframes rotate-glow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .hero-stat-content {
            position: relative;
            z-index: 1;
        }

        .hero-stat-emoji {
            font-size: 3rem;
            display: block;
            margin-bottom: 1rem;
            animation: float-gentle 4s ease-in-out infinite;
        }

        .hero-stat-card:nth-child(2) .hero-stat-emoji { animation-delay: 1s; }
        .hero-stat-card:nth-child(3) .hero-stat-emoji { animation-delay: 2s; }
        .hero-stat-card:nth-child(4) .hero-stat-emoji { animation-delay: 3s; }

        @keyframes float-gentle {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
        }

        .hero-stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
            animation: number-glow 3s ease-in-out infinite;
        }

        @keyframes number-glow {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.2); }
        }

        .hero-stat-label {
            color: #94a3b8;
            font-size: 0.9rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .hero-stat-period {
            color: #64748b;
            font-size: 0.8rem;
            font-style: italic;
        }

        /* Challenge Section Enhancement */
        .challenge-section {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            padding: 3rem;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
        }

        .challenge-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.05), transparent);
            animation: warning-sweep 8s ease-in-out infinite;
        }

        @keyframes warning-sweep {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .challenge-content {
            position: relative;
            z-index: 1;
        }

        .challenge-header {
            display: flex;
            align-items: center;
            margin-bottom: 2rem;
        }

        .challenge-icon {
            font-size: 3rem;
            margin-right: 1.5rem;
            animation: warning-pulse 2s ease-in-out infinite;
        }

        @keyframes warning-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .challenge-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #ef4444;
            margin-bottom: 0.5rem;
        }

        .challenge-subtitle {
            color: #94a3b8;
            font-size: 1rem;
        }

        .challenge-description {
            color: #cbd5e1;
            line-height: 1.7;
            font-size: 1rem;
        }

        /* Strategic Interventions Enhancement */
        .interventions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .intervention-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 18px;
            position: relative;
            overflow: hidden;
        }

        .intervention-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.08), transparent);
            animation: success-shimmer 6s ease-in-out infinite;
        }

        .intervention-card:nth-child(2)::before { animation-delay: 1.5s; }
        .intervention-card:nth-child(3)::before { animation-delay: 3s; }
        .intervention-card:nth-child(4)::before { animation-delay: 4.5s; }

        @keyframes success-shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .intervention-content {
            position: relative;
            z-index: 1;
        }

        .intervention-header {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .intervention-emoji {
            font-size: 2.5rem;
            margin-right: 1rem;
            margin-top: 0.2rem;
            animation: bounce-subtle 4s ease-in-out infinite;
        }

        .intervention-card:nth-child(2) .intervention-emoji { animation-delay: 1s; }
        .intervention-card:nth-child(3) .intervention-emoji { animation-delay: 2s; }
        .intervention-card:nth-child(4) .intervention-emoji { animation-delay: 3s; }

        @keyframes bounce-subtle {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-3px); }
        }

        .intervention-text {
            flex: 1;
        }

        .intervention-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #e2e8f0;
            margin-bottom: 1rem;
        }

        .intervention-description {
            color: #94a3b8;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .intervention-result {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 12px;
            position: relative;
        }

        .intervention-result::before {
            content: '✅';
            position: absolute;
            left: 1rem;
            top: 1rem;
            font-size: 1.2rem;
        }

        .result-label {
            color: #10b981;
            font-weight: 600;
            font-size: 0.85rem;
            margin-bottom: 0.5rem;
            margin-left: 2rem;
        }

        .result-text {
            color: #6ee7b7;
            font-size: 0.9rem;
            line-height: 1.5;
            margin-left: 2rem;
        }

        /* Impact Metrics Enhancement */
        .impact-metrics {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            padding: 3rem;
            margin-bottom: 3rem;
        }

        .metrics-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .metrics-title {
            font-size: 2rem;
            font-weight: 700;
            color: #e2e8f0;
            margin-bottom: 1rem;
        }

        .metrics-subtitle {
            color: #94a3b8;
            font-size: 1rem;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .metric-item {
            text-align: center;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.01);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            position: relative;
            overflow: hidden;
        }

        .metric-item::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
            animation: progress-bar 3s ease-in-out infinite;
        }

        @keyframes progress-bar {
            0% { transform: scaleX(0); transform-origin: left; }
            50% { transform: scaleX(1); transform-origin: left; }
            51% { transform: scaleX(1); transform-origin: right; }
            100% { transform: scaleX(0); transform-origin: right; }
        }

        .metric-emoji {
            font-size: 2.5rem;
            display: block;
            margin-bottom: 1rem;
        }

        .metric-number {
            font-size: 2.2rem;
            font-weight: 800;
            color: #10b981;
            margin-bottom: 0.5rem;
        }

        .metric-label {
            color: #94a3b8;
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* Key Outcomes Enhancement */
        .outcomes-section {
            margin-bottom: 3rem;
        }

        .outcomes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

        .outcome-card {
            background: rgba(255, 255, 255, 0.02);
            border:2px solid transparent;
            box-shadow:0 0 0 2px rgba(255,255,255,.1),0 16px 32px rgba(0,0,0,.12);
            backdrop-filter:url(#frosted);-webkit-backdrop-filter:url(#frosted);
            display:grid;place-items:center;cursor:pointer;outline:0;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
        }

        .outcome-card::before,
        .outcome-card::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3), rgba(99, 102, 241, 0.3));
            border-radius: 20px;
            z-index: -1;
            animation: border-glow 4s linear infinite;
            background-size: 400% 400%;
        }


        @keyframes border-glow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .outcome-header {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .outcome-emoji {
            font-size: 2.5rem;
            margin-right: 1rem;
        }

        .outcome-title {
            font-size: 1.6rem;
            font-weight: 600;
            color: #e2e8f0;
        }

        .outcome-description {
            color: #94a3b8;
            line-height: 1.7;
        }

        /* Testimonials Enhancement */
        .testimonials-enhanced {
            margin-top: 4rem;
        }

        .testimonials-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .testimonials-title {
            font-size: 2rem;
            font-weight: 700;
            color: #e2e8f0;
            margin-bottom: 1rem;
        }

        .testimonials-subtitle {
            color: #94a3b8;
            font-size: 1rem;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .testimonial-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 18px;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }

        .testimonial-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.05), transparent);
            animation: testimonial-shine 8s ease-in-out infinite;
        }

        @keyframes testimonial-shine {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .testimonial-content {
            position: relative;
            z-index: 1;
        }

        .testimonial-quote {
            font-size: 3rem;
            color: rgba(99, 102, 241, 0.3);
            line-height: 1;
            margin-bottom: 1rem;
        }

        .testimonial-text {
            color: #cbd5e1;
            line-height: 1.6;
            margin-bottom: 1.5rem;
            font-style: italic;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            font-weight: 600;
        }

        .author-info {
            flex: 1;
        }

        .author-name {
            color: #e2e8f0;
            font-weight: 600;
            margin-bottom: 0.2rem;
        }

        .author-title {
            color: #94a3b8;
            font-size: 0.85rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-stats-enhanced {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }

            .hero-stat-card {
                padding: 2rem 1.5rem;
            }

            .interventions-grid,
            .outcomes-grid,
            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            .challenge-header {
                flex-direction: column;
                text-align: center;
            }

            .challenge-icon {
                margin-right: 0;
                margin-bottom: 1rem;
            }

            .intervention-header {
                flex-direction: column;
                text-align: center;
            }

            .intervention-emoji {
                margin-right: 0;
                margin-bottom: 1rem;
            }
        }

/* Single unified container */
.image-frame {
  border-radius: 6px; /* Unified border radius */
  overflow: hidden; /* Contains all content */
  /* No padding - content fills frame */
}

/* Image fills top of frame */
.case-study-image {
  width: 100%; /* Full width */
  display: block; /* Remove gaps */
  /* No border radius - contained by frame */
}

/* Clean caption area */
.caption-area {
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator only */
  padding: 1.2rem 2rem; /* Text spacing */
  /* No background - transparent */
  /* No backdrop-filter - clean */
}

.caption {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f1f5f9;
    letter-spacing: -0.01em;
    margin: 0;
}

.caption-subtitle {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-top: 0.3rem;
    font-weight: 400;
}

.step-number {
    transform: translateX(-50%);
    width: 30px;
	margin:auto;
    height: 30px;
    background: #6366f1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    color: white;
}

 /* Single Section Design */
        .design-process-section {
            background: rgba(255, 255, 255, 0.02);
            box-shadow:0 0 0 2px rgba(255,255,255,.1),0 16px 32px rgba(0,0,0,.12);
            backdrop-filter:url(#frosted);-webkit-backdrop-filter:url(#frosted);
            display:grid;place-items:center;cursor:pointer;outline:0;
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            padding: 3rem;
            margin-bottom: 3rem;
        }

        .design-process-section::before,
        .design-process-section::after{
          content:"";background:#fff;border-radius:10px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-title {
            font-size: 2rem;
            font-weight: 700;
            color: #6366f1;
            margin-bottom: 1rem;
        }

        .section-subtitle {
            color: #94a3b8;
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        /* Simple Linear List */
        .process-list {
            max-width: 600px;
            margin: 0 auto;
        }

        .process-item {
            display: flex;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .process-item:last-child {
            border-bottom: none;
        }

        .step-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6366f1, #a855f7);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            color: white;
            margin-right: 1.5rem;
            flex-shrink: 0;
        }

        .step-content {
            flex: 1;
        }

        .step-title {
            font-size: 1rem;
            font-weight: 600;
            color: #e2e8f0;
            margin-bottom: 0.2rem;
        }

        .step-description {
            color: #94a3b8;
            font-size: 0.85rem;
            line-height: 1.4;
        }

        /* Results Banner */
        .results-banner {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 2rem;
            text-align: center;
        }

        .results-text {
            color: #6ee7b7;
            font-weight: 600;
            font-size: 1rem;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .design-process-section {
                padding: 2rem;
            }

            .section-title {
                font-size: 1.5rem;
            }

            .process-list {
                max-width: 100%;
            }

            .step-number {
                margin-right: 1rem;
            }
        }



        @keyframes subtle-gradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        @keyframes minimal-particles {
            0% { transform: translate(0, 0); }
            100% { transform: translate(-150px, -150px); }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        /* Hero Section */
        .hero-section {
            text-align: center;
            margin-bottom: 4rem;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.75);
            margin: 2rem auto;
            max-width: 600px;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
        }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .metric-card-minimal {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px) saturate(120%);
            -webkit-backdrop-filter: blur(15px) saturate(120%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 2rem;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .metric-card-minimal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.2) 50%,
                transparent 100%);
            animation: subtle-shimmer 6s ease-in-out infinite;
        }

        .metric-card-minimal:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px) saturate(140%);
            -webkit-backdrop-filter: blur(20px) saturate(140%);
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .metric-number-inset {
            font-size: 2rem;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.9);
            text-shadow:
                0 2px 0 rgba(0, 0, 0, 0.6),
                0 -1px 0 rgba(255, 255, 255, 0.15),
                inset 0 2px 4px rgba(0, 0, 0, 0.4);
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
        }

        .metric-card-minimal:hover .metric-number-inset {
            transform: scale(1.02);
            text-shadow:
                0 3px 0 rgba(0, 0, 0, 0.7),
                0 -1px 0 rgba(255, 255, 255, 0.2),
                inset 0 3px 6px rgba(0, 0, 0, 0.5);
        }

        .metric-label-inset {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            font-weight: 500;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.4),
                inset 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        /* Navbar  */
        .navbar-minimal {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px) saturate(120%);
            -webkit-backdrop-filter: blur(15px) saturate(120%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border-radius: 0;
            padding: 0.2rem;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .navbar-minimal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.2) 50%,
                transparent 100%);
            animation: subtle-shimmer 6s ease-in-out infinite;
        }

        /* Main Content Panel */
        .content-panel {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(20px) saturate(130%);
            -webkit-backdrop-filter: blur(20px) saturate(130%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow:
                0 6px 24px rgba(0, 0, 0, 0.1),
                0 2px 8px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
            border-radius: 20px;
            padding: 3rem;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
        }

        .content-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.2) 50%,
                transparent 100%);
            animation: subtle-shimmer 6s ease-in-out infinite;
        }

        .content-text {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.7;
            font-size: 1rem;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.3),
                inset 0 1px 1px rgba(0, 0, 0, 0.15);
            margin-bottom: 1.5rem;
        }

        /* Feature Cards */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .feature-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px) saturate(120%);
            -webkit-backdrop-filter: blur(15px) saturate(120%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.2) 50%,
                transparent 100%);
            animation: subtle-shimmer 6s ease-in-out infinite;
        }

        .feature-card:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.12);
        }

        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            display: block;
        }

        .feature-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 1rem;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.5),
                0 -1px 0 rgba(255, 255, 255, 0.1),
                inset 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .feature-description {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.3),
                inset 0 1px 1px rgba(0, 0, 0, 0.15);
        }

        /* Pills */
        .pill {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.85rem;
            font-weight: 500;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.4),
                inset 0 1px 1px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            cursor: pointer;
            margin: 0.25rem;
        }

        .pill:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-1px);
        }

        .pill-active {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.95);
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.6),
                inset 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .pill-success {
            background: rgba(16, 185, 129, 0.15);
            border-color: rgba(16, 185, 129, 0.3);
            color: rgba(255, 255, 255, 0.9);
        }

        .pill-warning {
            background: rgba(245, 158, 11, 0.15);
            border-color: rgba(245, 158, 11, 0.3);
            color: rgba(255, 255, 255, 0.9);
        }

        .pill-error {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.3);
            color: rgba(255, 255, 255, 0.9);
        }

        /* Buttons */
        .btn {
            padding: 12px 24px;
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            cursor: pointer;
            display: inline-block;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.5),
                inset 0 1px 1px rgba(0, 0, 0, 0.2);
            font-family: inherit;
            font-size: 1rem;
        }

        .btn:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-1px);
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
        }

        .btn:active {
            transform: translateY(0);
            background: rgba(255, 255, 255, 0.08);
        }

        .btn-primary {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .btn-primary:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.9);
        }

        .btn-success {
            background: rgba(16, 185, 129, 0.2);
            border-color: rgba(16, 185, 129, 0.4);
            color: rgba(255, 255, 255, 0.95);
        }

        .btn-success:hover {
            background: rgba(16, 185, 129, 0.3);
            border-color: rgba(16, 185, 129, 0.5);
            color: rgba(255, 255, 255, 0.95);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.85);
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.25);
            color: rgba(255, 255, 255, 0.9);
        }

        /* Component Groups */
        .component-group {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(20px) saturate(130%);
            -webkit-backdrop-filter: blur(20px) saturate(130%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow:
                0 6px 24px rgba(0, 0, 0, 0.1),
                0 2px 8px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
            border-radius: 20px;
            padding: 3rem;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
        }

        .component-group::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.2) 50%,
                transparent 100%);
            animation: subtle-shimmer 6s ease-in-out infinite;
        }

        .component-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            align-items: start;
        }

        .component-showcase {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .showcase-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.4),
                inset 0 1px 1px rgba(0, 0, 0, 0.2);
            margin-bottom: 0.5rem;
        }

        /* Navigation Buttons */
        .nav-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 3rem;
            flex-wrap: wrap;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                margin: 20px 10px;
            }

            .content-panel,
            .component-group {
                padding: 2rem;
            }

            .hero-title-inset {
                font-size: 2rem;
            }

            .section-title-inset {
                font-size: 1.5rem;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }

            .features-grid {
                grid-template-columns: 1fr;
            }

            .nav-buttons {
                flex-direction: column;
                align-items: center;
            }
        }

        /* Reduced Motion Support */
        @media (prefers-reduced-motion: reduce) {
            .subtle-shimmer,
            body::before,
            body {
                animation: none;
            }

            .metric-card-minimal:hover,
            .feature-card:hover,
            .pill:hover,
            .btn:hover {
                transform: none;
            }
        }

.port-background {

background: #232526;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

/* Liquid Glass Blockquote */
       .philosophy-quote {
           font-size: 1.3rem;
           font-style: italic;
           border-left: none;
           padding-left: 2rem;
           margin: 2rem 0;
           background: rgba(99, 102, 241, 0.08);
           backdrop-filter: blur(20px) saturate(130%);
           -webkit-backdrop-filter: blur(20px) saturate(130%);
           border: 1px solid rgba(99, 102, 241, 0.2);
           border-radius: 0 16px 16px 0;
           padding: 2rem;
           position: relative;
           overflow: hidden;
           box-shadow:
               0 6px 24px rgba(99, 102, 241, 0.1),
               0 2px 8px rgba(0, 0, 0, 0.05),
               inset 0 1px 0 rgba(255, 255, 255, 0.15);
           color: rgba(255, 255, 255, 0.9);
           text-shadow:
               0 1px 0 rgba(0, 0, 0, 0.3),
               inset 0 1px 1px rgba(0, 0, 0, 0.15);
       }

       .philosophy-quote::before {
           content: '';
           position: absolute;
           left: 0;
           top: 0;
           bottom: 0;
           width: 4px;
           background: linear-gradient(180deg,
               rgba(99, 102, 241, 0.8) 0%,
               rgba(99, 102, 241, 0.6) 50%,
               rgba(99, 102, 241, 0.8) 100%);
           border-radius: 2px;
           box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
       }

       .philosophy-quote::after {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 1px;
           background: linear-gradient(90deg,
               transparent 0%,
               rgba(99, 102, 241, 0.4) 50%,
               transparent 100%);
           animation: quote-shimmer 5s ease-in-out infinite;
       }

       @keyframes quote-shimmer {
           0%, 100% { opacity: 0.3; transform: translateX(-50%); }
           50% { opacity: 0.8; transform: translateX(50%); }
       }

       .philosophy-quote:hover {
           background: rgba(99, 102, 241, 0.12);
           border-color: rgba(99, 102, 241, 0.3);
           backdrop-filter: blur(25px) saturate(140%);
           -webkit-backdrop-filter: blur(25px) saturate(140%);
           box-shadow:
               0 8px 32px rgba(99, 102, 241, 0.15),
               0 4px 16px rgba(0, 0, 0, 0.1),
               inset 0 1px 0 rgba(255, 255, 255, 0.2);
           transform: translateY(-1px);
       }

       .philosophy-quote:hover::before {
           background: linear-gradient(180deg,
               rgba(99, 102, 241, 1) 0%,
               rgba(99, 102, 241, 0.8) 50%,
               rgba(99, 102, 241, 1) 100%);
           box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
       }

       /* Liquid Glass Lists */
       .liquid-glass-list {
           background: rgba(255, 255, 255, 0.04);
           backdrop-filter: blur(20px) saturate(130%);
           -webkit-backdrop-filter: blur(20px) saturate(130%);
           border: 1px solid rgba(255, 255, 255, 0.1);
           border-radius: 16px;
           padding: 2rem;
           margin: 2rem 0;
           position: relative;
           overflow: hidden;
           box-shadow:
               0 6px 24px rgba(0, 0, 0, 0.1),
               0 2px 8px rgba(0, 0, 0, 0.05),
               inset 0 1px 0 rgba(255, 255, 255, 0.12);
       }

       .liquid-glass-list::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 1px;
           background: linear-gradient(90deg,
               transparent 0%,
               rgba(255, 255, 255, 0.2) 50%,
               transparent 100%);
           animation: subtle-shimmer 6s ease-in-out infinite;
       }

       .liquid-glass-list ul {
           list-style: none;
           padding: 0;
           margin: 0;
       }

       .liquid-glass-list li {
           display: flex;
           align-items: flex-start;
           padding: 1rem 0;
           border-bottom: 1px solid rgba(255, 255, 255, 0.06);
           transition: all 0.3s ease;
           position: relative;
       }

       .liquid-glass-list li:last-child {
           border-bottom: none;
       }

       .liquid-glass-list li:hover {
           background: rgba(255, 255, 255, 0.03);
           border-radius: 8px;
           margin: 0 -0.5rem;
           padding-left: 1.5rem;
           padding-right: 1.5rem;
           transform: translateY(-1px);
       }

       .list-icon {
           width: 32px;
           height: 32px;
           border-radius: 8px;
           background: rgba(255, 255, 255, 0.06);
           backdrop-filter: blur(15px);
           -webkit-backdrop-filter: blur(15px);
           border: 1px solid rgba(255, 255, 255, 0.12);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1rem;
           margin-right: 1rem;
           flex-shrink: 0;
           margin-top: 0.2rem;
           transition: all 0.3s ease;
           box-shadow:
               0 2px 8px rgba(0, 0, 0, 0.08),
               inset 0 1px 0 rgba(255, 255, 255, 0.15);
       }

       .liquid-glass-list li:hover .list-icon {
           background: rgba(255, 255, 255, 0.1);
           border-color: rgba(255, 255, 255, 0.18);
           transform: scale(1.05);
           box-shadow:
               0 4px 12px rgba(0, 0, 0, 0.12),
               inset 0 1px 0 rgba(255, 255, 255, 0.2);
       }

       .list-content {
           flex: 1;
       }

       .list-title {
           font-size: 1rem;
           font-weight: 600;
           color: rgba(255, 255, 255, 0.9);
           margin-bottom: 0.3rem;
           text-shadow:
               0 1px 0 rgba(0, 0, 0, 0.5),
               inset 0 1px 1px rgba(0, 0, 0, 0.2);
       }

       .list-description {
           font-size: 0.85rem;
           color: rgba(255, 255, 255, 0.7);
           line-height: 1.4;
           text-shadow:
               0 1px 0 rgba(0, 0, 0, 0.3),
               inset 0 1px 1px rgba(0, 0, 0, 0.15);
       }

       /* Ordered List Variant */
       .liquid-glass-ordered {
           counter-reset: liquid-counter;
       }

       .liquid-glass-ordered li {
           counter-increment: liquid-counter;
       }

       .liquid-glass-ordered .list-icon {
           background: rgba(99, 102, 241, 0.15);
           border-color: rgba(99, 102, 241, 0.3);
           color: rgba(255, 255, 255, 0.95);
           font-weight: 700;
           font-size: 0.9rem;
       }

       .liquid-glass-ordered .list-icon::before {
           content: counter(liquid-counter);
       }

       .liquid-glass-ordered li:hover .list-icon {
           background: rgba(99, 102, 241, 0.25);
           border-color: rgba(99, 102, 241, 0.4);
           box-shadow:
               0 4px 12px rgba(99, 102, 241, 0.2),
               inset 0 1px 0 rgba(255, 255, 255, 0.2);
       }

       /* Success/Feature List Variant */
       .liquid-glass-success .list-icon {
           background: rgba(16, 185, 129, 0.15);
           border-color: rgba(16, 185, 129, 0.3);
           color: rgba(255, 255, 255, 0.95);
       }

       .liquid-glass-success li:hover .list-icon {
           background: rgba(16, 185, 129, 0.25);
           border-color: rgba(16, 185, 129, 0.4);
           box-shadow:
               0 4px 12px rgba(16, 185, 129, 0.2),
               inset 0 1px 0 rgba(255, 255, 255, 0.2);
       }

       /* Liquid Glass Timeline */
       .liquid-glass-timeline {
           background: rgba(255, 255, 255, 0.04);
           backdrop-filter: blur(20px) saturate(130%);
           -webkit-backdrop-filter: blur(20px) saturate(130%);
           border: 1px solid rgba(255, 255, 255, 0.1);
           border-radius: 16px;
           padding: 2rem;
           margin: 2rem 0;
           position: relative;
           overflow: hidden;
           box-shadow:
               0 6px 24px rgba(0, 0, 0, 0.1),
               0 2px 8px rgba(0, 0, 0, 0.05),
               inset 0 1px 0 rgba(255, 255, 255, 0.12);
       }

       .liquid-glass-timeline::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 1px;
           background: linear-gradient(90deg,
               transparent 0%,
               rgba(255, 255, 255, 0.2) 50%,
               transparent 100%);
           animation: subtle-shimmer 6s ease-in-out infinite;
       }

       .timeline-list {
           list-style: none;
           padding: 0;
           margin: 0;
           position: relative;
       }

       /* Central timeline line */
       .timeline-list::before {
           content: '';
           position: absolute;
           left: 60px;
           top: 20px;
           bottom: 20px;
           width: 2px;
           /*  background: linear-gradient(180deg,
               rgba(99, 102, 241, 0.6) 0%,
               rgba(99, 102, 241, 0.3) 50%,
               rgba(99, 102, 241, 0.6) 100%); */
           border-radius: 1px;
           box-shadow: 0 0 8px rgba(99, 102, 241, 0.2);
       }

       .timeline-item {
           display: flex;
           align-items: flex-start;
           padding: 1.5rem 0;
           position: relative;
           transition: all 0.3s ease;
       }

       .timeline-item:hover {
           background: rgba(255, 255, 255, 0.02);
           border-radius: 12px;
           margin: 0 -1rem;
           padding-left: 2.5rem;
           padding-right: 2.5rem;
           transform: translateY(-1px);
       }

       .timeline-date {
           width: 120px;
           flex-shrink: 0;
           text-align: right;
           padding-right: 2rem;
           position: relative;
       }

       .timeline-date-text {
           font-size: 0.85rem;
           font-weight: 600;
           color: rgba(255, 255, 255, 0.8);
           text-shadow:
               0 1px 0 rgba(0, 0, 0, 0.4),
               inset 0 1px 1px rgba(0, 0, 0, 0.2);
           line-height: 1.3;
       }

       .timeline-year {
           font-size: 0.75rem;
           color: rgba(255, 255, 255, 0.6);
           margin-top: 0.2rem;
       }

       /* Timeline node/dot */
       .timeline-node {
           width: 16px;
           height: 16px;
           border-radius: 50%;
           background: rgba(99, 102, 241, 0.8);
           border: 3px solid rgba(255, 255, 255, 0.1);
           backdrop-filter: blur(10px);
           -webkit-backdrop-filter: blur(10px);
           position: absolute;
           left: 53px;
           top: 50%;
           transform: translateY(-50%);
           transition: all 0.3s ease;
           box-shadow:
               0 0 0 4px rgba(99, 102, 241, 0.1),
               0 2px 8px rgba(0, 0, 0, 0.1);
           z-index: 2;
       }

       .timeline-item:hover .timeline-node {
           background: rgba(99, 102, 241, 1);
           border-color: rgba(255, 255, 255, 0.2);
           transform: translateY(-50%) scale(1.2);
           box-shadow:
               0 0 0 6px rgba(99, 102, 241, 0.15),
               0 4px 12px rgba(99, 102, 241, 0.3);
       }

       .timeline-content {
           flex: 1;
           padding-left: 3rem;
       }

       .timeline-title {
           font-size: 1.1rem;
           font-weight: 600;
           color: rgba(255, 255, 255, 0.95);
           margin-bottom: 0.5rem;
           text-shadow:
               0 1px 0 rgba(0, 0, 0, 0.5),
               inset 0 1px 2px rgba(0, 0, 0, 0.3);
       }

       .timeline-description {
           font-size: 0.9rem;
           color: rgba(255, 255, 255, 0.75);
           line-height: 1.5;
           text-shadow:
               0 1px 0 rgba(0, 0, 0, 0.3),
               inset 0 1px 1px rgba(0, 0, 0, 0.15);
       }

       .timeline-tag {
           display: inline-block;
           padding: 0.25rem 0.75rem;
           background: rgba(99, 102, 241, 0.15);
           backdrop-filter: blur(10px);
           -webkit-backdrop-filter: blur(10px);
           border: 1px solid rgba(99, 102, 241, 0.3);
           border-radius: 12px;
           font-size: 0.75rem;
           color: rgba(255, 255, 255, 0.9);
           margin-top: 0.5rem;
           text-shadow:
               0 1px 0 rgba(0, 0, 0, 0.4),
               inset 0 1px 1px rgba(0, 0, 0, 0.2);
       }

       /* Timeline variants for different states */
       .timeline-item.completed .timeline-node {
           background: rgba(16, 185, 129, 0.8);
           box-shadow:
               0 0 0 4px rgba(16, 185, 129, 0.1),
               0 2px 8px rgba(0, 0, 0, 0.1);
       }

       .timeline-item.completed:hover .timeline-node {
           background: rgba(16, 185, 129, 1);
           box-shadow:
               0 0 0 6px rgba(16, 185, 129, 0.15),
               0 4px 12px rgba(16, 185, 129, 0.3);
       }

       .timeline-item.in-progress .timeline-node {
           background: rgba(245, 158, 11, 0.8);
           animation: pulse-timeline 2s ease-in-out infinite;
           box-shadow:
               0 0 0 4px rgba(245, 158, 11, 0.1),
               0 2px 8px rgba(0, 0, 0, 0.1);
       }

       .timeline-item.in-progress:hover .timeline-node {
           background: rgba(245, 158, 11, 1);
           box-shadow:
               0 0 0 6px rgba(245, 158, 11, 0.15),
               0 4px 12px rgba(245, 158, 11, 0.3);
       }

       @keyframes pulse-timeline {
           0%, 100% {
               box-shadow:
                   0 0 0 4px rgba(245, 158, 11, 0.1),
                   0 2px 8px rgba(0, 0, 0, 0.1);
           }
           50% {
               box-shadow:
                   0 0 0 8px rgba(245, 158, 11, 0.2),
                   0 4px 12px rgba(245, 158, 11, 0.2);
           }
       }

       .timeline-item.future .timeline-node {
           background: rgba(255, 255, 255, 0.1);
           border-color: rgba(255, 255, 255, 0.2);
           box-shadow:
               0 0 0 4px rgba(255, 255, 255, 0.05),
               0 2px 8px rgba(0, 0, 0, 0.1);
       }

       /* Adjust body to account for navbar */
       body {
           padding-top: 0; /* Remove top padding since navbar is sticky */
       }
       @media (prefers-reduced-motion: reduce) {
           .subtle-shimmer,
           body::before,
           body {
               animation: none;
           }

           .metric-card-minimal:hover,
           .feature-card:hover,
           .pill:hover,
           .btn:hover {
               transform: none;
           }
       }

  /* Reduced Motion Support */
        @media (prefers-reduced-motion: reduce) {
            .enhanced-gradient,
            .gradient-drift,
            .gradient-counter-drift,
            .enhanced-particles-1,
            .enhanced-particles-2,
            .enhanced-particles-3,
            .enhanced-particles-4,
            .gradientShift,
            .rotate-glow,
            .float-gentle,
            .number-glow,
            .warning-pulse,
            .bounce-subtle,
            .warning-sweep,
            .success-shimmer,
            .progress-bar,
            .border-glow,
            .testimonial-shine,
            .quote-shimmer,
            body,
            body::before,
            body::after,
            .particle-layer {
                animation: none !important;
            }
}

/* LIQUID GLASS STYLES */

.liquidglass-wrapper {
  position: relative;
  display: flex;
  font-weight: 600;
  overflow: hidden;

  color: black;
  cursor: pointer;

  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
border-radius:0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquidglass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;

  backdrop-filter: blur(0.4px);
  filter: url(#glass-distortion);
  overflow: hidden;
  isolation: isolate;
}

.liquidglass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
}

.liquidglass-tint-dark {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.liquidglass-tint-light {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
}

.liquidglass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;

  overflow: hidden;

  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
}

.liquidglass-shine-header {
  position: absolute;
  inset: 0;
  z-index: 2;

  overflow: hidden;

  box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.5);
}

.liquidglass-text {
  z-index: 3;
  font-size: 2rem;
  color: black;
}

/* OTHER STYLES */

/*
GREEN BACKGROUND
https://media.istockphoto.com/id/1430511443/vector/christmas-mistletoe-foliage-and-berries-vector-seamless-pattern.jpg?s=612x612&w=0&k=20&c=oqxlH7ytgd5yjBQroACirJ1gH7Au1tq8gmsdeGd-Crk=

ORANGE BACKGROUND
https://images.fineartamerica.com/images/artworkimages/mediumlarge/3/beautiful-orange-and-pastel-flowers-seamless-pattern-julien.jpg

MARGARITAS BACKGROUND
https://static.vecteezy.com/system/resources/previews/056/652/082/non_2x/hand-drawn-white-flower-seamless-pattern-floral-repeating-wallpaper-for-textile-design-fabric-print-wrapping-paper-cute-daisy-flowers-on-blue-background-repeated-ditsy-texture-vector.jpg

SPRING FLOWERS BACKGROUND
https://img.freepik.com/free-vector/flat-floral-spring-pattern-design_23-2150117078.jpg

VECTOR WINDS BACKGROUND
https://i.ibb.co/MDbLn4N4/vectors.png

RED FLOWERS BACKGROUND
https://www.publicdomainpictures.net/pictures/610000/velka/seamless-floral-wallpaper-art-1715193626Gct.jpg
*/

a {
  text-decoration: none;
}

.wrapper {
  display: flex;
  gap: 25px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.menu,
.menu > div {
  padding: 0.4rem;
  border-radius: 1.8rem;
}

/* .menu:hover {
  padding: 0.6rem;
  border-radius: 1.8rem;
} */

.menu > div > div {
  font-size: 20px;
  color: white;
  padding: 0.4rem 0.6rem;
  border-radius: 0.8rem;
  transition: all 0.1s ease-in;
}


.dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 1rem;
  padding: 0.6rem;
}

.dock,
.dock > div {
  border-radius: 1rem;
}

.dock img {
  width: 75px;
  padding: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

/* TopNav Glass */

.topnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 0;
  padding: 0.6rem;
}

.topnav,
.topnav > div {
  border-radius: 0;
}

.topnav img {
  width: 75px;
  padding: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}


.button {
  padding: 1.5rem 2.5rem;
  border-radius: 3rem;
}

.button,
.button > div {
  border-radius: 3rem;
}

.button:hover {
  padding: 1.8rem 2.8rem;
}

.button:hover > div {
  border-radius: 4rem;
}

.button svg {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.button:hover svg {
  transform: scale(0.95);
}

@keyframes moveBackground {
  from {
    background-position: 0% 0%;
  }
  to {}
    background-position: 0% -500%;
  }
}

.video-bg {
	  background-size: cover;
	  object-fit: cover;
}

.blend {
  mix-blend-mode: difference !important;
  color: #efefef;
  position: relative;
  z-index: 2;
}

.midnight-city {
  background: #232526;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.no-box-shadow {
  box-shadow: 0 !important;
}
/* Core Liquid Glass Material - Reduced Frost */
        .liquid-glass-minimal {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px) saturate(120%);
            -webkit-backdrop-filter: blur(15px) saturate(120%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .liquid-glass-panel-minimal {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(20px) saturate(130%);
            -webkit-backdrop-filter: blur(20px) saturate(130%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow:
                0 6px 24px rgba(0, 0, 0, 0.1),
                0 2px 8px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }

        /* Subtle Dynamic Lighting */
        .liquid-glass-minimal::before,
        .liquid-glass-panel-minimal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.2) 50%,
                transparent 100%);
            animation: subtle-shimmer 6s ease-in-out infinite;
        }

        @keyframes subtle-shimmer {
            0%, 100% { opacity: 0.2; transform: translateX(-50%); }
            50% { opacity: 0.5; transform: translateX(50%); }
        }

        /* Inset Text Styles */
        .text-inset {
            color: rgba(255, 255, 255, 0.9);
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.5),
                0 -1px 0 rgba(255, 255, 255, 0.1),
                inset 0 1px 2px rgba(0, 0, 0, 0.3);
            font-weight: 600;
        }

        .text-inset-deep {
            color: rgba(255, 255, 255, 0.85);
            text-shadow:
                0 2px 0 rgba(0, 0, 0, 0.6),
                0 -1px 0 rgba(255, 255, 255, 0.15),
                inset 0 2px 4px rgba(0, 0, 0, 0.4);
            font-weight: 700;
        }

        .text-inset-subtle {
            color: rgba(255, 255, 255, 0.8);
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.3),
                0 -1px 0 rgba(255, 255, 255, 0.05),
                inset 0 1px 1px rgba(0, 0, 0, 0.2);
            font-weight: 500;
        }

        /* Large Inset Headlines */
        .hero-title-inset {
            font-size: 3rem;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.95);
            text-shadow:
                0 3px 0 rgba(0, 0, 0, 0.7),
                0 -2px 0 rgba(255, 255, 255, 0.2),
                inset 0 3px 6px rgba(0, 0, 0, 0.5);
            letter-spacing: -0.02em;
            line-height: 1.1;
        }

        .section-title-inset {
            font-size: 2rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.9);
            text-shadow:
                0 2px 0 rgba(0, 0, 0, 0.6),
                0 -1px 0 rgba(255, 255, 255, 0.15),
                inset 0 2px 4px rgba(0, 0, 0, 0.4);
            margin-bottom: 1rem;
        }

.top-nav {
  font-size: 1.0rem;
}

.glass{
  background:rgba(255,255,255,.08);border:2px solid transparent;
  box-shadow:0 0 0 2px rgba(255,255,255,.1),0 16px 32px rgba(0,0,0,.12);
  backdrop-filter:url(#frosted);-webkit-backdrop-filter:url(#frosted);
  display:grid;place-items:center;cursor:pointer;outline:0;
}

.glass::before,
.glass::after{
  content:"";background:#fff;border-radius:10px;
}
/* .glass::after{transform:rotate(90deg)} */

.card-body {
  height:100%;
}

.process-impact-background, .situation-background {
  box-shadow:0 0 0 2px rgba(255,255,255,.1),0 16px 32px rgba(0,0,0,.12);
  backdrop-filter:url(#frosted);-webkit-backdrop-filter:url(#frosted);
  display:grid;place-items:center;cursor:pointer;outline:0;
  color: #ffffff;
}

.process-impact-background::before,
.process-impact-background::after,.situation-background::before,
.situation-background::after{
  content:"";background:#fff;border-radius:10px;
}


body{
    margin-top:20px;
}



.cd-horizontal-timeline ol, .cd-horizontal-timeline ul {
  list-style: none;
}
.cd-timeline-navigation a:hover, .cd-timeline-navigation a:focus {
   border-color:#313740;
  
}
.cd-horizontal-timeline a, .cd-horizontal-timeline a:hover, .cd-horizontal-timeline a:focus{ color:#313740;}
.cd-horizontal-timeline blockquote, .cd-horizontal-timeline q {
  quotes: none;
}
.cd-horizontal-timeline blockquote:before, .cd-horizontal-timeline blockquote:after,
.cd-horizontal-timeline q:before, .cd-horizontal-timeline q:after {
  content: '';
  content: none;
}
.cd-horizontal-timeline table {
  border-collapse: collapse;
  border-spacing: 0;
}
.cd-horizontal-timeline {
  opacity: 0;
  margin: 2em auto;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-horizontal-timeline::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.cd-horizontal-timeline.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}
.cd-horizontal-timeline .timeline {
  position: relative;
  height: 100px;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-wrapper {
  position: relative;
  height: 100%;
  margin: 0 40px;
  overflow: hidden;
}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 20px;
}
.cd-horizontal-timeline .events-wrapper::before {
  left: 0;
  
}
.cd-horizontal-timeline .events-wrapper::after {
  right: 0;
  
}
.cd-horizontal-timeline .events {
  /* this is the grey line/timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50px;
  height: 2px;
  /* width will be set using JavaScript */
  background: #dfdfdf;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
  /* this is used to create the green line filling the timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #313740;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  font-size: 1rem;
  padding-bottom: 15px;
 
  /* fix bug on Safari - text flickering while timeline translates */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.cd-horizontal-timeline .events a::after {
  /* this is used to create the event spot */
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -5px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  background-color: #f8f8f8;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color: #313740;
  border-color: #313740;
}
.cd-horizontal-timeline .events a.selected {
  pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
  background-color: #313740;
  border-color: #313740;
}
.cd-horizontal-timeline .events a.older-event::after {
  border-color: #313740;
}
@media only screen and (min-width: 1100px) {
  .cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

.cd-timeline-navigation a {
  /* these are the left/right arrows to navigate the timeline */
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  /* replace text with an icon */
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
  /* arrow icon */
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.cd-timeline-navigation a.prev {
  left: 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
  right: 0;
}
.no-touch .cd-timeline-navigation a:hover {
  border-color: #7b9d6f;
}
.cd-timeline-navigation a.inactive {
  cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 2em 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  padding: 0 5%;
  opacity: 0;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
  max-width: 800px;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-content h4 {
  font-weight: 700;
  margin-bottom: 0px;
  line-height: 20px;
  margin-bottom: 15px;
}
.cd-horizontal-timeline .events-content h4 small {
  font-weight: 400;
  line-height: normal;
  font-size: 15px;
}
.cd-horizontal-timeline .events-content em {
  display: block;
  font-style: italic;
  margin: 10px auto;
}
.cd-horizontal-timeline .events-content em::before {
  content: '- ';
}
.cd-horizontal-timeline .events-content p {
  font-size: 16px;
  margin-top: 15px;
  
}

@media only screen and (min-width: 768px) {
  
  .cd-horizontal-timeline .events-content em {
    font-size: 1rem;
  }  
}

@media only screen and (max-width: 767px) {

  .cd-horizontal-timeline.loaded{ margin: 0;}  
  .cd-horizontal-timeline .timeline{ width: 100%;}
  .cd-horizontal-timeline ol, .cd-horizontal-timeline ul{padding: 0;margin: 0;}
  .cd-horizontal-timeline .events-content h4{ font-size: 16px;}
  .cd-horizontal-timeline .events-content{ margin: 0;}
  
}

@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
.timeline:before{
  content: " ";
    display:none;
    bottom: 0;
    left: 0%;
    width: 0px;
    margin-left: -1.5px;
    background-color: #eeeeee;
}


/* = Toggle Visibility
-------------------------------------------------------------- */

.toggled-item{transition: height 350ms ease-in-out, padding 350ms ease-in-out, opacity 350ms ease-in-out;overflow: hidden;}
.toggled-item-hidden{padding-top:0!important;padding-bottom:0!important;border-top:0!important;border-bottom:0!important;outline:0!important;opacity: 0;}
.object-hidden{display:none;}


/* = Bloc Padding Multi Breakpoint
-------------------------------------------------------------- */

@media (min-width: 576px) {
    .bloc-xxl-sm{padding:200px 20px;}
    .bloc-xl-sm{padding:150px 20px;}
    .bloc-lg-sm{padding:100px 20px;}
    .bloc-md-sm{padding:50px 20px;}
    .bloc-sm-sm{padding:20px;}
    .bloc-no-padding-sm{padding:0 20px;}
}
@media (min-width: 768px) {
    .bloc-xxl-md{padding:200px 20px;}
    .bloc-xl-md{padding:150px 20px;}
    .bloc-lg-md{padding:100px 20px;}
    .bloc-md-md{padding:50px 20px;}
    .bloc-sm-md{padding:20px 20px;}
    .bloc-no-padding-md{padding:0 20px;}
}
@media (min-width: 992px) {
    .bloc-xxl-lg{padding:200px 20px;}
    .bloc-xl-lg{padding:150px 20px;}
    .bloc-lg-lg{padding:100px 20px;}
    .bloc-md-lg{padding:50px 20px;}
    .bloc-sm-lg{padding:20px;}
    .bloc-no-padding-lg{padding:0 20px;}
}


/* = Mobile adjustments 
-------------------------------------------------------------- */
@media (max-width: 1024px)
{
    .bloc.full-width-bloc, .bloc-tile-2.full-width-bloc .container, .bloc-tile-3.full-width-bloc .container, .bloc-tile-4.full-width-bloc .container{
        padding-left: 0; 
        padding-right: 0;  
    }
}
@media (max-width: 991px)
{
    .container{width:100%;}
    .bloc{padding-left: constant(safe-area-inset-left);padding-right: constant(safe-area-inset-right);} /* iPhone X Notch Support*/
    .bloc-group, .bloc-group .bloc{display:block;width:100%;}
}
@media (max-width: 767px)
{
    .bloc-tile-2 .container, .bloc-tile-3 .container, .bloc-tile-4 .container{
        padding-left:0;padding-right:0;
    }
    .btn-dwn{
       display:none; 
    }
    .voffset{
        margin-top:5px;
    }
    .voffset-md{
        margin-top:20px;
    }
    .voffset-lg{
        margin-top:30px;
    }
    form{
        padding:5px;
    }
    .close-lightbox{
        display:inline-block;
    }
    .blocsapp-device-iphone5{
	   background-size: 216px 425px;
	   padding-top:60px;
	   width:216px;
	   height:425px;
    }
    .blocsapp-device-iphone5 img{
	   width: 180px;
	   height: 320px;
    }
}


@media (max-width: 991px){
	.display-2{
	}
	
}

@media (max-width: 767px){
	h1{
	}
	.display-1{
	}
	
}