/*
Theme Name: Astra Child
Theme URI: https://sumitknowledgefoundation.com
Description: Astra Child Theme
Author: Sumit Knowledge Foundation
Template: astra
Version: 1.1
Text Domain: astra-child
*/

/* ==========================================================
   SUMIT KNOWLEDGE FOUNDATION
   Premium Branded Homepage
   ========================================================== */


/* ==========================================================
   1. DESIGN SYSTEM
   ========================================================== */

:root{
    --skf-navy:#071426;
    --skf-navy-2:#0b1d35;
    --skf-navy-3:#102746;

    --skf-blue:#2563eb;
    --skf-blue-light:#3b82f6;
    --skf-cyan:#06b6d4;
    --skf-violet:#7c3aed;

    --skf-heading:#0f172a;
    --skf-text:#334155;
    --skf-muted:#64748b;

    --skf-white:#ffffff;
    --skf-soft:#f8fafc;
    --skf-soft-blue:#eff6ff;

    --skf-border:#e2e8f0;

    --skf-radius:22px;
    --skf-radius-small:16px;

    --skf-shadow:
        0 18px 50px rgba(15,23,42,.08);

    --skf-shadow-hover:
        0 24px 60px rgba(37,99,235,.16);

    --skf-transition:
        .3s cubic-bezier(.4,0,.2,1);
}


/* ==========================================================
   2. BASIC RESET
   ========================================================== */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    overflow-x:hidden;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background:var(--skf-white);
    color:var(--skf-text);
    font-size:16px;
    line-height:1.7;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    text-decoration:none;
    transition:var(--skf-transition);
}

.skf-homepage ul{
    list-style:none;
    margin:0;
    padding:0;
}


/* ==========================================================
   3. CONTAINER
   ========================================================== */

.skf-container{
    width:min(92%,1200px);
    margin-inline:auto;
}

.skf-homepage section{
    position:relative;
    padding:96px 0;
}


/* ==========================================================
   4. SECTION HEADINGS
   ========================================================== */

.skf-section-heading{
    max-width:820px;
    margin:0 auto 58px;
    text-align:center;
}

.skf-section-heading > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 17px;
    margin-bottom:18px;

    border:1px solid rgba(37,99,235,.15);
    border-radius:999px;

    background:rgba(37,99,235,.07);

    color:var(--skf-blue);
    font-size:13px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.skf-section-heading h2{
    margin:0 0 18px;
    color:var(--skf-heading);

    font-size:clamp(32px,4vw,46px);
    line-height:1.15;
    letter-spacing:-.035em;
}

.skf-section-heading p{
    max-width:740px;
    margin:0 auto;

    color:var(--skf-muted);
    font-size:18px;
}


/* ==========================================================
   5. PREMIUM GLASS BUTTON SYSTEM
   ========================================================== */

.skf-buttons{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:32px;
}

.skf-btn,
.skf-tool-btn{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:52px;
    padding:13px 25px;

    border-radius:999px;

    font-size:15px;
    font-weight:800;
    line-height:1.2;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.skf-btn::before,
.skf-tool-btn::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.22),
            transparent 45%
        );

    opacity:.8;
}

.skf-primary{
    color:#fff;

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

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.96),
            rgba(6,182,212,.88)
        );

    box-shadow:
        0 10px 30px rgba(37,99,235,.25),
        inset 0 1px 0 rgba(255,255,255,.28);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.skf-secondary{
    color:var(--skf-blue);

    border:1px solid rgba(37,99,235,.20);

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

    box-shadow:
        0 10px 30px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.9);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.skf-btn:hover,
.skf-tool-btn:hover{
    transform:translateY(-3px);
}

.skf-primary:hover{
    color:#fff;

    box-shadow:
        0 16px 36px rgba(37,99,235,.32),
        inset 0 1px 0 rgba(255,255,255,.3);
}

.skf-secondary:hover{
    color:var(--skf-blue);

    border-color:rgba(37,99,235,.4);

    box-shadow:
        0 15px 35px rgba(37,99,235,.13);
}


/* ==========================================================
   6. HERO — FINAL
   Desktop: Image Left / Content Right
   Mobile: Content First / Image Second
   ========================================================== */

.skf-hero{
    position:relative;
    overflow:hidden;

    min-height:700px;

    display:flex;
    align-items:center;

    padding:70px 0;

    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(6,182,212,.18),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 15%,
            rgba(124,58,237,.14),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #071426 0%,
            #0b1d35 52%,
            #102746 100%
        );
}


/* Decorative background glow */

.skf-hero::before{
    content:"";

    position:absolute;

    width:430px;
    height:430px;

    right:-180px;
    bottom:-220px;

    border-radius:50%;

    background:rgba(37,99,235,.16);

    filter:blur(20px);

    pointer-events:none;
}


/* ==========================================================
   HERO GRID
   ========================================================== */

.skf-hero-grid{
    position:relative;
    z-index:2;

    width:100%;

    display:grid;

    /* LEFT IMAGE / RIGHT CONTENT */
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);

    gap:70px;

    align-items:center;
}


/* ==========================================================
   HERO CONTENT — RIGHT
   ========================================================== */

.skf-hero-content{
    grid-column:2;
    grid-row:1;

    min-width:0;
    width:100%;
}


/* Badge */

.skf-badge{
    display:inline-flex;
    align-items:center;

    padding:9px 17px;
    margin-bottom:24px;

    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    color:#bfdbfe;

    font-size:13px;
    font-weight:800;
    letter-spacing:.03em;
}


/* Heading */

.skf-hero h1{
    max-width:720px;

    margin:0 0 24px;

    color:#fff;

    font-size:clamp(42px,5vw,66px);

    line-height:1.05;
    letter-spacing:-.045em;
}

