/*======================================================================
    AVP LEGIS CHAMBERS
    ARBITRATION FLOWCHARTS

    File      : arbitration-flowcharts.css
    Version   : 2.0
    Purpose   : Premium Flowchart Design System

======================================================================*/



/*==========================================================
01. GOOGLE FONTS
==========================================================*/

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



/*==========================================================
02. ROOT VARIABLES
==========================================================*/

:root{

    /* Brand Colours */

    --arb-blue:#0C2D62;

    --arb-blue-dark:#082347;

    --arb-yellow:#FEE879;

    --arb-yellow-dark:#F4D94A;

    --arb-white:#FFFFFF;

    --arb-bg:#F7F9FC;

    --arb-card:#FFFFFF;

    --arb-light:#FCFDFE;

    --arb-border:#D8E2F0;

    --arb-text:#4B5875;

    --arb-heading:#0C2D62;



    /* Status Colours */

    --arb-success:#2EAD61;

    --arb-danger:#D64545;

    --arb-warning:#E89B16;



    /* Radius */

    --arb-radius-sm:8px;

    --arb-radius:14px;

    --arb-radius-lg:18px;

    --arb-radius-xl:22px;



    /* Shadows */

    --arb-shadow-sm:0 5px 12px rgba(0,0,0,.05);

    --arb-shadow-md:0 12px 28px rgba(0,0,0,.08);

    --arb-shadow-lg:0 20px 55px rgba(0,0,0,.12);



    /* Transition */

    --arb-speed:.35s ease;

}



/*==========================================================
03. RESET
==========================================================*/

*,

*::before,

*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



/*==========================================================
04. BODY
==========================================================*/

body{

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

    font-size:17px;

    line-height:1.9;

    background:var(--arb-bg);

    color:var(--arb-text);

}



/*==========================================================
05. PAGE CONTAINER
==========================================================*/

.guide-main{

    max-width:1300px;

    margin:auto;

    padding:30px;

}



/*==========================================================
06. TYPOGRAPHY
==========================================================*/

h1,

h2,

h3,

h4,

h5{

    font-family:Georgia,"Times New Roman",serif;

    color:var(--arb-heading);

    line-height:1.35;

    font-weight:700;

}

h1{

    font-size:44px;

}

h2{

    font-size:36px;

}

h3{

    font-size:28px;

}

h4{

    font-size:22px;

}

h5{

    font-size:19px;

}



p{

    margin-bottom:22px;

}



strong{

    color:var(--arb-blue);

}



a{

    color:var(--arb-blue);

    text-decoration:none;

    transition:var(--arb-speed);

}



a:hover{

    color:var(--arb-blue-dark);

}



/*==========================================================
07. CHAPTER HEADER
==========================================================*/

.guide-chapter{

    background:#fff;

    border-radius:20px;

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

    overflow:hidden;

    margin-bottom:50px;

}



.chapter-number{

    display:inline-block;

    background:var(--arb-blue);

    color:#fff;

    padding:12px 30px;

    border-left:6px solid var(--arb-yellow);

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}



.guide-chapter h2{

    padding:28px 35px 10px;

}



.guide-intro{

    padding:0 35px 35px;

    color:#61708B;

}



/*==========================================================
08. SECTION SPACING
==========================================================*/

section{

    margin-bottom:55px;

}



/*==========================================================
09. LISTS
==========================================================*/

ul,

ol{

    margin:18px 0 18px 28px;

}



li{

    margin-bottom:10px;

}



/*==========================================================
10. IMAGES
==========================================================*/

img{

    max-width:100%;

    height:auto;

}



/*==========================================================
END OF SECTION 1

NEXT

SECTION 2

Flowchart Cards

Titles

Badges

Hover Effects

Animations

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

11. FLOWCHART CARD
12. FLOWCHART TITLE
13. FLOW NUMBER
14. FLOWCHART CONTAINER
15. PREMIUM HOVER EFFECTS
16. ANIMATIONS

======================================================================*/



