/* ==========================================================
   HPSEC02 - WHAT I BUILD FOR BUSINESSES
   PART 1
   ========================================================== */

/* ==========================
   ROOT VARIABLES
========================== */

:root{

    --hpsec02-primary:#2563eb;
    --hpsec02-primary-dark:#1d4ed8;
    --hpsec02-primary-light:#60a5fa;

    --hpsec02-bg:#f4f8ff;
    --hpsec02-white:#ffffff;

    --hpsec02-text:#0f172a;
    --hpsec02-text-light:#475569;

    --hpsec02-border:#dbeafe;

    --hpsec02-shadow-sm:0 10px 25px rgba(37,99,235,.08);
    --hpsec02-shadow-md:0 18px 45px rgba(37,99,235,.14);
    --hpsec02-shadow-lg:0 30px 70px rgba(37,99,235,.18);

    --hpsec02-radius:20px;

    --hpsec02-transition:.35s ease;

}

/* ==========================
   SECTION
========================== */

#hpsec02-business-services{

    position:relative;

    overflow:hidden;

    padding:100px 0;

    background:
    radial-gradient(circle at top left,#60a5fa 0%,transparent 45%),
    radial-gradient(circle at bottom right,#2563eb 0%,transparent 40%),
    linear-gradient(135deg,#0f4cbd,#2563eb,#3b82f6);

}

/* Decorative Background */

#hpsec02-business-services::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-220px;

    left:-180px;

    border-radius:50%;

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

    filter:blur(40px);

}

#hpsec02-business-services::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-160px;

    bottom:-160px;

    border-radius:50%;

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

    filter:blur(50px);

}

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

.hpsec02-container{

    position:relative;

    z-index:2;

    width:min(1320px,92%);

    margin:auto;

}

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

.hpsec02-header{

    text-align:center;

    margin-bottom:70px;

}

.hpsec02-heading{

    color:#fff;

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

    font-weight:800;

    line-height:1.2;

    margin-bottom:22px;

    letter-spacing:-.03em;

}

.hpsec02-introduction{

    max-width:900px;

    margin:auto;

    color:rgba(255,255,255,.92);

    font-size:1.08rem;

    line-height:1.9;

}

/* ==========================
   MAIN LAYOUT
========================== */

.hpsec02-layout{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:40px;

    align-items:start;

}

/* ==========================
   SIDEBAR
========================== */

.hpsec02-sidebar{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ==========================
   SERVICE BOXES
========================== */

.hpsec02-tab{

    position:relative;

    overflow:hidden;

    cursor:pointer;

    border:none;

    outline:none;

    width:100%;

    text-align:left;

    padding:22px 24px;

    border-radius:18px;

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

    backdrop-filter:blur(18px);

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

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

    color:#fff;

    font-size:1rem;

    font-weight:600;

    transition:all .35s ease;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.hpsec02-tab span{

    position:relative;

    z-index:3;

}

.hpsec02-tab::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,#60a5fa,#2563eb);

    opacity:0;

    transition:.35s;

}

.hpsec02-tab:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(0,0,0,.18);

}

.hpsec02-tab:hover::before{

    opacity:1;

}

.hpsec02-tab:hover span{

    color:#fff;

}

.hpsec02-tab-active{

    background:#fff;

    color:var(--hpsec02-primary);

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

    transform:translateX(10px);

}

.hpsec02-tab-active span{

    color:var(--hpsec02-primary);

}

.hpsec02-tab-active::before{

    opacity:0;

}

/* ==========================
   CONTENT AREA
========================== */

.hpsec02-content-area{

    position:relative;

}

/* ==========================
   CONTENT PANEL
========================== */

.hpsec02-panel{

    display:none;

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

    backdrop-filter:blur(16px);

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

    border-radius:28px;

    padding:55px;

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

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

}

.hpsec02-panel-active{

    display:block;

    animation:hpsec02Fade .45s ease;

}

/* ==========================
   PANEL TITLE
========================== */

.hpsec02-panel-title{

    font-size:2rem;

    color:var(--hpsec02-text);

    margin-bottom:24px;

    font-weight:800;

    line-height:1.3;

    position:relative;

    padding-bottom:18px;

}

.hpsec02-panel-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:90px;

    height:5px;

    border-radius:20px;

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

}

/* ==========================
   PARAGRAPHS
========================== */

.hpsec02-panel-text{

    color:var(--hpsec02-text-light);

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:24px;

}

.hpsec02-panel-text:last-child{

    margin-bottom:0;

}

/* ==========================
   PANEL HOVER
========================== */

.hpsec02-panel:hover{

    transform:translateY(-4px);

    transition:.35s ease;

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

}

/* ==========================
   BUTTON FOCUS
========================== */

.hpsec02-tab:focus-visible{

    outline:3px solid #ffffff;

    outline-offset:3px;

}

/* ==========================
   CONTENT FADE
========================== */

@keyframes hpsec02Fade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ==========================================================
   HPSEC02 - WHAT I BUILD FOR BUSINESSES
   PART 2
   (Place this directly below Part 1)
========================================================== */


/* ==========================================================
   ACTIVE TAB INDICATOR
========================================================== */

.hpsec02-tab-active{

    position:relative;

    overflow:hidden;

}

