/*=========================================================
    VBLINK HR CONSULTANTS
    INDEX.CSS

    MAIN PAGE / CONTENT STYLES ONLY

    Modular structure:

        header.css
        header.js

        side-drawer.css
        side-drawer.js

        index.css
        index.js

        footer.css
        footer.js

    This stylesheet contains ONLY:

        - Global foundation
        - Page container
        - Main content layout
        - Left column
        - Middle column
        - Right column
        - Cards
        - Headings
        - Paragraphs
        - Feature boxes
        - Hero images
        - Body copy
        - Lists
        - Blockquotes
        - Search box
        - Quick Links
        - Image zoom modal
        - Main-content responsive rules

    Header, side drawer and footer styles are NOT included.
=========================================================*/


/*=========================================================
    GOOGLE FONT
=========================================================*/

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


/*=========================================================
    GLOBAL RESET
=========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


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

:root{

    --primary:#2f54eb;

    --primary-dark:#1b3fcf;

    --secondary:#5b8cff;

    --light:#eef4ff;

    --white:#ffffff;

    --text:#333333;

    --border:#d6e4ff;

    --shadow:
        0 10px 25px
        rgba(47,84,235,.12);

    --radius:12px;

}


/*=========================================================
    BODY
=========================================================*/

body{

    background:#f5f8ff;

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

    color:var(--text);

    padding:15px;

}


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

    The header and footer are inserted into this page
    container, but their actual styling is handled by
    header.css and footer.css.
=========================================================*/

.container{

    width:1250px;

    max-width:100%;

    margin:0 auto;

    background:var(--white);

    border-radius:12px;

    overflow:hidden;

    box-shadow:var(--shadow);

}


/*=========================================================
    GENERAL IMAGE SETTINGS
=========================================================*/

img{

    max-width:100%;

    display:block;

}


/*=========================================================
    GENERAL LINKS
=========================================================*/

a{

    text-decoration:none;

    transition:.35s ease;

}


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

    Keep keyboard focus visible for main-page links,
    buttons and form controls.
=========================================================*/

.content a:focus-visible,
.content button:focus-visible,
.content input:focus-visible{

    outline:

        2px solid
        var(--primary);

    outline-offset:3px;

}


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

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

    .content *,
    .content *::before,
    .content *::after{

        animation:none !important;

        transition:none !important;

    }

}


/*=========================================================
    MAIN CONTENT
=========================================================*/

.content{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

    padding:10px;

}


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

.left-column{

    flex:
        0 0 190px;

    min-width:0;

}


/*=========================================================
    CENTER / MAIN COLUMN
=========================================================*/

.middle-column{

    flex:1;

    min-width:0;

}


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

.right-column{

    flex:
        0 0 170px;

    min-width:0;

}


/*=========================================================
    COMMON SECTION SPACING
=========================================================*/

.content section{

    margin-bottom:15px;

}


.content article{

    margin-bottom:15px;

}


/*=========================================================
    COMMON CARD
=========================================================*/

.card{

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.05);

}


/*=========================================================
    MAIN PAGE HEADINGS
=========================================================*/

.content h1{

    font-size:34px;

    color:
        var(--primary);

    margin-bottom:15px;

    line-height:1.25;

}


.content h2{

    font-size:28px;

    color:
        var(--primary);

    margin-bottom:14px;

    line-height:1.3;

}


.content h3{

    font-size:22px;

    color:
        var(--primary);

    margin-bottom:12px;

    line-height:1.35;

}


.content h4{

    font-size:15px;

    font-weight:700;

}


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

.content p{

    color:
        var(--text);

    line-height:1.7;

}


/*=========================================================
    HORIZONTAL RULE / RULE IMAGE
=========================================================*/

.rule{

    text-align:center;

    margin:2px 0;

}


.rule img{

    width:100%;

    max-width:100%;

}


/*=========================================================
    SMOOTH SCROLLING
=========================================================*/

html{

    scroll-behavior:smooth;

}


/*=========================================================
    LEFT SIDEBAR FEATURE BOXES
=========================================================*/

.smfeature{

    background:
        var(--white);

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

    border-radius:
        var(--radius);

    margin-bottom:18px;

    overflow:hidden;

    box-shadow:
        0 4px 15px
        rgba(47,84,235,.08);

    transition:
        .35s ease;

}


