html, body, div, h1, h2, h3, h4, h5, h6, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, input, figure{margin:0; padding:0;} a {color:#990000; cursor:pointer; outline:none;} a:link, a:visited {color:#990000; cursor:pointer;} a:hover, a:active {color:#666; cursor:pointer;} body,html{width:100%; height:100%;} body{width:100%; height:100%; /*min-width:990px;*/ font-family:'Lato', sans-serif; font-size:14px; font-weight:300; color:#666; background:#fff} img{border:none} ul,ol{padding:0 0 0 35px; margin:0; text-align:left} button{ border:none} input, select, textarea{font-family:'Lato', sans-serif; font-weight:400; font-size:100%; resize:none} .hide{display:none} hr{ width:100%; height:1px; border:none} .button,a.button{ padding:10px 20px; display:inline-block; color:#FFF; text-decoration:none; background:#990000; transition:all 0.3s ease} .button:hover,a.button:hover{ background:#f0f0f0; color:#000} .lazy{ background:url(../images/loader.gif) no-repeat center #fff} #header{ width:100%; position:relative; } #menu_wrap{height:80px; margin:auto; background:#FFF} .menu_wrap_div{width:950px; margin:auto} #mobile_nav{display:none} nav#main_menu{height:80px; position:relative; z-index:1} #menu{list-style:none; padding:0;} #menu > li{ float:left; position:relative} #menu > li div{ width:20px; height:20px; text-align:center; position:absolute; top:50px; left:50%; margin-left:-10px;} #menu > li a{line-height:20px; padding:30px 15px; text-decoration:none; color:#666; font-weight:300; font-size:18px; display:block; transition:all 0.3s ease} #menu > li.active > a{color:#fff; background:#990000} #menu > li.active > div{color:#fff;} #menu > li ul{background:#FFF; position:absolute; top:80px; left:0; display:none; list-style:none; padding:0;} #menu > li li{position:relative} #menu > li li div{top:50%; left:auto; right:10px; margin-top:-10px;} #menu > li li a{width:150px; padding:15px 30px 15px 20px; font-size:16px; border-bottom:1px solid #ddd} #menu > li li.active > a{color:#fff; background:#990000} #menu > li li.active > div{color:#fff;} #menu > li li ul{top:0; left:95%; box-shadow:0 0 5px #000; z-index:1} .logo_mobile{ display:none;} #social{list-style:none; padding:0; float:right; } #social li{float:left; } #social a{line-height:20px; color:#999; padding:25px 10px 0 0; display:block; transition:all 0.3s ease} #social a:hover{ color:#990000} .imageOuter{min-width:950px; overflow:hidden; margin:auto; position:relative; z-index:0; background: url(../images/background.png); border-bottom:5px solid #ddd; border-top:5px solid #ddd; } .imageInner{width:950px; height:420px; background:url(../images/loader.gif) #fff center no-repeat; position:relative; margin:auto} #banner{width:1200px; height:420px; position:absolute; top:0; left:50%; margin-left:-600px; z-index:0} #banner .logo{width:200px; height:250px; top:50%; left:50%; margin:-125px 0 0 -100px; position:absolute; z-index:1;} #banner .logo img{ display:block; margin-left: 350px;} #slideshow{width:1200px; height:420px; position:relative; overflow:hidden; z-index:0} #banner a.prev,#banner a.next{width:40px; height:40px; position:absolute; color:#fff; top:50%; margin:-20px 0 0 0; text-align:center; z-index:1; transition:all 0.3s ease} #banner .prev{left:110px; color:#999} #banner .prev:hover{color:#990000} #banner .next{right:110px; color:#999} #banner .next:hover{color:#990000} /* BREAD */ .module:after{clear:both; content:"."; display:block; height:0; visibility:hidden;} * html .module{height:1%; overflow:visible;} * + html .module{min-height:1%;} .bread_crumb{ width:950px; margin:auto; overflow:hidden; padding:10px 0;} .bread_crumb ol{margin:0; padding:0; height:20px; display:block;} .bread_crumb ol li{height:20px; line-height:20px; display:block; float:left; position:relative; overflow:hidden; margin:0px 6px 0px 0; padding:0px 10px 0px 0; font-size:90%; background:url(../images/chevron.gif) no-repeat 100% 0;} .bread_crumb ol li div.chevronOverlay{position:absolute; right:0; top:0; /*z-index:2*/;} .bread_crumb ol li span{display:block; overflow:hidden;} .bread_crumb ol li a{height:20px; line-height:20px; display:block; position:relative; overflow:hidden; float:left; color:#990000} .bread_crumb ol li.first a{width:15px; height:15px !important; text-indent:-1000em; padding:0; margin-top:2px; overflow:hidden; background:url(../images/icon_home.png) no-repeat 0 0;} .bread_crumb ol li.first a:hover{background-position:0 -20px;} .bread_crumb ol li.last{background:none; margin-right:0; padding-right:0;} .chevronOverlay{display:none; background:url(../images/chevron_overlay.png) no-repeat 100% 0; width:13px; height:20px;} /* BREAD */ h1{width:950px; margin:auto; padding:20px 0 15px 0; font-weight:300; font-size:40px; color:#990000; border-bottom:5px solid #990000; position:relative} .content{width:950px; padding:15px 0 30px 0; margin:auto; position:relative; overflow:hidden;} .content.two_col{-moz-column-count:2; -webkit-column-count:2; column-count:2; -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px;} .content.three_col{-moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-gap:30px; -webkit-column-gap:30px; column-gap:30px;} .content.seperate{ border-bottom:1px solid #CCC; padding:0 0 20px 0} .content section.business{ width:20%; float: left} .content h2,.content h3{padding:10px 0; margin:0 0 10px 0; font-weight:300;} .content h2{font-size:30px; border-bottom:2px solid #CCC; color:#666;} .content h3{font-size:20px; border-bottom:2px solid #990000; color:#990000;} .content > p,.content > div p{line-height:23px; padding:5px 0; font-weight:400;} .content ol,.content ul{line-height:23px; padding:5px 0 5px 30px; font-weight:400;} .content blockquote{background:#f0f0f0; font-size:110%; font-style:italic; padding:10px 20px; margin-bottom:20px; quotes:"\201C""\201D""\2018""\2019"; line-height:25px} .content blockquote:before{color:#666; content:open-quote; font-size:50px; line-height:10px; margin-right:5px; vertical-align:-.4em;} .content blockquote:after{color:#666; content:close-quote; font-size:50px; line-height:10px; margin-left:5px; vertical-align:-.4em;} .content figure{ width:100%; margin:10px 0; padding:0; background:#FFF; text-align:center; display:block; position:relative} .content figure img{ width:100%; display:block} .content figcaption{ width:100%; font-size:14px; padding:5px; font-style:italic; background:rgba(255,255,255,0.5); color:#000; position:absolute; bottom:0; left:0;} .content aside.box{ display:table; margin:15px 0;} .content aside.box figure{width:455px; height:455px; background:#FFF; display:table-cell; padding:0; vertical-align:middle;} .content aside.box figure img{ display:inline-block;} .content .fa{ margin:0 5px;} .content hr { width:50%; background: #990000; margin:15px auto; } table.founding{border:10px solid #fff; margin-top:10px;} table.founding img{ width:100%; display:block} table.board{margin-top:10px;} table.board td{vertical-align:top; width:16%; padding:0 2%;} table.board h2{ font-size:120%; text-align:center} table.board p{ text-align:center; padding:0 0 5px 0; line-height:20px} table.board a{ font-size:80%;} table.board img{ width:100%; height:100%; display:block; margin:auto;} table.board table{ width:80%; margin:auto} table.board table td{ width:21%; padding:0 2%} table.structure1{ width:100%; margin:10px auto; border-collapse: collapse;} table.structure1 h2{text-align:center; } table.structure1 img{display:block; margin:auto; padding:10px 15%; background:#FFF;} table.structure1 h3{border:none; font-style:italic; line-height:20px} table.structure1 p{text-align:center; padding:10px 0} table.structure2{margin:10px 0; border-collapse: collapse;} table.structure2 tr:nth-child(even) td{border-bottom:1px solid #ddd} table.structure2 td{ width:21%; padding:0 2%; vertical-align:top; border:1px solid #CCC} table.structure2 h2{border:none; line-height:25px; margin:10px 0; font-size:120%} table.structure2 h3{border:none} table.structure2 p{line-height:23px; padding:0 0 0 20px; font-weight:400;} table.structure2 ol,table.structure2 ul{line-height:23px; padding:0 0 10px 20px; font-weight:400;} p.benefits{ overflow:hidden} p.benefits span{width:30px; height:30px; line-height:30px; margin:5px 10px 5px 0; text-align:center; float:left; color:#fff; background:#1e944a; font-size:80%; /*-moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;*/} p.benefits span.no{color:#fff; background:#9f1c22; } table.levels{border-collapse: collapse;} table.levels td{vertical-align:top; width:23%; padding:1%; background:#FFF; border:1px solid #ddd} table.levels h2,table.levels h3{border:none; padding:0; margin:0} table.levels h2{ font-size:120%; } table.levels img{ width:100%; height:100%; display:block; margin:auto;} table.levels p{line-height:23px; padding:5px 0; font-weight:400;} .news_heading{ position:relative} .news_date{font-size:18px; position:absolute; right:0; bottom:0; padding:30px 0 15px 0; } .news_description{ height:40px; overflow:hidden; position:relative; padding-bottom:10px; margin-bottom:20px;} .news_description a{ padding:10px; background:#990000; color:#FFF; text-decoration:none; float:right; margin-left:20px; transition:all 0.3s ease} .news_description a:hover{ background:#f0f0f0; color:#000} h1 .news_date{ font-size:25px; position:absolute; right:0; bottom:0; padding:30px 0 15px 0; } /* FOOTER */ #footer{height:600px; background:url(../images/background.png); padding:20px 20px 50px 20px; border-top:5px solid #ddd; position:relative} .footer_wrap{width:950px; margin:auto; background: url(../images/watermark.png) center top no-repeat} .footer_columns{width:300px; margin:0 5px; display:inline-block; vertical-align:top} #footer p{line-height:20px; font-size:85%; text-align:justify; font-weight:400; text-align:center} #footer a.email{color:#666} #footer h2,#footer h3{font-weight:300; text-align:center; color:#333} #footer h2{font-size:20px; padding:15px 0; margin:0 0 20px 0; border-bottom:2px solid #ddd; font-weight:300} #footer h3{font-size:18px; padding-bottom:10px;} #footer p{ color:#666; font-weight:300; font-size:14px; padding:3px 0} #footer hr{ width:50%; background: #990000; margin:15px auto; } #footer .feedback label{font-size:14px; color:#666} #footer .lazy{ background:none} #footer .logo{width:170px; height:210px; position:absolute; bottom:100px; left:50%; margin-left:-85px} .footer_columns ul{ list-style:none; padding:0; text-align:center} .footer_columns ul li a{ width:50%; font-size:18px; margin:auto; text-decoration:none; color:#666; display:inline-block; padding:10px 0; border-top:1px solid #990000} .footer_columns ul li a:hover{color:#990000} .footer_columns ul li:first-child a{ border:none; padding-top:0} .footer_columns ul li li a{width:30%; font-size:14px; border-top:1px solid #ddd; padding-bottom:10px; } /* MOSAIC */ #gallery_wrap{ width:100%; max-width:1765px; margin:15px auto 30px auto; position:relative; z-index:0} #gallery{ border:5px solid #f0f0f0; border-right:none; display:block; position:relative;} .box { background-color:#f0f0f0; overflow:hidden; -webkit-transition:all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -moz-transition:all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -ms-transition:all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); -o-transition:all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); transition:all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */ -webkit-transition-property:left, right, top; -moz-transition-property:left, right, top; -ms-transition-property:left, right, top; -o-transition-property:left, right, top; transition-property:left, right, top; } .box a,.box a img{display:block} .box a{ width:100%; height:100%; position:relative;} .box a img{position:absolute; top:50%; left:50%;} .size22 a img{width:569px; height:320px; margin:-160px 0 0 -285px} .size21 a img{width:320px; height:180px; margin:-90px 0 0 -160px} .size12 a img{width:569px; height:320px; margin:-160px 0 0 -285px} .size11 a img{width:276px; height:155px; margin:-77px 0 0 -138px} /* MOSAIC */ a.backToTop{ width:200px; padding:10px 0; background:#990000; text-align:center; font-weight:300; font-size:18px; position:fixed; bottom:0px; left:50%; margin-left:-100px; color:#fff; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease} a.backToTop:hover{ background:#ddd; color:#000; } @media (max-width:1600px) { body{ font-size:100%} #gallery_wrap{ max-width:1285px; } } @media (max-width:1366px) { body{ font-size:100%} #gallery_wrap{ max-width:965px; } } @media (max-width:990px) { body{ font-size:100%} #gallery_wrap{ max-width:645px; } } @media (max-width:640px) { body{ font-size:100%;} #gallery_wrap{ max-width:325px; } #menu_wrap{height:auto;} .menu_wrap_div{width:auto; margin:auto} #mobile_nav{height:20px; padding:15px; background:#f0f0f0; display:block} #mobile_nav a{font-size:25px; float:right; color:#999} #mobile_nav a:hover{ color:#990000} nav#main_menu{height:auto;} #menu{ display:none} #menu > li{float:none; padding:0 10px 0 10px; border-bottom:1px solid #ddd} #menu > li.active{background:#990000; padding-bottom:10px} #menu > li div{width:20px; height:20px; top:30px; right:50%; margin-left:-10px;} #menu > li a{padding:15px; font-size:18px; text-align:center} #menu > li ul{position:relative; top:auto; left:auto;} #menu > li li a{width:auto; padding:10px 30px 10px 20px; font-size:16px; border-bottom:1px solid #ddd} #menu > li li ul{top: auto; left: auto; box-shadow:none;} .logo_mobile{display:block; text-align:center} .logo_mobile img{ width:40%; display:block; margin:0 auto 20px auto} #social{float:none; text-align:center} #social li{float: none; display:inline-block} #social a{padding:10px;} .imageOuter{min-width:100%;} .imageInner{width:100%; height:auto;} #banner{width:100%; height:auto; position:relative; top: auto; left:auto; margin-left:0;} #banner .logo{display:none} #slideshow{ width:100%; height:auto} #slideshow img{ width:100%} #banner .prev{left:10px;} #banner .next{right:10px;} .bread_crumb{ width:92%; margin:0 4%;} h1{width:96%; margin:0 2%; padding:20px 0 15px 0; font-size:40px;} /*.content{width:92%; margin:0 4%; padding:15px 0 30px 0; } */ .content { width: 92%; margin: 0 auto; /* Simplified centering */ padding: 15px 0 30px 0; } .content.two_col{-moz-column-count:1; -webkit-column-count:1; column-count:1; -moz-column-gap:0; -webkit-column-gap:0; column-gap:0;} .content.three_col{-moz-column-count:1; -webkit-column-count:1; column-count:1; -moz-column-gap:0; -webkit-column-gap:0; column-gap:0;} .news_description{ height:auto; } .news_date{font-size:18px; position:relative; right:auto; bottom:auto; display:block; padding:0; } h1 .news_date{ font-size:25px; position:relative; right:auto; bottom:auto; display:block; padding:0; } #footer{height:auto; padding:0 0 50px 0;} .footer_wrap{width:96%; padding:0 2%;} .footer_columns{width:100%; margin:0} #footer .logo{ display:none} a.backToTop{width:100%; line-height:20px; padding:10px 0; font-size:14px; left:0; margin-left:0;} } /* STYLE:Forms label{ line-height:35px; display:block; padding-bottom:10px; overflow:hidden; position:relative;} input[type="text"],input[type="password"]{height:33px; padding:0 5px; border:1px solid #ddd;} input[type="submit"]{padding:10px 0; background:#990000; color:#fff; border:none; font-weight:300; margin:auto; cursor:pointer} input[type="submit"]:hover{ background:#ddd; color:#000} textarea{display:block; padding:1%; border:1px solid #ddd; line-height:20px; margin:auto} .feedback{ display:block; margin:auto; text-align:left} .feedback label{float: left;} .feedback input[type="email"],.feedback input[type="text"],.feedback input[type="password"],.feedback span{clear:right; display:block; margin-left:80px; width:55%;} .feedback input[type="submit"]{display:block;} .feedback input.security{ width:15%;} .feedback textarea{ width:96%; height:100px;} /* STYLE:Forms */ /* STANDARD STYLES */ #javaMessage{width:100%; height:100%; line-height:40px; background: url(../images/background.png); text-align:center; color:#333; position:absolute; top:0; left:0; z-index:100; display:none} #formMessage{width:100%; height:100%; position:fixed; top:0; left:0; background:url(../images/form_message.png); z-index:1000;} #formMessageBox{width:360px; height:260px; padding:140px 20px 0 20px; position:absolute; top:50%; left:50%; margin:-200px 0 0 -200px; background:url(../images/background.png); text-align:center; line-height:25px; -moz-border-radius:200px; -webkit-border-radius:200px; border-radius:200px 200px 200px 200px;} p.yesPar,p.noPar{color:#FFF; text-align:center; line-height:20px;} p.yesPar{background:#0C0; } p.noPar{background:#C00; } div.yesImg,div.noImg{width:20px; height:20px; margin:auto } div.yesImg{background:url(../images/message_ico.png) left no-repeat;} div.noImg{background:url(../images/message_ico.png) right no-repeat;} .intouch{height:20px; line-height:20px; position:fixed; right:0; bottom:0px; padding-right:20px; font-size:80%; color:#000; z-index:0} .intouch strong{ color:#cc9933} a.intouchBox{width:105px; height:75px; position:fixed; bottom:-75px; right:-105px; z-index:1; outline:none} /* Utility classes */ .vision-container { margin: 10px auto; } /* for the "vision"

on the homepage */ @media (min-width:500px) and (max-width: 900px) { .vision-container { width: 70%; } } @media (min-width:901px) { .vision-container { width: 60%; } } .text-center { text-align: center; } img.center { display: block; margin-left: auto; margin-right: auto; } .content_hr { width:50%; background: #990000; margin:15px auto; } .margin-top-none { margin-top: 0; } .margin-top-10 { margin-top: 10px; } .margin-top-20 { margin-top: 20px; } .margin-bottom-none { margin-bottom: 0; } .margin-bottom-10 { margin-bottom: 10px; } .margin-bottom-20 { margin-bottom: 20px; } .padding-bottom-none { padding-bottom: 0; } .padding-bottom-10 { padding-bottom: 10px; } .padding-bottom-20 { padding-bottom: 20px; } .clear-both { clear: both; } .buffer-vertical-10 { margin: 10px 0; } .values span { color: #990000; font-size: 150%; } /* Google maps */ #map_canvas { width: 900px; height: 400px; } .small-type { font-size: 11px; } .emphasis-italic { font-style: italic; text-decoration: underline; } .emphasis-bold-underline { font-weight: bold; text-decoration: underline; } .emphasis-underline { text-decoration: underline; } p.emphasis-bold { font-weight: bold; } span.emphasis-bold { font-weight: bold; } p.emphasis-center-bold { font-weight: bold; margin: 10px 0; text-align: center; } .emphasis-notice { font-size: 120%; font-weight: bold; margin: 15px 0; text-align: center; } div.vip-box { background-color: #FFE5E5; border: 2px solid #FF0000; font-weight: bold; /*margin: 10px auto;*/ padding: 8px; text-align: center; /* Required. This box is

nested inside a
, so without a width of its own it takes the outer .content width of 950px and then adds its own 8px padding and 2px border on top -- 970px inside a 950px parent. This stylesheet has no box-sizing:border-box, and .content sets overflow:hidden, so the extra 20px is clipped and the right-hand border vanishes. This line IS present in the stylesheet on the live server, but was commented out in the local working copy this refactor was built from. Restored to match production. */ width: 90%; } div.vip-box span { font-size: 120%; font-weight: bold; } div.notice-box { background-color: #FFF; border: 2px solid #333; font-weight: normal; margin: 20px auto 0; padding: 8px; text-align: center; } div.notice-box p { line-height: 1.5em; margin-top: 10px; margin-bottom: 10px; } div.notice-box span { font-size: 120%; font-weight: bold; } div.thanks-box { border: 2px solid #0C0; padding: 10px; } .contact-content{width:650px; padding:15px 0 30px 0; margin:auto; position:relative; overflow:hidden;} .form-group { margin-bottom: 15px; } label { font-size: 120%; display: inline-block; font-weight: 400; margin-bottom: 5px; } p.error, label.error { color: #F00; margin: 3px 0; } .form-control { background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; display: block; font-size: 14px; height: 34px; line-height: 1.42857; padding: 6px 12px; width: 100%; } textarea.form-control { height: auto; } div .button { margin: 0 15px 15px 0; } .button { display: inline-block; background-color: #f5f5f5; background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1); background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1); background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1); background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1); background-image: linear-gradient(top,#f5f5f5,#f1f1f1); color: #444; border: 1px solid #dcdcdc; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; cursor: default; font-size: 14px; font-weight: bold; text-align: center; height: 27px; line-height: 27px; min-width: 54px; padding: 4px 8px; text-decoration: none; } .button:hover { background-color: #F8F8F8; background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1); background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1); background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); background-image: linear-gradient(top,#f8f8f8,#f1f1f1); border: 1px solid #C6C6C6; color: #333; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0px 1px 1px rgba(0,0,0,.1); box-shadow: 0px 1px 1px rgba(0,0,0,.1); } .img-with-shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Adjust values as needed */ } .img-soft-shadow { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .img-large-shadow { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); } .img-multiple-shadows { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2); } strong { font-weight: bold; } /* New container styling for responsive layout */ .team-container { display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; /* Allows content to wrap on smaller screens */ gap: 20px; /* Adds space between divs */ } /* Card style for each team member */ .team-member { text-align: center; max-width: 240px; /* Limits the width of each card */ flex: 1 1 240px; /* Makes items responsive */ } /* Styling for images to make them responsive */ .team-member img { width: 100%; /* Make image responsive */ height: auto; /* Maintain aspect ratio */ max-width: 240px; /* Limit maximum width */ border: 2px solid #666; margin: 15px auto; /* Center image horizontally */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Image shadow for better aesthetics */ } /* Media query for tablets (max-width 1024px) */ @media (max-width: 1024px) { .team-container { justify-content: space-around; } } /* Media query for smaller screens (max-width 820px) to handle two items per row */ @media (max-width: 820px) { .team-container { flex-wrap: wrap; /* Ensure content wraps */ gap: 30px; /* Add more space between items for readability */ } .team-member { flex: 1 1 calc(50% - 40px); /* Two items per row with gap accounted for */ max-width: 100%; } } /* Media query for narrow screens (max-width 480px) to handle one item per row */ @media (max-width: 480px) { .team-container { flex-direction: column; /* Stack team members vertically */ align-items: center; /* Center items */ gap: 20px; /* Add space between cards */ } .team-member { flex: 1 1 100%; /* Full width for each item */ max-width: 100%; } } /* Media query for narrow screens (height <= 200px) */ @media (max-height: 200px) { .team-container { flex-direction: column; /* Stack items vertically to avoid overlap */ gap: 15px; /* Reduce gap for very small height screens */ } .team-member img { max-height: 150px; /* Reduce image height to avoid obscuring content */ } .team-member { max-width: 200px; /* Reduce overall card width to fit the viewport */ } } /* ============================================================================= * ADDED DURING THE REFACTOR * ----------------------------------------------------------------------------- * These rules were previously in per-page inline