/*=========================================================
    Homepage Section 04
    My Skills & Technical Expertise
    CSS Part 1
    (Variables, Layout, Header, Sidebar)
=========================================================*/


/*=========================================
    CSS Variables
=========================================*/

:root{

    --hpsec04-primary:#2563eb;
    --hpsec04-primary-light:#3b82f6;
    --hpsec04-secondary:#60a5fa;

    --hpsec04-dark:#0f172a;
    --hpsec04-dark-light:#1e293b;

    --hpsec04-white:#ffffff;
    --hpsec04-text:#475569;
    --hpsec04-border:#e2e8f0;

    --hpsec04-bg:#f8fbff;

    --hpsec04-radius:24px;

    --hpsec04-transition:.40s cubic-bezier(.4,0,.2,1);

}


/*=========================================
    Main Section
=========================================*/

#hpsec04-skills{

    position:relative;
    overflow:hidden;

    padding:120px 20px;

    background:var(--hpsec04-bg);

    isolation:isolate;

}


/*=========================================
    Animated Background
=========================================*/

#hpsec04-skills::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    top:-180px;
    left:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(37,99,235,.12),
    transparent 70%);

    animation:hpsec04BlobOne 14s ease-in-out infinite;

    z-index:-2;

}

#hpsec04-skills::after{

    content:"";

    position:absolute;

    width:620px;
    height:620px;

    bottom:-240px;
    right:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(96,165,250,.15),
    transparent 70%);

    animation:hpsec04BlobTwo 18s ease-in-out infinite;

    z-index:-2;

}


/*=========================================
    Grid Pattern
=========================================*/

.hpsec04-container{

    position:relative;

    max-width:1350px;

    margin:auto;

    z-index:2;

}

.hpsec04-container::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
    rgba(37,99,235,.03) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(37,99,235,.03) 1px,
    transparent 1px);

    background-size:42px 42px;

    pointer-events:none;

}


/*=========================================
    Header
=========================================*/

.hpsec04-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.hpsec04-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

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

    color:var(--hpsec04-primary);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.hpsec04-subtitle::before{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--hpsec04-primary);

    animation:hpsec04Pulse 2s infinite;

}

.hpsec04-title{

    margin:25px 0;

    color:var(--hpsec04-dark);

    font-size:clamp(2.2rem,5vw,3.4rem);

    line-height:1.15;

    font-weight:800;

}

.hpsec04-description{

    color:var(--hpsec04-text);

    font-size:1.08rem;

    line-height:1.9;

}


/*=========================================
    Two Column Layout
=========================================*/

.hpsec04-wrapper{

    display:grid;

    grid-template-columns:

    330px

    minmax(0,1fr);

    gap:45px;

    align-items:start;

}


/*=========================================
    Sidebar
=========================================*/

