html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{ margin:0; padding:0; border:0; font-weight:normal; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline}
*{ box-sizing: border-box; }
body{ line-height:1.5; font-size:10px; font-family:Arial,Helvetica,sans-serif; background:#fff; color:#333; overflow-x:hidden; }
a{ text-decoration:none; color:#939598; font-weight:bold; transition: color 0.3s; }
a:hover{ color:#000; text-decoration:underline }
em{ font-style:italic }

.main-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
}

/* Desktop styles - Fixed width and Offset */
@media (min-width: 1025px) {
    .main-container {
        width: 990px;
        margin: 130px 0 0 250px;
        padding: 0;
        background: #fff url('../../assets/images/body_bg.gif') -75px 0 repeat-y;
    }
}

.clear{ clear:both; font-size:.1em }
.noborder{ border:none !important }

.col1, .col2, .col3 {
    padding: 10px;
}

/* Desktop Column Widths */
@media (min-width: 1025px) {
    .col1 { width: 190px; flex-shrink: 0; padding: 0 20px 0 0; }
    .col2 { width: 190px; flex-shrink: 0; position: relative; padding: 0 20px 0 0; }
    .col3 { width: 550px; flex-shrink: 0; padding: 0; }
}

/* Fluid / Mobile Column Widths */
@media (max-width: 1024px) {
    .col1 { width: 210px; flex-shrink: 0; }
    .col2 { width: 230px; flex-shrink: 0; position: relative; }
    .col3 { flex: 1; min-width: 0; }
}

.hdr { margin-bottom: 20px; }
.hdr .today, .hdr .letters { margin-left: 0; }

.col1 img.shdesc { width: 100%; height: auto; margin-bottom: 33px; }

.col3 .today, .col3 .letters a, .col2 .craft, div.showcase ul li, div#shpaging a, div#nwpaging a, .col3 h2, .col3 h3, .col3 h3 a, .col3 div#news a.read, .col3 table td, .col3 table td a { color:#939598 !important }
div#shpaging a:hover, div#shpaging a.act, div#nwpaging a:hover, div#nwpaging a.act { color:#6c6d72 }

.col1 ul, .col2 ul { width: 100%; border-top:1px solid #c9c9c9; list-style: none; }
.col1 ul li, .col2 ul li { border-bottom:1px solid #c9c9c9; line-height: 1.2; }
.col1 ul li a, .col2 ul li a { color:#93949c; font-size: 11px; font-weight: normal; display: block; padding: 6px 0 5px 0; text-decoration: none; border-bottom: 1px solid transparent; }
.col3 ul li a, .col3 td a { font-weight: normal; }
.col3 ul li a:hover, .col3 td a:hover { text-decoration: none; }
.col1 ul li a:hover, .col1 ul li a.act, .col2 ul li a:hover, .col2 ul li a.act, .col3 .shc_detail, .col3 table td a:hover { color:#333 !important }
.col1 ul li a.act, .col1 ul li a:hover, .col2 ul.menu li a.act, .col2 ul.menu li a:hover { border-bottom: 1px solid #000; }

.col1 ul li.bda { height: auto; min-height: 25px; }
.col1 ul li.bda a { padding: 0; display: flex; align-items: center; }
.col1 ul li.bda img { margin-top: 6px; max-width: 80%; }

.pt252 { padding-top: 10px; } /* Minimized padding to align with column 1 top */
@media (max-width: 1024px) {
    .pt252 { padding-top: 20px; }
}

p.craft { padding: 0; margin: 0 0 12px 0; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; border-bottom: 2px solid #6c6d72; overflow: hidden; width: 100%; }

.col2 h2 { color:#3b3a3f; font-size: 24px; }
.col2 h2 img { margin-bottom: 23px; max-width: 100%; height: auto; }

div.featured { height: auto; border-bottom: 2px solid #6c6d72; overflow: hidden; padding-bottom: 15px; }
div.featured div { margin-bottom: 10px; }
div.featured a { color:#93949c; font-size: 11px; display: flex; align-items: center; }
div.featured a span { margin-left: 5px; }
div.featured img { max-width: 30px; }

.col2 h2.showcase { padding: 10px 0; border-bottom: 1px solid #c9c9c9; }
div.showcase { position: relative; }
div.showcase img { max-width: 100%; height: auto; }

div.showcase ul { padding: 14px 0; border-bottom: 1px solid #c9c9c9; }
div.showcase ul li { border: none; font-size: 11px; }

div#shpaging, div#nwpaging { margin-top: 10px; display: flex; flex-wrap: wrap; }
div#shpaging a, div#nwpaging a { font-size: 11px; margin-right: 15px; }

.col3 h2 { font-weight: bold; font-size: 22px; padding-top: 2px; }
.col3 #news .today { border: none; padding: 12px 0 0 0; }
.col3 .letters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 15px; }
.col3 .letters a, .col3 .letters span { font-size: 12px; }

.col3 div#news div { padding-bottom: 10px; overflow: hidden; border-bottom: 1px solid #c9c9c9; }
.col3 div#news, .col3 div#newscontent, .col3 .expertise, .col3 .career, .col3 .contact { border-top: 1px solid #c9c9c9; margin-top: 20px; }

.col3 div#news h3 a, .col3 div#newscontent h3 { font-size: 20px; font-weight: normal; }
.col3 div#news div div.content { width: 100%; font-size: 11px; }

.col3 .expertise div, .col3 .career div, .col3 .contact div { width: 100%; font-size: 11px; color:#6d6e70; text-align: justify; }

.col3 table { width: 100%; }
.col3 table td { padding: 8px 4px; border-top: 1px solid #c9c9c9; font-size: 11px; }

.icons { display: flex; gap: 10px; margin-top: 20px; }
.icons img { width: 24px; height: auto; }

/* Responsive Media Queries Addition */

@media (max-width: 1024px) {
    .main-container {
        background: #fff; 
    }
    .col1 { width: 100%; order: 1; border-bottom: 2px solid #6c6d72; padding-bottom: 20px; }
    .col2 { width: 100%; order: 3; margin-top: 30px; }
    .col3 { width: 100%; order: 2; margin-top: 20px; }
}

@media (max-width: 768px) {
    .main-container {
        margin: 10px auto;
        padding: 0 10px;
    }
    .col1, .col2, .col3 {
        width: 100% !important;
        flex: none !important;
    }
    .col3 h2, .col3 h3 { font-size: 18px; }
    .col3 table td { display: block; width: 100% !important; border: none; border-bottom: 1px solid #eee; }
    .icons { justify-content: center; }
    .col1 img.shdesc { max-width: 250px; margin: 0 auto; display: block; }
}