.skf-hero h1 span{
    display:block;

    margin-top:8px;

    background:
        linear-gradient(
            90deg,
            #60a5fa,
            #22d3ee,
            #a78bfa
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}


/* Description */

.skf-hero p{
    max-width:650px;

    margin:0;

    color:#cbd5e1;

    font-size:18px;
    line-height:1.8;
}


/* Secondary button */

.skf-hero .skf-secondary{
    color:#fff;

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

    background:rgba(255,255,255,.08);
}

.skf-hero .skf-secondary:hover{
    color:#fff;

    background:rgba(255,255,255,.13);
}


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

.skf-features{
    display:flex;
    flex-wrap:wrap;

    gap:12px 20px;

    margin-top:32px !important;
}

.skf-features li{
    display:flex;
    align-items:center;

    gap:9px;

    color:#dbeafe;

    font-size:14px;
    font-weight:700;
}

.skf-features li::before{
    content:"✓";

    display:grid;
    place-items:center;

    width:22px;
    height:22px;

    flex:0 0 22px;

    border:1px solid rgba(34,211,238,.25);
    border-radius:50%;

    background:rgba(34,211,238,.12);

    color:#67e8f9;

    font-size:12px;
}


/* ==========================================================
   FEATURED IMAGE — LEFT
   ========================================================== */

.skf-hero-image{
    position:relative;

    grid-column:1;
    grid-row:1;

    width:100%;
    min-width:0;

    display:flex;
    align-items:center;
    justify-content:center;
}


/* Image glow */

.skf-hero-image::before{
    content:"";

    position:absolute;

    width:88%;
    height:88%;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.38),
            rgba(6,182,212,.18),
            rgba(124,58,237,.18)
        );

    filter:blur(45px);

    opacity:.55;

    pointer-events:none;
}


/* Actual Featured Image */

.skf-hero-image img{
    position:relative;
    z-index:2;

    display:block;

    width:100%;
    max-width:540px;
    height:auto;

    margin:0 auto;
    padding:8px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:28px;

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

    box-shadow:
        0 35px 80px rgba(0,0,0,.35),
        0 0 45px rgba(37,99,235,.12),
        inset 0 1px 0 rgba(255,255,255,.15);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
}


/* ==========================================================
   HERO — TABLET
   ========================================================== */

@media (max-width:991px){

    .skf-hero{
        min-height:auto;

        padding:65px 0;
    }

    .skf-hero-grid{
        grid-template-columns:1fr;

        gap:45px;
    }


    /* Text first on tablet/mobile */

    .skf-hero-content{
        grid-column:1;
        grid-row:1;
    }

    .skf-hero-image{
        grid-column:1;
        grid-row:2;
    }

    .skf-hero h1{
        max-width:760px;
    }

    .skf-hero p{
        max-width:720px;
    }

    .skf-hero-image img{
        max-width:620px;
    }

}


/* ==========================================================
   HERO — MOBILE
   ========================================================== */

@media (max-width:767px){

    .skf-hero{
        padding:52px 0;
    }

    .skf-hero-grid{
        gap:38px;
    }

    .skf-badge{
        margin-bottom:20px;

        padding:8px 13px;

        font-size:11px;
    }

    .skf-hero h1{
        margin-bottom:20px;

        font-size:clamp(38px,11vw,52px);

        line-height:1.06;
    }

    .skf-hero p{
        font-size:16px;

        line-height:1.7;
    }

    .skf-features{
        margin-top:27px !important;

        gap:11px;
    }

    .skf-features li{
        width:100%;

        font-size:13px;
    }

    .skf-hero-image img{
        max-width:100%;

        border-radius:22px;
    }

}


/* ==========================================================
   HERO — SMALL MOBILE
   ========================================================== */

@media (max-width:480px){

    .skf-hero{
        padding:45px 0;
    }

    .skf-hero-grid{
        gap:32px;
    }

    .skf-hero h1{
        font-size:clamp(35px,10.5vw,46px);
    }

    .skf-hero-image img{
        padding:5px;

        border-radius:18px;
    }

}


/* ==========================================================
   7. PLATFORM TRUST / STATS
   ========================================================== */

.skf-stats{
    padding:48px 0 !important;

    background:
        linear-gradient(
            180deg,
            #f8fbff,
            #ffffff
        );

    border-bottom:1px solid #edf2f7;
}

.skf-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.skf-stat-card{
    padding:25px 20px;

    text-align:center;

    border:1px solid rgba(148,163,184,.18);
    border-radius:18px;

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

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);

    transition:var(--skf-transition);
}

.skf-stat-card:hover{
    transform:translateY(-5px);

    border-color:rgba(37,99,235,.22);

    box-shadow:var(--skf-shadow-hover);
}

.skf-stat-card h3{
    margin:0 0 4px;

    color:var(--skf-blue);
    font-size:30px;
    line-height:1.2;
}

.skf-stat-card p{
    margin:0;
    color:var(--skf-muted);
    font-size:14px;
    font-weight:700;
}


/* ==========================================================
   8. LEARNING CATEGORIES
   ========================================================== */

.skf-categories{
    background:#fff;
}

.skf-category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.skf-category-card{
    position:relative;
    overflow:hidden;

    min-height:285px;
    padding:32px;

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

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfdff
        );

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

    transition:var(--skf-transition);
}

.skf-category-card::after{
    content:"";
    position:absolute;

    width:120px;
    height:120px;

    right:-60px;
    top:-60px;

    border-radius:50%;

    background:rgba(37,99,235,.06);

    transition:var(--skf-transition);
}

.skf-category-card:hover{
    transform:translateY(-7px);

    border-color:rgba(37,99,235,.28);

    box-shadow:var(--skf-shadow-hover);
}

.skf-category-card:hover::after{
    transform:scale(1.5);
}

.skf-card-icon{
    display:grid;
    place-items:center;

    width:52px;
    height:52px;

    margin-bottom:22px;

    border:1px solid rgba(37,99,235,.12);
    border-radius:15px;

    background:var(--skf-soft-blue);

    font-size:25px;
}

.skf-category-card h3{
    margin:0 0 12px;

    color:var(--skf-heading);

    font-size:22px;
    line-height:1.3;
}

.skf-category-card p{
    margin:0 0 20px;

    color:var(--skf-muted);
    font-size:15px;
}

