/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


:root {
    /* SHADOWS */
    --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);


    --primary-h: 265;
    --primary-s: 88.9%;
    --primary-l: 85.9%;}


/* Grid Dots Canvas */

.grid-canvas {
	height: 130%;
    position: absolute;
    width: 100%;
	z-index: -1;
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  background-color: #fff;
}



/* Item List Animation */

.slider-list{
  display: flex;
  flex-direction: column;
gap: 0.5rem;
flex-shrink: 0;
  overflow: hidden;
position: relative;
	margin-top: -20%;
		margin-left: -9%;
}

.slider-list::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(22, 21, 35, 0.00) 5.21%, #161523 99.04%);
    pointer-events: none;
    z-index: 1;
}

.list-item {
width: 320px;
    height: 72px;
display: flex;
padding: 0.7365rem;
align-items: flex-start;
gap: 0.75rem;
align-self: stretch;
border-radius: 0.5rem;
border: 1px dashed var(--primary-500, #5A4FCB);
background: rgba(255, 255, 255, 0.90);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(5.891891956329346px);
    opacity: 0;
  transform: translateY(20px);
  animation: fade-in-move-down 1s forwards;
}

.avatar-image {
  width: 3rem;
 height: 3rem;
 flex-shrink: 0;
 border-radius: 12.5rem;
border: 0.75px solid var(--gray-900, #101828);
}
  
  .item-text-and-subtext {
    display: flex;
align-items: center;
gap: 0.5rem;
align-self: stretch;
  }

.list-item-name {
  color: var(--gray-700, #344054);
}

.list-item-hours {
  color: var(--gray-600, #475467);
}

  
  .list-item-message {
    color: #475467;
font-size: 0.875rem;
font-family: Inter;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
  }
 
.list-item-message strong {
    color: #6941C6;
 }

.list-item-1 {
  animation-delay: 2s;
}

.list-item-2 {
  animation-delay: 2.5s;
}

.list-item-3 {
  animation-delay: 3s;
}

@keyframes fade-in-move-down {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Sales Metrics Animation*/

.metric-item {
	position: relative;
    float: right;
    margin-bottom: -12%;
    display: flex;
	width: 21rem;
	padding: 0.7365rem;
	flex-direction: column;
	align-items: flex-start;
 	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.90);
	backdrop-filter: blur(5.891891956329346px);
  	overflow: hidden;
	   margin-right: -10%;
	  -webkit-animation: 1400ms ease 600ms 1 normal backwards running caption-top !important;
    animation: 1400ms ease 600ms 1 normal backwards running caption-top 2.5s 1 ease-out !important;
	box-shadow: var(--shadow-xl);
	z-index: 12;
}

.heading-and-icon {
  display: flex;
align-items: center;
gap: 0.7365rem;
align-self: stretch;
}

.metric-heading {
  color: var(--gray-900, #101828);
}

.featured-icon {
display: flex;
width: 48px;
    height: 48px;
padding: 0.75rem;
justify-content: center;
align-items: center;
  border-radius: 0.625rem;
border: 1px solid var(--gray-200, #EAECF0);
background: var(--base-white, #FFF);

/* Shadow/xs */
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.number-and-chart {
  display: flex;
align-items: flex-end;
gap: 1rem;
align-self: stretch;
}

.number-and-badge {
  display: flex;
align-items: flex-start;
gap: 0.5rem;
flex: 1 0 0;
}

.metric-number {
	color: var(--gray-900, #101828);
}

.metric-change {
  display: flex;
justify-content: center;
align-items: center;
gap: 0px;
}

.number-change {
  color: var(--success-700, #067647);

}

.svg-chart  svg{
  opacity: 0;
  transform: translateY(+100%);
  animation: chartAnimation 3s forwards;
}

@keyframes chartAnimation {
  0% {
    opacity: 0;
    transform: translateY(+100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}


/* CTA Section & Mesh Animation */



.mesh-wrapper{
  width: 620px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 0.8;
}

@media (max-width: 1100px) { 
	.mesh-wrapper {
		display: none;
	}
	.contact-image { display: none;}
	}


.ellipse-left {
  position: absolute;
  width: 350px;
  height: 250px;
  border-radius: 50%;
      background: linear-gradient(219deg, #5a4fcb 0%, #2dd7a2 100%);
	background-size: 200%;
  filter: blur(50px);
  	animation: animated_cta 4s ease-in-out alternate infinite;
}

.ellipse-right {
  position: absolute;
  left: 250px;
  width: 350px;
  height: 170px;
  border-radius: 50%;
      background: linear-gradient(219deg, #5a4fcb 0%, #2dd7a2 100%);
	background-size: 200%;
    filter: blur(50px);
  	animation: animated_cta 6s ease-in-out alternate-reverse infinite;
}

.circle {
  position: absolute;
  left: 200px;
  width: 200px;
  height: 100px;
  border-radius: 90px;
  background: var(--base-white);
    filter: blur(40px);
  
}


@keyframes animated_cta {
	0% { background-position: 0px 50%;  transform: rotate(5deg) translateX(2px) translateY(-36px);}
	50% { background-position: 100% 50%;}
100% { background-position: 0px 50%; transform: rotate(15deg) translateX(18px) translateY(16px); filter: blur: (60px);}

}


/* Fade in Animations */
@-webkit-keyframes caption-top {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@keyframes caption-top {
  0%   { transform:translate(0,-20px); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}




/* Gradient Heading */


.gradient-heading {
    background: linear-gradient(219deg, #2dd7a2 0%, #5a4fcb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	animation: animated_text 3s ease-in-out infinite;
	-moz-animation: animated_text 3s ease-in-out infinite;
	-webkit-animation: animated_text 3s ease-in-out infinite;
	 background-size: 150%;
}

@keyframes animated_text {
	0% { background-position: 0px 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0px 50%; }

}




/* Hue Mockups Design */


.huediv {
	animation: lightning 3s ease-in-out;
	animation-fill-mode:forwards;
  	animation-iteration-count: 1;
	}


.soft-lightning {
	filter: drop-shadow(0px -8px 44px rgb(137 127 245 / 0.2));
	animation: soft-lightning 3s ease-in-out;
	animation-fill-mode:forwards;
  	animation-iteration-count: 1;
	}



@keyframes lightning{
	0% {	filter: drop-shadow(15px 5px 69px rgb(137 127 245 / 0));}

	100% {	filter: drop-shadow(15px 5px 69px rgb(137 127 245 / 0.5));}
}


@keyframes soft-lightning{
	0% {	filter: drop-shadow(15px 5px 10px rgb(137 127 245 / 0));}

	100% {	filter: drop-shadow(0px -8px 24px rgb(137 127 245 / 0.2));}
}


/* Animations */



.hero-heading {
-webkit-animation:1000ms ease 0s 1 normal backwards running caption-top !important;
	animation: 1000ms ease 0s 1 normal backwards running caption-top !important;
}


.hero-copy {
-webkit-animation: 1200ms ease 400ms 1 normal backwards running caption-top !important;
    animation: 1200ms ease 400ms 1 normal backwards running caption-top 2s 1 ease-out !important;
	}


.gb-container-addc83b2{
	-webkit-animation: 1200ms ease 800ms 1 normal backwards running caption-top !important;
    animation: 1200ms ease 800ms 1 normal backwards running caption-top !important;
 	}


/* Cards Effect */
.cards {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}


.service-detail-cards {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 32px;
	grid-row-gap: 0px;
}

.service-detail-cards-3 {
    display: grid !important;
	grid-template-columns: repeat(3, 1fr);}

@media (max-width: 1100px) {
    .service-detail-cards {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
		grid-column-gap: 16px !important;
		grid-row-gap: 16px !important;}
		
		.service-detail-cards-3 {
    display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 16px !important;
		grid-row-gap: 16px !important;}
    
.third-service-card { grid-area: 2 / 1 / 3 / 3;}
}

@media (max-width: 600px) {
    .service-detail-cards {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
		grid-row-gap: 16px !important;		
    }
	
		.service-detail-cards-3 {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
			grid-row-gap: 16px !important;}
	
	.third-service-card { grid-area: 1;}
	
			.cards, .testimonial-grid {
				grid-row-gap: 16px !important;
			}
	
	.scrollshot {
    transform: perspective(400em) rotateY(-15deg) rotateX(6deg) skew(-8deg,4deg) translate3d(24%,-17%,0) scale(0.56) !important;
}
	}