/*=========================================================
    FEATURE BOX HOVER
=========================================================*/

.smfeature:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 28px
        rgba(47,84,235,.18);

}


/*=========================================================
    FEATURE BOX TITLE
=========================================================*/

.smfeature h4{

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:
        var(--white);

    text-align:center;

    letter-spacing:1px;

    padding:12px;

    font-size:15px;

    font-weight:700;

}


/*=========================================================
    FEATURE BOX CONTENT
=========================================================*/

.smfeature p{

    padding:14px;

    font-size:13px;

    line-height:1.7;

    color:
        var(--text);

    text-align:justify;

    overflow:hidden;

}


/*=========================================================
    FEATURE BOX IMAGE
=========================================================*/

.smfeature img{

    float:left;

    width:64px;

    height:64px;

    object-fit:cover;

    margin-right:12px;

    margin-bottom:6px;

    border-radius:8px;

    border:
        2px solid
        var(--light);

}


/*=========================================================
    HERO IMAGE
=========================================================*/

.hero-image{

    width:100%;

    height:auto;

    border-radius:
        var(--radius);

    margin-bottom:22px;

    box-shadow:
        0 10px 25px
        rgba(47,84,235,.15);

    transition:.4s;

}


.hero-image:hover{

    transform:
        scale(1.01);

}


/*=========================================================
    MAIN BODY COPY
=========================================================*/

.bodycopy{

    font-size:14px;

    color:
        var(--text);

    line-height:1.8;

    text-align:justify;

    margin-bottom:22px;

}


/*=========================================================
    BODY COPY LINKS
=========================================================*/

.bodycopy a{

    color:
        var(--primary);

    font-weight:600;

}


.bodycopy a:hover{

    color:
        var(--primary-dark);

    text-decoration:
        underline;

}


/*=========================================================
    BODY COPY STRONG TEXT
=========================================================*/

.bodycopy strong{

    color:
        var(--primary-dark);

    font-weight:700;

}


/*=========================================================
    FEATURED IMAGE
=========================================================*/

.feature2{

    float:left;

    width:110px;

    height:110px;

    object-fit:cover;

    margin-right:15px;

    margin-bottom:10px;

    border-radius:10px;

    border:
        3px solid
        var(--light);

    box-shadow:
        0 8px 18px
        rgba(47,84,235,.12);

}


/*=========================================================
    FEATURED IMAGE HOVER
=========================================================*/

.feature2:hover{

    transform:
        rotate(-2deg)
        scale(1.03);

    transition:.35s;

}


/*=========================================================
    MIDDLE COLUMN IMAGES
=========================================================*/

.middle-column img{

    max-width:100%;

}


/*=========================================================
    LAST PARAGRAPH SPACING
=========================================================*/

.middle-column p:last-child{

    margin-bottom:5px;

}


/*=========================================================
    BLOCKQUOTE / EMPHASIS BLOCK
=========================================================*/

.middle-column blockquote{

    background:
        var(--light);

    border-left:
        5px solid
        var(--primary);

    padding:18px;

    margin:25px 0;

    border-radius:10px;

    color:
        var(--text);

    font-style:italic;

}


/*=========================================================
    MAIN CONTENT LISTS
=========================================================*/

.middle-column ul{

    margin:
        15px 0
        20px 25px;

}


.middle-column ol{

    margin:
        15px 0
        20px 25px;

}


.middle-column li{

    margin-bottom:10px;

    line-height:1.5;

    color:
        var(--text);

}


/*=========================================================
    MAIN SECTION HEADINGS
=========================================================*/

.middle-column h2{

    color:
        var(--primary);

    font-size:26px;

    margin-bottom:18px;

}


.middle-column h3{

    color:
        var(--primary-dark);

    font-size:22px;

    margin-bottom:15px;

}


/*=========================================================
    MIDDLE COLUMN CONTENT ANIMATION
=========================================================*/

.middle-column{

    animation:
        fadeUp
        .7s
        ease;

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:
            translateY(20px);

    }


    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/*=========================================================
    RIGHT COLUMN
=========================================================*/

.right-column{

    position:relative;

}


.right-column section{

    margin-bottom:20px;

}

/*=========================================================
    SEARCH BOX
=========================================================*/

.searchbox{

    width:100%;

    background:
        linear-gradient(
            135deg,
            #eef4ff,
            #ffffff
        );

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

    border-radius:
        var(--radius);

    padding:16px;

    margin-bottom:20px;

    box-shadow:
        0 5px 18px
        rgba(47,84,235,.08);

}


