/*--------------------------------------------------
											AI Tools
 --------------------------------------------------*/

.ai-tools {
	height: 280vh;
	position: relative;
}

.sticky-sec {
	background: #000;
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: sticky;
	top: 39px;
	height: 100%;
	max-height: 100vh;
	z-index: 1;
	overflow: hidden;
}

.intro {
	display: grid;
  width: fit-content;
  height: fit-content;
  margin: 2% 13% 0 10%;
  max-width: 677px;
  position: sticky;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  align-self: baseline;
  justify-self: end;
}

.description {
 display: grid;
 width: auto;
 height: fit-content;
 margin: 10% 10% 0 10%;
 max-width: 30vw;
 position: sticky;
 grid-column: 1;
 grid-row: 1;
 z-index: 2;
 transition: 0.4s all 0.4s;
}

@media (max-width: 1065px) {
	.description {
		max-width: 80vw;
	}
}

.description p{
	color: #fff;
	font-weight: 600;
	text-shadow: 5px 3px 14px #4c4a80;
	max-width: 400px;
}

.description .video-more {
  border: 1px solid #000;
  background: #000;
	max-width: fit-content;
}

.description .video-more:hover {
	border: 1px solid #e76000;
  background: #e76000;
	color:#fff;
}

a.view-more {
  background-color: #00000045;
  text-decoration: underline;
  text-decoration-color: #fffffff0;
  text-underline-offset: 4px;
	font-weight: 300;
	padding: 10px 15px;
	border-radius: 8px;
	white-space: nowrap;
}

a.view-more:hover {
	background-color: white;
	color: black;
	text-decoration: underline;
}

a.orange-link {
  transition: 0.2s all;
  color: #e76000;
  text-decoration: underline;
	background-color: navajowhite;
}

a.orange-link:hover {
  transition: 0.2s all;
	background-color: black;
  color: white;
  text-decoration: underline;
}

.sticky-sec .one-column {
	display: flex;
	gap: 10px;
	text-align: left;
	flex-wrap: wrap;
}

.description .one-column{
	padding: 0;
	margin-top: 10px;
}


.description ul {
	color: white;
	padding-top: 12px;
	list-style-type: disclosure-closed;
	margin-left: 19px;
}

.off-screen {
	transition: 0.4s all 0s;
	z-index: 0;
}

.upward.off-screen {
transform: translateY(-50px);
}

.downward.off-screen {
transform: translateY(50px);
}

.backdrop {
	grid-column: 1;
	grid-row: 1;
	width: 100vw;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.4s cubic-bezier(0.42, 0, 0.5, 1);
	opacity: 0.8;
}

.backdrop.faded-out {
	opacity: 0;
}

.backdrop img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

.observers1 {
	position: absolute;
	top: 0;
	height: -webkit-fill-available;
}

.trigger1 {
	display: block;
	width: 100vw;
	/* background: red; */
	height: 60vh;
	margin: 5vh 0;
}

#a1 {
	margin-bottom: 1vh;
}

#a3 {
	height: 50vh;
	margin-top: 0;
}

.ai-tools h3 {
	color: white;
/*  font-size: 5rem;*/
/*	filter: drop-shadow(2px 2px 3px #0000008a);*/
	   text-shadow: 5px 3px 14px #4c4a80;
}

.intro h3 {
	font-size: 4rem;
  margin-bottom: 0;
}

.intro p {
	color: white;
  filter: drop-shadow(2px 2px 3px #0000008a);
}

.description h3 {
   opacity: 1;
   margin-bottom: 0.4rem;
   transition: opacity 0.5s cubic-bezier(0.64, 0, 1, 0.49) 0.2s, margin-bottom 0.5s cubic-bezier(0.54, 0.01, 0.25, 1) 0.2s;
  }

  .off-screen h3 {
   opacity: 0;
   margin-bottom: 2rem;
   transition: 0.3s all;
  }

  .description p {
   opacity: 1;
   margin-bottom: 0.4rem;
   transition: opacity 0.5s cubic-bezier(0.64, 0, 1, 0.49) 0.2s, margin-bottom 0.5s cubic-bezier(0.54, 0.01, 0.25, 1) 0.2s;
  }

  .off-screen p {
   opacity: 0;
   /* margin-bottom: 3rem; */
   transition: 0.2s all;
  }

  .description a {
   opacity: 1;
   transition: opacity 0.4s cubic-bezier(0.54, 0.01, 0.25, 1) 0.3s;
  }

  .off-screen a {
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
  }

/*==================================================
                    Desktop layout
  ==================================================*/

  @media (min-width: 1065px) {

    /*-///////////  Basic layout /////////////-*/

    /*--------------------------------------------------
                        AI Tools
   --------------------------------------------------*/

   .ai-tools {
      height: 190vh;
    }

    .sticky-sec {
    height: calc(100vh - 39px);
    }

}

@media (max-width: 500px) {

	.yc-feature .one-column, .yc-feature .two-column {
    flex-direction: column;
}

	.video-more,
	.view-more {
		max-width: 100%;
		min-width: 100%;
		text-align: center;
	}

}