#hero_section{
    /* background-image: url(../images/2024-may/home/hero-bg-cover-sm.jpg);
    background-position: right -30px top -180px;
    background-size: 110%;
    background-repeat: no-repeat;
    transition: background-size 0.1s;  */
    background-color: var(--hover-blue);
}

.story-community{
    background-image: url(../images/2024-may/home/spacestation-community.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    transition: background-size 0.1s; 
    min-height: 15rem;

}

.story-team-benefits{
    background-image: url(../images/2024-may/home/benefits-bg-cover.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}


.icn-hero-tabs{
    width: 2rem;
}

/* @media (min-width: 576px){
    #hero_section{
        background-image: url(../images/2024-may/home/hero-bg-cover-md.jpg);
        background-size: 100%;
        background-position: center top;
    }
    
}

@media (min-width: 768px){
    #hero_section{
        background-image: url(../images/2024-may/home/hero-bg-cover-md.jpg);
        background-size: 100%;
        background-position: top center;
    }
}

@media (min-width: 1024px){
    #hero_section{
        background-image: url(../images/2024-may/home/hero-bg-cover-lg.jpg);
        background-size: 100%;
        background-position: center top -50px;
    }
}

@media (min-width: 1200px){
#hero_section{
    background-image: url(../images/2024-may/home/hero-bg-cover-xl.jpg);
    background-size: 100%;
    background-position: center top -50px;
} */

.icn-hero-tabs{
    width: 2.5rem;
}

.meshGradient {
    background: linear-gradient(-45deg, #E2E4F6, #EFDBFF, #D9F0ED, #23d5ab);
    background-size: 200% 200%;
    animation: gradientAnimation 10s ease infinite;
  }


.meshGradientInverted {
    background: linear-gradient(-90deg, #23d5ab, #EFDBFF, #D9F0ED, #E2E4F6);
    background-size: 200% 200%;
    animation: gradientAnimation 10s ease infinite;
  }

.feature_active{
    border-color: #000;
}

.feature_active, .active-content .card-body{
    position: relative;
}

.feature_active::after, .active-content .card-body::after, .card.toggle-card:hover::after{
    background-image: url(../images/2024-jan/dot_grid.png);
    background-repeat: repeat;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}
.feature_active::after, .dot-pattern-sm::after, .card.toggle-card:hover::after{
    background-size: 5%;
}

.card.toggle-card:hover{
    border-color: #999;
}

.active-content .card-body::after{
    background-size: 1.2%;
}



.active-content .card-body .row{
    position: relative;
    z-index: 9;

}

.c_f1.feature_active{
    background-color: rgba(241,241,251,1);
}

.c_f2.feature_active{
    background-color: rgba(232,247,249,1);
}

.c_f3.feature_active{
    background-color: rgba(249,240,255,1);
}

.c_f4.feature_active{
    background-color: rgba(246,255,237,1);
}

.enterprise-tabs  .toggle-card{
    background-color: #f9f1e8;
}

.enterprise-tabs  .toggle-card:hover{
    background-color: #000;
}

.enterprise-tabs .c_f1.feature_active, .enterprise-tabs .c_f2.feature_active, .enterprise-tabs .c_f3.feature_active, .enterprise-tabs  .c_f4.feature_active{
    background-color: #FFF;
}

.enterprise-tabs .feature_active:hover{
    color: #000;
}

.card-body{
    z-index: 2;
    position: relative;
}

.content-div {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.active-content {
    opacity: 1;
    display: block;
}


.hero{
	background-image: url(../images/inverted-pyramid.svg);
	background-repeat: no-repeat;
	background-position-y: -10rem;
	background-origin: border-box;
	background-position-x: 58%;
	background-size: cover;
}

span.hero-callout {
	background-image: url(../images/highlight-underline.svg);
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	-webkit-transition: all ease-in-out .5s;
	-o-transition: all ease-in-out .5s;
	transition: all ease-in-out .5s;
}

span.hero-callout.text-teal:hover {
	color: var(--brand-blue);
	-webkit-transition: all ease-in-out .2s;
	-o-transition: all ease-in-out .2s;
	transition: all ease-in-out .2s;
}

.badge:hover{
    background-color: rgba(188, 206, 255,.2 );
    color: #000 !important;
}

/* Handle sub-feature images in main sections of the hero*/
.slide-button-group .btn.btn-outline-dark.bg-white:hover, .slide-button-group .btn.btn-outline-dark.bg-white:focus, .slide-button-group .btn.btn-outline-dark.bg-white:focus-visible, .slide-button-group .btn.btn-outline-dark.bg-white:focus-within {
    color:#000 !important;
}

.image-group img {
    display: none; /* Hide all images by default */
}

.image-group img.img-fluid:not(.d-none) {
    display: block; /* Only display the image that does not have the d-none class */
}



#home .announcement {
    font-size: 14px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

#landinghero .carousel-indicators [data-bs-target]{
	opacity: 1;
	width: unset;
	height: unset;
	text-indent: 0;
    background-color: transparent;
}


#landinghero .carousel-indicators .active.border{
    border-color: #000 !important;
    background-color: #fff;
}


.carousel-item{
    min-height: 200px;
}

#contributors {
    display: flex;
    align-items: center;
    margin-left: -10px; /* Adjust as needed for overlap */
}

.contributor {
    margin-left: -10px; /* Adjust as needed for overlap */
    border-radius: 50%;
    border: 2px solid white; /* To create a distinct separation between overlapping images */
    overflow: hidden;
}

.contributor img {
    display: block;
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    border-radius: 50%;
    object-fit: cover;
}

.contributor-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-blue); /* GitHub blue, can be changed */
    color: white;
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
}
  

.enterprise-block-bg{
    background-image: url(../images/2024-may/product/performance-monitoring/pm-dashboards-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
  
.brand img{
    width: 150px;
}
.ticker {
    display: flex;
    overflow: hidden;
    width: 100%;
  }
  
  .brand-wrapper {
    display: flex;
    justify-content: space-between;
    animation: ticker 20s linear infinite;
  }
  
  @keyframes ticker {
    0% { transform: translate(0); }
    100% { transform: translate(-100%) }
  }
  
@media (min-width: 576px) {
    h4.fs-6 {
        font-size: 1rem !important;
    }

}


@media (max-width: 576px) {
    #landinghero p.h5 span{
        font-size: .9rem;
        display: block !important;
    }

    .enterprise-tabs  p.h5 span{
        font-size: .9rem;
    }
    .content-div li.h5{
        font-size: 1.2rem;
    }
    #landinghero .carousel-indicators [data-bs-target]{
        width: 100%;
    }
    p.h4{
        font-size: calc(1.275rem - .2vw);
    }
    }

@media (min-width: 992px) {
    h4.fs-6 {
        font-size: 1.3rem !important;
    }
    .content-div{
        min-height: 500px !important;
    }
    .carousel-item{
        min-height: 500px;
    }
}

@media (min-width: 1200px) {
    h4.fs-6 {
        font-size: 1.3rem !important;
    }
}

@keyframes spin_words {
	0%, 100% {
        transform: translateY(0);
    }

    25%, 50% {
        transform: translateY(-33.59px);
    }

    50%, 75% {
        transform: translateY(-67.18px);
    }

	99.9%{
		transform: translateY(-100.77px);
	}


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