/*=========================================================
    SEARCH BOX FORM
=========================================================*/

.searchbox form{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

}


/*=========================================================
    SEARCH INPUT
=========================================================*/

.searchbox input[type="text"]{

    flex:1;

    min-width:0;

    height:44px;

    padding:
        0 14px;

    border:
        1px solid
        #cbd8f5;

    border-radius:8px;

    background:
        #ffffff;

    color:
        var(--text);

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

    font-size:14px;

    outline:none;

    transition:
        .3s ease;

}


/*=========================================================
    SEARCH INPUT PLACEHOLDER
=========================================================*/

.searchbox input[type="text"]::placeholder{

    color:#8995ad;

    opacity:1;

}


/*=========================================================
    SEARCH INPUT FOCUS
=========================================================*/

.searchbox input[type="text"]:focus{

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(47,84,235,.10);

}


/*=========================================================
    SEARCH BUTTON
=========================================================*/

.searchbox button{

    flex:
        0 0 auto;

    height:44px;

    padding:
        0 20px;

    border:none;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:
        #ffffff;

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

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    white-space:nowrap;

    box-shadow:
        0 6px 15px
        rgba(47,84,235,.20);

    transition:
        .3s ease;

}


/*=========================================================
    SEARCH BUTTON HOVER
=========================================================*/

.searchbox button:hover{

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 20px
        rgba(47,84,235,.28);

}


/*=========================================================
    SEARCH BUTTON ACTIVE
=========================================================*/

.searchbox button:active{

    transform:
        translateY(0);

}


/*=========================================================
    SEARCH BUTTON ICON
=========================================================*/

.searchbox button i{

    margin-right:6px;

}


/*=========================================================
    SEARCH BOX TITLE
=========================================================*/

.searchbox h3{

    margin-bottom:10px;

    color:
        var(--primary);

    font-size:18px;

    font-weight:700;

}


/*=========================================================
    SEARCH BOX DESCRIPTION
=========================================================*/

.searchbox p{

    margin-bottom:12px;

    font-size:13px;

    line-height:1.6;

    color:
        #596579;

}









/*=========================================================
    QUICK LINKS PANEL
=========================================================*/

.links{

    background:var(--white);

    border:1px solid rgba(47,84,235,.18);

    border-radius:20px 0 20px 0;      /* TL TR BR BL */

    overflow:hidden;

    margin-bottom:25px;

    box-shadow:
        0 10px 28px rgba(47,84,235,.10),
        0 0 0 1px rgba(47,84,235,.05);

    transition:all .35s ease;

}

.links:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 40px rgba(47,84,235,.18),
        0 0 20px rgba(91,140,255,.15);

}


/*=========================================================
    PANEL IMAGE
=========================================================*/

.links img{

    width:100%;

    display:block;

    transition:transform .45s ease;

}

.links:hover img{

    transform:scale(1.05);

}


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

.links h3{

    margin:0;

    padding:14px;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:15px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2f54eb,
        #5b8cff);

}


/*=========================================================
    LINK ROWS
=========================================================*/

.links p{

    margin:0;

    border-bottom:1px solid #edf2ff;

}

.links p:last-child{

    border-bottom:none;

}


/*=========================================================
    LINKS
=========================================================*/

.links a{

    display:flex;

    align-items:center;

    gap:10px;

    position:relative;

    padding:5px 8px;

    text-decoration:none;

    color:var(--primary-dark);

    font-size:14px;

    font-weight:600;

    overflow:hidden;

    transition:all .35s ease;

}


/*=========================================================
    LEFT HIGHLIGHT BAR
=========================================================*/

.links a::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:100%;

    background:linear-gradient(
        180deg,
        #2f54eb,
        #5b8cff);

    transition:.35s ease;

    z-index:0;

}


/*=========================================================
    ARROW ICON
=========================================================*/

.links a::before{

    content:">";

    position:relative;

    z-index:2;

    color:#2f54eb;

    font-size:14px;

    transition:.35s;

}


/*=========================================================
    LINK TEXT
=========================================================*/

.links a span{

    position:relative;

    z-index:2;

}


/*=========================================================
    HOVER EFFECT
=========================================================*/