/*==========================================================
11. FLOWCHART CARD
==========================================================*/

.flowchart-card{

    position:relative;

    background:#ffffff;

    border-radius:20px;

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

    border-top:6px solid var(--arb-yellow);

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

    padding:40px;

    margin-bottom:60px;

    overflow:hidden;

    transition:all .35s ease;

}

.flowchart-card:hover{

    transform:translateY(-6px);

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

}

.flowchart-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:8px;

    height:100%;

    background:var(--arb-yellow);

}



/*==========================================================
12. FLOWCHART TITLE
==========================================================*/

.flowchart-title{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

    padding-bottom:20px;

    border-bottom:2px solid #EEF2F8;

}

.flowchart-title h2{

    margin:0;

    color:var(--arb-blue);

    font-size:32px;

    line-height:1.35;

}



/*==========================================================
FLOWCHART H2
==========================================================*/

.flowchart-card>h2{

    color:var(--arb-blue);

    margin-bottom:35px;

    padding-bottom:18px;

    border-bottom:2px solid #EEF2F8;

}



/*==========================================================
13. FLOW NUMBER
==========================================================*/

.flow-number{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--arb-blue);

    color:#ffffff;

    border:5px solid var(--arb-yellow);

    font-size:28px;

    font-family:Georgia,"Times New Roman",serif;

    font-weight:700;

    box-shadow:0 10px 25px rgba(12,45,98,.18);

}



/*==========================================================
14. FLOWCHART WRAPPER
==========================================================*/

.flowchart{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin:40px auto;

}

.flowchart-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin:40px auto;

}

.flowchart-container.vertical{

    max-width:760px;

    margin:auto;

}



/*==========================================================
FLOW INTRO
==========================================================*/

.flow-intro{

    background:#FFFBE8;

    border-left:6px solid var(--arb-yellow);

    border-radius:0 16px 16px 0;

    padding:25px 30px;

    margin:30px 0 40px;

    color:#5E6A83;

}



/*==========================================================
15. PREMIUM HOVER EFFECTS
==========================================================*/

.flowchart-card:hover .flow-number{

    transform:rotate(360deg);

    transition:1s ease;

}

.flowchart-card:hover h2{

    color:var(--arb-blue-dark);

}



/*==========================================================
16. ANIMATIONS
==========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.flowchart-card{

    animation:fadeUp .8s ease both;

}



@keyframes floatCircle{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-3px);

    }

    100%{

        transform:translateY(0);

    }

}

.flow-number{

    animation:floatCircle 4s ease-in-out infinite;

}



/*==========================================================
FLOW DIVIDER
==========================================================*/

.flow-divider{

    width:120px;

    height:4px;

    background:var(--arb-yellow);

    border-radius:20px;

    margin:35px auto;

}
/*======================================================================
SECTION 3

17. FLOW BOXES
18. START / END BOXES
19. DECISION BOXES
20. FLOW ARROWS
21. DECISION BRANCHES
22. BRANCH LABELS
23. FLOW UTILITIES

======================================================================*/



/*==========================================================
17. STANDARD FLOW BOX
==========================================================*/

.flow-box{

    width:100%;

    max-width:720px;

    background:linear-gradient(135deg,#0C2D62,#18498C);

    color:#ffffff;

    border-left:6px solid #FEE879;

    border-radius:18px;

    padding:24px 30px;

    text-align:center;

    font-size:18px;

    font-weight:600;

    line-height:1.7;

    letter-spacing:.2px;

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

    transition:all .35s ease;

}

.flow-box:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(0,0,0,.24);

}

.flow-box i{

    color:var(--arb-yellow);

    margin-right:8px;

}



/*==========================================================
18. START BOX
==========================================================*/