.skf-category-card a{
    color:var(--skf-blue);
    font-size:14px;
    font-weight:800;
}

.skf-category-card a:hover{
    color:var(--skf-violet);
}


/* ==========================================================
   9. FREE SMART TOOLS
   ========================================================== */

.skf-tools{
    overflow:hidden;

    background:
        radial-gradient(
            circle at 0 20%,
            rgba(37,99,235,.14),
            transparent 24%
        ),
        radial-gradient(
            circle at 100% 75%,
            rgba(124,58,237,.12),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #071426,
            #0b1d35
        );
}

.skf-tools .skf-section-heading > span{
    color:#67e8f9;

    border-color:rgba(34,211,238,.18);
    background:rgba(34,211,238,.08);
}

.skf-tools .skf-section-heading h2{
    color:#fff;
}

.skf-tools .skf-section-heading p{
    color:#aebdd0;
}

.skf-tool-group{
    margin-top:58px;
}

.skf-tool-group:first-of-type{
    margin-top:0;
}

.skf-tool-group-heading{
    margin-bottom:24px;
}

.skf-tool-group-heading > span{
    display:inline-block;

    margin-bottom:5px;

    color:#67e8f9;

    font-size:12px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.skf-tool-group-heading h3{
    margin:0;

    color:#fff;

    font-size:25px;
    line-height:1.3;
}

.skf-tool-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.skf-tool-card{
    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    min-height:320px;
    padding:30px;

    border:1px solid rgba(255,255,255,.11);
    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.045)
        );

    box-shadow:
        0 20px 55px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.09);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:var(--skf-transition);
}

.skf-tool-card::after{
    content:"";
    position:absolute;

    width:150px;
    height:150px;

    right:-80px;
    bottom:-80px;

    border-radius:50%;

    background:rgba(37,99,235,.16);

    filter:blur(5px);
}

.skf-tool-card:hover{
    transform:translateY(-7px);

    border-color:rgba(96,165,250,.32);

    box-shadow:
        0 28px 65px rgba(0,0,0,.28),
        0 0 35px rgba(37,99,235,.09);
}

.skf-tool-icon{
    display:grid;
    place-items:center;

    width:52px;
    height:52px;

    margin-bottom:19px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:15px;

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

    font-size:25px;
}

.skf-tool-label{
    display:inline-block;
    align-self:flex-start;

    margin-bottom:10px;

    color:#67e8f9;

    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.skf-tool-card h3{
    margin:0 0 12px;

    color:#fff;

    font-size:22px;
    line-height:1.3;
}

.skf-tool-card p{
    margin:0 0 24px;

    color:#b6c5d8;
    font-size:15px;
}

.skf-tool-btn{
    z-index:2;

    align-self:flex-start;

    margin-top:auto;

    min-height:45px;
    padding:11px 20px;

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

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

    box-shadow:inset 0 1px 0 rgba(255,255,255,.1);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    color:#fff;
    font-size:13px;
}

.skf-tool-btn:hover{
    color:#fff;

    border-color:rgba(103,232,249,.4);

    background:rgba(37,99,235,.25);

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


/* ==========================================================
   10. LEARNING RESOURCES
   ========================================================== */

.skf-resources{
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );
}

.skf-resource-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.skf-resource-card{
    padding:34px;

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

    background:#fff;

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

    transition:var(--skf-transition);
}

.skf-resource-card:hover{
    transform:translateY(-7px);

    border-color:rgba(37,99,235,.25);

    box-shadow:var(--skf-shadow-hover);
}

.skf-resource-card h3{
    margin:0 0 14px;

    color:var(--skf-heading);
    font-size:22px;
}

.skf-resource-card p{
    margin:0 0 22px;

    color:var(--skf-muted);
}

.skf-resource-card a{
    color:var(--skf-blue);
    font-size:14px;
    font-weight:800;
}

.skf-resource-card a:hover{
    color:var(--skf-violet);
}


/* ==========================================================
   11. LATEST ARTICLES
   ========================================================== */

.skf-latest-posts{
    background:#fff;
}

.skf-post-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.skf-post-card{
    overflow:hidden;

    display:flex;
    flex-direction:column;

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

    background:#fff;

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

    transition:var(--skf-transition);
}

.skf-post-card:hover{
    transform:translateY(-7px);

    border-color:rgba(37,99,235,.22);

    box-shadow:var(--skf-shadow-hover);
}

.skf-post-thumb{
    display:block;
    overflow:hidden;
}

.skf-post-card img{
    width:100%;
    height:230px;

    object-fit:cover;

    transition:transform .45s ease;
}

.skf-post-card:hover img{
    transform:scale(1.045);
}

.skf-post-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    height:230px;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(34,211,238,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0b1d35,
            #173c69
        );

    color:#fff;
}

.skf-post-placeholder span{
    margin-bottom:4px;

    color:#67e8f9;
    font-size:30px;
    font-weight:900;
}

.skf-post-placeholder strong{
    font-size:14px;
}

.skf-post-content{
    display:flex;
    flex-direction:column;
    flex:1;

    padding:27px;
}

.skf-post-date{
    display:inline-block;
    margin-bottom:11px;

    color:var(--skf-blue);

    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.skf-post-content h3{
    margin:0 0 12px;

    font-size:21px;
    line-height:1.4;
}

.skf-post-content h3 a{
    color:var(--skf-heading);
}

.skf-post-content h3 a:hover{
    color:var(--skf-blue);
}

.skf-post-content p{
    margin:0 0 20px;

    color:var(--skf-muted);
    font-size:15px;
}

.skf-read-more{
    margin-top:auto;

    color:var(--skf-blue);

    font-size:14px;
    font-weight:800;
}

.skf-read-more:hover{
    color:var(--skf-violet);
}

.skf-no-posts{
    grid-column:1 / -1;
    text-align:center;
}


/* ==========================================================
   12. DIGITAL LIBRARY
   ========================================================== */

.skf-library{
    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eff6ff
        );
}