.links a:hover{

    color:#ffffff;

    padding-left:24px;

    background:#f6f9ff;

}

.links a:hover::after{

    width:100%;

}

.links a:hover::before{

    color:#ffffff;

    transform:translateX(5px);

}


/*=========================================================
    ACTIVE EFFECT
=========================================================*/

.links a:active{

    transform:scale(.98);

}


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

.links a:focus{

    outline:none;

    background:#eef3ff;

    color:#2f54eb;

}


/*=========================================================
    SMOOTH BORDER BETWEEN LINKS
=========================================================*/

.links p:nth-child(even){

    background:#fbfcff;

}

.links p:hover{

    background:transparent;

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

@media (max-width:768px){

    .links a{

        font-size:13px;

        padding:6px 8px;

    }

    .links h3{

        font-size:14px;

        padding:11px;

    }

}





















/*=========================================================
    RIGHT COLUMN COMMON CARD
=========================================================*/

.right-column .card{

    margin-bottom:18px;

    overflow:hidden;

}


/*=========================================================
    RIGHT COLUMN CARD HEADER
=========================================================*/

.right-column .card h3{

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:
        #ffffff;

    padding:
        12px 14px;

    margin:0;

    font-size:15px;

    font-weight:700;

}


/*=========================================================
    RIGHT COLUMN CARD BODY
=========================================================*/

.right-column .card-body{

    padding:14px;

}


.right-column .card p{

    font-size:13px;

    line-height:1.65;

    color:
        #596579;

}


/*=========================================================
    RIGHT COLUMN LINKS
=========================================================*/

.right-column a{

    color:
        var(--primary);

}


.right-column a:hover{

    color:
        var(--primary-dark);

}


/*=========================================================
    RIGHT COLUMN LIST
=========================================================*/

.right-column ul{

    list-style:none;

    margin:0;

    padding:10px 12px;

}


.right-column li{

    padding:
        8px 0;

    border-bottom:
        1px solid
        #edf1f8;

    font-size:12px;

    line-height:1.5;

}


.right-column li:last-child{

    border-bottom:none;

}


/*=========================================================
    RIGHT COLUMN LIST ARROW
=========================================================*/

.right-column li::before{

    content:"›";

    color:
        var(--primary);

    font-weight:700;

    margin-right:6px;

}


/*=========================================================
    RIGHT COLUMN IMAGE
=========================================================*/

.right-column img{

    width:100%;

    height:auto;

    border-radius:8px;

}


/*=========================================================
    RIGHT COLUMN SMALL TEXT
=========================================================*/

.right-column small{

    display:block;

    font-size:11px;

    line-height:1.5;

    color:
        #78859a;

}


/*=========================================================
    CONTENT CALLOUT
=========================================================*/

.content-callout{

    position:relative;

    background:
        linear-gradient(
            135deg,
            #eef4ff,
            #ffffff
        );

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

    border-left:
        4px solid
        var(--primary);

    border-radius:
        10px;

    padding:
        16px 18px;

    margin:
        20px 0;

}


/*=========================================================
    CONTENT CALLOUT TITLE
=========================================================*/

.content-callout h3{

    color:
        var(--primary);

    margin-bottom:8px;

    font-size:18px;

}


/*=========================================================
    CONTENT CALLOUT TEXT
=========================================================*/

.content-callout p{

    margin:0;

    font-size:13px;

    line-height:1.7;

}


/*=========================================================
    CONTENT TABLE
=========================================================*/

.middle-column table{

    width:100%;

    border-collapse:
        collapse;

    margin:
        20px 0;

    font-size:13px;

}


/*=========================================================
    CONTENT TABLE CELLS
=========================================================*/

.middle-column th,
.middle-column td{

    padding:
        10px 12px;

    border:
        1px solid
        #dce5f7;

    text-align:left;

    line-height:1.5;

}


/*=========================================================
    CONTENT TABLE HEADER
=========================================================*/

.middle-column th{

    background:
        var(--primary);

    color:
        #ffffff;

    font-weight:700;

}


/*=========================================================
    CONTENT TABLE ALTERNATING ROWS
=========================================================*/

.middle-column tbody tr:nth-child(even){

    background:
        #f5f8ff;

}


/*=========================================================
    CONTENT TABLE HOVER
=========================================================*/

.middle-column tbody tr:hover{

    background:
        #eef4ff;

}


/*=========================================================
    CONTENT EMPHASIS
=========================================================*/

.middle-column mark{

    background:
        #e4ecff;

    color:
        var(--primary-dark);

    padding:
        2px 5px;

    border-radius:4px;

}


/*=========================================================
    CONTENT CODE / PRE
=========================================================*/

.middle-column code{

    background:
        #f1f4f9;

    color:
        #374151;

    padding:
        2px 5px;

    border-radius:4px;

    font-size:.9em;

}


.middle-column pre{

    background:
        #f1f4f9;

    border:
        1px solid
        #dce5f7;

    border-radius:
        8px;

    padding:
        15px;

    overflow-x:auto;

    margin:
        20px 0;

}


.middle-column pre code{

    background:
        transparent;

    padding:0;

}


/*=========================================================
    CONTENT BUTTON
=========================================================*/

.content .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:
        10px 18px;

    border:none;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:
        #ffffff;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    box-shadow:
        0 6px 15px
        rgba(47,84,235,.18);

    transition:
        .3s ease;

}