.flow-box.start{

    background:linear-gradient(135deg,#1E7E34,#28A745);

    border-left:8px solid #FEE879;

    font-size:18px;

    font-weight:700;

}



/*==========================================================
END BOX
==========================================================*/

.flow-box.end{

    background:linear-gradient(135deg,#7A1F2B,#A52A3A);

    border-left:8px solid #FEE879;

    font-size:18px;

    font-weight:700;

}



/*==========================================================
SUCCESS / WARNING / DANGER BOXES
==========================================================*/

.flow-box.success{

    background:var(--arb-success);

}

.flow-box.warning{

    background:var(--arb-warning);

}

.flow-box.danger{

    background:var(--arb-danger);

}



/*==========================================================
19. DECISION BOX
==========================================================*/

.decision-box,

.flow-box.decision{

    width:100%;

    max-width:720px;

    background:#FFFBE8;

    color:var(--arb-blue);

    border:3px solid var(--arb-yellow);

    border-radius:16px;

    padding:24px 30px;

    text-align:center;

    font-size:18px;

    font-weight:700;

    line-height:1.6;

    box-shadow:var(--arb-shadow-sm);

    transition:all .35s ease;

}

.decision-box:hover,

.flow-box.decision:hover{

    transform:translateY(-4px);

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

}



/*==========================================================
20. FLOW ARROWS
==========================================================*/

.flow-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:22px auto;

    width:54px;

    height:54px;

    border-radius:50%;

    background:#0C2D62;

    border:3px solid #FEE879;

    color:#ffffff !important;

    font-size:30px;

    font-weight:700;

    line-height:1;

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

    transition:.3s ease;

}

.flow-arrow i{

    color:#ffffff !important;

}


/*==========================================================
ARROW ANIMATION
==========================================================*/

@keyframes arrowMove{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(5px);

    }

    100%{

        transform:translateY(0);

    }

}

.flow-arrow{

    animation:arrowMove 1.6s infinite;

}



/*==========================================================
21. DECISION BRANCHES
==========================================================*/

.decision-branches{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:35px;

    margin-top:35px;

}



.branch{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

}



/*==========================================================
22. BRANCH LABELS
==========================================================*/

.branch-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:8px 18px;

    border-radius:30px;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.8px;

    box-shadow:var(--arb-shadow-sm);

}



.branch-label.success{

    background:var(--arb-success);

}



.branch-label.warning{

    background:var(--arb-warning);

}



.branch-label.danger{

    background:var(--arb-danger);

}



/*==========================================================
23. FLOW UTILITIES
==========================================================*/

.flow-center{

    text-align:center;

}



.flow-left{

    text-align:left;

}



.flow-right{

    text-align:right;

}



.flow-w-100{

    max-width:100%;

}



.flow-w-80{

    max-width:80%;

}



.flow-w-60{

    max-width:60%;

}



.flow-box.emphasis{

    background:#123D7D;

    border-left:8px solid var(--arb-yellow);

    font-size:19px;

    letter-spacing:.3px;

}



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

@media(max-width:768px){

    .decision-branches{

        flex-direction:column;

        gap:25px;

    }

    .branch{

        width:100%;

    }

    .flow-box,

    .decision-box,

    .flow-box.decision{

        max-width:100%;

    }

}
/*======================================================================
SECTION 4

24. TIMELINE FLOWCHARTS
25. COMPARISON FLOWCHARTS
26. COMPARE CARDS
27. MASTER FLOWCHART
28. MASTER STEPS
29. CARDS GRID
30. INFO CARDS

======================================================================*/



/*==========================================================
24. TIMELINE FLOWCHARTS
==========================================================*/

.timeline-wrapper{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:25px;

    margin:60px 0;

    padding:30px 0;

}



.timeline-line{

    position:absolute;

    top:72px;

    left:6%;

    right:6%;

    height:6px;

    background:linear-gradient(90deg,
        var(--arb-blue),
        var(--arb-yellow),
        var(--arb-blue));

    border-radius:30px;

    z-index:1;

}



