/* Main styling */

* {box-sizing: border-box;}

body {
    margin: 0;
    padding: 0;
    background-color: #0e0e0e;
    color: ghostwhite;
    line-height: 1.65;
    font-family: "Schibsted Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
}

.error {
    color: rgb(142, 0, 0);
    font-size: 0.9rem;
}

p {
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.paragraph {
    margin: 0;
    border: 1px solid brown;
}

.description {
    margin: 0;
    font-size: 0.875rem;
}

h1 {
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 400;
}

.bigger-title {
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 400;
}

h2 {
    font-size: 1.875rem;
    line-height: 1.25;
    font-weight: 400;
}

h3 {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
}

.honeypot-field {
    display: none;
}

@media (min-width: 768px) {
	body {
		font-size: 1.125rem;
	}
    h1 {
        font-size: 2.5rem;
    }
    .bigger-title {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2rem;
    }
    h3 {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
	body {
		font-size: 1.1875rem;
	}
    h1 {
        font-size: 3.25rem;
    }
    .bigger-title {
        font-size: 3.25rem;
    }
    h2 {
        font-size: 2.75rem;
    }
    h3 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1280px) {
	body {
		font-size: 1.25rem;
	}
}

@media (min-width: 1536px) {
	body {
		font-size: 1.3125rem;
	}
}

@media (min-width: 1920px) {
	body {
		font-size: 1.4375rem;
	}
}

/* Background */

.subtle-grid {
    position: relative;
    width: 100%; /* adjust as needed */
    background: #151519;
    overflow: hidden; /* in case of any overflow */
}

/* The grid lines (top layer) */
.subtle-grid::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
      /* Vertical lines */
      repeating-linear-gradient(
        to right,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.05) 1px,
        transparent 1px,
        transparent 20px
      ),
      /* Horizontal lines */
      repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.05) 1px,
        transparent 1px,
        transparent 20px
      );
    pointer-events: none;
}

/* The fading gradient at the bottom */
.subtle-grid::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100px; /* how tall the fade should be */
    background: linear-gradient(
      to bottom,
      rgba(21,21,25,0) 0%,
      rgba(21,21,25,1) 100%
    );
    pointer-events: none;
}

/* Header */

.header {
    margin: 0;
    padding: 0;
	display: flex; /* Make header a flex container */
    align-items: center; /* Vertically center children */
    justify-content: center;
	border: 1px solid red;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
	width: 100%;
	height: 80px;
    margin: 0 2%;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px; /* Adjust padding as needed */
    background: #151519;
    transition: background-color 0.3s ease, border-bottom 0.3s ease;
    z-index: 10;
    border-bottom: 1px solid #1e1e23; /* Initially transparent border */
}

/* When scrolled, change background and show border */
.navbar.scrolled {
    background: rgba(21, 21, 25, 0.8); /* Slightly transparent dark background */
    border-bottom: 1px solid #1e1e23;   /* Visible bottom border */
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: auto;
    flex-shrink: 0;
    width: auto;
    white-space: nowrap; 
    min-width: max-content; 
}


.header-img {
	height: auto;
    display: block;
    text-align: center;
	width: 120px;
}

@media (min-width:768px) {
    .header-img {
        width: 130px;
    }
}

@media (min-width:1024px) {
    .header-img {
        width: 140px;
    }
}

@media (min-width:1280px) {

}

/* Button */

.btn-normal {
    cursor: pointer; /* Change mouse to pointer on hover */
    /* Add other styling as needed */
}

.btn-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2%;
	min-width: 120px;
	font-size: 1rem;
	padding: 0.5em 0.5em;
    border-radius: 4px;
	text-align: center;
}


.btn-primary {
    background-color: #dcdcdc;
	text-decoration: none;
    color: #151519;
    border: 1px solid transparent;
}

.btn-primary:hover {
    background-color: #151519;
    border-color: #dcdcdc;
    color: #dcdcdc;
    position: relative;
    z-index: 1;
}

.btn-primary:active {
    background-color: #222;
}

.btn-third {
    background-color: #2a2a38;
    position: relative;
    z-index: 1;
    font-weight: 400;
    color: #919198;
    transition: color 0.3s ease;
    border: 1px solid #2a2a38;
}


.btn-secondary {
    background-color: #1c1c26;
	text-decoration: none;
    color: #DCDCDC;
    border: 1px solid #393949;
}