.content .btn:hover{

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    box-shadow:
        0 9px 20px
        rgba(47,84,235,.25);

}


/*=========================================================
    CONTENT BUTTON SECONDARY
=========================================================*/

.content .btn-secondary{

    background:
        #eef4ff;

    color:
        var(--primary);

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

}


.content .btn-secondary:hover{

    background:
        #dfe9ff;

    color:
        var(--primary-dark);

}


/*=========================================================
    EMPTY / INFORMATION BOX
=========================================================*/

.info-box{

    padding:
        16px;

    background:
        #f7f9fd;

    border:
        1px solid
        #e1e7f2;

    border-radius:
        10px;

    margin:
        15px 0;

}


.info-box p{

    margin:0;

    font-size:13px;

    line-height:1.7;

}





/*=========================================
    READ MORE BUTTON
=========================================*/

.read-more-section{

    margin:10px 0 10px;

    text-align:center;

}

.read-more-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:7px 17px;

    text-decoration:none;

    font-size:1rem;

    font-weight:600;

    color:#ffffff;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    border-radius:50px;

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

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

}

.read-more-btn i{

    transition:transform .35s ease;

}

.read-more-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:left .6s ease;

}

.read-more-btn:hover{

    transform:translateY(-4px);

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

    background:linear-gradient(135deg,#1d4ed8,#0f62fe);

}

.read-more-btn:hover::before{

    left:100%;

}

.read-more-btn:hover i{

    transform:translateX(6px);

}

.read-more-btn:active{

    transform:translateY(-1px);

}

@media (max-width:768px){

    .read-more-btn{

        width:30%;

        justify-content:center;

        padding:7px 10px;

    }

}





/*=========================================================
    CONTENT DIVIDER
=========================================================*/

.content-divider{

    width:100%;

    height:1px;

    background:
        #dfe6f3;

    margin:
        25px 0;

}


/*=========================================================
    RESPONSIVE SEARCH BOX
=========================================================*/

@media (max-width:576px){

    .searchbox{

        padding:12px;

    }


    .searchbox form{

        flex-direction:column;

        align-items:stretch;

    }


    .searchbox input[type="text"]{

        width:100%;

    }


    .searchbox button{

        width:100%;

    }


    .links a{

        min-height:38px;

        padding:
            8px 10px;

    }

}

/*=========================================================
    VBLINK HR CONSULTANTS
    INDEX.CSS — PART 3

    MAIN CONTENT ONLY

    Contents:
        - Main content responsive layout
        - Tablet layout
        - Mobile layout
        - Small mobile layout
        - Image zoom
        - Image modal
        - Modal animation
        - Print styles
=========================================================*/


/*=========================================================
    LARGE TABLET / SMALL DESKTOP
=========================================================*/

@media (max-width:1100px){

    .content{

        gap:12px;

        padding:10px;

    }


    .left-column{

        flex:
            0 0 175px;

    }


    .right-column{

        flex:
            0 0 160px;

    }


    .content h1{

        font-size:30px;

    }


    .content h2{

        font-size:25px;

    }


    .content h3{

        font-size:21px;

    }


    .bodycopy{

        font-size:14px;

    }

}


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

@media (max-width:992px){

    /*
        The main page changes from three columns
        to a two-column layout.

        Left sidebar remains visible.
        Right sidebar moves below the main content.
    */

    .content{

        display:grid;

        grid-template-columns:
            180px minmax(0,1fr);

        gap:15px;

        align-items:start;

    }


    .left-column{

        grid-column:1;

        width:100%;

    }


    .middle-column{

        grid-column:2;

        width:100%;

    }


    .right-column{

        grid-column:
            1 / -1;

        width:100%;

        display:grid;

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

        gap:15px;

    }


    .right-column .card{

        margin-bottom:0;

    }


    .smfeature{

        margin-bottom:15px;

    }


    .smfeature h4{

        font-size:14px;

    }


    .smfeature p{

        font-size:12px;

    }


    .hero-image{

        margin-bottom:18px;

    }


    .bodycopy{

        line-height:1.75;

    }


    .middle-column blockquote{

        margin:
            20px 0;

        padding:
            15px;

    }

}


/*=========================================================
    TABLET — 768px
=========================================================*/

@media (max-width:768px){

    body{

        padding:10px;

    }


    .container{

        width:100%;

        border-radius:10px;

    }


    .content{

        display:block;

        padding:10px;

    }


    /*
        Main content first.
        Side columns follow it.
    */

    .middle-column{

        width:100%;

        margin-bottom:20px;

    }


    .left-column{

        width:100%;

        margin-bottom:20px;

    }


    .right-column{

        width:100%;

        display:grid;

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

        gap:15px;

    }


    .content h1{

        font-size:28px;

    }


    .content h2{

        font-size:24px;

    }


    .content h3{

        font-size:20px;

    }


    .content p{

        font-size:14px;

    }


    .bodycopy{

        font-size:14px;

        line-height:1.75;

    }


    .feature2{

        width:100px;

        height:100px;

    }


    .hero-image{

        width:100%;

        border-radius:9px;

    }


    .smfeature{

        margin-bottom:15px;

    }


    .searchbox{

        margin-bottom:15px;

    }

}


/*=========================================================
    MOBILE — 600px
=========================================================*/

@media (max-width:600px){

    body{

        padding:6px;

    }


    .container{

        border-radius:8px;

    }


    .content{

        padding:8px;

        gap:0;

    }


    .content h1{

        font-size:25px;

        line-height:1.3;

    }


    .content h2{

        font-size:22px;

        line-height:1.35;

    }


    .content h3{

        font-size:19px;

    }


    .content p{

        font-size:13.5px;

        line-height:1.7;

    }


    .bodycopy{

        font-size:13.5px;

        line-height:1.75;

        text-align:left;

    }


    /*
        Prevent floated images from becoming
        too large on mobile.
    */

    .feature2{

        width:90px;

        height:90px;

        margin-right:12px;

    }


    .smfeature img{

        width:58px;

        height:58px;

    }


    /*
        Right-column cards become a single
        vertical column.
    */

    .right-column{

        display:block;

    }


    .right-column .card{

        margin-bottom:15px;

    }


    .right-column .card:last-child{

        margin-bottom:0;

    }


    .middle-column table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }


    .middle-column blockquote{

        padding:
            14px;

        margin:
            18px 0;

        font-size:13px;

    }


    .middle-column ul,
    .middle-column ol{

        margin-left:20px;

    }


    .middle-column li{

        font-size:13px;

    }

}


