@import url('https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.interactive-feature-cards{    position: relative;}
.interactive-feature-cards .interactive-feature-cards-wrapper{    position: relative;z-index:2;}
.interactive-feature-cards img{max-width:100%;}

.interactive-feature-cards .interactive-feature-cards-heading{    max-width: 830px;}
.interactive-feature-cards .interactive-feature-cards-heading h6{
    font-weight: 500;
    font-family: "Geist", sans-serif;
    max-width: max-content;
    margin-bottom: 25px;}

.interactive-feature-cards .interactive-feature-cards-heading h2{
    font-weight: 700;
    font-family: "Inter", sans-serif;
    margin-bottom: 14px;}
.interactive-feature-cards .interactive-feature-cards-heading p{
    font-weight: 300;
    font-family: "Geist", sans-serif;
    margin: 0;}

.interactive-feature-cards .card-row {
    display: flex;gap:17px;
    margin-top: 40px;
  }
 
.interactive-feature-cards .card {
    display: flex;
    width: 25%;
    cursor: pointer;overflow:hidden;
    transition: .8s;
  }
.interactive-feature-cards .card.active {
      width: 53%;
  }
.interactive-feature-cards .card .card-col{
     background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
}
.interactive-feature-cards .card .card-col .content-col{    position: relative;
    z-index: 2;}


 
.interactive-feature-cards .card .card-col .card-icon{line-height:0;}

.interactive-feature-cards .card .card-col .card-content{margin-top:250px;    max-height: 210px;min-height:210px;
    overflow-y: scroll;}
.interactive-feature-cards .card .card-col .card-content::-webkit-scrollbar{display:none;}
.interactive-feature-cards .card .card-col .card-content .card-title{
    font-weight: 600;
    font-family: "Inter", sans-serif;
    margin-bottom: 16px;
}
.interactive-feature-cards .card .card-col .card-content .card-desc{
    font-weight: 300;
   opacity: 0;
    transition: .6s;
    margin: 0;overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
    font-family: "Geist", sans-serif;}

.interactive-feature-cards .card.active .card-col .card-content .card-desc,
.interactive-feature-cards .card.active .card-col .card-content  .cta-box a{    opacity: 2;}

.interactive-feature-cards .card .card-col .card-content  .cta-box a{
    font-weight: 500;
    font-family: "Geist", sans-serif;
    text-decoration: none;opacity: 0;
    transition: .6s;
    display: inline-block;
    text-transform: uppercase;
    margin-top: 20px;}




/* Media Q. */

@media(min-width:992px){
.interactive-feature-cards .card .card-col .card-content{  transform: translateY(70%);transition: .8s;}
.interactive-feature-cards .card.active .card-col .card-content{transform: translateY(0%);}
}

@media(max-width:991.98px){
  .interactive-feature-cards .card-row{
  display: flex !important;
        flex-wrap: wrap;
  }
  .interactive-feature-cards .card,
  .interactive-feature-cards .card.active{width:48% !important;    cursor: auto;}
  .interactive-feature-cards .card .card-col .card-content .card-desc,
  .interactive-feature-cards .card .card-col .card-content  .cta-box a{
  opacity: 2;
  }
  .interactive-feature-cards .card .card-col .card-content {
    margin-top: 70px;
    max-height: 100%;
    min-height: auto;
    overflow-y: inherit;
}
}

@media(max-width:767.98px){
  .interactive-feature-cards .card,
  .interactive-feature-cards .card.active{width:100% !important;}
  .interactive-feature-cards .interactive-feature-cards-heading h2 {
    font-size: 32px;
    line-height: 42px;}
}












/* Grid Style */
.interactive-feature-cards .interactive-feature-cards-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bs-gutter-x, 0.75rem);
  padding-right: var(--bs-gutter-x, 0.75rem);
  width: 100%;
}

@media (min-width: 576px) {
  .interactive-feature-cards .interactive-feature-cards-wrapper,
  .interactive-feature-cards .container-sm {
    max-width: 540px;
  }
  
@media (min-width: 768px) {
  .interactive-feature-cards .interactive-feature-cards-wrapper {
    max-width: 720px;
  }
  
@media (min-width: 992px) {
  .interactive-feature-cards .interactive-feature-cards-wrapper {
    max-width: 960px;
  }
 
@media (min-width: 1200px) {
  .interactive-feature-cards .interactive-feature-cards-wrapper {
    max-width: 1200px;
  }
}