/*=========================================================
SECTION 2 : MY PROFESSIONAL JOURNEY
CSS PART 1 : FOUNDATION

Includes:
- CSS Variables
- Reset
- Global Styles
- Typography
- Section Base
- Container
- Header Foundation
=========================================================*/


/*=========================================================
1. GOOGLE FONT
=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/*=========================================================
2. CSS VARIABLES
=========================================================*/

:root {

    /* Primary Colors */
    --sec2-primary: #2563eb;
    --sec2-primary-dark: #1d4ed8;
    --sec2-primary-light: #60a5fa;
    --sec2-secondary: #0f172a;
    --sec2-accent: #06b6d4;


    /* Background Colors */
    --sec2-white: #ffffff;
    --sec2-bg: #ffffff;
    --sec2-bg-light: #f8fafc;
    --sec2-bg-soft: #f1f5f9;


    /* Text Colors */
    --sec2-heading: #0f172a;
    --sec2-text: #475569;
    --sec2-text-light: #64748b;


    /* Border Colors */
    --sec2-border: #e2e8f0;
    --sec2-border-light: #f1f5f9;


    /* Shadows */

    --sec2-shadow-sm:
    0 8px 25px rgba(15,23,42,0.08);

    --sec2-shadow-md:
    0 15px 40px rgba(15,23,42,0.12);

    --sec2-shadow-hover:
    0 25px 60px rgba(37,99,235,0.18);


    /* Radius */

    --sec2-radius-sm: 12px;
    --sec2-radius-md: 20px;
    --sec2-radius-lg: 30px;


    /* Container */

    --sec2-container: 1400px;


    /* Transition */

    --sec2-transition:
    all .35s cubic-bezier(.4,0,.2,1);

    --sec2-transition-fast:
    all .25s ease;


}



/*=========================================================
3. GLOBAL RESET
=========================================================*/

.sec2-section *,
.sec2-section *::before,
.sec2-section *::after {

    box-sizing:border-box;

}



.sec2-section {

    margin:0;

    padding:0;

}



/*=========================================================
4. BASE TYPOGRAPHY
=========================================================*/


.sec2-section {

    font-family:
    'Inter',
    Arial,
    sans-serif;

    color:var(--sec2-text);

    background:
    var(--sec2-bg);

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

    overflow:hidden;

}



/*=========================================================
5. HEADINGS
=========================================================*/


.sec2-section h1,
.sec2-section h2,
.sec2-section h3,
.sec2-section h4,
.sec2-section h5 {

    margin:0;

    color:var(--sec2-heading);

    font-weight:700;

    line-height:1.25;

}



.sec2-section p {

    margin:0;

    color:var(--sec2-text);

}



/*=========================================================
6. LINKS & BUTTON RESET
=========================================================*/


.sec2-section a {

    text-decoration:none;

    color:inherit;

}



.sec2-section button {

    font-family:inherit;

    cursor:pointer;

    border:none;

    background:none;

}



/*=========================================================
7. MAIN SECTION
=========================================================*/


.sec2-section {

    position:relative;

    width:100%;

    padding:
    120px 30px;

    background:#ffffff;

}



/* Soft Background Effects */

.sec2-section::before {

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-200px;

    right:-150px;

    border-radius:50%;


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


    pointer-events:none;

}



.sec2-section::after {

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    bottom:-180px;

    left:-150px;

    border-radius:50%;


    background:
    radial-gradient(
    circle,
    rgba(6,182,212,.06),
    transparent 70%
    );


    pointer-events:none;

}



/*=========================================================
8. CONTAINER
=========================================================*/


.sec2-container {

    position:relative;

    width:100%;

    max-width:
    var(--sec2-container);

    margin:auto;

    z-index:2;

}



/*=========================================================
9. SECTION HEADER FOUNDATION
=========================================================*/


.sec2-header {

    max-width:900px;

    margin:

    0 auto 80px;

    text-align:center;

}



