/* ==========================================================
   SeniorTech Networks Website V3
   File: components.css
   Purpose: Reusable Components
========================================================== */


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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;

    padding:16px 34px;

    border:none;
    border-radius:50px;

    cursor:pointer;

    font-size:1rem;
    font-weight:600;

    transition:var(--transition);
}

/* Primary Button */

.btn-primary{

    background:var(--color-accent);

    color:var(--color-white);

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

}

.btn-primary:hover{

    transform:translateY(-3px);

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

}

/* Secondary Button */

.btn-secondary{

    background:transparent;

    color:var(--color-white);

    border:2px solid rgba(255,255,255,.45);

}

.btn-secondary:hover{

    background:var(--color-white);

    color:var(--color-primary);

}

/* Navigation Button */

.btn-nav{

    background:var(--color-accent);

    color:var(--color-white);

    padding:12px 24px;

    font-size:.95rem;

}

.btn-nav:hover{

    transform:translateY(-2px);

}


/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    padding:10px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(14px);

    color:var(--color-white);

    font-size:.85rem;

    font-weight:600;

}


/* ==========================================================
   FEATURE CARD
========================================================== */

.feature-card{

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

    border-radius:24px;

    padding:32px;

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

    transition:var(--transition);

}

.feature-card:hover{

    transform:translateY(-8px);

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

}


/* ==========================================================
   FEATURE ICON
========================================================== */

.feature-icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:1.4rem;

    color:var(--color-white);

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-secondary)
    );

    margin-bottom:20px;

}


/* ==========================================================
   CARD TITLE
========================================================== */

.feature-card h3{

    margin-bottom:10px;

    font-size:1.2rem;

}


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

.feature-divider{

    width:50px;

    height:4px;

    background:var(--color-accent);

    border-radius:10px;

    margin:16px 0;

}


/* ==========================================================
   SUMMARY STRIP
========================================================== */

.summary-strip{

    background:var(--color-white);

    border-radius:24px;

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

    padding:30px;

}

.summary-item{

    text-align:center;

}

.summary-item h4{

    color:var(--color-primary);

    margin-bottom:6px;

}

.summary-item p{

    font-size:.95rem;

}