/*=========================================================
    SMALL MOBILE — 480px
=========================================================*/

@media (max-width:480px){

    body{

        padding:4px;

    }


    .content{

        padding:6px;

    }


    .content h1{

        font-size:23px;

    }


    .content h2{

        font-size:21px;

    }


    .content h3{

        font-size:18px;

    }


    .content p{

        font-size:13px;

    }


    .bodycopy{

        font-size:13px;

        line-height:1.7;

    }


    .feature2{

        width:80px;

        height:80px;

        margin-right:10px;

    }


    .smfeature h4{

        padding:10px;

        font-size:13px;

    }


    .smfeature p{

        padding:12px;

        font-size:12px;

        line-height:1.6;

    }


    .searchbox{

        padding:10px;

    }


    .searchbox input[type="text"]{

        height:42px;

        font-size:13px;

    }


    .searchbox button{

        height:42px;

        font-size:13px;

    }


    .links h3{

        font-size:14px;

    }


    .links a{

        font-size:12.5px;

    }


    .right-column .card h3{

        font-size:14px;

    }


    .right-column .card p{

        font-size:12px;

    }

}


/*=========================================================
    EXTRA SMALL MOBILE — 360px
=========================================================*/

@media (max-width:360px){

    body{

        padding:2px;

    }


    .content{

        padding:5px;

    }


    .content h1{

        font-size:21px;

    }


    .content h2{

        font-size:19px;

    }


    .content h3{

        font-size:17px;

    }


    .content p{

        font-size:12.5px;

    }


    .bodycopy{

        font-size:12.5px;

    }


    .feature2{

        float:none;

        width:100%;

        height:auto;

        margin:
            0 0 12px 0;

    }


    .smfeature img{

        width:52px;

        height:52px;

    }


    .middle-column table{

        font-size:11px;

    }


    .middle-column th,
    .middle-column td{

        padding:
            8px;

    }

}