.skf-library-box{
    position:relative;
    overflow:hidden;

    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:55px;
    align-items:center;

    padding:58px;

    border:1px solid rgba(37,99,235,.13);
    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(239,246,255,.88)
        );

    box-shadow:
        0 30px 80px rgba(15,23,42,.10);
}

.skf-library-box::after{
    content:"";
    position:absolute;

    width:320px;
    height:320px;

    right:-170px;
    top:-170px;

    border-radius:50%;

    background:rgba(37,99,235,.08);
}

.skf-library-content,
.skf-library-features{
    position:relative;
    z-index:2;
}

.skf-library-badge{
    display:inline-flex;

    padding:8px 16px;
    margin-bottom:20px;

    border:1px solid rgba(37,99,235,.15);
    border-radius:999px;

    background:rgba(37,99,235,.07);

    color:var(--skf-blue);

    font-size:13px;
    font-weight:800;
}

.skf-library-content h2{
    margin:0 0 18px;

    color:var(--skf-heading);

    font-size:clamp(31px,4vw,45px);
    line-height:1.15;
    letter-spacing:-.035em;
}

.skf-library-content > p{
    margin:0;

    color:var(--skf-muted);
    font-size:17px;
}

.skf-library-features{
    display:grid;
    gap:15px;
}

.skf-library-feature{
    display:flex;
    gap:16px;
    align-items:center;

    padding:19px;

    border:1px solid rgba(148,163,184,.18);
    border-radius:17px;

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

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.skf-library-feature > span{
    display:grid;
    place-items:center;

    flex:0 0 46px;

    width:46px;
    height:46px;

    border-radius:13px;

    background:var(--skf-soft-blue);

    font-size:22px;
}

.skf-library-feature h3{
    margin:0 0 2px;

    color:var(--skf-heading);
    font-size:17px;
}

.skf-library-feature p{
    margin:0;

    color:var(--skf-muted);
    font-size:13px;
}


/* ==========================================================
   13. WHY SKF
   ========================================================== */

.skf-why-us{
    background:#fff;
}

.skf-why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.skf-why-card{
    padding:32px;

    text-align:left;

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

    background:
        linear-gradient(
            145deg,
            #fff,
            #fbfdff
        );

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

    transition:var(--skf-transition);
}

.skf-why-card:hover{
    transform:translateY(-7px);

    border-color:rgba(37,99,235,.25);

    box-shadow:var(--skf-shadow-hover);
}

.skf-icon{
    display:grid;
    place-items:center;

    width:54px;
    height:54px;

    margin-bottom:20px;

    border-radius:15px;

    background:var(--skf-soft-blue);

    font-size:25px;
}

.skf-why-card h3{
    margin:0 0 11px;

    color:var(--skf-heading);
    font-size:21px;
}

.skf-why-card p{
    margin:0;

    color:var(--skf-muted);
    font-size:15px;
}


/* ==========================================================
   14. FAQ
   ========================================================== */

.skf-faq{
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );
}

.skf-faq-wrapper{
    max-width:900px;
    margin:0 auto;
}

.skf-faq-item{
    overflow:hidden;

    margin-bottom:14px;

    border:1px solid var(--skf-border);
    border-radius:17px;

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

    box-shadow:
        0 10px 35px rgba(15,23,42,.05);
}

.skf-faq-item summary{
    position:relative;

    cursor:pointer;
    list-style:none;

    padding:21px 60px 21px 24px;

    color:var(--skf-heading);

    font-size:17px;
    font-weight:800;
}

.skf-faq-item summary::-webkit-details-marker{
    display:none;
}

.skf-faq-item summary::after{
    content:"+";

    position:absolute;
    top:50%;
    right:22px;

    display:grid;
    place-items:center;

    width:31px;
    height:31px;

    transform:translateY(-50%);

    border-radius:50%;

    background:var(--skf-soft-blue);

    color:var(--skf-blue);

    font-size:20px;
    line-height:1;
}

.skf-faq-item[open]{
    border-color:rgba(37,99,235,.22);
}

.skf-faq-item[open] summary::after{
    content:"−";
}

.skf-faq-item p{
    margin:0;
    padding:0 24px 23px;

    color:var(--skf-muted);
}


/* ==========================================================
   15. FINAL CTA
   ========================================================== */

.skf-final-cta{
    overflow:hidden;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(124,58,237,.24),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(6,182,212,.18),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #071426,
            #102746
        );
}

.skf-final-cta-content{
    position:relative;
    z-index:2;

    max-width:850px;
    margin:0 auto;

    text-align:center;
}

.skf-cta-badge{
    display:inline-flex;

    padding:9px 18px;
    margin-bottom:22px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;

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

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    color:#67e8f9;

    font-size:13px;
    font-weight:800;
}

.skf-final-cta h2{
    margin:0 0 21px;

    color:#fff;

    font-size:clamp(35px,5vw,54px);
    line-height:1.1;
    letter-spacing:-.04em;
}

