﻿

html {
    scroll-behavior: smooth;
}

body   
{
    background: #F9F9F9;
    font-size: 1.0em;
    line-height:1.5em;
    font-family: 'Droid Sans', 'Lato', 'Helvetica', 'Arial', sans-serif;
    font-style:normal;
    margin: 0px;
    padding: 0px;
    color: rgb(19 , 19, 19);
    -webkit-font-smoothing:antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* HEADINGS   
----------------------------------------------------------*/


h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    /*color: #0B0B3B;*/
    text-transform: none;
    font-weight: 500;
    margin-bottom: 0px;
}

.silvergradient {
    background: linear-gradient(0deg, #333 0%, #aaa 50%, #333 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;

}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    /*font-weight: 600;*/
    color:#1C273A;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/
.page
{
    display:block;
    /*max-width: 1024px;*/
    min-width: 480px;
    background-color: #f9f9f9;
    margin: 20px auto 0px auto;
    flex: 1;
}

p {
    color:#1C273A;
}

.headerpanel {
    width:100%;
    background-color:#fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
}

.header
{
    display:block;
    margin:auto;
    width:100%;
    max-width:1170px;
}
.header table
{
    width:100%;
}

.header td
{

}

.logotext
{
    color:#161c21;
    /*font-variant:small-caps;*/
    font-size:0.75em;
    line-height:1.5em;
    text-transform:uppercase;

}

img.logo
{
    border-radius:8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

img.logo:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    margin-bottom: -0.6em;
    padding: 0px;
    color: #0B0B3B;
    border: none;
    line-height: 2em;
    font-size: 5em;
}

.main
{
    display:block;
    padding: 0px 10px;
    margin: 12px 8px 8px 8px;
    max-width:800px;
    overflow:visible;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.nefooterpanel {
    background-color:#3f4944;
    min-height:120px;
    width:100%;
    margin-top: auto;
    display: flex;
    align-items: center;
}

.nefooter
{
    display:block;
    color: #bfbeb2;
    padding: 30px 20px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
    width: 100%;
    max-width: 1200px;
}
.loginDisplay
{
    font-size: 1.1em;
    float:right;
    text-align: right;
    padding: 10px;
    color: white;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}
.contact
{
    text-align:center;
}
.failureNotification
{
    color:Red;
}

.alignleft
{
    float:left;
}
.alignright
{
    float:right;   
}
.aligncenter
{
    display:block;
    margin:auto;
    position:relative;
}
.clear
{
    clear:both;
    margin:auto;
}

.fullwidth {
    display: block;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

.fullwidth:before, .fullwidth:after {
    /*content: "";
    background: black;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9999px;
    border-left: 9999px solid black;
    box-shadow: 9999px 0 0 black;*/
} 
.fullwidth:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9999px;
    right: 0;
    border-left: 9999px solid black;
    box-shadow: 9999px 0 0 black;
}
.fullwidth:after {
  left: 100%;
}

div.imgcap {
  margin: 0.5em;
  padding: 0.5em;
}
div.imgcap p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

div.textimage
{
    position:relative;
    width:100%;
}

div.textimage img 
{
    position:relative;
    width:800px;
    height:600px;
}
div.textimage div
{
    position:absolute;
    top:55px;
    left:80px;
    width:640px;
}

div.datatextimage
{
    position:relative;
    width:100%;
    text-align:center;
    max-width:800px;
}

div.datatextimage img 
{
    position:relative;
    width:150px;
    height:150px;
    opacity:.8;
    text-align:center;
}
div.datatextimage div
{
    position:absolute;
    top:60px;
    width:700px;
}

div.datatextimage h2
{
    color:#1c273a;
    font-family:'Lato', 'Helvetica', 'Arial', sans-serif;
}


.thinborder 
{
    border: thin silver solid;
}

.emphblue
{
    font-family:Lato;
    color:#3d96a4;
}


li
{
    padding:5px 5px 5px 3px;
}

.icons img {

}

.icons img:hover {
    background-color:#FFF;
}

.selected {
    background-color:#AAA;
}

.datasection {
    text-align: center; 
    font-family:'Lato', 'Helvetica', 'Arial', sans-serif;  
    font-weight: 600; 
    line-height: 1.6em; 
    color:#000;
}

.datasection h2 { 
    font-size: 1.8em; 
}


/* TAB MENU   
---------------------------------------------------------- */

div.hideSkiplink
{
    width:100%;
}

.menu
{
    list-style: none;
    /*margin-left:0px;
    margin-right:0px;*/
    margin:auto;
}

.menucap
{
    margin-left:0px;
    margin-right:0px;
    height: 1px;
    background-color: #d1d1cd;
}

.menu table
{
    /*margin:auto;*/
    margin-left:0px;
    margin-right:0px;
}

.menu a, .menu a:visited, .ButtonLink
{
    font-family:'Lato';
    color: #606e67;
    display: block;
    /*line-height: 1.35em;*/
    font-size:1.0em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    /*text-transform:uppercase;*/
    font-variant:normal;
    transition: all 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
}


.menu td a:hover, .ButtonLink:hover
{
    color: #c98344;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.menu a:active, .ButtonLink:active
{
    color: #c98344;
}
.menu table > table:last-child {
    background:#000;
}

.selecteditem a, .selecteditem a:visited
{
    color: #c98344;
}

.menudropdown td {
    border:1px solid #000;
}

.menudropdown td a, .menudropdown td a:visited {
    font-size:1.0em;
    width:200px;
    background-color:#212122;
    color:#ccc;
}

.menudropdown td a:hover {
    background-color:#000;
    color:#fff;
}

/*.menu a:last-child {
     background-color: #288b9a; 
     color: #fff;
}*/

#ctl00_NavigationnMenun4 a {
     background-color: #288b9a; 
     color: #fff;
     padding:0px 4px;
     margin-left:20px;
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#ctl00_NavigationnMenun4 a:hover {
    background:#368591;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.ButtonLink {
    font-size:0.8em;
    transition: all 0.3s ease;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.ButtonLink:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.ButtonLink:hover:before {
    left: 100%;
}

.ButtonLink:hover {
    background:#368591;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

#contactbutton:hover {
    font-weight:normal;
}


/* Teleform  
----------------------------------------------------------*/
.tmenu
{
    float:left;
    margin:10px 10px 10px 10px;
    list-style: none;
}

.tmenu table
{
    
}

.tmenu a, .tmenu a:visited
{
    border: thin #1F1F21 solid;
    border-radius:5px;
    background-color: #D0D8FB;
    color: #070D2A;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

.tmenu td a:hover
{
    background-color: #5B77F6;
    color: #070D2A;
    text-decoration: none;
}

.tmenu a:active
{
    background-color: #D0FAFB;
    color: #2A2B2B;
    text-decoration: none;
}

.tselecteditem a, .tselecteditem a:visited
{
    background-color: #070D2A;
    color: #D0D8FB;
    text-decoration: none;
}

.teleformcontent
{ 
    max-width:1024px;
}

.teleformcontent p
{
}

.teleformcontent .imgcap, .teleformcontent .imgcap img
{
    width:420px;
}

.teleformtable
{
    background-color:#292929;
    border:thick #292929 silver;
}
.teleformtable td
{
    text-align:center;
    width:33%;
    border:thick #292929 silver;
    background-color:#FFF;
}


/* GALLERY  
----------------------------------------------------------*/
.gallery
{
    float:left;
    width:300px;
}
.textblock
{
    display:block;
    max-width:600px;
    margin:auto;
    padding:20px;
    color:#1C273A;
    background: rgba(255,255,255,0.8);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.textblock b {
    font-family:'Lato', 'Helvetica', 'Arial', sans-serif;
    font-weight: 600;
}

.graybox
{
    background-color:#EEE;
    max-width:350px;
    margin:10px;
    padding:10px;
    border:3px solid #DDD;
    border-radius:6px;
    box-shadow: 2px 2px 3px 3px #666;
    -webkit-box-shadow: 2px 2px 3px 3px #666;
}


.col {
    display:inline-block;
    vertical-align:top;
}

.blurb1 {
    width: 31%;
    list-style: circle;
    padding: 10px;
    height:100%;
    margin:0px;
    width: 100%;
    border-bottom:solid 3px #999999;


    /* IE10 Consumer Preview */ 
    background-image: -ms-radial-gradient(center, circle farthest-corner, #B2B2B2 50%, #bfbfbf 100%);
    /* Mozilla Firefox */ 
    background-image: -moz-radial-gradient(center, circle farthest-corner, #B2B2B2 50%, #bfbfbf 100%);
    /* Opera */ 
    background-image: -o-radial-gradient(center, circle farthest-corner, #B2B2B2 50%, #bfbfbf 100%);
    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0.5, #B2B2B2), color-stop(1, #bfbfbf));
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #B2B2B2 50%, #bfbfbf 100%);
    /* W3C Markup, IE10 Release Preview */ 
    background-image: radial-gradient(circle farthest-corner at center, #B2B2B2 50%, #bfbfbf 100%);

    background:#3d63a4;
    color:white;
    
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateZ(0);
    will-change: transform;
}

.blurb1:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Staggered animation for blurb appearance */
.blurb1:nth-child(1) { animation-delay: 0.1s; }
.blurb1:nth-child(2) { animation-delay: 0.2s; }
.blurb1:nth-child(3) { animation-delay: 0.3s; }

.blurb1 li {
    font-size:0.7em;
    line-height:1.3;
}

.blurbcontainer {
    margin:auto;
    max-width:1200px;
    display:block;
    color:#1C273A;
    padding: 0 20px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #f9f9f9 0%, #f5f5f5 100%);
    border-radius: 8px 8px 0 0;
}

.blurbcontainer ul {
}

.blurbcontainer li {
    display:inline;
    max-width:400px;
    margin:5px;
}
.blurbcontainer div {
    padding:15px;
    margin:auto;
    box-sizing:border-box;
    display:inline-block;
}
.blurb {
    list-style:circle;
    height:450px;
    color:#e2e4e7;
}

.blurb ul {
    list-style:circle;
    padding-left:15px;
    font-weight:200;
    line-height:1.4;
}

.blurb1 h2 {
    text-align:center;
    /*font-weight:300;*/
    font-family:Lato;
    font-size:1.8em;
    margin-top:3px;
    color:white;
}

.blurb1 ul {
    margin-top:-1px;
}

.blurb1 li {
    padding-left:0px;
    padding-top:10px;
    list-style:circle;
    display:block;
    font-family:Lato;
    /*font-weight:200;*/
    max-width:90%;
    font-size:1.1em;
}

.horizontallist {
    padding:0px;
    margin:0px;
    display: inline; 
    list-style: none;
}
.horizontallist li {
    display:table-cell;
}

.verticallist {
}
.verticallist li {
    display:list-item;
}

.listdot {
    list-style:disc;
}

.textblock li {
    padding-bottom:16px;
}

.shadow
{
    box-shadow:  0px 0px 2px 4px #AAA;
    -webkit-box-shadow: 0px 0px 2px 4px #AAA;
}

.grayfade {
     background:-webkit-linear-gradient(bottom, #e1e1e1 0%, #fff 100%);
     background:-ms-webkit-linear-gradient(bottom, #e1e1e1 0%, #fff 100%);
     background:-o-webkit-linear-gradient(bottom, #e1e1e1 0%, #fff 100%);
     background:-moz-webkit-linear-gradient(bottom, #e1e1e1 0%, #fff 100%);
}

.banner { position: relative; overflow: auto; }
    .banner li { list-style: none; }
        .banner ul li { float: left; }

.bannerbg {
    background-color: #DDD; 
    background-image:url(../Resources/Default_Banner.png);
    background-size: 110%; /* Slightly larger for panning room */
    background-position: center;
    background-repeat:no-repeat;
    position: relative;
    overflow: hidden;
    animation: forestPanZoom 20s ease-in-out infinite;
}

.bannerbg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(61, 150, 164, 0.1) 0%, rgba(0,0,0,0.05) 100%);
    pointer-events: none;
}

/* Subtle forest background animation */
@keyframes forestPanZoom {
    0% {
        background-size: 110%;
        background-position: 50% 50%;
    }
    25% {
        background-size: 115%;
        background-position: 55% 45%; /* More noticeable pan right-up */
    }
    50% {
        background-size: 118%;
        background-position: 45% 55%; /* Pan left-down */
    }
    75% {
        background-size: 115%;
        background-position: 53% 47%; /* Pan right-up again */
    }
    100% {
        background-size: 110%;
        background-position: 50% 50%; /* Back to center */
    }
}

/* Pause animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bannerbg {
        animation: none;
        background-size: cover;
        background-position: center;
    }
}

.modalbackground
    {
        background-color: Black;
        filter: alpha(opacity=90);
        opacity: 0.8;
    }

.modalpanel {
        background-color: #FFFFFF;
        border-width: 3px;
        border-style: solid;
        border-color: black;
        padding:40px 40px;

}

.pageicon {
    display:block;
    width:70px;
    margin:20px auto;
}

/* Lightbox!  
-----------------------------------------------------------------*/

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

/* Sliders  
----------------------------------------------------------*/
        /* jssor slider bullet navigator skin 03 css */
        /*
            .jssorb03 div           (normal)
            .jssorb03 div:hover     (normal mouseover)
            .jssorb03 .av           (active)
            .jssorb03 .av:hover     (active mouseover)
            .jssorb03 .dn           (mousedown)
            */
        .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
            background: url(resources/bannerbutbg.html) no-repeat;
            overflow: hidden;
            cursor: pointer;
        }

        .jssorb03 div {
            background-position: -5px -4px;
        }

            .jssorb03 div:hover, .jssorb03 .av:hover {
                background-position: -35px -4px;
            }

        .jssorb03 .av {
            background-position: -95px -4px;
        }

        .jssorb03 .dn, .jssorb03 .dn:hover {
            background-position: -65px -4px;
        }
        /* Caption Style*/
        .captionOrange, .captionBlack {
            color: #fff;
            font-size: 20px;
            text-align: left;
            border-radius: 4px;
            position: absolute;
            right: 0px;
            bottom: 0px;
            width: 600px;
            height: 50px;
            padding:5px;
        }

        .captionOrange {
            background: #EB5100;
            background-color: rgba(235, 81, 0, 0.6);
        }

        .captionBlack {
            font-size: 1.2em;
            background: #000;
            background-color: rgba(0, 0, 0, 0.7);
        }

        a.captionOrange, A.captionOrange:active, A.captionOrange:visited {
            color: #ffffff;
            text-decoration: none;
        }

            a.captionOrange:hover {
                color: #eb5100;
                text-decoration: underline;
                background-color: #eeeeee;
                background-color: rgba(238, 238, 238, 0.7);
            }

        .captionBlack li {
            padding-bottom:15px;
        }

        .bricon {
            background: url(../img/browser-icons.html);
        }
.captionFull {
    background-color:rgba(0,0,0,0.0);
    /*right: 0px;
    bottom: 0px;
    width: 600px;
    height: 480px;
    padding:5px;*/
    margin:auto;
    height:480px;
    color:#fff;
    font-size:1.6em;
    line-height:1.6em;
    text-align:center;
    vertical-align:middle;
}

.captionFull a {
    color:#fff;
    text-decoration:none;
}

.captionFull li {
    max-width:100%;
    text-align:left;
    font-size:0.9em;
    line-height:1.2em;
    padding-bottom:10px;
}

.emph {
    font-family:'Lato', 'Helvetica', 'Arial', sans-serif; 
    font-size:1.1em; 
    font-weight:bold;
}

/* Modern Form Styling */
input, textarea, select {
    transition: all 0.3s ease;
    border-radius: 4px;
}

input:focus, textarea:focus, select:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(61, 150, 164, 0.2);
    outline: none;
}

/* Scroll-Based Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Performance Optimizations */
.menu a, .blurb1, .ButtonLink {
    will-change: transform;
    backface-visibility: hidden;
}

/* Accessibility: Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Modern visual enhancements */
.pageicon {
    display:block;
    width:70px;
    margin:20px auto;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.pageicon:hover {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* Enhanced content spacing */
.main {
    padding: 20px;
    background: rgba(255,255,255,0.7);
    border-radius: 12px;
    margin: 20px auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
}

/* Remove background styling from main div on Markets page */
#top.main.aligncenter {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    margin: 0 auto !important;
}

/* Improved typography hierarchy */
h1, h2, h3, h4, h5, h6 {
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Loading state styles */
.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Products page transitions */
.description {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
}

.description.active {
    opacity: 1;
    transform: translateX(0);
    display: block !important;
}

.description.fade-out {
    opacity: 0;
    transform: translateX(-20px);
}

/* Menu button active states */
.menuleft h1.active,
.menuleft h2.active {
    background: linear-gradient(135deg, #007acc, #005fa3) !important;
    color: white !important;
    border-radius: 5px;
    padding: 8px 12px;
    transition: all 0.3s ease;
    transform: scale(1.02);
}

/* Hide camera loader element that appears as white oval */
.camera_loader {
    display: none !important;
}

/* Hide all camera-related elements that might be causing white oval */
.camera_wrap,
.camera_fakehover,
.camera_target,
.camera_overlayer,
.camera_target_content,
.camera_bar,
.camera_nav_cont,
.camera_caption,
.camera_prevThumbs,
.camera_nextThumbs,
.camera_command_wrap,
.camera_prev,
.camera_next,
.camera_commands {
    display: none !important;
}

/* Fix for uniform blue box heights on index page */
.blurb-container {
    display: flex;
    align-items: stretch; /* Make all children same height */
    gap: 20px;
    flex-wrap: nowrap; /* Prevent wrapping */
    justify-content: space-between;
    margin: 20px auto;
    max-width: 1200px; /* Control overall width */
}

.blurb1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 550px; /* Increased height to reduce scrolling */
    flex: 1 1 0; /* Equal flex basis for all boxes */
    min-width: 280px; /* Smaller minimum width */
    max-width: 380px; /* Prevent boxes from getting too wide */
    padding: 25px;
    box-sizing: border-box;
    overflow: hidden; /* Prevent content from breaking layout */
}

/* Ensure content distribution within each box */
.blurb1 h2 {
    margin-bottom: 20px;
    flex-shrink: 0;
    font-size: 1.6em; /* Reduced from 1.8em */
    line-height: 1.1; /* Tighter line height */
    height: 55px; /* Slightly reduced header height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.blurb1 .verticallist {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: calc(100% - 75px); /* Adjusted for smaller header */
    overflow-y: auto; /* Allow scrolling if content is still too long */
    padding-right: 10px; /* Add space for potential scrollbar */
    font-size: 0.85em; /* Further reduced font size */
}

.blurb1 .verticallist li {
    margin-bottom: 10px; /* Further reduced from 12px */
    line-height: 1.25; /* Even tighter line height */
    letter-spacing: -0.015em; /* Slightly more negative letter spacing */
}

/* Responsive behavior for smaller screens */
@media (max-width: 1024px) {
    .blurb-container {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .blurb1 {
        min-width: 300px;
        max-width: 450px;
        height: auto; /* Allow auto height on mobile */
        min-height: 400px;
    }
}
