/*====================================
        TECHNOLOGIES
====================================*/

.tech-section{

    background: rgba(255,255,255,.015);

}

.tech-section{
    position: relative;
    overflow: hidden;
}

.tech-grid{

    display:grid;

    /* grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); */

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

    gap:25px;

    margin-top:60px;

}
.sp-tech-grid{
    grid-template-columns: repeat(5,1fr);
}
.wb-tech-grid{
    grid-template-columns: repeat(6,1fr);
}
.wp-tech-grid{
    grid-template-columns: repeat(8,1fr);
}

.tech-card{

    min-height: 130px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 20px 10px;

    text-align: center;

    

}

.tech-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold-primary);

    box-shadow:
        0 18px 45px rgba(212,175,55,.18),
        0 0 20px rgba(212,175,55,.08);

}

.tech-card i{

    font-size:34px;

    margin-bottom:20px;

    background:linear-gradient(135deg,#F7E7A1,#D4AF37,#B8860B);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    transition: all .4s ease;

}

.tech-card:hover i{

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

}

.tech-card span{

    margin:0;

    font-size: 13px;

    font-weight: 600;

    color:var(--text-primary);

}

/*====================================
    TABLET / LAPTOP
====================================*/

@media (max-width: 1199.98px) {

    .wp-tech-grid {
        grid-template-columns: repeat(4,1fr);
    }

}

/*====================================
    MOBILE
====================================*/
@media(max-width:767px){

    .tech-grid{

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

        gap:18px;

    }

    .tech-card{

        padding:28px 15px;

    }

    .tech-card i{

        font-size:40px;

    }

    .tech-card span{

        font-size:15px;
        line-height:1.4;

    }

}

/*====================================
    SMALL MOBILE
====================================*/

@media (max-width: 575.98px) {


    .wp-tech-grid {
        gap: 10px;
    }

    .wp-tech-card {
        min-height: 110px;
    }

}