.skf-final-cta h2 span{
    background:
        linear-gradient(
            90deg,
            #60a5fa,
            #22d3ee,
            #c4b5fd
        );

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.skf-final-cta p{
    max-width:720px;
    margin:0 auto;

    color:#cbd5e1;

    font-size:17px;
}

.skf-final-cta .skf-buttons{
    justify-content:center;
}

.skf-final-cta .skf-secondary{
    color:#fff;

    border-color:rgba(255,255,255,.18);
    background:rgba(255,255,255,.07);
}

.skf-final-cta .skf-secondary:hover{
    color:#fff;
    background:rgba(255,255,255,.12);
}


/* ==========================================================
   16. ACCESSIBILITY
   ========================================================== */

.skf-homepage a:focus-visible,
.skf-homepage summary:focus-visible{
    outline:3px solid #22d3ee;
    outline-offset:4px;
}


/* ==========================================================
   17. TABLET
   ========================================================== */

@media (max-width:991px){

    .skf-homepage section{
        padding:80px 0;
    }

    .skf-hero{
        min-height:auto;
    }

    .skf-hero-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .skf-hero-content{
        text-align:center;
    }

    .skf-hero p{
        margin-inline:auto;
    }

    .skf-hero .skf-buttons{
        justify-content:center;
    }

    .skf-features{
        justify-content:center;
    }

    .skf-hero-image img{
        max-width:580px;
    }

    .skf-stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .skf-category-grid,
    .skf-resource-grid,
    .skf-post-grid,
    .skf-why-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .skf-tool-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .skf-library-box{
        grid-template-columns:1fr;
        gap:38px;
    }

}


/* ==========================================================
   18. MOBILE
   ========================================================== */

@media (max-width:767px){

    .skf-container{
        width:min(91%,1200px);
    }

    .skf-homepage section{
        padding:68px 0;
    }

    .skf-section-heading{
        margin-bottom:40px;
    }

    .skf-section-heading > span{
        font-size:11px;
    }

    .skf-section-heading p{
        font-size:16px;
    }


    /* Hero */

    .skf-hero{
        padding-top:70px !important;
        padding-bottom:70px !important;
    }

    .skf-hero-grid{
        gap:42px;
    }

    .skf-badge{
        font-size:11px;
        padding:8px 13px;
    }

    .skf-hero h1{
        font-size:38px;
    }

    .skf-hero p{
        font-size:16px;
    }

    .skf-buttons{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }

    .skf-btn{
        width:100%;
    }

    .skf-features{
        display:grid;
        justify-content:start;
        text-align:left;
    }

    .skf-features li{
        justify-content:flex-start;
    }

    .skf-hero-image img{
        border-radius:21px;
    }


    /* Grids */

    .skf-stats-grid,
    .skf-category-grid,
    .skf-tool-grid,
    .skf-resource-grid,
    .skf-post-grid,
    .skf-why-grid{
        grid-template-columns:1fr;
    }

    .skf-stats{
        padding:35px 0 !important;
    }

    .skf-stat-card{
        padding:21px;
    }


    /* Cards */

    .skf-category-card,
    .skf-resource-card,
    .skf-why-card{
        padding:27px;
    }

    .skf-tool-card{
        min-height:auto;
        padding:27px;
    }

    .skf-tool-group{
        margin-top:45px;
    }

    .skf-tool-group-heading h3{
        font-size:21px;
    }

    .skf-tool-btn{
        width:100%;
        align-self:stretch;
    }


    /* Posts */

    .skf-post-card img,
    .skf-post-placeholder{
        height:215px;
    }

    .skf-post-content{
        padding:23px;
    }


    /* Library */

    .skf-library-box{
        padding:30px 23px;
        border-radius:23px;
    }

    .skf-library-content{
        text-align:center;
    }

    .skf-library-content .skf-buttons{
        justify-content:center;
    }


    /* FAQ */

    .skf-faq-item summary{
        padding:
            18px
            55px
            18px
            19px;

        font-size:15px;
    }

    .skf-faq-item summary::after{
        right:16px;
    }

    .skf-faq-item p{
        padding:
            0
            19px
            20px;

        font-size:14px;
    }

}


/* ==========================================================
   19. SMALL MOBILE
   ========================================================== */

@media (max-width:420px){

    .skf-hero h1{
        font-size:34px;
    }

    .skf-section-heading h2{
        font-size:30px;
    }

    .skf-library-content h2{
        font-size:30px;
    }

    .skf-final-cta h2{
        font-size:32px;
    }

}


/* ==========================================================
   20. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }

}
/* ==========================================================
   21. SKF CUSTOM PREMIUM HEADER
   ========================================================== */

.skf-site-header{
    position:sticky;
    top:0;
    z-index:9999;

    width:100%;

    background:rgba(7,20,38,.92);
    border-bottom:1px solid rgba(255,255,255,.09);

    box-shadow:0 10px 35px rgba(0,0,0,.12);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.admin-bar .skf-site-header{
    top:32px;
}


/* ==========================================================
   HEADER CONTAINER
   ========================================================== */

.skf-header-container{
    width:min(94%,1240px);
    min-height:76px;

    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:28px;
}


/* ==========================================================
   BRAND / LOGO
   ========================================================== */

.skf-header-brand{
    flex:0 0 auto;
}

.skf-brand-link{
    display:flex;
    align-items:center;
    gap:12px;

    color:#fff;
}

.skf-brand-link:hover{
    color:#fff;
}

.skf-brand-logo{
    display:flex;
    align-items:center;
}

.skf-brand-logo .custom-logo-link{
    display:flex;
    align-items:center;
}

.skf-brand-logo img,
.skf-brand-logo .custom-logo{
    display:block;

    width:auto;
    max-width:190px;
    max-height:52px;

    object-fit:contain;
}

.skf-brand-mark{
    display:grid;
    place-items:center;

    width:46px;
    height:46px;

    flex:0 0 46px;

    border:1px solid rgba(103,232,249,.25);
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.95),
            rgba(6,182,212,.82)
        );

    box-shadow:
        0 8px 25px rgba(37,99,235,.25),
        inset 0 1px 0 rgba(255,255,255,.25);

    color:#fff;

    font-size:15px;
    font-weight:900;
    letter-spacing:.04em;
}

.skf-brand-text{
    display:flex;
    flex-direction:column;

    line-height:1.12;
}

.skf-brand-text strong{
    color:#fff;

    font-size:15px;
    font-weight:800;
}

.skf-brand-text small{
    margin-top:3px;

    color:#94a3b8;

    font-size:11px;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;
}


/* ==========================================================
   DESKTOP NAVIGATION
   ========================================================== */

.skf-desktop-nav{
    display:flex;
    align-items:center;

    margin-left:auto;
}

.skf-nav-list{
    display:flex;
    align-items:center;

    gap:3px;

    margin:0 !important;
    padding:0 !important;

    list-style:none !important;
}

.skf-nav-item{
    position:relative;

    margin:0;
    padding:0;
}

.skf-nav-item > a,
.skf-nav-dropdown-toggle{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:5px;

    min-height:44px;
    padding:10px 12px;

    border:0;
    border-radius:10px;

    background:transparent;

    color:#dbeafe;

    font-family:inherit;
    font-size:14px;
    font-weight:700;

    line-height:1;

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease;
}

