/*==================================================
                    FEATURES
==================================================*/

.features {
  background: var(--clrBackground);
}

.features .container {
  display: flex;
  flex-direction: column;
  gap: var(--space80);
}

/*==================================================
                SECTION HEADER
==================================================*/

.features .sectionHeader {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/*==================================================
                FEATURES GRID
==================================================*/

.featuresGrid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);
  gap: var(--space32);
}
/*==================================================
                FEATURE CARD
==================================================*/

.featureCard {
  display: flex;
  align-items: flex-start;
  gap: var(--space24);
  padding: 2rem;
  background: var(--clrSurface);
  border-radius: var(--borderRadiusLg);
  box-shadow: var(--shadowSm);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.featureContent {
  flex: 1;
}
/*==================================================
                FEATURE ICON
==================================================*/

.featureIcon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(109, 40, 217, 0.08);
  color: var(--clrPrimary);
  font-size: 1.5rem;
  transition:
    transform 0.35s ease,
    background 0.35s ease,
    color 0.35s ease;
}
/*==================================================
                FEATURE CONTENT
==================================================*/

.featureContent {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.featureContent h3 {
  margin: 0;
  color: var(--clrHeading);
  font-size: 1.2rem;
  line-height: 1.3;
}

.featureContent p {
  margin: 0;
  color: var(--clrBody);
  line-height: 1.6;
  font-size: 1rem;
}
/*==================================================
                CARD HOVER
==================================================*/

.featureCard{

    position:relative;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.featureCard::before{

    content:"";

    position:absolute;

    inset:0;

    border-top:4px solid transparent;

    transition:border-color .35s ease;

}

.featureCard:hover{

    transform:translateY(-10px);

    box-shadow:0 22px 45px rgba(17,24,39,.12);

}

.featureCard:hover::before{

    border-top-color:var(--clrPrimary);

}

/*==================================================
                ICON HOVER
==================================================*/

.featureCard:hover .featureIcon{

    background:var(--clrPrimary);

    color:#fff;

    transform:rotate(-8deg) scale(1.08);

}

.featureContent h3{

    margin-bottom:.4rem;

}

.featureContent p{

    max-width:32ch;

}

@media (max-width:992px){

    .featuresGrid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .featuresGrid{

        grid-template-columns:1fr;

    }

    .featureCard{

        padding:1.75rem;

    }

}