.sec2-subtitle {

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    color:
    var(--sec2-primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}



.sec2-subtitle::before {

    content:"";

    width:45px;

    height:2px;

    background:

    linear-gradient(
    90deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

}



.sec2-heading {

    font-size:
    clamp(
    36px,
    5vw,
    58px
    );

    font-weight:800;

    letter-spacing:-1px;

    margin-bottom:25px;

}



.sec2-heading::after {

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:25px auto 0;

    border-radius:50px;

    background:

    linear-gradient(
    90deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

}



.sec2-description {

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

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

}



/*=========================================================
10. BASIC ANIMATION FOUNDATION
=========================================================*/


@keyframes sec2FadeUp {

    from {

        opacity:0;

        transform:translateY(30px);

    }

    to {

        opacity:1;

        transform:translateY(0);

    }

}



.sec2-animate {

    animation:
    sec2FadeUp .8s ease forwards;

}



/*=========================================================
END OF CSS PART 1
NEXT:
PART 2 – Layout (Sidebar + Navigation + Content Structure)
=========================================================*/


/*=========================================================
SECTION 2 : MY PROFESSIONAL JOURNEY
CSS PART 2 : LAYOUT

Includes:
- Main Wrapper
- Sidebar Layout
- Navigation Cards
- Active States
- Hover Effects
- Content Area Base
=========================================================*/


/*=========================================================
1. MAIN SECTION WRAPPER
=========================================================*/


.sec2-wrapper {

    position:relative;

    display:grid;

    grid-template-columns:
    320px 1fr;

    gap:50px;

    align-items:start;

}



/*=========================================================
2. SIDEBAR
=========================================================*/


.sec2-sidebar {

    position:sticky;

    top:100px;

    display:flex;

    flex-direction:column;

    gap:20px;

}



/*=========================================================
3. NAVIGATION BUTTON BASE
=========================================================*/


.sec2-nav-btn {

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    width:100%;

    padding:24px;

    background:
    var(--sec2-white);

    border:

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

    border-radius:
    var(--sec2-radius-md);

    text-align:left;

    overflow:hidden;

    transition:
    var(--sec2-transition);

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

}



/* Background Hover Layer */

.sec2-nav-btn::before {

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    135deg,
    rgba(37,99,235,.08),
    rgba(6,182,212,.06)
    );

    opacity:0;

    transition:
    var(--sec2-transition);

}



/* Left Active Indicator */

.sec2-nav-btn::after {

    content:"";

    position:absolute;

    left:0;

    top:20px;

    bottom:20px;

    width:5px;

    border-radius:
    0 10px 10px 0;

    background:

    linear-gradient(
    180deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

    transform:
    scaleY(0);

    transition:
    var(--sec2-transition);

}



/*=========================================================
4. NAVIGATION NUMBER
=========================================================*/


.sec2-nav-number {

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:65px;

    height:65px;

    flex-shrink:0;

    border-radius:18px;

    background:
    var(--sec2-bg-light);

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

    color:
    var(--sec2-primary);

    font-size:18px;

    font-weight:800;

    transition:
    var(--sec2-transition);

}



/*=========================================================
5. NAVIGATION TEXT
=========================================================*/


.sec2-nav-text {

    position:relative;

    z-index:2;

}



.sec2-nav-text h3 {

    font-size:18px;

    font-weight:700;

    margin-bottom:6px;

    transition:
    var(--sec2-transition-fast);

}



.sec2-nav-text p {

    font-size:14px;

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

}



/*=========================================================
6. NAVIGATION HOVER
=========================================================*/


.sec2-nav-btn:hover {

    transform:
    translateY(-8px);

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

    box-shadow:
    var(--sec2-shadow-hover);

}



.sec2-nav-btn:hover::before {

    opacity:1;

}



.sec2-nav-btn:hover::after {

    transform:
    scaleY(1);

}



.sec2-nav-btn:hover
.sec2-nav-number {

    color:#ffffff;

    border-color:transparent;

    background:

    linear-gradient(
    135deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

    transform:
    rotate(-8deg)
    scale(1.08);

}



.sec2-nav-btn:hover
.sec2-nav-text h3 {

    color:
    var(--sec2-primary);

}



/*=========================================================
7. ACTIVE NAVIGATION STATE
=========================================================*/


.sec2-nav-btn.active {

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

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

}



.sec2-nav-btn.active::before {

    opacity:1;

}



.sec2-nav-btn.active::after {

    transform:
    scaleY(1);

}



.sec2-nav-btn.active
.sec2-nav-number {

    background:

    linear-gradient(
    135deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

    color:#ffffff;

    border-color:transparent;

}



.sec2-nav-btn.active
.sec2-nav-text h3 {

    color:
    var(--sec2-primary);

}



/*=========================================================
8. CONTENT AREA
=========================================================*/


.sec2-content {

    position:relative;

    min-height:500px;

}



/*=========================================================
9. CONTENT PANELS
=========================================================*/


.sec2-panel {

    display:none;

    opacity:0;

    transform:
    translateY(20px);

}



.sec2-panel.active {

    display:block;

    animation:

    sec2PanelShow
    .6s ease forwards;

}



@keyframes sec2PanelShow {


    from {

        opacity:0;

        transform:
        translateY(25px);

    }


    to {

        opacity:1;

        transform:
        translateY(0);

    }

}



/*=========================================================
10. CONTENT HEADER
=========================================================*/


.sec2-panel-header {

    margin-bottom:40px;

}



.sec2-panel-header h3 {

    font-size:
    clamp(
    26px,
    3vw,
    38px
    );

    font-weight:800;

    margin:

    18px 0;

}



.sec2-panel-header p {

    font-size:17px;

    line-height:1.8;

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

}



/*=========================================================
11. BADGE
=========================================================*/


.sec2-badge {

    display:inline-flex;

    align-items:center;

    padding:

    8px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    color:
    var(--sec2-primary);

    background:

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

    border:

    1px solid rgba(37,99,235,.15);

}



/*=========================================================
12. RESPONSIVE LAYOUT
=========================================================*/


@media(max-width:1100px){


    .sec2-wrapper {

        grid-template-columns:
        280px 1fr;

        gap:35px;

    }


}



@media(max-width:850px){


    .sec2-wrapper {

        grid-template-columns:
        1fr;

    }


    .sec2-sidebar {

        position:relative;

        top:auto;

        display:grid;

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

    }


}



@media(max-width:600px){


    .sec2-sidebar {

        grid-template-columns:
        1fr;

    }


    .sec2-nav-btn {

        padding:20px;

    }


    .sec2-nav-number {

        width:55px;

        height:55px;

    }


}


/*=========================================================
END OF CSS PART 2

NEXT:
PART 3 – Cards, Panels, Glass Effects
=========================================================*/

/*=========================================================
SECTION 2 : MY PROFESSIONAL JOURNEY
CSS PART 3 : CARDS & CONTENT COMPONENTS

Includes:
- Content Cards
- Glass Effects
- Card Headers
- Skill Containers
- Hover Effects
- Decorative Elements
=========================================================*/


/*=========================================================
1. COMMON CARD STYLE
=========================================================*/


.sec2-card {

    position:relative;

    padding:35px;

    margin-bottom:30px;

    background:

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

    border:

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

    border-radius:

    var(--sec2-radius-lg);

    box-shadow:

    var(--sec2-shadow-sm);

    overflow:hidden;

    transition:

    var(--sec2-transition);

}



/* Card Background Glow */

.sec2-card::before {

    content:"";

    position:absolute;

    width:200px;

    height:200px;

    top:-100px;

    right:-100px;

    border-radius:50%;

    background:

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

    opacity:0;

    transition:

    var(--sec2-transition);

}



/* Bottom Gradient Line */

.sec2-card::after {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(
    90deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

    transform:

    scaleX(0);

    transform-origin:left;

    transition:

    var(--sec2-transition);

}



/*=========================================================
2. CARD HOVER EFFECT
=========================================================*/


.sec2-card:hover {

    transform:

    translateY(-10px);

    border-color:

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

    box-shadow:

    var(--sec2-shadow-hover);

}



.sec2-card:hover::before {

    opacity:1;

}



.sec2-card:hover::after {

    transform:

    scaleX(1);

}



/*=========================================================
3. CARD TITLE
=========================================================*/


.sec2-card h4 {

    position:relative;

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    font-size:24px;

    font-weight:800;

    color:

    var(--sec2-heading);

}



/* Small Accent Icon */

.sec2-card h4::before {

    content:"";

    width:8px;

    height:35px;

    border-radius:10px;

    background:

    linear-gradient(
    180deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

}



/*=========================================================
4. CARD TEXT
=========================================================*/


.sec2-card p {

    font-size:16px;

    line-height:1.85;

    color:

    var(--sec2-text);

}



/*=========================================================
5. SKILL GRID
=========================================================*/


.sec2-skill-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:15px;

}



/* Skill Item */


.sec2-skill-grid span {

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:55px;

    padding:

    12px 18px;

    text-align:center;

    border-radius:

    14px;

    background:

    var(--sec2-bg-light);

    border:

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

    color:

    var(--sec2-heading);

    font-size:14px;

    font-weight:600;

    transition:

    var(--sec2-transition);

    overflow:hidden;

}



/* Skill Shine */

.sec2-skill-grid span::before {

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:60%;

    height:100%;

    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.8),
    transparent
    );

    transition:

    .6s ease;

}



/* Skill Hover */


.sec2-skill-grid span:hover {

    color:#ffffff;

    border-color:

    transparent;

    transform:

    translateY(-5px);

    background:

    linear-gradient(
    135deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

    box-shadow:

    0 15px 35px rgba(37,99,235,.25);

}



.sec2-skill-grid span:hover::before {

    left:130%;

}



/*=========================================================
6. PROCESS GRID
=========================================================*/


.sec2-process-grid {

    display:grid;

    grid-template-columns:

    repeat(5,1fr);

    gap:20px;

}



/* Process Item */


.sec2-process-item {

    position:relative;

    padding:

    25px 18px;

    text-align:center;

    background:

    #ffffff;

    border:

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

    border-radius:

    18px;

    transition:

    var(--sec2-transition);

}



/* Number Circle */


.sec2-process-item span {

    display:flex;

    align-items:center;

    justify-content:center;

    width:55px;

    height:55px;

    margin:

    0 auto 15px;

    border-radius:50%;

    color:#ffffff;

    font-weight:800;

    background:

    linear-gradient(
    135deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

}



/* Process Heading */


.sec2-process-item h5 {

    font-size:15px;

    line-height:1.5;

}



/* Process Hover */


.sec2-process-item:hover {

    transform:

    translateY(-8px);

    box-shadow:

    var(--sec2-shadow-hover);

    border-color:

    transparent;

}



/*=========================================================
7. GLASS EFFECT VARIANT
=========================================================*/


.sec2-glass {

    background:

    rgba(255,255,255,.75);

    backdrop-filter:

    blur(18px);

    -webkit-backdrop-filter:

    blur(18px);

}



/*=========================================================
8. CARD RESPONSIVE
=========================================================*/


@media(max-width:1100px){


    .sec2-skill-grid {

        grid-template-columns:

        repeat(2,1fr);

    }


    .sec2-process-grid {

        grid-template-columns:

        repeat(3,1fr);

    }


}



@media(max-width:700px){


    .sec2-card {

        padding:25px;

        border-radius:

        20px;

    }


    .sec2-skill-grid {

        grid-template-columns:

        1fr;

    }


    .sec2-process-grid {

        grid-template-columns:

        1fr;

    }


    .sec2-card h4 {

        font-size:21px;

    }


}



/*=========================================================
END OF CSS PART 3

NEXT:
PART 4 – Timeline Design & Company Experience Cards
=========================================================*/

/*=========================================================
SECTION 2 : MY PROFESSIONAL JOURNEY
CSS PART 4 : TIMELINE DESIGN

Includes:
- Timeline Container
- Timeline Line
- Timeline Items
- Company Cards
- Date Badge
- Hover Animations
=========================================================*/


/*=========================================================
1. TIMELINE WRAPPER
=========================================================*/


.sec2-timeline {

    position:relative;

    padding-left:35px;

}



/*=========================================================
2. VERTICAL TIMELINE LINE
=========================================================*/


.sec2-timeline::before {

    content:"";

    position:absolute;

    left:10px;

    top:0;

    width:3px;

    height:100%;

    border-radius:20px;

    background:

    linear-gradient(
    180deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

}



/*=========================================================
3. TIMELINE ITEM
=========================================================*/


.sec2-time-item {

    position:relative;

    display:grid;

    grid-template-columns:

    180px 1fr;

    gap:30px;

    margin-bottom:45px;

}



/*=========================================================
4. TIMELINE DOT
=========================================================*/


.sec2-time-item::before {

    content:"";

    position:absolute;

    left:-31px;

    top:10px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#ffffff;

    border:

    5px solid var(--sec2-primary);

    z-index:2;

    transition:

    var(--sec2-transition);

}



/* Dot Glow */

.sec2-time-item:hover::before {

    transform:

    scale(1.25);

    border-color:

    var(--sec2-accent);

    box-shadow:

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

}



/*=========================================================
5. TIMELINE YEAR
=========================================================*/


.sec2-time-year {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:max-content;

    padding:

    12px 18px;

    border-radius:50px;

    background:

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

    border:

    1px solid rgba(37,99,235,.15);

    color:

    var(--sec2-primary);

    font-size:14px;

    font-weight:700;

    text-align:center;

}



/*=========================================================
6. TIMELINE CONTENT CARD
=========================================================*/


.sec2-time-content {

    position:relative;

    padding:

    28px;

    background:#ffffff;

    border:

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

    border-radius:

    var(--sec2-radius-md);

    box-shadow:

    0 8px 25px rgba(15,23,42,.06);

    transition:

    var(--sec2-transition);

    overflow:hidden;

}



/* Gradient Hover Layer */

.sec2-time-content::before {

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    135deg,
    rgba(37,99,235,.08),
    rgba(6,182,212,.05)
    );

    opacity:0;

    transition:

    var(--sec2-transition);

}



/*=========================================================
7. COMPANY TITLE
=========================================================*/


.sec2-time-content h5 {

    position:relative;

    z-index:2;

    font-size:22px;

    font-weight:800;

    margin-bottom:8px;

    transition:

    var(--sec2-transition-fast);

}



.sec2-time-content strong {

    position:relative;

    z-index:2;

    display:block;

    margin-bottom:15px;

    color:

    var(--sec2-primary);

    font-size:15px;

    font-weight:700;

}



.sec2-time-content p {

    position:relative;

    z-index:2;

    font-size:15px;

    line-height:1.8;

    color:

    var(--sec2-text);

}



/*=========================================================
8. TIMELINE CARD HOVER
=========================================================*/


.sec2-time-content:hover {

    transform:

    translateY(-8px);

    box-shadow:

    var(--sec2-shadow-hover);

    border-color:

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

}



.sec2-time-content:hover::before {

    opacity:1;

}



.sec2-time-content:hover h5 {

    color:

    var(--sec2-primary);

}



/*=========================================================
9. TIMELINE CARD ACCENT
=========================================================*/


.sec2-time-content::after {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(
    90deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

    transform:

    scaleX(0);

    transform-origin:left;

    transition:

    .45s ease;

}



.sec2-time-content:hover::after {

    transform:

    scaleX(1);

}



/*=========================================================
10. TIMELINE RESPONSIVE
=========================================================*/


@media(max-width:900px){


    .sec2-timeline {

        padding-left:30px;

    }


    .sec2-time-item {

        grid-template-columns:

        1fr;

        gap:15px;

    }


    .sec2-time-year {

        width:max-content;

    }


}



@media(max-width:600px){


    .sec2-timeline::before {

        left:8px;

    }


    .sec2-time-item::before {

        left:-29px;

        width:18px;

        height:18px;

        border-width:4px;

    }


    .sec2-time-content {

        padding:22px;

    }


    .sec2-time-content h5 {

        font-size:19px;

    }


}



/*=========================================================
11. TIMELINE ANIMATION READY
=========================================================*/


.sec2-time-item {

    opacity:0;

    transform:

    translateX(-30px);

}



.sec2-time-item.sec2-visible {

    animation:

    sec2TimelineReveal .7s ease forwards;

}



@keyframes sec2TimelineReveal {


    from {

        opacity:0;

        transform:

        translateX(-30px);

    }


    to {

        opacity:1;

        transform:

        translateX(0);

    }


}



/*=========================================================
END OF CSS PART 4

NEXT:
PART 5 – Advanced Effects, Animations & Responsive Refinement
=========================================================*/

/*=========================================================
SECTION 2 : MY PROFESSIONAL JOURNEY
CSS PART 5 : ADVANCED EFFECTS & ANIMATIONS

Includes:
- Premium Hover Effects
- Glow Effects
- Floating Elements
- Shine Animation
- Reveal Animations
- Micro Interactions
=========================================================*/


/*=========================================================
1. PREMIUM CARD GLOW EFFECT
=========================================================*/


.sec2-card,
.sec2-time-content,
.sec2-process-item {

    isolation:isolate;

}



.sec2-card:hover,
.sec2-time-content:hover,
.sec2-process-item:hover {

    z-index:5;

}



/*=========================================================
2. SHINE EFFECT
=========================================================*/


.sec2-card::before,
.sec2-time-content::before,
.sec2-process-item::before {

    pointer-events:none;

}



.sec2-card:hover::before {

    animation:

    sec2GlowMove 1.2s ease;

}



@keyframes sec2GlowMove {


    0% {

        transform:
        translate(-20px,-20px);

    }


    50% {

        transform:
        translate(20px,20px);

    }


    100% {

        transform:
        translate(-20px,-20px);

    }

}



/*=========================================================
3. BUTTON RIPPLE EFFECT READY
=========================================================*/


.sec2-ripple {

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:

    rgba(255,255,255,.45);

    transform:

    translate(-50%,-50%)

    scale(0);

    animation:

    sec2Ripple .7s ease-out;

    pointer-events:none;

}



@keyframes sec2Ripple {


    to {

        transform:

        translate(-50%,-50%)

        scale(30);

        opacity:0;

    }

}



/*=========================================================
4. FLOATING BACKGROUND ELEMENTS
=========================================================*/


.sec2-floating {

    animation:

    sec2Floating 6s ease-in-out infinite;

}



@keyframes sec2Floating {


    0%,
    100% {

        transform:

        translateY(0);

    }


    50% {

        transform:

        translateY(-20px);

    }

}



/*=========================================================
5. GRADIENT BORDER EFFECT
=========================================================*/


.sec2-gradient-border {

    position:relative;

    border-radius:

    var(--sec2-radius-lg);

    background:#ffffff;

}



.sec2-gradient-border::before {

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

    linear-gradient(
    135deg,
    var(--sec2-primary),
    var(--sec2-accent)
    );

    z-index:-1;

    opacity:0;

    transition:

    .4s ease;

}



.sec2-gradient-border:hover::before {

    opacity:1;

}



/*=========================================================
6. TEXT HIGHLIGHT EFFECT
=========================================================*/


.sec2-highlight {

    position:relative;

    display:inline-block;

}



.sec2-highlight::after {

    content:"";

    position:absolute;

    left:0;

    bottom:3px;

    width:100%;

    height:8px;

    background:

    rgba(37,99,235,.15);

    z-index:-1;

    border-radius:20px;

}



/*=========================================================
7. ICON POP EFFECT
=========================================================*/


.sec2-icon-pop {

    transition:

    var(--sec2-transition);

}



.sec2-icon-pop:hover {

    transform:

    scale(1.15)

    rotate(8deg);

}



/*=========================================================
8. SCROLL REVEAL CLASSES
=========================================================*/


.sec2-reveal {

    opacity:0;

    transform:

    translateY(40px);

    transition:

    .8s cubic-bezier(.16,1,.3,1);

}



.sec2-reveal.active {

    opacity:1;

    transform:

    translateY(0);

}



.sec2-reveal-left {

    opacity:0;

    transform:

    translateX(-50px);

    transition:

    .8s ease;

}



.sec2-reveal-left.active {

    opacity:1;

    transform:

    translateX(0);

}



.sec2-reveal-right {

    opacity:0;

    transform:

    translateX(50px);

    transition:

    .8s ease;

}



.sec2-reveal-right.active {

    opacity:1;

    transform:

    translateX(0);

}



/*=========================================================
9. STAGGER ANIMATION
=========================================================*/


.sec2-stagger > * {

    opacity:0;

    transform:

    translateY(25px);

    animation:

    sec2Stagger .6s ease forwards;

}



.sec2-stagger > *:nth-child(1){

    animation-delay:.1s;

}


.sec2-stagger > *:nth-child(2){

    animation-delay:.2s;

}


.sec2-stagger > *:nth-child(3){

    animation-delay:.3s;

}


.sec2-stagger > *:nth-child(4){

    animation-delay:.4s;

}


.sec2-stagger > *:nth-child(5){

    animation-delay:.5s;

}



@keyframes sec2Stagger {


    to {

        opacity:1;

        transform:

        translateY(0);

    }

}



/*=========================================================
10. PULSE EFFECT
=========================================================*/


.sec2-pulse {

    animation:

    sec2Pulse 2.5s infinite;

}



@keyframes sec2Pulse {


    0% {

        box-shadow:

        0 0 0 0 rgba(37,99,235,.25);

    }


    70% {

        box-shadow:

        0 0 0 18px rgba(37,99,235,0);

    }


    100% {

        box-shadow:

        0 0 0 0 rgba(37,99,235,0);

    }

}



/*=========================================================
11. SMOOTH IMAGE / ELEMENT SCALE
=========================================================*/


.sec2-scale {

    overflow:hidden;

}



.sec2-scale img {

    transition:

    .6s ease;

}



.sec2-scale:hover img {

    transform:

    scale(1.08);

}



/*=========================================================
12. ACCESSIBILITY
=========================================================*/


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


    *,
    *::before,
    *::after {

        animation-duration:

        .01ms !important;

        transition-duration:

        .01ms !important;

        scroll-behavior:auto !important;

    }


}



/*=========================================================
13. FINAL RESPONSIVE EFFECT CONTROL
=========================================================*/


@media(max-width:768px){


    .sec2-card:hover,
    .sec2-time-content:hover,
    .sec2-process-item:hover {

        transform:

        translateY(-5px);

    }


}



@media(max-width:480px){


    .sec2-card:hover,
    .sec2-time-content:hover,
    .sec2-process-item:hover {

        transform:none;

    }


}



/*=========================================================
END OF CSS PART 5

SECTION 2 CSS COMPLETE

NEXT:
JAVASCRIPT PART 1
(Tab Switching + Active Navigation)
=========================================================*/



/**
 * Portfolio Section 2 CSS & JS
 * RajatAdhikari.in
 */

function rajat_portfolio_section_two_assets() {

    // Portfolio 2 CSS
    wp_enqueue_style(
        'portfolio-section-two-css',
        get_stylesheet_directory_uri() . '/CSS/portfolio/portfolio2.css',
        array(),
        filemtime(
            get_stylesheet_directory() . '/CSS/portfolio/portfolio2.css'
        )
    );


    // Portfolio 2 JS
    wp_enqueue_script(
        'portfolio-section-two-js',
        get_stylesheet_directory_uri() . '/JS/portfolio/portfolio2.js',
        array('jquery'),
        filemtime(
            get_stylesheet_directory() . '/JS/portfolio/portfolio2.js'
        ),
        true
    );

}

add_action(
    'wp_enqueue_scripts',
    'rajat_portfolio_section_two_assets'
);