/* .btn-secondary {
    background-color: #222;
	text-decoration: none;
    color: #DCDCDC;
    border: 1px solid #404040;
} */


.btn-secondary:hover {
    background-color: #2b2b2b;
    position: relative;
    z-index: 1;
}

.btn-secondary:active {
    background-color: #464646;
}

.btn-full-width {
    width: 100%;
    font-size: 1rem;
    border-radius: 4px;
	text-align: center;
    display: block;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	font-weight: 500;
    margin: 0 auto;
    cursor:pointer
}

.btn-title {
    font-size: 1rem;
    max-width: 500px;
    border-radius: 4px;
	text-align: center;
    display: block;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	font-weight: 500;
    margin: 0 auto;
}

.btn-normal {
    cursor:pointer;
    font-size: 1rem;
    max-width: 500px;
    border-radius: 4px;
	text-align: center;
    display: block;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	font-weight: 500;
    margin-right: auto;  
    margin-left: 0;
}

.btn-fixed-width {
    margin: 0 auto;
    max-width: 200px;
}

.btn-fixed-width-2 {
    margin: 0 auto;
    max-width: 250px;
}

.btn {
	font-size: 1rem;
	padding: 0.5em;
    border-radius: 4px;
	text-align: center;
    display: block;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	font-weight: 500;
}

.btn-less-padding {
    font-size: 1rem;
	padding: 0.5em;
    border-radius: 4px;
	text-align: center;
    display: block;
	font-weight: 500;
}

.btn-less-padding-weight400 {
    font-size: 0.9rem;
	padding: 0.7em;
    border-radius: 4px;
	text-align: center;
    display: block;
    cursor: pointer;
}

@media (min-width: 768px) {
    .btn {
        padding: 0.5em;
    }
}


/* Title & subtitle */

.title-container {
    display: flex;
    align-items: center; /* Vertically center the items */
    justify-content: center; /* Horizontally center the container */
    gap: 8px;
    margin-bottom: 0.8em;
    width: auto; /* Optional: Add spacing between the image and text */ /* Add spacing below the container if needed */
}
		

.title-img {
    width: 24px; /* Adjust the width for better scaling */
    height: auto; /* Maintain aspect ratio */
}

.title-img-2 {
    width: 25px;
    background-color: #313131;
    padding: 2px;
    border-radius: 5px;
    border: 1px solid ghostwhite; /* Adjust the width for better scaling */
    height: auto; /* Maintain aspect ratio */
}

.title-container-2 {
    display: flex;
    align-items: center; /* Vertically center the items */
    justify-content: center; /* Horizontally center the container */
    gap: 14px;
    margin: 0 auto;
    padding: 2px;
    margin-bottom: 0.8em;
    max-width: 200px;
    border-radius: 20px;
    background-color: #212124;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Optional: Add spacing between the image and text */ /* Add spacing below the container if needed */
}

.white {
    font-weight: 400;
    width: 50px;
    color: ghostwhite;

}

.light-grey {
    width: 50px;
    font-weight: 500;
    color: #c4c4c6;
    text-align: end;

}

.title-light {
    margin:0;
    width: 100%;
    text-align: center;
}

.title-2 {
    margin:0;
    width: 100%;
    text-align: center;
    max-width: 500px;
    display: block;
    margin: 0 auto;
}

.title-pad {
    padding-bottom: 0.5em;
}

.title-pad-2 {
    padding-bottom: 0.5em;
}

@media (min-width: 769px) {
    .title-2 {
        font-size: 1.25rem;
        max-width: 750px;
    }
    .btn-title {
        max-width: 150px;
        margin-top: 1em;
    }
    .btn-normal {
        max-width: 150px;
        margin-top: 1em;
    }
    .title-pad-2 {
        padding-bottom: 1em;
    }
}


.title-dark {
    color: rgba(255, 255, 255, 0.3);
    margin:0;
    width: 100%;
    text-align: center;
}

.subtitle {
	border: 1px solid white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
}

.subtitle-dark {
    color: rgba(255, 255, 255, 0.3);
    margin:0;
    width: 100%;
    text-align: start;
}

.subtitle-light {
    margin:0;
    width: 100%;
    text-align: start;
}

.subtitle-light-center {
    color: whitesmoke;
    margin:0;
    width: 100%;
    text-align: center;
    padding: 0;
}

.subtitle-dark-center {
    margin:0;
    width: 100%;
    text-align: center;
    padding: 0;
}