.timeline-stage{

    position:relative;

    z-index:2;

    flex:1;

    text-align:center;

}



.timeline-circle{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:var(--arb-blue);

    color:#ffffff;

    border:5px solid var(--arb-yellow);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:700;

    font-family:Georgia,"Times New Roman",serif;

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

    transition:all .35s ease;

}



.timeline-stage:hover .timeline-circle{

    transform:scale(1.08);

    background:var(--arb-blue-dark);

}



.timeline-stage h4{

    color:var(--arb-blue);

    margin-bottom:10px;

}



.timeline-stage p{

    color:#66738E;

    font-size:15px;

}



/*==========================================================
25. COMPARISON FLOWCHARTS
==========================================================*/

.comparison-flow{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    gap:35px;

    align-items:stretch;

    margin:50px 0;

}



.compare-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:var(--arb-blue);

}



.compare-divider i{

    color:var(--arb-blue);

}



/*==========================================================
26. COMPARE CARDS
==========================================================*/

.compare-card{

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

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

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

    transition:all .35s ease;

}



.compare-card:hover{

    transform:translateY(-5px);

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

}



.compare-heading{

    background:var(--arb-blue);

    color:#ffffff;

    border-left:6px solid var(--arb-yellow);

    padding:22px 24px;

    font-size:22px;

    font-family:Georgia,"Times New Roman",serif;

    font-weight:700;

}



.compare-heading i{

    color:var(--arb-yellow);

    margin-right:10px;

}



.compare-body{

    padding:28px;

}



.compare-body ul{

    margin:0;

    padding-left:20px;

}



.compare-body li{

    margin-bottom:14px;

}



.flow-point{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:18px;

}



.flow-point i{

    color:var(--arb-yellow);

    margin-top:4px;

}



/*==========================================================
27. MASTER FLOWCHART
==========================================================*/

.master-flow-wrapper{

    max-width:980px;

    margin:50px auto;

}



.master-step{

    display:flex;

    align-items:center;

    gap:24px;

    margin-bottom:18px;

}



.master-icon{

    width:78px;

    height:78px;

    border-radius:50%;

    background:var(--arb-blue);

    border:5px solid var(--arb-yellow);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

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

}



.master-icon i{

    color:var(--arb-yellow);

    font-size:28px;

}



.master-box{

    flex:1;

    background:#ffffff;

    border-left:6px solid var(--arb-yellow);

    border-radius:18px;

    padding:26px 30px;

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

}



.master-box h4{

    color:#6A7690;

    margin-bottom:8px;

    font-size:15px;

    text-transform:uppercase;

}



.master-box h3{

    margin-bottom:12px;

    color:var(--arb-blue);

}



.master-box.final{

    background:var(--arb-blue);

}



.master-box.final h3,

.master-box.final h4,

.master-box.final p{

    color:#ffffff;

}



.master-arrow{

    text-align:center;

    font-size:34px;

    color:var(--arb-blue);

    margin:10px 0 18px;

}



/*==========================================================
28. CARDS GRID
==========================================================*/

.cards-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin-top:30px;

}



/*==========================================================
29. INFO CARDS
==========================================================*/

.info-card{

    background:#ffffff;

    border-top:5px solid var(--arb-yellow);

    border-radius:18px;

    padding:30px 24px;

    text-align:center;

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

    transition:all .35s ease;

}



.info-card:hover{

    transform:translateY(-6px);

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

}



.info-card i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--arb-blue);

    color:var(--arb-yellow);

    border:4px solid var(--arb-yellow);

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 18px;

    font-size:28px;

}



.info-card h4{

    margin-bottom:12px;

    color:var(--arb-blue);

}



.info-card p{

    margin:0;

    color:var(--arb-text);

}



/*==========================================================
30. RESPONSIVE
==========================================================*/