.hpsec04-sidebar{

    position:sticky;

    top:120px;

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*=========================================
    Navigation Button
=========================================*/

.hpsec04-nav-item{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:18px;

    width:100%;

    padding:20px 24px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    text-align:left;

    background:#fff;

    color:var(--hpsec04-dark);

    transition:var(--hpsec04-transition);

    box-shadow:

    0 10px 30px rgba(15,23,42,.05);

}


/*=========================================
    Hover Gradient
=========================================*/

.hpsec04-nav-item::before{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-105%);

    background:

    linear-gradient(
    90deg,
    #2563eb,
    #3b82f6);

    transition:.45s;

    z-index:0;

}

.hpsec04-nav-item:hover::before{

    transform:translateX(0);

}


/*=========================================
    Icon
=========================================*/

.hpsec04-nav-icon{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    width:54px;
    height:54px;

    border-radius:15px;

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

    color:var(--hpsec04-primary);

    font-size:1.25rem;

    transition:var(--hpsec04-transition);

}


/*=========================================
    Navigation Text
=========================================*/

.hpsec04-nav-text{

    position:relative;

    z-index:2;

    font-size:1rem;

    font-weight:700;

    transition:var(--hpsec04-transition);

}


/*=========================================
    Hover Effect
=========================================*/

.hpsec04-nav-item:hover{

    transform:translateX(10px);

    box-shadow:

    0 20px 45px rgba(37,99,235,.18);

}

.hpsec04-nav-item:hover .hpsec04-nav-icon{

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

    color:#fff;

    transform:

    rotate(12deg)

    scale(1.12);

}

.hpsec04-nav-item:hover .hpsec04-nav-text{

    color:#fff;

}


/*=========================================
    Active State
=========================================*/

.hpsec04-nav-item.hpsec04-active{

    background:

    linear-gradient(
    135deg,
    #2563eb,
    #3b82f6);

    box-shadow:

    0 20px 45px rgba(37,99,235,.30);

}

.hpsec04-nav-item.hpsec04-active .hpsec04-nav-icon{

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

    color:#fff;

}

.hpsec04-nav-item.hpsec04-active .hpsec04-nav-text{

    color:#fff;

}


/*=========================================
    Focus Accessibility
=========================================*/

.hpsec04-nav-item:focus-visible{

    outline:3px solid #60a5fa;

    outline-offset:4px;

}


/*=========================================
    Keyframes
=========================================*/

@keyframes hpsec04BlobOne{

    0%,100%{

        transform:
        translate(0,0)
        scale(1);

    }

    50%{

        transform:
        translate(40px,-30px)
        scale(1.08);

    }

}

@keyframes hpsec04BlobTwo{

    0%,100%{

        transform:
        translate(0,0)
        scale(1);

    }

    50%{

        transform:
        translate(-50px,35px)
        scale(.92);

    }

}

@keyframes hpsec04Pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.6);

        opacity:.45;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/*=========================================================
    Homepage Section 04
    My Skills & Technical Expertise
    CSS Part 2
    (Content Card, Skill Groups & Tags)
=========================================================*/


/*=========================================
    Right Content Area
=========================================*/

.hpsec04-content{

    position:relative;

    min-height:760px;

}


/*=========================================
    Skill Cards
=========================================*/

.hpsec04-card{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    gap:40px;

    padding:50px;

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

    border-radius:32px;

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.92),
    rgba(255,255,255,.80));

    backdrop-filter:blur(18px);

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

    box-shadow:

    0 35px 80px rgba(15,23,42,.10),

    0 8px 25px rgba(37,99,235,.06);

    opacity:0;

    visibility:hidden;

    transform:
    translateX(70px)
    scale(.98);

    pointer-events:none;

    transition:

    opacity .55s ease,

    transform .55s ease,

    visibility .55s;

}


/*=========================================
    Active Card
=========================================*/

.hpsec04-card.hpsec04-active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
    translateX(0)
    scale(1);

}


/*=========================================
    Decorative Border
=========================================*/

.hpsec04-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:32px;

    background:

    linear-gradient(
    135deg,
    rgba(59,130,246,.30),
    transparent,
    rgba(37,99,235,.18));

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}


/*=========================================
    Card Header
=========================================*/

.hpsec04-card-header{

    display:flex;

    align-items:center;

    gap:24px;

    padding-bottom:28px;

    border-bottom:1px solid rgba(148,163,184,.22);

}


/*=========================================
    Card Icon
=========================================*/

.hpsec04-card-icon{

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    width:90px;

    height:90px;

    border-radius:26px;

    background:

    linear-gradient(
    135deg,
    #2563eb,
    #3b82f6);

    color:#fff;

    font-size:2rem;

    box-shadow:

    0 18px 45px rgba(37,99,235,.35);

    transition:all .45s ease;

}


.hpsec04-card:hover .hpsec04-card-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}


/*=========================================
    Card Title
=========================================*/

.hpsec04-card-title{

    margin:0 0 10px;

    color:var(--hpsec04-dark);

    font-size:2rem;

    font-weight:800;

    line-height:1.2;

}


/*=========================================
    Card Description
=========================================*/

.hpsec04-card-description{

    color:var(--hpsec04-text);

    font-size:1.06rem;

    line-height:1.8;

    max-width:720px;

}


/*=========================================
    Skill Groups
=========================================*/

.hpsec04-groups{

    display:grid;

    grid-template-columns:

    repeat(2,minmax(0,1fr));

    gap:26px;

}