.skf-nav-item > a:hover,
.skf-nav-dropdown-toggle:hover,
.skf-nav-item > a:focus-visible,
.skf-nav-dropdown-toggle:focus-visible{
    color:#fff;

    background:rgba(255,255,255,.07);
}

.skf-nav-arrow{
    color:#7dd3fc;

    font-size:10px;

    transition:transform .2s ease;
}

.skf-dropdown-open .skf-nav-arrow{
    transform:rotate(180deg);
}


/* ==========================================================
   DESKTOP DROPDOWNS
   ========================================================== */

.skf-dropdown{
    position:absolute;

    top:calc(100% + 12px);
    left:50%;

    width:360px;

    padding:12px;

    visibility:hidden;
    opacity:0;

    transform:
        translateX(-50%)
        translateY(8px);

    pointer-events:none;

    border:1px solid rgba(255,255,255,.11);
    border-radius:20px;

    background:rgba(8,24,44,.98);

    box-shadow:
        0 25px 70px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

.skf-dropdown::before{
    content:"";

    position:absolute;

    top:-13px;
    left:0;

    width:100%;
    height:14px;
}

.skf-dropdown-open > .skf-dropdown{
    visibility:visible;
    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);

    pointer-events:auto;
}

.skf-dropdown-heading{
    padding:7px 10px 12px;

    color:#67e8f9;

    font-size:11px;
    font-weight:800;

    letter-spacing:.09em;
    text-transform:uppercase;
}

.skf-dropdown > a{
    display:flex;
    align-items:center;

    gap:13px;

    padding:11px;

    border-radius:13px;

    color:#fff;

    transition:
        background .2s ease,
        transform .2s ease;
}

.skf-dropdown > a:hover{
    color:#fff;

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

    transform:translateX(2px);
}

.skf-dropdown > a > span{
    display:grid;
    place-items:center;

    width:38px;
    height:38px;

    flex:0 0 38px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:11px;

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

    font-size:17px;
}

.skf-dropdown > a > div{
    min-width:0;
}

.skf-dropdown strong{
    display:block;

    margin-bottom:2px;

    color:#f8fafc;

    font-size:13px;
    font-weight:800;
}

.skf-dropdown small{
    display:block;

    color:#94a3b8;

    font-size:11px;
    line-height:1.35;
}


/* ==========================================================
   TOOLS MEGA DROPDOWN
   ========================================================== */

.skf-dropdown-tools{
    width:650px;

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

    gap:3px;
}

.skf-dropdown-tools .skf-dropdown-heading{
    grid-column:1 / -1;
}


/* ==========================================================
   SMALL RESOURCES DROPDOWN
   ========================================================== */

.skf-dropdown-small{
    width:340px;
}


/* ==========================================================
   HEADER CTA
   ========================================================== */

.skf-header-actions{
    flex:0 0 auto;

    display:flex;
    align-items:center;

    gap:12px;
}

.skf-header-cta{
    position:relative;
    overflow:hidden;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:44px;

    padding:10px 18px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.92),
            rgba(6,182,212,.72)
        );

    box-shadow:
        0 8px 25px rgba(37,99,235,.23),
        inset 0 1px 0 rgba(255,255,255,.24);

    color:#fff;

    font-size:13px;
    font-weight:800;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.skf-header-cta:hover{
    color:#fff;

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(37,99,235,.32),
        inset 0 1px 0 rgba(255,255,255,.25);
}

.skf-header-cta span{
    font-size:16px;

    transition:transform .2s ease;
}

.skf-header-cta:hover span{
    transform:translateX(3px);
}


/* ==========================================================
   MOBILE MENU BUTTON
   ========================================================== */

.skf-mobile-toggle{
    display:none;

    width:44px;
    height:44px;

    padding:10px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:12px;

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

    cursor:pointer;
}

.skf-mobile-toggle span{
    display:block;

    width:100%;
    height:2px;

    margin:4px 0;

    border-radius:10px;

    background:#fff;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.skf-mobile-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}

.skf-mobile-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
}

.skf-mobile-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}


/* ==========================================================
   MOBILE MENU
   ========================================================== */

.skf-mobile-menu{
    border-top:1px solid rgba(255,255,255,.08);

    background:rgba(7,20,38,.985);

    box-shadow:0 25px 50px rgba(0,0,0,.25);
}

.skf-mobile-menu[hidden]{
    display:none !important;
}

.skf-mobile-menu-inner{
    width:min(92%,720px);

    margin:0 auto;
    padding:18px 0 26px;
}

.skf-mobile-main-link{
    display:block;

    padding:14px 4px;

    border-bottom:1px solid rgba(255,255,255,.07);

    color:#e2e8f0;

    font-size:15px;
    font-weight:800;
}

.skf-mobile-main-link:hover{
    color:#67e8f9;
}

.skf-mobile-group{
    border-bottom:1px solid rgba(255,255,255,.07);
}

.skf-mobile-group summary{
    position:relative;

    cursor:pointer;
    list-style:none;

    padding:15px 36px 15px 4px;

    color:#e2e8f0;

    font-size:15px;
    font-weight:800;
}

.skf-mobile-group summary::-webkit-details-marker{
    display:none;
}

.skf-mobile-group summary::after{
    content:"+";

    position:absolute;

    right:5px;
    top:50%;

    transform:translateY(-50%);

    color:#67e8f9;

    font-size:20px;
    font-weight:400;
}

.skf-mobile-group[open] summary::after{
    content:"−";
}

.skf-mobile-submenu{
    display:grid;

    padding:0 0 12px 12px;
}

.skf-mobile-submenu a{
    padding:10px 12px;

    border-radius:9px;

    color:#94a3b8;

    font-size:14px;
    font-weight:600;
}

.skf-mobile-submenu a:hover{
    color:#fff;

    background:rgba(255,255,255,.06);
}

.skf-mobile-tools-cta{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    min-height:48px;

    margin-top:20px;
    padding:12px 20px;

    border:1px solid rgba(103,232,249,.22);
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.75),
            rgba(6,182,212,.45)
        );

    color:#fff;

    font-size:14px;
    font-weight:800;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15);
}