/* Image */



.img {
	width: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.short {
    max-height: 200px;
    max-width:300px;
}

.img-card {
    height: 100%;
    width: 100%;
}

/* Grid */

.info {
    padding: 4em 0;
}


.main-grid {
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 450px) minmax(1em, 1fr);
}

.thin-grid {
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 300px) minmax(1em, 1fr);
}

.main-grid-with-row {
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 450px) minmax(1em, 1fr);
	grid-template-rows: 3fr;
}

@media (min-width: 481px) {
    .main-grid, .main-grid-with-row {
        grid-template-columns: minmax(1em, 1fr) minmax(0px, 580px) minmax(1em, 1fr);
        justify-content: center;
    }
    .outline {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    .outline-width {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (min-width: 769px) {
    .main-grid {
        grid-template-columns: minmax(1em, 1fr) repeat(4, minmax(0px, 250px)) minmax(1em, 1fr);
    }
    
    .img {
        max-height: 510px;
    }
    
	.btn {
		display: inline-block;
		padding: 0.8em 3em;
	}
}


.col {
    grid-column: 2 / -2;
    margin-bottom: 0.625em;
}

.bottom-margin {
    margin-bottom: 2.1875em;
}


.grey {
    color: rgba(6, 5, 14, 0.5)
}

.grey-secondary {
    color: #c4c4c6;
}

.grey-third {
    color: rgb(177 179 188)
}

.grey-fourth {
    color: gainsboro;
}

.grey-fifth {
    color: #d8d8e6;
}
.grey-sixth {
    color: #919198;
}
.black {
    color: black;
}

.first {
    grid-column: 2 / 3;
	margin: 0;
}

.second {
    grid-column: 2 / 3;
    margin-bottom: 0.625em;
    overflow: hidden;
}

.fourth {
    grid-column: 2 / 3;
    margin-bottom: 0.625em;
}

.third {
	grid-column: 2 / 3;
    margin-bottom: 0.625em;
}

/* Waitlist page */

.tot-height {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push items to their respective positions */
    height: 100vh; /* Full viewport height */
}

.flex-col-center {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.flex-col-description {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    width: 90%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}
.flex-col-center-narrow {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 30px;
    width: 90%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.flex-col-center-narrow-bottom {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 30px;
    width: 90%;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
}
.flex-col-center-less {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.flex-col-center-narrow-less-gap {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    width: 90%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    gap: 8px;
}

/* Button grid */

.ai {
  background: linear-gradient(to right, #b8b6ff, #84d4ee);
  grid-area: aipo;
  border-radius: 4px;
  /* Add padding equal to the desired border width */
  padding: 1px;
}

.ai-inner {
  background-color: #151519;
  border-radius: 4px;
  padding: 0.001em;
  /* The inner element fills the container, leaving the gradient border visible */
}

.Personalization {
	grid-area: pers;
	border: 1px solid whitesmoke;
	border-radius: 4px;
	color: whitesmoke;
	min-width: min-content;
}

.Smart {
	grid-area: smar;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.Fast {
	grid-area: fast;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.Custom {
	grid-area: cust;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.Sales {
	grid-area: sale;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.Engagement {
	grid-area: enga;
	border: 1px solid whitesmoke;
	border-radius: 4px;
	color: whitesmoke;
	min-width: min-content;
}

.Auto {
	grid-area: autm;
	border: 1px solid whitesmoke;
	border-radius: 4px;
	color: whitesmoke;
	min-width: min-content;
}

.Outreach {
	grid-area: outr;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.Scale {
	grid-area: scal;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.button-grid {
	display: grid;
    gap: 0.3em;
    grid-template-columns: repeat(24, 1fr);
    grid-template-areas: 
		".... .... .... autm autm autm autm autm autm autm autm autm autm cust cust cust cust cust cust cust cust .... .... ...." 
		"fast fast fast fast fast fast scal scal scal scal scal scal aipo aipo aipo aipo aipo aipo aipo aipo aipo aipo aipo aipo"
		".... enga enga enga enga enga enga enga enga enga sale sale sale sale sale sale sale smar smar smar smar smar smar ...."
		".... .... outr outr outr outr outr outr outr outr outr outr pers pers pers pers pers pers pers pers pers pers .... ...."
}

@media (min-width: 481px) {
	.button-grid {
		gap: 0.8em;
	}
}

@media (min-width:768px) {
	.main-grid-with-row {
		grid-template-columns: minmax(1em, 1fr) repeat(2, minmax(150px, 220px)) minmax(1em, 5em)  repeat(2, minmax(180px, 230px)) minmax(1em, 1fr);
		grid-template-rows: repeat(3, auto);
	}
	.button-grid {
		gap: 0px;
		align-self: center;
		grid-template-columns: repeat(24, 1fr);
		grid-template-rows: repeat(24, auto);
	}
	
	.ai {
		grid-column: 12 / 20;
		grid-row: 15 / 19;
	/* The inner element fills the container, leaving the gradient border visible */
	}

	.Personalization {
		grid-column: 16 / 24;
		grid-row: 7 / 11;
	}

	.Smart {
		grid-column: 17 / 21;
		grid-row: 1 / 4;
	}

	.Fast {
		grid-column: 21 / 25;
		grid-row: 13 / 17;
	}

	.Custom {
		grid-column: 5 / 11;
		grid-row: 20 / 24;
	}

	.Sales {
		grid-column: 1 / 5;
		grid-row: 7 / 11;
	}

	.Engagement {
		grid-column: 7 / 14;
		grid-row: 9 / 13;
	}

	.Auto {
		grid-column: 2 / 9;
		grid-row: 14 / 18;
	}

	.Outreach {
		grid-column: 6 / 12;
		grid-row: 2 / 6;
	}

	.Scale {
		grid-column: 15 / 19;
		grid-row: 21 / 25;
	}
	
	.first {
		grid-column: 2 / 4;
		grid-row: 1 / 2;
	}
	
	.second {
		grid-column: 2 / 4;
		grid-row: 2 / 3;
		display: flex;
		flex-direction: column;
	}
	
	.third {
		grid-column: 5 / 7;
		grid-row: 1 / 4;
	}
	
	.fourth {
		grid-column: 2 / 4;
		grid-row: 3 / 4;
	}
	
	.hide-when-large {
    display: none;
  	}
	
	.hide-when-narrow {
		display: block;
	}
}

@media (min-width: 1024px) {
	.main-grid-with-row {
		gap: 0em;
	}
	.button-grid {
		gap: 0em;
	}
}

.btn-grid-style {
	font-weight: 400;
	text-align: center;
	font-size: 1.25rem;
    padding: 0.75em 0; /* Remove horizontal padding */
    margin: 0 auto;
}


/* Card grid */

.card-grid {
    display: grid;
    grid-template-columns: minmax(1em, 1fr) minmax(0px, 450px) minmax(1em, 1fr);
}

.height {
    height: 300px;
}

.first-card, .second-card, .third-card, .fourth-card, .fifth-card, .sixth-card {
	grid-column: 2 / -2;
    margin-bottom: 0.625em;
}

.card-container {
    display: flex;
    flex-direction: column;
    height: 300px;
    overflow: hidden; /* Ensures nothing spills out */
}

.hide-when-narrow {
	display: none;
}

.img-container {
    flex: 1; /* The image container expands to fill remaining space */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em 0em;
}

.img-card {
    width: 100%;
    max-width: 300px;
    height: 100%;
    object-fit: contain;
}


@media (min-width: 769px) {
    .card-grid {
        grid-template-columns: minmax(1em, 1fr) repeat(3, minmax(0px, 333px)) minmax(1em, 1fr);
		gap: 0.5em;
    }
	
	.first-card {
		grid-column: 2 / 5;
	}
	.second-card {
		grid-column: 2 / 4;
		max-width: 100%;
		margin: 0;
	}
	.third-card {
		max-width: 100%;
		grid-column: 4 / 5;
		margin: 0;
	}
	.fourth-card {
		max-width: 100%;
		grid-column: 2 / 3;
		margin: 0;
	}
	.fifth-card {
		max-width: 100%;
		grid-column: 3 / 5;
		margin: 0;
	}
	.sixth-card {
		max-width: 100%;
		grid-column: 2 / 5;
		margin: 0;
	}

    .hide-when-narrow {
        display: flex;
    }
    .img-card {
        max-width: 800px;
    }
}

.narrow-text-1 {
    display: none;
}

.large-text-1 {
    display: none;
}


/* Newsletter */

.grey-grid {
    background-color: #dcdcdc;
    color: black;
}

.all-col {
    grid-column: 1 / -1;
}

bottom-margin-small-screen {
    margin-bottom: 2.1875em;
}

@media (min-width: 768px) {
    .grey-grid {
        background-color: #151519;
    }
    .grey-news {
        background-color: #dcdcdc;
        padding: 5em 1em;
        border-radius: 10px;
    }
    .news-flex {
        display: flex;
        align-items: center;
        justify-content: center;
        gap:5%;
    }
    .news-col-1, .news-col-2 {
        max-width: 40%;
        border: 1px solid yellow;
    }

    .bottom-margin-small-screen {
        margin-bottom: 0px;
    }

    .btn-secondary {
        width: 100%;
    }
}
/* Color */

.color {
      background: linear-gradient(to right, #b8b6ff, #84d4ee);
      background-clip: text;
      color: transparent;
}

.emailx-gradient-color-white {
    background: linear-gradient(to right, rgba(76, 212, 169, 0.9), #b6bac0);
    background-clip: text;
    color: transparent;
}

.emailx-color-primary-opacity {
    color: rgba(76, 212, 169, 0.9)
}

.pink {
    color: #CDA5D5;
}

/* Container box */

.outline {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0 1.25em;
}

/* Input form */
/* Waitlist */

/* Home button container */
.home-button {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    font-size: 0.8rem;
    font-weight: 400;
    color: #919198; /* White text */
    background-color: #0e0e0e; /* Dark background */
    border-radius: 3px; /* Rounded corners */
    text-decoration: none; /* Remove underline */ 
    transition: background-color 0.3s ease; /* Smooth hover transition */
    max-width: 70px;
    margin-left: 3%;
    margin-top: 5px;
    padding: 2px 5px;
    justify-content: center;
    position: absolute;
  }

  @media (min-width: 480px) {
    .home-button {
        margin-top: 10px;
    }
}
  @media (min-width: 769px) {
    .home-button {
        margin-top: 20px;
    }
}

  
  /* Icon styling */
  .home-button .icon {
    width: 15px;
    height: 15px;
    stroke: #919198;
    transition: color 0.3s ease; /* White icon */
  }
  
  /* Hover and active states */
  .home-button:hover {
    background-color: #2a2a2e;
    color: whitesmoke; /* Slightly lighter on hover */
  }

  .home-button:active {
    background-color: #404040;
  }

  .home-button:hover .icon {
    stroke: whitesmoke;
  }


.text-header-1 {
    font-size: 1rem;
    color: #DCDCDC;
    margin-right: 1rem;
    cursor: pointer;
    flex-wrap: nowrap;
    text-decoration: none;
    flex-shrink: 0
}

.text-header-selected {
    font-size: 1rem;
    color: whitesmoke;
    margin-right: 1rem;
    text-decoration: underline;
    cursor: pointer;
    flex-wrap: nowrap;
    flex-shrink: 0
}

.text-header-1:hover {
    text-decoration: underline;
}


  
.waitlist-header {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.waitlist-header-text {
    font-weight: 400;
    font-size: 0.9rem;
}

.gradient-border {
    height: 1px; /* Border height */
    background: linear-gradient(to right, #1a1a1a, #555555, #1a1a1a); /* Gradient colors */
    margin-bottom: 12px; /* Spacing below border */

}

.input-primary {
	font-size: 1rem;
	padding: 0.5em;
    border-radius: 4px;
	text-decoration: none;
    color: rgba(6, 5, 14, 0.6);
    display: block;
    border: 1px solid rgba(6, 5, 14, 0.3)
}

.input-primary-white {
    position: relative;
	font-size: 0.9rem;
	padding: 0.5em;
    border-radius: 4px;
	text-decoration: none;
    color: #919198;
    display: block;
    border: 2px solid #2a2a38;
    margin: 0;
    text-align: left;
    outline: none;
    background: #151519;
    z-index: 1;
    font-weight: 400;
}


.input-primary-white:focus {
    background-color: #2a2a38;
    border-color: #3d3d4d;
}

.input-primary-white:focus-within {
    background-color: #2a2a38;
    border-color: #383849;
}

.input-primary:focus {
    background: #33333f;
    border: 1px solid #919198;
}



/* Autofill Focus */
input:-webkit-autofill:focus,
input:-internal-autofill-selected:focus {
    background-color: #2a2a38 !important; /* Focus background */
    color: whitesmoke !important; /* Focus text color */
    -webkit-text-fill-color: whitesmoke !important; /* Match the text color */
    box-shadow: 0 0 0px 1000px #2a2a38 inset !important; /* Match input background */
    transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
    caret-color: whitesmoke !important;
}

/* Autofill Blur - Default State */
input:-webkit-autofill:not(:focus),
input:-internal-autofill-selected:not(:focus) {
    background-color: #151519 !important; /* Default background */
    color: #919198 !important; /* Default text color */
    -webkit-text-fill-color: #919198 !important; /* Reset text color */
    box-shadow: 0 0 0px 1000px #151519 inset !important; /* Match input background */
    caret-color: whitesmoke !important;
}



.input-primary-white .icon {
    width: 20px;
    height: 20px;
    color: #919198; /* Default color */
    transition: color 0.3s ease;
  }


.icon.focused {
    color: whitesmoke;
}

.input-secondary {
    width: 100%; /* Make the input field full width */
    color: white; /* Set text color to white */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Add a translucent white border */
    background-color: #151519; /* Set the background color */
    padding: 10px; /* Add some padding for better appearance */
    border-radius: 4px; /* Optional: Add rounded corners */
    font-size: 16px; /* Adjust font size */
    box-sizing: border-box; /* Include padding in width calculation */
    font-family: monospace;
}

.input-secondary::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Lighter white for placeholder text */
    opacity: 1; /* Ensure placeholder text is visible */
}

.input-secondary:focus {
    outline: none; /* Remove default outline */
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.5); /* Slightly brighter border on focus */
}
/* New rule: if the input has text AND is not focused, make the border white. */
.input-secondary:not(:focus):not(:placeholder-shown) {
    border: 1px solid #fff;
}

.input-secondary:-webkit-autofill,
.input-secondary:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 0 0 1000px #151519 inset !important; /* match your input background */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.input-secondary:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 0 0 1000px #151519 inset !important; /* match your input background */
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.input-secondary:-webkit-autofill:focus,
.input-secondary:-internal-autofill-selected:focus {
    color: whitesmoke !important; /* Focus text color */
    -webkit-text-fill-color: whitesmoke !important; /* Match the text color */
    box-shadow: 0 0 0px 1000px #151519 inset !important; /* Match input background */
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}


.input-secondary:-webkit-autofill:not(:focus),
.input-secondary:-internal-autofill-selected:not(:focus) {
    background-color: #151519 !important; /* Default background */
    color: whitesmoke !important; /* Default text color */
    -webkit-text-fill-color: whitesmoke !important; /* Reset text color */
    box-shadow: 0 0 0px 1000px #151519 inset !important; /* Match input background */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
} 

.tall-input {
    height: 10em;
}

  
.newsletter-input:focus-within .icon {
fill: whitesmoke;
}

.btn-third .icon {
    width: 18px;
    position: absolute;
    right: 15px;
    height: 18px;
    color: #919198; /* Default color */
    transition: color 0.3s ease;
}

.btn-third:hover {
    color: whitesmoke;
    transition: color 0.3s ease;
}

.btn-third:active {
    background-color: #151519;
}
  
.btn-third:hover .icon {
    color: whitesmoke;
}

.flex-col-hor {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flex-col-hor-2 {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

/* Styling for the input element */
.input-waitlist {
    font-size: 0.9rem;
    border: none;
    outline: none;
    background: transparent; /* Match container background */
    color: #919198;
    flex-grow: 1; /* Allow input to expand */
}

.input-waitlist:focus {
    color: whitesmoke;
}

/* Remove placeholder on focus */
.input-waitlist:focus::placeholder {
    color: transparent; /* Hide the placeholder */
    transition: color 0.2s ease; /* Smooth transition (optional) */
}

/* Optional: Restore placeholder color when not focused */
.input-waitlist::placeholder {
    color: #919198; /* Match your desired placeholder color */
    transition: color 0.2s ease;
}

.input-waitlist:focus {
    border: none;
    outline: none; /* Removes the border */ /* Removes the default focus outline */
}
/* Autofill fix for .input-waitlist */
.input-waitlist:-webkit-autofill {
    background: transparent !important; /* Match container background */
    color: #919198 !important; /* Default text color */
    box-shadow: 0 0 0px 1000px transparent inset !important; /* Override autofill highlight */
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

/* Autofill focus state */
.input-waitlist:-webkit-autofill:focus {
    color: whitesmoke !important; /* Focused text color */
}

/* Autofill blur state fix */
.input-waitlist:-webkit-autofill:not(:focus) {
    background: transparent !important; /* Reset background */
    color: #919198 !important; /* Reset text color */
}

/* Autofill hover state */
.input-waitlist:-webkit-autofill:hover {
    color: #919198 !important;
    background: transparent !important; /* Consistent hover text color */
}

/* Firefox autofill fix for .input-waitlist */
.input-waitlist:-moz-autofill {
    background: transparent !important; /* Match container background */
    color: #919198 !important; /* Default text color */
}



/* Footer */

.footer-grid {
    display: grid;
    grid-template-columns: minmax(1em, 1fr) repeat(2, minmax(0px, 225px)) minmax(1em, 1fr);
}

.footer-col {
    grid-column: span 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 1em;
}

.border-right {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}
    
.footer-col:first-child {
    grid-column: 2 / span 1;
}

.plain {
    text-decoration: none;
}

.description {
    margin: 0;
    font-size: 0.875rem;
}

.footer-title {
    font-weight: 500;
    font-size: 1.125rem;
    padding-bottom: 1em;
}

.footer-col-large {
    grid-column: 2 / 4;
    padding: 1em;
}

.padding {
    padding: 4em 0em 1em 0em;
}

.grey-footer {
    color: rgba(255, 255, 255, 0.3);
}

.footer-format-first {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.footer-format-first .icon {
    transition: color 0.3s ease, background 0.3s ease;
    -webkit-text-fill-color: #c4c4c6; 
    -webkit-background-clip: text; 
    background: none;
    text-decoration: none;
    font-size: 1.5em;
}

.footer-format {
    display: flex;
    gap: 20px;
}

.footer-flex-hor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icon-linkedin:hover {
    background: linear-gradient(45deg, #b8b6ff, #84d4ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

.icon-instagram:hover {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
  }


  .icon-x:hover {
    background: linear-gradient(45deg, #b8b6ff, #84d4ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
  }

.footer-large {
    display: none;
}

@media (min-width: 769px) {
    .footer-small {
        display: none;
    }
    .footer-large {
        display: grid;
    }
}


/* @media (min-width: 769px) {
    .footer-format-first {
        gap: 25px;
    }  
}

/* Rotating Title */

#rotatingText {
  transition: opacity 0.3s ease-in-out;
}

#rotatingText.change {
  opacity: 0;
}

/* Video */

.video {
    width: 100%;
    border-radius: 10px;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    opacity: 0.7;
}

.video-not-opacity {
    width: 100%;
    border-radius: 10px;
    height: auto;
    object-fit: cover; 
    object-position: center;
    opacity: 0.9;
}

.taller {
    height: 378px;
}

.auto-height {
    height: auto;
}

@media (min-width: 769px) {
    .taller {
        height: 500px;
    }
}
/* General stuff */


textarea {
    resize: vertical;
}

.hover-white:hover {
    color: whitesmoke;
    transition: color 0.3s ease;
}

.left {
    display: block;
    margin-right: auto;
}

.bold {
    text-decoration: none;
    font-weight: 600;
}

ul {
    font-size: 1rem;
    color: #c4c4c6;
}

.privacy-terms {
    p {
        color: #c4c4c6;
    }

    h2, h3, h4, a {
        color: #dcdcdc;
    }

    h4 {
        margin: 0;
    }
}

.margin {
    margin: 4em 0;
}
.no-margin {
    margin: 0;
}

.margin-auto {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.min-height {
    min-height: 500px;
}

@media (min-width: 768px) {
    .min-height {
        min-height: 800px;
    }
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}



.flex-center {
    display: flex; /* If you want to center the flex-col itself */
    justify-content: center; /* Centers flex-col horizontally */
    align-items: center; /* Centers flex-col vertically */
    height: 100%;
}

.border {
    border: 1px solid red;
}
.bottom-margin {
    margin-bottom: 2.1875em;
}

.bottom-margin-less {
    margin-bottom: 1em;
}

.bottom-margin-less-10 {
    margin-bottom: 10px;
}

.bottom-padding {
	padding-bottom: 1.875em;
}

.bottom-paddin-less {
	padding-bottom: 1em;
}

.upper-margin {
	margin-top: 1.875em;
}

.upper-margin-less {
	margin-top: 6px;
}

.upper-margin-extra {
    margin-top: 3em;
}

.work-border {
    border: 1px solid orange;
}

/* Drops */

.drop-container {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 20px;;
}

.drop-container h3 {
    margin: 0px;
}

.drop-img {
    width: 36px; /* Adjust the width for better scaling */
    height: auto; /* Maintain aspect ratio */
    padding-bottom: 3px;
}

.drop-img-title-less-gap {
    display: flex;
    align-items: center; /* Vertically center the items */
    justify-content: start; /* Horizontally center the container */
    gap: 4px;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease-in-out;
    position: relative;
    padding-left: 5px;
    border-radius: 20px;
}

.drop-img-secondary {
    width: 30px; /* Adjust the width for better scaling */
    height: auto; /* Maintain aspect ratio */
}

.drop-title {
    display: flex;
    justify-content: space-between;
}

.smaller {
    width: 24px;
}

.left-padding {
    padding-left: 0.3em;
}

.drop-img-title {
    display: flex;
    align-items: center; /* Vertically center the items */
    justify-content: start; /* Horizontally center the container */
    gap: 8px;
}

#narrow-text-1, #large-text-1, #narrow-text-2, #large-text-2, #narrow-text-3, #large-text-3 {
    display: none;
}


#drop-container-1.active, #drop-container-2.active, #drop-container-3.active {
    border: none; /* Remove the default border */
    background: linear-gradient(to right, #b8b6ff, #84d4ee); /* Gradient border */
    padding: 2px; /* Create space for the border effect */
    box-sizing: border-box; /* Ensure padding is consistent */
    border-radius: 12px; /* Rounded corners for the container */
}

/* Inner content wrapper to isolate content from gradient */
#drop-container-1.active > *, /* Inner content wrapper to isolate content from gradient */
#drop-container-2.active > *, /* Inner content wrapper to isolate content from gradient */
#drop-container-3.active > * {
    background: #151519; /* Ensure the inner content has a solid background */
    border-radius: inherit; /* Match the parent's border-radius */
    padding: 1em; /* Consistent inner padding */
    box-sizing: border-box; /* Ensure padding does not affect layout */
    margin: 0; /* Prevent child margins from collapsing */
}

@media (min-width: 1024px) {

    .drop-container {
        margin-top: 10px;
    }

    .drop-img-title-less-gap:hover {
        background-color: #1a1a20;
    }

    .drop-img-title-less-gap:after {
        content: ""; /* Empty content for the pseudo-element */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid transparent; /* Start with a transparent border */
        border-radius: 20px; /* Matches the button's border-radius */
        background: linear-gradient(to right, #b8b6ff, #84d4ee); /* Gradient for the border */
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1; /* Place behind the button */
        transition: all 0.2s ease-in-out; /* Smooth hover transition */
        opacity: 0; /* Hidden by default */
    }
    
    .drop-img-title-less-gap:hover::after {
        opacity: 1; /* Show border on hover */
        transform: scale(1.05); /* Optional: Slightly enlarge for effect */
    }
/* Hover effect 
    #drop-container-1:hover, #drop-container-2:hover, #drop-container-3:hover {
        border: none; 
        background: linear-gradient(to right, #b8b6ff, #84d4ee); 
        padding: 2px; 
        box-sizing: border-box; 
        border-radius: 12px; 
    }

    #drop-container-1:hover > *, #drop-container-2:hover > *, #drop-container-3:hover > * {
        background: #151519; 
        border-radius: inherit; 
        padding: 1em; 
        box-sizing: border-box; 
        margin: 0;
    }


    #drop-container-1:hover #large-text-1, #drop-container-2:hover #large-text-2, #drop-container-3:hover #large-text-3 {
        display: block;
        transition: opacity 5s ease-in-out, transform 5s ease-in-out;
    }


    #drop-container-1:hover #hide-text-1,
    #drop-container-2:hover #hide-text-2,
    #drop-container-3:hover #hide-text-3,
    #drop-container-1:hover #hide-img-1,
    #drop-container-2:hover #hide-img-2,
    #drop-container-3:hover #hide-img-3,
    #drop-container-1:hover #more-btn-1,
    #drop-container-2:hover #more-btn-2,
    #drop-container-3:hover #more-btn-3 {
        display: none;
    }

    #drop-container-1:hover #less-btn-1, #drop-container-2:hover #less-btn-2, #drop-container-3:hover #less-btn-3 {
        display: flex;
    }
*/


}

/* BLOG */





/* KEEP LAST */
.hide {
    display: none;
}