.hpsec02-tab-active::after{

    content:"";

    position:absolute;

    top:50%;

    right:20px;

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--hpsec02-primary);

    transform:translateY(-50%);

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

    animation:hpsec02Pulse 2s infinite;

}


/* ==========================================================
   RIPPLE EFFECT
========================================================== */

.hpsec02-tab{

    isolation:isolate;

}

.hpsec02-tab::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:0;

    height:0;

    border-radius:50%;

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

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

    transition:
    width .6s ease,
    height .6s ease,
    opacity .6s ease;

    opacity:0;

    z-index:1;

}

.hpsec02-tab:active::after{

    width:420px;

    height:420px;

    opacity:1;

    transition:0s;

}


/* ==========================================================
   TAB HOVER IMPROVEMENT
========================================================== */

.hpsec02-tab{

    transform-origin:center;

}

.hpsec02-tab:hover{

    transform:
    translateY(-6px)
    scale(1.02);

}

.hpsec02-tab:active{

    transform:
    scale(.98);

}


/* ==========================================================
   PANEL ANIMATION
========================================================== */

.hpsec02-panel{

    animation:none;

}

.hpsec02-panel-active{

    animation:
    hpsec02Content .45s ease;

}

@keyframes hpsec02Content{

    from{

        opacity:0;

        transform:
        translateX(18px)
        translateY(10px);

    }

    to{

        opacity:1;

        transform:
        translateX(0)
        translateY(0);

    }

}


/* ==========================================================
   PANEL DECORATION
========================================================== */

.hpsec02-panel{

    position:relative;

}

.hpsec02-panel::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

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

    right:-60px;

    top:-60px;

    pointer-events:none;

}

.hpsec02-panel::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    background:

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

    bottom:-40px;

    left:-30px;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

.hpsec02-sidebar::-webkit-scrollbar{

    width:7px;

}

.hpsec02-sidebar::-webkit-scrollbar-thumb{

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

    border-radius:20px;

}


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

.hpsec02-tab:focus-visible{

    outline:3px solid #ffffff;

    outline-offset:4px;

}

.hpsec02-tab,
.hpsec02-panel{

    transition:

    background .35s ease,
    color .35s ease,
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1600px){

.hpsec02-container{

    max-width:1450px;

}

.hpsec02-layout{

    grid-template-columns:360px 1fr;

    gap:55px;

}

.hpsec02-panel{

    padding:70px;

}

}


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

@media (max-width:1200px){

.hpsec02-layout{

    grid-template-columns:300px 1fr;

    gap:35px;

}

.hpsec02-panel{

    padding:45px;

}

.hpsec02-heading{

    font-size:2.8rem;

}

}


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

@media (max-width:992px){

.hpsec02-layout{

    grid-template-columns:1fr;

}

.hpsec02-sidebar{

    display:grid;

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

    gap:16px;

}

.hpsec02-tab{

    padding:18px;

    min-height:88px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.hpsec02-tab-active{

    transform:none;

}

.hpsec02-panel{

    margin-top:25px;

}

}


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

@media (max-width:768px){

#hpsec02-business-services{

    padding:70px 0;

}

.hpsec02-container{

    width:92%;

}

.hpsec02-header{

    margin-bottom:45px;

}

.hpsec02-heading{

    font-size:2rem;

    line-height:1.3;

}

.hpsec02-introduction{

    font-size:1rem;

    line-height:1.8;

}

.hpsec02-sidebar{

    display:flex;

    flex-direction:column;

}

.hpsec02-tab{

    width:100%;

    min-height:64px;

    font-size:.95rem;

    padding:18px;

    justify-content:flex-start;

    text-align:left;

}

.hpsec02-panel{

    padding:30px 24px;

    border-radius:22px;

}

.hpsec02-panel-title{

    font-size:1.55rem;

}

.hpsec02-panel-text{

    font-size:1rem;

    line-height:1.8;

}

}


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

@media (max-width:480px){

#hpsec02-business-services{

    padding:55px 0;

}

.hpsec02-heading{

    font-size:1.75rem;

}

.hpsec02-introduction{

    font-size:.95rem;

}

.hpsec02-tab{

    padding:16px;

    border-radius:16px;

    font-size:.92rem;

}

.hpsec02-panel{

    padding:24px 20px;

}

.hpsec02-panel-title{

    font-size:1.35rem;

}

.hpsec02-panel-title::after{

    width:70px;

}

}


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

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

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}


/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes hpsec02Pulse{

0%{

transform:translateY(-50%) scale(1);

}

50%{

transform:translateY(-50%) scale(1.25);

}

100%{

transform:translateY(-50%) scale(1);

}

}


/* ==========================================================
   FINAL POLISH
========================================================== */

.hpsec02-tab,
.hpsec02-panel{

    will-change:transform;

    backface-visibility:hidden;

    -webkit-font-smoothing:antialiased;

}

.hpsec02-panel strong{

    color:var(--hpsec02-primary);

    font-weight:700;

}

.hpsec02-panel a{

    color:var(--hpsec02-primary);

    text-decoration:none;

    font-weight:600;

}

.hpsec02-panel a:hover{

    color:var(--hpsec02-primary-dark);

    text-decoration:underline;

}

.hpsec02-tab:hover{

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

}

.hpsec02-panel:hover{

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

}