.skf-mobile-tools-cta:hover{
    color:#fff;
}


/* ==========================================================
   HEADER ACCESSIBILITY
   ========================================================== */

.skf-site-header a:focus-visible,
.skf-site-header button:focus-visible,
.skf-site-header summary:focus-visible{
    outline:2px solid #67e8f9;
    outline-offset:3px;
}


/* ==========================================================
   HEADER RESPONSIVE
   ========================================================== */

@media (max-width:1100px){

    .skf-header-container{
        min-height:70px;
    }

    .skf-desktop-nav{
        display:none;
    }

    .skf-header-cta{
        display:none;
    }

    .skf-mobile-toggle{
        display:block;
    }

    .skf-brand-logo img,
    .skf-brand-logo .custom-logo{
        max-width:180px;
        max-height:48px;
    }

}


@media (max-width:782px){

    .admin-bar .skf-site-header{
        top:46px;
    }

}


@media (max-width:600px){

    .admin-bar .skf-site-header{
        top:0;
    }

    .skf-header-container{
        width:92%;
        min-height:66px;
    }

    .skf-brand-logo img,
    .skf-brand-logo .custom-logo{
        max-width:155px;
        max-height:44px;
    }

    .skf-brand-mark{
        width:42px;
        height:42px;

        flex-basis:42px;

        font-size:13px;
    }

    .skf-brand-text strong{
        font-size:13px;
    }

    .skf-brand-text small{
        font-size:9px;
    }

}


/* ==========================================================
   PREVENT PAGE SCROLL WHEN MOBILE MENU IS OPEN
   ========================================================== */

body.skf-mobile-menu-open{
    overflow:hidden;
}
/* ==========================================================
   22. SKF CUSTOM PREMIUM FOOTER
   ========================================================== */

.skf-site-footer{
    position:relative;
    overflow:hidden;

    margin:0;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(37,99,235,.18),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(6,182,212,.12),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #071426 0%,
            #091a30 48%,
            #0b1d35 100%
        );

    color:#cbd5e1;

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


/* Decorative glow */

.skf-site-footer::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-280px;
    left:35%;

    border-radius:50%;

    background:rgba(124,58,237,.10);

    filter:blur(20px);

    pointer-events:none;
}


/* ==========================================================
   FOOTER MAIN
   ========================================================== */

.skf-footer-main{
    position:relative;
    z-index:2;

    padding:78px 0 62px;
}

.skf-footer-container{
    width:min(92%,1200px);

    margin-inline:auto;

    display:grid;

    grid-template-columns:
        minmax(260px,1.35fr)
        minmax(150px,.72fr)
        minmax(175px,.9fr)
        minmax(150px,.7fr);

    gap:55px;
}


/* ==========================================================
   FOOTER BRAND
   ========================================================== */

.skf-footer-brand{
    max-width:360px;
}

.skf-footer-brand-link{
    display:inline-flex;
    align-items:center;

    gap:12px;

    margin-bottom:23px;

    color:#fff;
}

.skf-footer-brand-link:hover{
    color:#fff;
}


/* WordPress Custom Logo */

.skf-footer-logo{
    display:flex;
    align-items:center;
}

.skf-footer-logo .custom-logo-link{
    display:flex;
    align-items:center;
}

.skf-footer-logo img,
.skf-footer-logo .custom-logo{
    display:block;

    width:auto;
    max-width:200px;
    max-height:58px;

    object-fit:contain;
}


/* Fallback SKF logo */

.skf-footer-brand-mark{
    display:grid;
    place-items:center;

    width:50px;
    height:50px;

    flex:0 0 50px;

    border:1px solid rgba(103,232,249,.24);
    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.95),
            rgba(6,182,212,.82)
        );

    box-shadow:
        0 10px 30px rgba(37,99,235,.24),
        inset 0 1px 0 rgba(255,255,255,.24);

    color:#fff;

    font-size:16px;
    font-weight:900;

    letter-spacing:.04em;
}

.skf-footer-brand-name{
    display:flex;
    flex-direction:column;

    line-height:1.15;
}

.skf-footer-brand-name strong{
    color:#fff;

    font-size:16px;
    font-weight:800;
}

.skf-footer-brand-name small{
    margin-top:3px;

    color:#94a3b8;

    font-size:10px;
    font-weight:700;

    letter-spacing:.09em;
    text-transform:uppercase;
}


/* Description */

.skf-footer-description{
    margin:0 0 22px;

    color:#94a3b8;

    font-size:14px;
    line-height:1.8;
}


/* Mission glass card */

.skf-footer-mission{
    display:flex;
    align-items:flex-start;

    gap:11px;

    margin-bottom:25px;
    padding:14px 16px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.skf-footer-mission > span{
    flex:0 0 auto;

    color:#67e8f9;

    font-size:15px;
}

.skf-footer-mission p{
    margin:0;

    color:#cbd5e1;

    font-size:12px;
    font-weight:600;

    line-height:1.6;
}


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

.skf-footer-socials{
    display:flex;
    align-items:center;

    gap:9px;
}

.skf-footer-socials a{
    display:grid;
    place-items:center;

    width:40px;
    height:40px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.035)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    color:#dbeafe;

    font-size:13px;
    font-weight:900;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        color .25s ease;
}

.skf-footer-socials a:hover{
    transform:translateY(-3px);

    border-color:rgba(103,232,249,.30);

    background:rgba(37,99,235,.20);

    color:#67e8f9;
}


/* ==========================================================
   FOOTER COLUMNS
   ========================================================== */

.skf-footer-column h3{
    position:relative;

    margin:3px 0 23px;

    padding-bottom:12px;

    color:#fff;

    font-size:15px;
    font-weight:800;

    letter-spacing:.01em;
}

.skf-footer-column h3::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:30px;
    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #22d3ee
        );
}

.skf-footer-column ul{
    margin:0 !important;
    padding:0 !important;

    list-style:none !important;
}