@media(max-width:992px){

    .comparison-flow{

        grid-template-columns:1fr;

    }

    .compare-divider{

        transform:rotate(90deg);

    }

    .master-step{

        flex-direction:column;

        text-align:center;

    }

}



@media(max-width:768px){

    .timeline-wrapper{

        flex-direction:column;

        gap:35px;

    }

    .timeline-line{

        display:none;

    }

    .cards-grid{

        grid-template-columns:1fr;

    }

}
/*======================================================================
SECTION 5

31. PRACTICE BOX
32. HIGHLIGHT BOX
33. LAW BOX
34. COMPARISON TABLE
35. NOTE BOXES
36. BADGES
37. CHECKLISTS
38. TEXT UTILITIES

======================================================================*/



/*==========================================================
31. PRACTICE BOX
==========================================================*/

.practice-box{

    background:var(--arb-blue);

    color:#ffffff;

    border-left:6px solid var(--arb-yellow);

    border-radius:18px;

    padding:32px;

    margin:45px 0;

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

}

.practice-box h3{

    color:#ffffff;

    margin-bottom:18px;

    font-size:26px;

}

.practice-box p,

.practice-box li{

    color:#ffffff;

}

.practice-box strong{

    color:var(--arb-yellow);

}



/*==========================================================
32. HIGHLIGHT BOX
==========================================================*/

.highlight-box{

    background:#FFFBE8;

    border-left:6px solid var(--arb-yellow);

    border-radius:18px;

    padding:30px;

    margin:45px 0;

    box-shadow:var(--arb-shadow-sm);

}

.highlight-box h3{

    color:var(--arb-blue);

    margin-bottom:18px;

}

.highlight-box strong{

    color:var(--arb-blue);

}



/*==========================================================
33. LAW BOX
==========================================================*/

.law-box{

    background:#ffffff;

    border-top:5px solid var(--arb-yellow);

    border-radius:18px;

    padding:32px;

    margin:45px 0;

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

}

.law-box h3{

    color:var(--arb-blue);

    margin-bottom:20px;

}



/*==========================================================
34. COMPARISON TABLE
==========================================================*/

.comparison-table{

    width:100%;

    border-collapse:collapse;

    margin-top:25px;

    border-radius:16px;

    overflow:hidden;

}



.comparison-table th{

    background:var(--arb-blue);

    color:#ffffff;

    padding:18px;

    text-align:left;

    border-bottom:4px solid var(--arb-yellow);

    font-size:16px;

}



.comparison-table td{

    padding:16px 18px;

    border-bottom:1px solid var(--arb-border);

    vertical-align:top;

    background:#ffffff;

}



.comparison-table tr:nth-child(even) td{

    background:#FBFCFE;

}



.comparison-table tr:hover td{

    background:#FFFBE8;

}



/*==========================================================
35. NOTE BOXES
==========================================================*/

.note-box{

    background:#EDF5FF;

    border-left:6px solid var(--arb-blue);

    border-radius:16px;

    padding:28px;

    margin:40px 0;

}

.note-box h4{

    color:var(--arb-blue);

    margin-bottom:12px;

}



.warning-box{

    background:#FFF5F2;

    border-left:6px solid var(--arb-danger);

    border-radius:16px;

    padding:28px;

    margin:40px 0;

}

.warning-box h4{

    color:var(--arb-danger);

    margin-bottom:12px;

}



.success-box{

    background:#F2FFF6;

    border-left:6px solid var(--arb-success);

    border-radius:16px;

    padding:28px;

    margin:40px 0;

}

.success-box h4{

    color:var(--arb-success);

    margin-bottom:12px;

}



/*==========================================================
36. BADGES
==========================================================*/

.badge{

    display:inline-block;

    padding:7px 16px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}



.badge-primary{

    background:var(--arb-blue);

    color:#ffffff;

}



.badge-yellow{

    background:var(--arb-yellow);

    color:var(--arb-blue);

}



