@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Poppins:wght@100;200;300;500;600&display=swap');
@import url('https://fonts.cdnfonts.com/css/instrument-sans');
@import url('https://fonts.cdnfonts.com/css/figtree');


/* document */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}


/* colors */

  .blue {color: #0B1299;}
  .lime {color: #B5CE37;}
  .teal {color: #62AFBD;}
  .charcoal {background-color: #232323;}
	.dove {background-color: #f4f6f4;}
	.gradient {background:  linear-gradient(to right, #44D0D4, #B5CE37);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
  .aquamarine {color: #7DAFBD;}
  .midori {color: #8BB84C;}
  .fawn {color: #CCC4C2;}
  .mint {color: #B7D7CE;}
  .gold {color: #D1AE5D;}
  .bluesque {color: #74A8C3;}
  .sapphire {color: #82B3C4;}
	.amber {color: #FFC43D;}
	.white {color: #F0F4F7;}
	.green {color: #60992D;}
	.blue {color: #82B3C4};
	.selectorblue {color: #0555A5;}
	.background-rd {color: #8b8c89;}
	.remint {color: #bae9e0;}
	.olivine {color: #abb557;}
	.violetblue {color: #3B429F;}
	.sg-1 {color: #82B3C4;}



/* Logo */

.logo-rd {

	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: 7px;
	font-weight: 100;
	font-size: 1em;
	float: right;
	margin-top: 30px;
	margin-right: 0px;
	padding-right: 0px;
	align-items: start;
	padding: 0px;
	padding-top: 30px;
	margin: 0px;
}
  
/* structure */

section.hero {

	display: flex;
	height: 100vh; 
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url("expanse.jpg");
	background-size: cover; 
	background-position: center; 
	background-repeat: no-repeat; 
	width: 100%;
	position: relative;
	
}


.headline {
	font-family:'Poppins', sans-serif;
	font-weight: 300;
	font-size: 2.8em;
	max-width: 750px;
  letter-spacing: -0.03em;
  line-height: 1.1em;
}


.hero-text {
	font-family: 'Figtree', sans-serif;
	font-size: 1.2rem;
	font-weight: 200;
	line-height: 1.5;
	max-width: 525px;
	margin-bottom: 20px;
	margin-top: 12px;
}



section.second {

	padding-top: 0px;
	height: 100vh;
	background-color: #f4f6f4;
	padding-top: 25px;
	position: relative;

}


#thesis {
	padding-top: 50px;
}

#thesis p {
	font-family: 'Figtree', sans-serif;
	font-size: 1.1em;
	margin-top: 12px;
	color: #787878; 
	max-width: 570px;  
	margin-left: 20px;

}

section.paradox  {
	min-height: 100vh;
	background-color: #8b8c89;
}




.atomic {

		height: 100vh;

}

.container-bionic {
	padding-bottom: 60px;
}

.third {
  padding: 100px 0;
  background-color: #001021;
  z-index: 500;
}

.skygate-text {
	display: flex;
	align-items: start;
	font-family: 'Open Sans', sans-serif;
	font-size: 250px;
	color: #e9e8e4;
	font-weight: 100;
	opacity: 0.09;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	margin: 0;
	line-height: 1;
}


.img-skygate {
  border-radius: 25px;
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
}


.img-atomic {
  border-radius: 25px;
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
}



.mdp {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	color: #F7F7F7;
}

.mdp:hover {

	color: #bae9e0;

}

.hero-lead {

color: #B4B4B4;
font-family: 'Poppins', sans-serif;
font-weight: 200;
margin-top: 70px !important;
font-size: 2em !important;
padding-left: 10px;
}



/* ----------------------------------------LARGE SCREENS------------------------------------------*/


@media (min-width: 1200px) {
  .third {
    padding-top: 0px;
  }

  .img-skygate {
    transform: translateY(-25%);
    margin-bottom: 0;
    z-index: 52;
  }
}


.thesistext {

	margin-top: 30px;
}


.thesis-label {
	margin-top: 15px;
}

.thesis-title {
	margin-top: 50px;
}


.lead-rd {

  	color: #FFFFFF;
  	font-family: 'Poppins', sans-serif;
  	font-weight: 200;
  	font-size: 2.5em;
  	margin-top: auto;
  	margin-bottom: auto;
  }


.advisory {

	background-color: transparent;
	padding-top: 0px;
	min-height: 100vh;

	
}


.ad-cta {

	border-left: solid 3px #BCA060;
	padding-left: 10px;

}



.cta {

	min-height: 200px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='200' preserveAspectRatio='none' viewBox='0 0 1440 200'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1023%26quot%3b)' fill='none'%3e%3cpath d='M167.42 229.57C328.25 229.41 484.5 149.22 805.65 148.99 1126.81 148.76 1283.53 85.07 1443.89 84.99' stroke='rgba(116%2c 168%2c 195%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M425.34 213.7C570.05 211.13 697.36 26.42 973.08 26.21 1248.8 26 1383.07 86.12 1520.82 86.21' stroke='rgba(116%2c 168%2c 195%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M481.65 230.64C630.44 227.78 759.98 33.29 1043.14 32.97 1326.31 32.65 1463.71 82.92 1604.64 82.97' stroke='rgba(116%2c 168%2c 195%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M621.64 238.88C707.76 238.5 702.92 168.66 958.81 168.2 1214.71 167.74 1463.21 82.37 1633.16 82.2' stroke='rgba(116%2c 168%2c 195%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M346.53 212.44C505.91 211.93 656.04 95.53 973.12 94.94 1290.2 94.35 1441.85 17.09 1599.71 16.94' stroke='rgba(116%2c 168%2c 195%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1023'%3e%3crect width='1440' height='200' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	max-width: 100%;
	height: auto;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

}

section.bionic {

	display: flex;
	margin-top: 0px;
	padding-left: 0px;
	background-color: #232323;

}


section.bionic-overview {

	position: relative;

}

section.clients {

	min-height: 300px;
	max-width: 1100px;
	position: absolute;
	background-color: #f4f6f4;
	left: auto;
	right: auto;


}

.col-4 {
  padding-bottom: 50px;
}

hr.space {
  margin: 0px;
  border-top: 1px solid #f4f6f4 !important;
}

#privacy {
  height: 175vh;
  background-color: #ffffff !important;
  overflow: visible;
}

.portfolio {

	min-height: 800px;
	background-color: #023c40;
	padding-top: 200px;

}

.showcase {

	min-height: 440px;
	max-width: 1000px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	border-radius: 25px;
	margin-right: auto;
	margin-left: auto;

	background-color: #23860B;
}

 .divider { 
 	padding-bottom: 5px;
 	margin-left: 20px;
  }


  .separator {
	min-height: 100px;
	background-color: #25283d;

  }

.separator-resume {
	padding-top: 15px;
	 width: 0;
	 height:0;
	 border-left: 100vw solid #f4f6f4;
	 border-bottom: 200px solid #001021;
}

.separator-bionic {
    padding-top: 15px;
    width: 0;
    height: 0;
    border-top: 200px solid #001021;
    border-left: 100vw solid #232323;
}

.separator-atomic {
	padding-top: 15px;
	 width: 0;
	 height:0;
	 border-left: 100vw solid #232323;
	 border-bottom: 200px solid #ffffff;
}

.separator-paradox {
    padding-top: 15px;
    width: 0;
    height: 0;
    border-top: 200px solid #fff;
    border-left: 100vw solid #8b8c89;
}

.fpl { 
 padding-left: 20px;
 }


.extend-bg {

	box-shadow: 0 0 0 100vmax #232323;
	clip-path: inset(0 -100vmax);
}

.cover {
 position: relative;
 text-align: center;
}


.benefit p {
	font-family: 'Poppins', sans-serif;

	color: #919191 !important;
	font-size: 1em !important;
}


/* Media queries */

/* ----------------------------------------SMALLEST SCREENS------------------------------------------*/

@media (min-width: 350px) and (max-width: 480px) {

.mpl {padding-left: 20px;}
.divider {margin-bottom:  30px;}
p {padding-right: 5px;}
.nav-link {margin-left:  20px !important;}
.copyright-text {padding-top: 40px !important;}

section.second h1 {
 padding-left: 20px !important;
 font-size: 2.4em !important;
}

section.second { 
	min-height: 1950px;
 padding-bottom: 0px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 border: none;
  }

.lead-rd {

 font-size: 2em;
}

.footer-logo, .footer-text {
 padding-left: 20px;
}

.skygate-text {
 font-size: 200px;
}

.title-advisory {

 font-size:  2.2em !important;
 padding-left: 15px;

}

.thesistext {
	 max-width: 375px !important;
	 word-wrap: break-word !important;
}

.headline {


font-size: 2.1em !important;

}

.navbar-nav {

padding-top: 10px !important;

}


.atomic {

	min-height: 1000px;
}


.logo-bionic {

display: none;

}

.logo-bionic-eclipse {

width: 27% !important;
margin-top: 15px;
margin-left: 0px;
padding-left: 0px;

}

.heading-bionic {

text-transform: uppercase;
font-family: 'Poppins', sans-serif;
font-weight: 300 !important;
color: #B4B4B4 !important;
letter-spacing: 0.1em;
font-size: 1.1em !important;
padding-top: 10px !important;


}


.hero-lead {

color: #B4B4B4;
font-family: 'Poppins', sans-serif;
font-weight: 200;
margin-top: 70px !important;
font-size: 2em !important;
padding-left: 30px;
}

section.bionic h5 {

color: #B4B4B4;
font-family: 'Open Sans', sans-serif;
padding-left: 20px;
margin-top: 5px;

}

section.bionic p {

color: #B4B4B4;
font-family: 'Open Sans', sans-serif;
padding-left: 20px;

}

.home {

padding-left: 15px;
padding-top: 5px;
}

.policy {

text-align: left;

}

.photo-jf {

width: 25%;
padding-top: 10px;

}

.ad-cta {

border-left: solid 3px #BCA060;
padding-left: 10px;
max-width: 460px !important;

}



}


@media (max-width: 576px) {

.atomic {	min-height: 1000px;
}
}


/* ----------------------------------------MEDIUM SCREENS------------------------------------------*/


@media (min-width: 481px) and (max-width: 767px) {
  

.mpl {padding-left: 20px;}
.divider {margin-bottom:  30px;}
p {padding-right: 5px;}
.nav-link {margin-left:  20px !important;}
.copyright-text {padding-top: 40px !important;}

.photo-jf {

width: 25%;
padding-top: 10px;

}

.logo-rd {

	font-weight: 100;
	font-size: 1.2em;
	float: right;
	margin-top: 30px;
	margin-right: 20px;
	padding-right: 0px;

	 }


.lead-rd {

  	color: #FFFFFF;
  	font-family: 'Poppins', sans-serif;
  	font-weight: 200;
  	font-size: 2em;
  	margin-top: auto;
  	margin-bottom: auto;
  }



.img-skygate {
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 20px;
 padding-bottom: 20px;
 border-radius: 30px;

  }

  .skygate-text {
  	display: none;
  }

.footer-logo, .footer-text {
 padding-left: 20px;
}

.rd h1 {

 font-size: 2em;
}


section.second h1 {
 padding-left: 20px !important;
 font-size: 2.5em !important;
}

section.second { 
	min-height: 1400px;
 padding-bottom: 0px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 border: none;
  }

.title-advisory {

 font-size:  2.4em !important;
 padding-left: 15px;

}

.thesistext {
	 max-width: 460px !important;
	 word-wrap: break-word !important;
}

.headline {

 font-size: 2.3em !important;

}

.navbar-nav {

padding-top: 10px !important;

	}

.logo-bionic {

	display: none;

}

.logo-bionic-eclipse {

	width: 27% !important;
	margin-top: 15px;
	margin-left: 0px;
	padding-left: 0px;

}

.heading-bionic {

 text-transform: uppercase;
 font-family: 'Poppins', sans-serif;
 font-weight: 300 !important;
 color: #B4B4B4 !important;
 letter-spacing: 0.1em;
 font-size: 0.9em !important;
 padding-left: 20px !important;
 padding-top: 10px !important;


}

.hero-lead {

 color: #B4B4B4;
 font-family: 'Poppins', sans-serif;
 font-weight: 200;
 margin-top: 70px !important;
 font-size: 2em !important;
 padding-left: 20px;

}



section.bionic h5 {

 color: #B4B4B4;
 font-family: 'Open Sans', sans-serif;
 padding-left: 20px;
 margin-top: 5px;

}

section.bionic p {

 color: #B4B4B4;
 font-family: 'Open Sans', sans-serif;
 padding-left: 20px;

}

.policy {

 text-align: left;

}

.ad-cta {

 border-left: solid 3px #BCA060;
 padding-left: 10px;
 max-width: 460px !important;

	}

}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
section.second { 

	min-height: 1100px;

}

.logo-bionic-eclipse {

	display: none;
	
	}


.photo-jf {

 width: 20%;
 padding-top: 10px;

 }
}


@media (min-width: 1025px) and (max-width: 1280px) {
  

section.second { 

	min-height: 900px;

}

	.logo-bionic-eclipse {

	display: none;
	
	}

.photo-jf {

 width: 15%;

 }


}


@media (min-width: 1281px) {
  
 section.second { 

		min-height: 900px;

	}

		.logo-bionic-eclipse {

		display: none;
		
  	}

  .photo-jf {

   width: 15%;

	 }

  
}



/* Navigation and logo */

.navbar {
 background-color: transparent;

}

.navbar-nav {

 background-color: #FFFFFF;
 border-radius: 25px;
 align-items: center;

}

.navbar-nav a {
 color: #C1AC77;
}

.navbar-nav a:hover {
 color: #3E6BA6;
}

.navbar-brand {

 font-family: 'Poppins', sans-serif;
 font-weight: 100;
 color: #232323;
 font-size: 1.37em !important;
 letter-spacing: 3px;
 padding-left: 20px;
	
}


.navbar-toggler {

 border: none !important;

}

.nav-link {

 font-family: 'Poppins', sans-serif;
 font-size:  0.8em !important;
 font-weight: 300 !important;
 margin-inline: 7px;
 padding-bottom: 7px;




}

.scroll-link {

 font-family: 'Poppins', sans-serif;
 font-size:  0.9em;
 margin-left:  5px;
 font-weight: 300;

}


/* Typography */
	
section.second sm {

 font-variant: small-caps;
 font-size: 0.9em;
 font-family: 'Poppins', sans-serif;
 color:  #999;
 padding-left: 18px;

}

section.second h1 { 

 padding-top: 0px;
 padding-bottom: 0px;
 font-family: 'Poppins', sans-serif;
 font-weight: 300;
 font-size:  3.4em;
 letter-spacing: -0.03em;
 color: #BCA060;
 margin-top: 20px;
 padding-left: 18px;


 }

 section.second p {
 	font-size: 1.2;
 	line-height: 1.6;
 }

 section.bionic p {

 	color: #B4B4B4;
 	font-family: 'Open Sans', sans-serif;

 }

 section.bionic h5 {

 	color: #B4B4B4;
 	font-family: 'Open Sans', sans-serif;

 }

.section-heading {

	padding-top: 0px;
	padding-bottom: 0px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size:  1.6em;
	letter-spacing: -0.03em;
	color: #BCA060;
	margin-top: 20px;
}

.section-subtitle {
	font-variant: small-caps;
	font-size: 0.9em;
	font-family: 'Poppins', sans-serif;
	color:  #999;
}

.section-description {
	font-family: 'Figtree', sans-serif;
	font-size: 1.1em;
	margin-top: 12px;
	color: #787878; 
	max-width: 570px;  
	margin-bottom: 30px;                                         
}

.product-description {
	font-family: 'Figtree', sans-serif;
	font-size: 1.2em;
	margin-top: 12px;
	color: #f7f7f7; 
	max-width: 570px;  
	margin-bottom: 30px;                                         
}



.jellyfish {

 padding-right: 35px;
 padding-bottom: 15px;
 padding-top: 100px;

}

.title-advisory {

 padding-top: 0px;
 padding-bottom: 0px;
 font-family: 'Poppins', sans-serif;
 font-weight: 300;
 font-size:  2.7em;
 letter-spacing: -0.03em;
 color: #BCA060;
 padding-left: 15px;
}

.ad-cta-heading {
 font-family: 'Poppins', sans-serif;
 color: #BCA060;
 font-weight: 500;

}


.subheading {

 font-weight: 400;
 color: #434343;
}

.secondary p {
	overflow-wrap: normal;
	overflow: auto;
	width: 90%;
}


 .projects-title {

 	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size:  3.4em;
	letter-spacing: -0.03em;
	color: #c1c1c1;
	padding-left: 30px;
	padding-top: 50px;
	opacity: 50%;
	z-index: 5;

 }


 p {

 	font-family: 'Open Sans', sans-serif;
	font-weight: 200;
	font-size:  1.1em;
	line-height: 1.5em;
	text-align:  left;


	}


.secondary p {
	overflow-wrap: normal;
	overflow: auto;
	max-width: 100%;
	font-size: 1.2em;
	line-height: 1.7;
	font-family: 'Poppins', sans-serif;
	color: #e9e9e9;
	margin-top: 20px;

}

.bionic p {

	width: 90%;
	line-height: 1.6;
	font-size: 1.2em;

}


.limited {
	max-width: 540px;
}


.f2 {

 padding-right: 20px !important;
}

#contact {

	min-height:  300px;
	background-color: #AEAEAE;
}


 .footer-logo {

 	font-family: 'Poppins', sans-serif;
 	font-weight: 600;
 	font-size:  2.7em;
 	color:  #FFF; 
 	padding-top: 20px;
 	letter-spacing: -0.05em;

 }

 .footer-text {

 	font-family: 'Open Sans', sans-serif;
 	font-size: 1em;
 	color:  #FFF;
 	padding-top: 4px;
  margin-right: 10px;
  margin-left: 10px;
 	
 }

 .copyright-text {

 	font-family: 'Open Sans', sans-serif;
 	font-size: 0.8em;
 	color:  #fff;
 	padding-top: 60px;
 	
 }

 .policy {

 	text-align: right;

 }

 .policy a:hover {
 	text-decoration: underline;
 }

 @media (max-width: 576px) {
 	.policy, .copyright-text {
 		text-align: center;
 	}
 }

 #privacy {

 height: 240vh; 
 margin-top: 50px;
 margin-bottom: 100px;
 word-wrap: break-word;
 max-width: 800px;
 margin-left: 50px;
 margin-right: 50px;


 }


#privacy h6+p {

	font-family: 'Poppins', sans-serif;
	font-weight: 200;
	font-size: 1em;
	padding-top: 5px;
	padding-bottom: 10px;
				
			}

#privacy h6 {

	margin-top: 30px;

}

.ad > p {
	
	margin-bottom: 2em !important;

}

.ad > h5 {

	font-family: 'Poppins';
	color: #BCA060;
}

 .text {

	font-family: 'Poppins', sans-serif;
	font-weight: 200;
	font-size: 30px;
}


  .heading-bionic {

  	text-transform: uppercase;
  	font-family: 'Poppins', sans-serif;
		font-weight: 300;
		color: #B4B4B4 !important;
		letter-spacing: 0.1em;
		font-size: 1em;
		

  }



.word-rotate {
  overflow: hidden;
  display: inline-block; /* Allows the words to flow inline with the h1 content */
  vertical-align: bottom; /* Aligns the baseline of the words with the baseline of the h1 text */
  height: 1.2em; /* Adjust this to the size of h1 text */
}

.word-rotate span {
  display: block;
  position: absolute;
  opacity: 0;
  transition: opacity 0.75s linear;
}

.centered {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #c1c1c1;
}

.bionic-overview {

	color: #A9A9A9;
	font-family: 'Open Sans', sans-serif;
	font-weight: 200;
	font-size:  1.1em;
	line-height: 1.5em;
	text-align:  left;

}
/* Buttons */

.landing-link {

	margin-left: 20px;
	margin-top: 20px;

}


.cta-ul {
	list-style-type: none;
	margin-top: 20px;
	font-family: 'Open Sans', sans-serif;
	line-height: 3em;

}



/* images */ 

	.icon {

		color: #919191;
		padding-left: 20px;


	}

	.underline {

		text-decoration: underline;
		text-decoration-thickness: 0.5px;
		text-underline-offset: 5px;
		text-decoration-style: dotted;

	}

 .photo {  
 	shape-outside: circle();
 	float:  right;
 	margin:  23px;
 	width: 42%;
 	padding-bottom: 25px;
 	padding-left: 10px;
  }


  .logo-bionic {

  	width: 20%;
  	padding-top: 0px;
  	margin-top: 45px;
  	visibility: visible;

  }

  .logo-bionic-eclipse {

		width: 15%;
		margin-top: 0px;
  }

  .home {

  	padding-left: 15px;
  	padding-top: 5px;
  }



 }

/* Tooltip customization */
.tooltip {
  --bs-tooltip-max-width: 600px !important;
}

.tooltip-inner {
  max-width: 600px !important;
  width: 600px !important;
  text-align: left !important;
  padding: 12px 15px !important;
  font-size: 0.9em !important;
  line-height: 1.4 !important;
}
/* Houdini Section Specific Styles */
.houdini {
  padding: 100px 0;
  background-color: none;
  color: #FFF;
}

.houdini-text {
  display: flex;
  align-items: start;
	font-family: 'QuentinCaps', sans-serif;
  font-size: 100px;
  font-size: 72px;
  background: linear-gradient(180deg, rgba(255,234,166,1) 0%, rgba(255,197,36,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  opacity: 0.75;
  max-width: 100%;
  position: relative;
  z-index: 1;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 3px; /* Improves readability for this font */
}

.img-houdini {
  border-radius: 25px;
  max-width: 85% !important;
  height: auto;
  margin-bottom: 30px;
  z-index: 10;
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.houdini-accent {
  color: #FFFEEE;
}

.heading-houdini {
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: #FF4500 !important;
  letter-spacing: 0.1em;
  font-size: 1em;
  margin-bottom: 8px;
}

.icon-houdini {
  color: #FF4500;
  font-size: 1.5em;
  padding-left: 20px;
}

.houdini-features p {
  font-size: 1.25em;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Media Queries for Houdini Section */
@media (min-width: 1200px) {
  .houdini {
    padding-top: 0px;
  }

  .img-houdini {
    transform: translateY(-25%);
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .houdini-text {
    font-size: 200px;
  }
  
  .heading-houdini {
    padding-left: 20px;
    padding-top: 10px;
  }
  
  .icon-houdini {
    margin-top: 10px;
  }
}


/* Filter by Tags Styles - Updated */
.filter-by-container {
  background-color: transparent;
  padding: 0 0 15px 0;
  margin: 20px 0 0 0;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.filter-by-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: #666;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.filter-tag {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  user-select: none;
  border: 1px solid transparent;
}

.filter-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.filter-tag.active {
  transform: scale(1.02);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.1);
}

/* Handling filtered-out sections properly */
.product-section {
  transition: opacity 0.6s ease, max-height 0.8s ease, margin 0.6s ease, padding 0.6s ease, transform 0.6s ease;
  opacity: 1;
  max-height: 2500px; /* Adjust based on your tallest section */
  overflow: hidden;
  transform: translateY(0);
}

.product-section.filtered-out {
  opacity: 0;
  max-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
  transform: translateY(50px);
}

/* Ensure AOS elements in filtered sections don't show */
.product-section.filtered-out [data-aos] {
  opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .filter-tags {
    gap: 8px;
  }
  
  .filter-tag {
    padding: 8px 14px;
    font-size: 0.8rem;
  }
  
  .product-section {
    max-height: 3000px; /* Taller for mobile layouts */
  }
}

.blueDiagonal{
   width: 0;
   height:0;
   border-top: 200px solid #f4f6f4;
   border-left: 200vw solid transparent;
}

/* Product tag styles - Updated for better visibility */
.product-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  margin-right: 6px;
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-tags-bionic {
  min-width: 280px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.product-tags-bionic .product-tag {
  margin-left: 5px;
}

/* Tag color styles for product tags */
.product-tag.tag-saas {
  background-color: #e3f2fd;
  color: #1976d2;
}

.product-tag.tag-consumer {
  background-color: #f3e5f5;
  color: #9c27b0;
}

.product-tag.tag-privacy {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.product-tag.tag-employment {
  background-color: #ede7f6;
  color: #5e35b1;
}


.product-tag.tag-experimental {
  background-color: #fff8e1;
  color: #ffa000;
}

.product-tag.tag-trust {
  background-color: #e1f5fe;
  color: #0288d1;
}

.product-tag.tag-productivity {
	 background-color: #fff2cc;
  color: #f1c232;

}

.product-tag.tag-human-energy {
  background-color: #fff3e0;
  color: #e65100;
}

.tag-human-energy {
  background-color: #fff3e0;
  color: #e65100;
}

.tag-human-energy.active {
  background-color: #ffe0b2;
}



/* Tag color styles */
.tag-all {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #e0e0e0;
}

.tag-all.active {
  background-color: #f5f5f5;
  border-color: #cccccc;
}

.tag-saas {
  background-color: #e3f2fd;
  color: #1976d2;
}

.tag-saas.active {
  background-color: #bbdefb;
}

.tag-consumer {
  background-color: #f3e5f5;
  color: #9c27b0;
}

.tag-consumer.active {
  background-color: #e1bee7;
}

.tag-privacy {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.tag-privacy.active {
  background-color: #c8e6c9;
}

.tag-employment {
  background-color: #ede7f6;
  color: #5e35b1;
}

.tag-employment.active {
  background-color: #d1c4e9;
}

.tag-experimental {
  background-color: #fff8e1;
  color: #ffa000;
}

.tag-experimental.active {
  background-color: #ffecb3;
}

.tag-trust {
  background-color: #e1f5fe;
  color: #0288d1;
}

.tag-productivity {
	background-color: #ffebee;
  color: #f1c232;

}

.tag-trust.active {
  background-color: #b3e5fc;
}


    .price-tag {
      display: inline-block;
      padding: 5px 15px;
      background-color: rgba(255,255,255,0.2);
      border-radius: 20px;
      font-family: 'Poppins', sans-serif;
      font-weight: 300;
      font-size: 0.9rem;
      margin-bottom: 15px;
    }
    
    .price-tag i {
      margin-right: 5px;
    }

.post-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  transition: all 0.2s ease-in-out;
  height: 100%;
}

.post-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 600;
}

.tag.featured { background: #c5f53a; color: #222; }
.tag.privacy { background: #a785f9; color: white; }
.tag.ethical { background: #38d6a2; color: white; }
.tag.future {
  background-color: #FFD447;
  color: #000;
}

.tag.ai {
  background-color: #7F5AF0;
  color: #fff;
}

.section-content {
  color: #222;
}

.service-highlights {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.service-highlights li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.8rem;
  font-weight: 500;
  color: #333;
}

.service-highlights li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #7F5AF0; /* accent color for checkmark */
  font-weight: bold;
  font-size: 1rem;
}

.btn-outline-primary {
  border-color: #7F5AF0;
  color: #7F5AF0;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}

.btn-outline-primary:hover {
  background-color: #7F5AF0;
  color: #fff;
}


.date {
  color: #6c757d;
}

.post-title {
  font-size: 1.25rem;
  margin: 0 0 8px 0;
}

.post-summary {
  color: #444;
  font-size: 1rem;
  margin-bottom: 16px;
}

.read-more {
  font-weight: 500;
  text-decoration: none;
  color: #000;
  border: 1px solid #000;
  padding: 6px 14px;
  border-radius: 6px;
  transition: all 0.2s;
}

.read-more:hover {
  background-color: #000;
  color: #fff;
}