.skf-footer-column li{
    margin:0 0 11px;
    padding:0;
}

.skf-footer-column a{
    position:relative;

    display:inline-flex;
    align-items:center;

    color:#94a3b8;

    font-size:13px;
    font-weight:600;

    line-height:1.5;

    transition:
        color .2s ease,
        transform .2s ease;
}

.skf-footer-column a::before{
    content:"";

    width:0;
    height:1px;

    margin-right:0;

    background:#67e8f9;

    transition:
        width .2s ease,
        margin-right .2s ease;
}

.skf-footer-column a:hover{
    color:#fff;

    transform:translateX(2px);
}

.skf-footer-column a:hover::before{
    width:9px;
    margin-right:7px;
}


/* ==========================================================
   CONTACT STRIP
   ========================================================== */

.skf-footer-contact{
    position:relative;
    z-index:2;

    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.07);

    background:rgba(255,255,255,.025);
}

.skf-footer-contact-inner{
    width:min(92%,1200px);

    margin-inline:auto;

    min-height:112px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:35px;
}

.skf-footer-contact-text{
    display:flex;
    flex-direction:column;

    gap:5px;
}

.skf-footer-contact-label{
    color:#67e8f9;

    font-size:10px;
    font-weight:800;

    letter-spacing:.12em;
    text-transform:uppercase;
}

.skf-footer-contact-text strong{
    color:#fff;

    font-size:18px;
    font-weight:800;
}


/* Contact buttons */

.skf-footer-contact-actions{
    display:flex;
    align-items:center;

    gap:10px;
}

.skf-footer-contact-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:44px;

    padding:10px 18px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.04)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    color:#fff;

    font-size:12px;
    font-weight:800;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.skf-footer-contact-btn:hover{
    transform:translateY(-2px);

    color:#fff;

    border-color:rgba(103,232,249,.28);

    background:rgba(37,99,235,.18);

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);
}

.skf-footer-contact-btn > span{
    color:#67e8f9;

    font-size:15px;
}


/* WhatsApp slight differentiation */

.skf-footer-whatsapp{
    border-color:rgba(255,255,255,.14);
}


/* ==========================================================
   FOOTER BOTTOM
   ========================================================== */

.skf-footer-bottom{
    position:relative;
    z-index:2;

    background:rgba(0,0,0,.12);
}

.skf-footer-bottom-inner{
    width:min(92%,1200px);

    min-height:70px;

    margin-inline:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:25px;
}

.skf-footer-bottom p{
    margin:0;

    color:#64748b;

    font-size:11px;
    font-weight:600;
}

.skf-footer-bottom-links{
    display:flex;
    align-items:center;

    gap:20px;
}

.skf-footer-bottom-links a{
    color:#64748b;

    font-size:11px;
    font-weight:700;

    transition:color .2s ease;
}

.skf-footer-bottom-links a:hover{
    color:#cbd5e1;
}


/* ==========================================================
   FOOTER ACCESSIBILITY
   ========================================================== */

.skf-site-footer a:focus-visible{
    outline:2px solid #67e8f9;
    outline-offset:4px;
}


/* ==========================================================
   FOOTER TABLET
   ========================================================== */

@media (max-width:991px){

    .skf-footer-main{
        padding:65px 0 52px;
    }

    .skf-footer-container{
        grid-template-columns:
            minmax(250px,1.3fr)
            1fr
            1fr;

        gap:45px 35px;
    }

    .skf-footer-brand{
        grid-column:1 / -1;

        max-width:600px;
    }

}


/* ==========================================================
   FOOTER MOBILE
   ========================================================== */

@media (max-width:767px){

    .skf-footer-main{
        padding:55px 0 45px;
    }

    .skf-footer-container{
        width:90%;

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

        gap:42px 28px;
    }

    .skf-footer-brand{
        grid-column:1 / -1;

        max-width:none;
    }

    .skf-footer-description{
        max-width:520px;
    }


    /* Contact strip */

    .skf-footer-contact-inner{
        width:90%;

        min-height:auto;

        padding:30px 0;

        flex-direction:column;
        align-items:flex-start;

        gap:20px;
    }

    .skf-footer-contact-actions{
        width:100%;
    }

    .skf-footer-contact-btn{
        flex:1;
    }


    /* Bottom */

    .skf-footer-bottom-inner{
        width:90%;

        min-height:auto;

        padding:22px 0;

        flex-direction:column;

        align-items:flex-start;

        gap:12px;
    }

}


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

@media (max-width:480px){

    .skf-footer-container{
        grid-template-columns:1fr;

        gap:35px;
    }

    .skf-footer-brand{
        grid-column:auto;
    }

    .skf-footer-column{
        padding-bottom:5px;
    }

    .skf-footer-column h3{
        margin-bottom:17px;
    }

    .skf-footer-contact-actions{
        flex-direction:column;
    }

    .skf-footer-contact-btn{
        width:100%;
    }

    .skf-footer-bottom-links{
        flex-wrap:wrap;

        gap:10px 17px;
    }
}

/* ==========================================================
   FOOTER REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    .skf-site-footer *,
    .skf-site-footer *::before,
    .skf-site-footer *::after{
        transition-duration:.01ms !important;
    }

}


/* ==========================================================
   REMOVE ASTRA / WORDPRESS HOMEPAGE BLANK SPACE
   ========================================================== */

body.home{
    margin:0 !important;
    padding:0 !important;
}

body.home #page,
body.home .site,
body.home #content,
body.home .site-content,
body.home .content-area,
body.home .site-main{
    margin:0 !important;
    padding:0 !important;
}

body.home .site-content > .ast-container{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;
}


/* ==========================================================
   CUSTOM HOMEPAGE MAIN RESET
   ========================================================== */

body.home .skf-homepage{
    display:block;

    width:100%;

    margin:0 !important;
    padding:0 !important;
}


/* Header should connect directly with hero */

body.home .skf-site-header{
    margin-bottom:0 !important;
}


/* Hero starts immediately after header */

body.home .skf-homepage > .skf-hero{
    margin-top:0 !important;
}