.badge-success{

    background:var(--arb-success);

    color:#ffffff;

}



.badge-warning{

    background:var(--arb-warning);

    color:#ffffff;

}



.badge-danger{

    background:var(--arb-danger);

    color:#ffffff;

}



/*==========================================================
37. CHECK LIST
==========================================================*/

.check-list{

    list-style:none;

    margin:20px 0;

    padding:0;

}



.check-list li{

    position:relative;

    padding-left:34px;

    margin-bottom:14px;

}



.check-list li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:var(--arb-yellow);

    font-weight:700;

}



/*==========================================================
38. TEXT UTILITIES
==========================================================*/

.lead{

    font-size:20px;

    color:var(--arb-blue);

    font-weight:500;

}



.text-center{

    text-align:center;

}



.text-left{

    text-align:left;

}



.text-right{

    text-align:right;

}



.mt-20{

    margin-top:20px;

}



.mt-30{

    margin-top:30px;

}



.mt-40{

    margin-top:40px;

}



.mt-50{

    margin-top:50px;

}



.mb-20{

    margin-bottom:20px;

}



.mb-30{

    margin-bottom:30px;

}



.mb-40{

    margin-bottom:40px;

}



.mb-50{

    margin-bottom:50px;

}



.w-100{

    width:100%;

}



.rounded{

    border-radius:var(--arb-radius);

}



.shadow{

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

}
/*======================================================================
SECTION 6

39. RESPONSIVE DESIGN
40. PRINT STYLES
41. ACCESSIBILITY
42. SPACING UTILITIES
43. PREMIUM FINISH
44. END OF FILE

======================================================================*/



/*==========================================================
39. RESPONSIVE DESIGN
==========================================================*/

@media (max-width:1200px){

    .guide-main{

        padding:25px;

    }

}



@media (max-width:992px){

    .flowchart-card{

        padding:35px;

    }

    .flowchart-title{

        gap:18px;

    }

    .flow-number{

        width:64px;

        height:64px;

        font-size:24px;

    }

    .flowchart-title h2{

        font-size:28px;

    }

    .flowchart-card > h2{

        font-size:30px;

    }

}



@media (max-width:768px){

    body{

        font-size:16px;

    }

    .guide-main{

        padding:18px;

    }

    .guide-chapter h2{

        font-size:30px;

    }

    .guide-intro{

        padding:0 25px 30px;

    }

    .flowchart-card{

        padding:25px;

        margin-bottom:40px;

    }

    .flowchart-title{

        flex-direction:column;

        text-align:center;

        gap:15px;

    }

    .flowchart-title h2,

    .flowchart-card > h2{

        font-size:25px;

    }

    .flow-box,

    .decision-box,

    .flow-box.decision{

        max-width:100%;

        padding:20px;

        font-size:16px;

    }

    .practice-box,

    .highlight-box,

    .law-box,

    .note-box,

    .warning-box,

    .success-box{

        padding:24px;

    }

    .comparison-table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

}



@media (max-width:576px){

    body{

        font-size:15px;

    }

    .guide-main{

        padding:12px;

    }

    .guide-chapter{

        border-radius:16px;

    }

    .chapter-number{

        display:block;

        width:100%;

        text-align:center;

        border-left:none;

        border-bottom:5px solid var(--arb-yellow);

    }

    .guide-chapter h2{

        padding:22px 22px 10px;

        font-size:24px;

    }

    .guide-intro{

        padding:0 22px 22px;

    }

    .flowchart-card{

        padding:20px;

    }

    .flow-number{

        width:56px;

        height:56px;

        font-size:20px;

    }

    .flow-box,

    .decision-box,

    .flow-box.decision{

        padding:18px;

        font-size:15px;

    }

    .flow-arrow{

        font-size:28px;

    }

}



/*==========================================================
40. PRINT STYLES
==========================================================*/

