/* =====================================================

   ROK FEATURE BOXES

===================================================== */



.rok-feature-boxes {

    display: grid;

    gap: 30px;

}



/* Columns */



.rok-feature-boxes.columns-1 {

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

}



.rok-feature-boxes.columns-2 {

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

}



.rok-feature-boxes.columns-3 {

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

}



.rok-feature-boxes.columns-4 {

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

}



.rok-feature-boxes.columns-5 {

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

}



/* =====================================================

   CARD

===================================================== */



.rok-feature-card {

    position: relative;

    padding: 40px;

    background: #111111;

    border: 1px solid rgba(255,255,255,.08);

    transition: all .35s ease;

    overflow: hidden;

    height: 100%;

}



.rok-feature-boxes.equal-height .rok-feature-card {

    height: 100%;

}



.rok-feature-link-wrap {

    display: block;

    text-decoration: none;

    color: inherit;

    height: 100%;

}



.style-1 .rok-feature-card:hover::before {

  transform: scaleX(1);

}

.style-1  .rok-feature-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: var(--e-global-color-primary);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.3s;

}



/* =====================================================

   FEATURED CARD

===================================================== */



.rok-feature-card.featured {

    border-top: 4px solid #00ff66;

    background: linear-gradient(

        180deg,

        rgba(0,255,102,.08),

        rgba(255,255,255,.02)

    );

}



/* =====================================================

   ICON

===================================================== */



.rok-feature-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    line-height: 1;

}



.rok-feature-icon i {

    font-size: 48px;

}



.rok-feature-icon svg {

    width: 48px;

    height: 48px;

    fill: currentColor;

}



/* =====================================================

   TITLE

===================================================== */



.rok-feature-title {

    margin: 0 0 20px;

    font-size: 26px;

    line-height: 1.2;

    font-weight: 700;

    color: #ffffff;

}



.rok-feature-title span {

    color: #00ff66;

}



/* =====================================================

   DESCRIPTION

===================================================== */



.rok-feature-description {

    font-size: 16px;

    line-height: 1.8;

    color: rgba(255,255,255,.75);

}



/* =====================================================

   LINK

===================================================== */



.rok-feature-link {

    display: inline-flex;

    align-items: center;

    margin-top: 25px;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all .3s ease;

}



/* =====================================================

   HOVER EFFECTS

===================================================== */



.rok-feature-boxes.translate .rok-feature-card:hover {

    transform: translateY(-10px);

}



.rok-feature-boxes.scale .rok-feature-card:hover {

    transform: scale(1.03);

}



.rok-feature-card:hover {

    border-color: rgba(255,255,255,.15);

}



.rok-feature-card:hover .rok-feature-link {

    transform: translateX(5px);

}



/* =====================================================

   STYLE 1

   Dark Modern

===================================================== */



.rok-feature-boxes.style-1 .rok-feature-card {

    background: #111111;

}



.rok-feature-boxes.style-1 .rok-feature-title {

    color: #ffffff;

}



.rok-feature-boxes.style-1 .rok-feature-description {

    color: rgba(255,255,255,.75);

}



/* =====================================================

   STYLE 2

   Light

===================================================== */



.rok-feature-boxes.style-2 .rok-feature-card {

    background: #ffffff;

    border-color: #e5e5e5;

}



.rok-feature-boxes.style-2 .rok-feature-title {

    color: #111111;

}



.rok-feature-boxes.style-2 .rok-feature-description {

    color: #666666;

}



.rok-feature-boxes.style-2 .rok-feature-link {

    color: #111111;

}



.rok-feature-boxes.style-2 .rok-feature-card.featured {

    background: #f8f8f8;

}



/* =====================================================

   STYLE 3

   Gradient

===================================================== */



.rok-feature-boxes.style-3 .rok-feature-card {

    background: #111827;

    border-color: rgba(255,255,255,.08);

}



.rok-feature-boxes.style-3 .rok-feature-card.featured {

    background: rgba(0,255,102,.18);

}



/* =====================================================

   RESPONSIVE

===================================================== */



@media (max-width: 1024px) {



    .rok-feature-boxes.columns-4,

    .rok-feature-boxes.columns-5 {

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

    }



    .rok-feature-title {

        font-size: 22px;

    }

}



@media (max-width: 767px) {



    .rok-feature-boxes.columns-2,

    .rok-feature-boxes.columns-3,

    .rok-feature-boxes.columns-4,

    .rok-feature-boxes.columns-5 {

        grid-template-columns: 1fr;

    }



    .rok-feature-card {

        padding: 30px;

    }



    .rok-feature-title {

        font-size: 20px;

    }



    .rok-feature-icon i,

    .rok-feature-icon svg {

        width: 36px;

        height: 36px;

        font-size: 36px;

    }

}