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

The IdeaGen Technologies

File :
components.css

Version :
1.0

Reusable UI Components

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


/*======================================================
                    BUTTONS
======================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    transition:var(--transition);

    cursor:pointer;

}

.btn-primary{

    background:var(--primary);

    color:var(--white);

    box-shadow:0 18px 40px rgba(37,99,235,.18);

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

}

.btn-secondary{

    border:1px solid var(--border);

    background:var(--white);

    color:var(--heading);

}

.btn-secondary:hover{

    border-color:var(--primary);

    color:var(--primary);

    transform:translateY(-4px);

}

.btn-outline{

    background:transparent;

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:white;

}


/*======================================================
                    CARDS
======================================================*/

.card{

    background:var(--white);

    border-radius:var(--radius-xl);

    padding:36px;

    border:1px solid var(--border);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}


/*======================================================
                    SERVICE CARD
======================================================*/

.service-card{

    text-align:left;

}

.service-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:#EFF6FF;

    margin-bottom:30px;

}

.service-icon i{

    font-size:28px;

    color:var(--primary);

}

.service-card h3{

    font-size:26px;

    margin-bottom:16px;

}

.service-card p{

    color:var(--muted);

    line-height:1.8;

}


/*======================================================
                STATISTICS CARD
======================================================*/

.stat-card{

    text-align:center;

    padding:45px 30px;

}

.stat-card h2{

    font-size:58px;

    color:var(--primary);

    margin-bottom:10px;

}

.stat-card h4{

    margin-bottom:12px;

}

.stat-card p{

    color:var(--muted);

}


/*======================================================
                PROJECT CARD
======================================================*/

.project-card{

    overflow:hidden;

    border-radius:28px;

    border:1px solid var(--border);

    background:white;

}

.project-image{

    overflow:hidden;

}

.project-image img{

    transition:1s ease;

}

.project-card:hover .project-image img{

    transform:scale(1.08);

}

.project-content{

    padding:40px;

}

.project-tag{

    display:inline-flex;

    padding:8px 18px;

    border-radius:999px;

    background:#EFF6FF;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}


/*======================================================
                WORKSHOP CARD
======================================================*/

.workshop-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

}

.workshop-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.workshop-card:hover img{

    transform:scale(1.08);

}

.workshop-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(15,23,42,.82)

    );

}

.workshop-content{

    position:absolute;

    left:30px;

    bottom:30px;

    color:white;

}


/*======================================================
                RECOGNITION CARD
======================================================*/

.recognition-card{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.recognition-card small{

    color:var(--primary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.recognition-card h3{

    font-size:24px;

}

.recognition-card p{

    color:var(--muted);

}


/*======================================================
                LOGO CARD
======================================================*/

.logo-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:20px;

    padding:35px;

    border-radius:22px;

    border:1px solid var(--border);

    background:white;

    transition:var(--transition);

}

.logo-card img{

    width:80px;

    height:80px;

    object-fit:contain;

    filter:grayscale(100%);

    transition:.4s;

}

.logo-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.logo-card:hover img{

    filter:none;

}


/*======================================================
                MEDIA CARD
======================================================*/

.media-card{

    overflow:hidden;

    border-radius:26px;

    background:white;

    border:1px solid var(--border);

}

.media-card img{

    width:100%;

}

.media-content{

    padding:30px;

}


/*======================================================
                TEAM CARD
======================================================*/

.team-card{

    text-align:center;

}

.team-card img{

    width:220px;

    height:220px;

    border-radius:50%;

    margin:auto;

    object-fit:cover;

    margin-bottom:25px;

}


/*======================================================
                TAGS
======================================================*/

.tag{

    display:inline-flex;

    padding:10px 18px;

    border-radius:999px;

    background:#EFF6FF;

    color:var(--primary);

    font-weight:700;

    font-size:13px;

    margin:6px;

}


/*======================================================
                DIVIDER
======================================================*/

.hr{

    width:100%;

    height:1px;

    background:var(--border);

}