/*=========================================
    Individual Group
=========================================*/

.hpsec04-group{

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(226,232,240,.85);

    transition:all .35s ease;

}


.hpsec04-group:hover{

    transform:translateY(-6px);

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

    box-shadow:

    0 20px 45px rgba(37,99,235,.12);

}


/*=========================================
    Top Accent
=========================================*/

.hpsec04-group::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:

    linear-gradient(
    90deg,
    #2563eb,
    #60a5fa);

}


/*=========================================
    Group Title
=========================================*/

.hpsec04-group-title{

    margin:0 0 20px;

    color:var(--hpsec04-dark);

    font-size:1.08rem;

    font-weight:700;

}


/*=========================================
    Skill Tags Wrapper
=========================================*/

.hpsec04-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}


/*=========================================
    Skill Tag
=========================================*/

.hpsec04-tag{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 18px;

    border-radius:50px;

    background:#f8fbff;

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

    color:var(--hpsec04-dark);

    font-size:.93rem;

    font-weight:600;

    cursor:default;

    transition:all .35s ease;

}


/*=========================================
    Tag Shine Effect
=========================================*/

.hpsec04-tag::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.7),

    transparent);

    transition:left .55s ease;

}


/*=========================================
    Tag Hover
=========================================*/

.hpsec04-tag:hover{

    color:#fff;

    background:

    linear-gradient(
    135deg,
    #2563eb,
    #3b82f6);

    border-color:transparent;

    transform:

    translateY(-4px)

    scale(1.06);

    box-shadow:

    0 14px 28px rgba(37,99,235,.28);

}


.hpsec04-tag:hover::before{

    left:120%;

}


/*=========================================
    Sequential Animation
=========================================*/

.hpsec04-tag{

    opacity:0;

    transform:

    translateY(16px)

    scale(.9);

}


/*=========================================
    Activated by JavaScript
=========================================*/

.hpsec04-tag.hpsec04-show{

    opacity:1;

    transform:

    translateY(0)

    scale(1);

    transition:

    opacity .45s ease,

    transform .45s ease;

}


/*=========================================
    Card Transition Classes
=========================================*/

.hpsec04-slide-out{

    opacity:0 !important;

    transform:

    translateX(-70px)

    scale(.96) !important;

}


.hpsec04-slide-in{

    opacity:1 !important;

    transform:

    translateX(0)

    scale(1) !important;

}


/*=========================================
    Smooth Group Appearance
=========================================*/

.hpsec04-group{

    animation:

    hpsec04GroupFade .8s ease both;

}


.hpsec04-group:nth-child(2){

    animation-delay:.08s;

}

.hpsec04-group:nth-child(3){

    animation-delay:.16s;

}

.hpsec04-group:nth-child(4){

    animation-delay:.24s;

}

.hpsec04-group:nth-child(5){

    animation-delay:.32s;

}


/*=========================================
    Keyframes
=========================================*/

@keyframes hpsec04GroupFade{

    from{

        opacity:0;

        transform:

        translateY(20px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}



/*=========================================================
    Homepage Section 04
    My Skills & Technical Expertise
    CSS Part 3
    (Responsive Design, Mobile Accordion,
    Utilities & Animations)
=========================================================*/


/*=========================================
    Large Desktop
=========================================*/

@media (max-width:1200px){

    .hpsec04-wrapper{

        grid-template-columns:280px 1fr;

        gap:35px;

    }

    .hpsec04-card{

        padding:40px;

    }

    .hpsec04-card-title{

        font-size:1.8rem;

    }

}


/*=========================================
    Tablet
=========================================*/

@media (max-width:992px){

    #hpsec04-skills{

        padding:100px 20px;

    }

    .hpsec04-wrapper{

        grid-template-columns:1fr;

        gap:35px;

    }

    .hpsec04-sidebar{

        position:relative;

        top:0;

        display:grid;

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

        gap:15px;

    }

    .hpsec04-nav-item{

        min-height:85px;

    }

    .hpsec04-content{

        min-height:850px;

    }

    .hpsec04-card{

        padding:35px;

    }

    .hpsec04-groups{

        grid-template-columns:1fr;

    }

}


/*=========================================
    Mobile
=========================================*/

@media (max-width:768px){

    #hpsec04-skills{

        padding:80px 18px;

    }

    .hpsec04-header{

        margin-bottom:45px;

    }

    .hpsec04-title{

        font-size:2rem;

    }

    .hpsec04-description{

        font-size:1rem;

    }

    .hpsec04-sidebar{

        display:flex;

        flex-direction:column;

    }

    .hpsec04-nav-item{

        padding:18px;

    }

    .hpsec04-nav-icon{

        width:48px;

        height:48px;

    }

    .hpsec04-content{

        min-height:auto;

    }

    .hpsec04-card{

        position:relative;

        inset:auto;

        display:none;

        margin-top:20px;

        padding:28px;

        border-radius:24px;

        opacity:1;

        visibility:visible;

        transform:none;

        pointer-events:auto;

    }

    .hpsec04-card.hpsec04-active{

        display:flex;

    }

    .hpsec04-card-header{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .hpsec04-card-icon{

        width:70px;

        height:70px;

        font-size:1.6rem;

    }

    .hpsec04-card-title{

        font-size:1.55rem;

    }

    .hpsec04-card-description{

        font-size:.96rem;

    }

    .hpsec04-group{

        padding:22px;

    }

    .hpsec04-group-title{

        font-size:1rem;

    }

    .hpsec04-tag{

        padding:10px 16px;

        font-size:.88rem;

    }

}


/*=========================================
    Small Mobile
=========================================*/

@media (max-width:480px){

    #hpsec04-skills{

        padding:70px 16px;

    }

    .hpsec04-subtitle{

        font-size:.78rem;

        padding:8px 16px;

    }

    .hpsec04-title{

        font-size:1.75rem;

    }

    .hpsec04-card{

        padding:22px;

    }

    .hpsec04-card-title{

        font-size:1.4rem;

    }

    .hpsec04-tags{

        gap:10px;

    }

    .hpsec04-tag{

        width:100%;

        justify-content:center;

    }

}


/*=========================================
    Scroll Reveal Animation
=========================================*/

.hpsec04-reveal{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.hpsec04-reveal.hpsec04-visible{

    opacity:1;

    transform:translateY(0);

}


/*=========================================
    Fade Down
=========================================*/

.hpsec04-fade-down{

    opacity:0;

    transform:translateY(-40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.hpsec04-fade-down.hpsec04-visible{

    opacity:1;

    transform:none;

}


/*=========================================
    Slide Left
=========================================*/

.hpsec04-slide-left{

    opacity:0;

    transform:translateX(-60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.hpsec04-slide-left.hpsec04-visible{

    opacity:1;

    transform:none;

}


/*=========================================
    Slide Right
=========================================*/

.hpsec04-slide-right{

    opacity:0;

    transform:translateX(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.hpsec04-slide-right.hpsec04-visible{

    opacity:1;

    transform:none;

}


/*=========================================
    Floating Animation
=========================================*/

.hpsec04-card-icon{

    animation:hpsec04Float 5s ease-in-out infinite;

}


/*=========================================
    Glow Animation
=========================================*/

.hpsec04-nav-item.hpsec04-active{

    animation:hpsec04Glow 3s ease-in-out infinite;

}


/*=========================================
    Keyframes
=========================================*/

@keyframes hpsec04Float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

@keyframes hpsec04Glow{

    0%,100%{

        box-shadow:

        0 20px 45px rgba(37,99,235,.30);

    }

    50%{

        box-shadow:

        0 25px 60px rgba(37,99,235,.45);

    }

}


/*=========================================
    Reduced Motion
=========================================*/

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

    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*=========================================
    Print
=========================================*/

@media print{

    #hpsec04-skills{

        background:#fff;

        padding:0;

    }

    .hpsec04-sidebar{

        display:none;

    }

    .hpsec04-content{

        min-height:auto;

    }

    .hpsec04-card{

        position:relative;

        display:block;

        opacity:1;

        visibility:visible;

        transform:none;

        box-shadow:none;

        border:1px solid #ddd;

    }

}