@media print{

    body{

        background:#ffffff;

        color:#000000;

    }

    .flowchart-card,

    .practice-box,

    .highlight-box,

    .law-box,

    .note-box,

    .warning-box,

    .success-box{

        box-shadow:none !important;

        break-inside:avoid;

        page-break-inside:avoid;

    }

    .flowchart-card{

        border:1px solid #cfcfcf;

    }

    .comparison-table th{

        background:#e8e8e8 !important;

        color:#000 !important;

    }

}



/*==========================================================
41. ACCESSIBILITY
==========================================================*/

a,

button{

    transition:all .30s ease;

}



a:focus,

button:focus{

    outline:3px solid var(--arb-yellow);

    outline-offset:3px;

}



::selection{

    background:var(--arb-yellow);

    color:var(--arb-blue);

}



/*==========================================================
42. SPACING UTILITIES
==========================================================*/

.pt-10{padding-top:10px;}
.pt-20{padding-top:20px;}
.pt-30{padding-top:30px;}
.pt-40{padding-top:40px;}

.pb-10{padding-bottom:10px;}
.pb-20{padding-bottom:20px;}
.pb-30{padding-bottom:30px;}
.pb-40{padding-bottom:40px;}

.ml-auto{margin-left:auto;}
.mr-auto{margin-right:auto;}

.d-flex{display:flex;}
.flex-column{flex-direction:column;}
.align-center{align-items:center;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}



/*==========================================================
43. PREMIUM FINISH
==========================================================*/

.flowchart-card,
.compare-card,
.info-card,
.master-box,
.practice-box,
.highlight-box,
.law-box{

    backface-visibility:hidden;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

.flowchart-card:last-child{

    margin-bottom:0;

}

html{

    scroll-behavior:smooth;

}



/*==========================================================
44. END OF FILE

AVP LEGIS CHAMBERS

ARBITRATION FLOWCHARTS

PREMIUM DESIGN SYSTEM

Version 2.0

======================================================================*/
/*=========================================================
  PREMIUM YES / NO BADGES
=========================================================*/

.decision-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:120px;

    height:60px;

    padding:0 26px;

    background:#0C2D62;

    color:#fff;

    border:2px solid #FEE879;

    border-radius:14px;

    font-size:20px;

    font-weight:700;

    letter-spacing:.5px;

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

}

.decision-label span:first-child{

    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#08224A;
    border:2px solid #FEE879;
    font-size:22px;
    font-weight:700;

}

.decision-label.yes span:first-child{

    color:#49D17D;

}

.decision-label.no span:first-child{

    color:#FF6B6B;

}
/*=========================================================
  PREMIUM DECISION BRANCH CONNECTOR
=========================================================*/

.decision-branches{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:80px;

    margin-top:70px;

    padding-top:50px;

}

/* Horizontal Gold Line */

.decision-branches::before{

    content:"";

    position:absolute;

    top:0;

    left:18%;

    width:64%;

    height:3px;

    background:#FEE879;

    border-radius:3px;

}

/* Vertical Gold Lines */

.decision-branches .branch{

    position:relative;

    flex:1;

    text-align:center;

}

.decision-branches .branch::before{

    content:"";

    position:absolute;

    top:-50px;

    left:50%;

    width:3px;

    height:50px;

    background:#FEE879;

    transform:translateX(-50%);

    border-radius:3px;

}

/* Better spacing below badges */

.decision-label{

    margin-bottom:18px;

}
/*=========================================================
  PREMIUM FLOW ARROWS
=========================================================*/

.flow-arrow{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:22px auto;

    width:54px;

    height:54px;

    border-radius:50%;

    background:#0C2D62;

    border:3px solid #FEE879;

    color:#ffffff;

    font-size:30px;

    font-weight:700;

    line-height:1;

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

    transition:.3s ease;

}

.flow-arrow:hover{

    transform:translateY(-2px);

    box-shadow:0 16px 30px rgba(0,0,0,.22);

}