/*=========================================================
    IMAGE ZOOM
=========================================================*/

.zoom-image{

    cursor:
        zoom-in;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


/*=========================================================
    IMAGE ZOOM HOVER
=========================================================*/

.zoom-image:hover{

    transform:
        scale(1.02);

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

}


/*=========================================================
    IMAGE MODAL
=========================================================*/

.image-modal{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    display:none;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:
        rgba(0,0,0,.88);

    z-index:99999;

}


/*=========================================================
    MODAL ACTIVE STATE
=========================================================*/

.image-modal.active{

    display:flex;

}


/*=========================================================
    MODAL IMAGE
=========================================================*/

.modal-image{

    display:block;

    max-width:
        min(95vw,1200px);

    max-height:
        90vh;

    width:auto;

    height:auto;

    object-fit:contain;

    border-radius:8px;

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

    animation:
        modalImageIn
        .35s
        ease;

}


/*=========================================================
    MODAL IMAGE ANIMATION
=========================================================*/

@keyframes modalImageIn{

    from{

        opacity:0;

        transform:
            scale(.85);

    }


    to{

        opacity:1;

        transform:
            scale(1);

    }

}


/*=========================================================
    MODAL CLOSE BUTTON
=========================================================*/

.close-image{

    position:absolute;

    top:20px;

    right:25px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

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

    color:
        #ffffff;

    font-size:28px;

    line-height:1;

    cursor:pointer;

    transition:
        .3s ease;

    z-index:2;

}


/*=========================================================
    MODAL CLOSE HOVER
=========================================================*/

.close-image:hover{

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

    transform:
        rotate(90deg);

}


/*=========================================================
    MODAL CLOSE ACTIVE
=========================================================*/

.close-image:active{

    transform:
        rotate(90deg)
        scale(.95);

}


/*=========================================================
    MODAL BACKDROP INTERACTION
=========================================================*/

.image-modal{

    cursor:
        zoom-out;

}


.image-modal .modal-image{

    cursor:
        default;

}


/*=========================================================
    PRINT STYLES
=========================================================*/

@media print{

    /*
        Remove screen-only page decoration.
    */

    body{

        padding:0;

        background:#ffffff;

        color:#000000;

    }


    .container{

        width:100%;

        max-width:none;

        margin:0;

        box-shadow:none;

        border-radius:0;

    }


    /*
        Main content becomes a normal
        printable document.
    */

    .content{

        display:block;

        padding:0;

    }


    .left-column,
    .right-column{

        width:100%;

        margin-bottom:20px;

    }


    .middle-column{

        width:100%;

    }


    /*
        Remove interactive effects.
    */

    .zoom-image{

        cursor:default;

    }


    .zoom-image:hover{

        transform:none;

        box-shadow:none;

    }


    .searchbox{

        box-shadow:none;

        border:
            1px solid #cccccc;

    }


    .links{

        box-shadow:none;

        border:
            1px solid #cccccc;

    }


    .smfeature{

        box-shadow:none;

        break-inside:avoid;

    }


    .right-column .card{

        box-shadow:none;

        break-inside:avoid;

    }


    /*
        Modal must never print.
    */

    .image-modal{

        display:none !important;

    }


    /*
        Avoid breaking important content
        across pages.
    */

    .middle-column blockquote,
    .content-callout,
    .info-box{

        break-inside:avoid;

    }


    /*
        Make links visible in print.
    */

    .middle-column a{

        color:#000000;

        text-decoration:underline;

    }

}


/*=========================================================
    END OF INDEX.CSS
=========================================================*/