/* W3.CSS 5.02 March 31 2025 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-main,#main{transition:margin-left .4s}
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-responsive{display:block;overflow-x:auto}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:18.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
@media (max-width:1205px){.w3-auto{max-width:95%}}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-display-position{position:absolute}
.w3-circle{border-radius:50%}
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
.w3-left{float:left!important}.w3-right{float:right!important}
.w3-button:hover{color:#fff!important;background-color:#F5A438!important}
.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
.w3-hover-none:hover{box-shadow:none!important}
.w3-rtl{direction:rtl}.w3-ltr{direction:ltr}
/* Colors */
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-black,.w3-hover-black:hover{color:#fff!important; background-color:#ffb305;}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
.w3-danger{color:#fff!important;background-color:#dd0000!important}
.w3-note{color:#000!important;background-color:#fff599!important}
.w3-info{color:#fff!important;background-color:#0a6fc2!important}
.w3-warning{color:#000!important;background-color:#ffb305!important}
.w3-success{color:#fff!important;background-color:#008a00!important}
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
#rotating-text{text-transform: uppercase;font-size:24px;font-weight: 500;color: #fff !important;}
#about {min-height: 100dvh;}
#menu {background-image: url("images/Testimonials_BG.png");}
#pepplussquad{margin: 0 30% 8px; width:301px;}
#where {background-image: url("images/About\ Us_BG.png");}
.nata {font-family: "Nata Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-size: larger;
  font-style: normal;}
.pep-orange {color: #F5A438 !important;}
#menu p {font-size:smaller; line-height: 1.2;text-align: left;}
.right {text-align: right !important;}
.pep-black {color: #231F20 !important;}
#where button {border-radius: 12px;}
#where a {text-decoration: none !important;}

body, html {
  height: 100%;
  font-family: "Lato","Montserrat","Nunito Sans", sans-serif;
}

.bgimg {
  /* background image directly on the element (no pseudo-element, no transform)
     use a larger background-size to zoom in while preserving aspect ratio
     focus the zoom on the bottom of the image so the lower part is visible */
  background-image: url("images/Main_BG.png");
  background-position: 50% 72%; /* show the bottom area when zoomed */
  background-size: 120.63% auto; /* zoom horizontally to show ~75% of image area */
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  height: 100dvh;
}

/* Ensure header content sits above the background */
.bgimg > * { z-index: 1; }

/* reduce zoom on small screens to avoid excessive cropping */
@media (max-width: 768px) {
  .bgimg {
    background-size: 248% auto; /* adjust zoom for small screens */
  }
  #pep-e {
    display:none; /* hide the glowing logo on small screens */
  }
}

/* make header middle a stable column so image and rotating text don't change size/layout
   and give the glowing logo a consistent responsive width so it stays the same during text rotation */
.w3-display-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#pep-e {
  /* make the glowing logo occupy roughly 30%–45% of the section height
     so it scales with the viewport/section vertical space while preserving aspect */
  height: clamp(30vh, 38vh, 45vh);
  max-height: 45vh;
  width: auto;
  max-width: 80%; /* keep it from overflowing horizontally on very narrow screens */
  display: block;
  margin: 0; /* spacing handled by flex gap */
  position: relative;
  z-index: 2;
}

.menu {
  display: none;
}
/* keep the top bar full-width but center its inner content */
.w3-top .w3-row {
  width: 100%;
}

/* ensure the fixed top navigation stays above header content when scrolling */
.w3-top { z-index: 10000 !important; }

/* inner nav container that centers and constrains columns */
.w3-top .w3-row .nav-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: 12px; /* space between nav items */
  padding: 0 12px; /* breathing room at the edges on small screens */
}
/* NAV RESPONSIVE FIX: allow w3-col children to behave as flexible items so
   buttons don't get clipped on narrow viewports (<= 780px). We make each
   column a flex container so the anchor fills the available space. */
.w3-top .w3-row .nav-inner > .w3-col {
  flex: 1 1 0%;
  min-width: 0; /* allow flex children to shrink correctly */
  display: flex;
  align-items: center;
  justify-content: center;
}
.w3-top .w3-row .nav-inner > .w3-col a {
  flex: 1 1 100%;
  display: block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* avoid visual overflow while preserving text */
  padding: 0 8px;
}
@media (max-width: 780px) {
  .w3-top .w3-row .nav-inner { gap: 6px; padding: 0 8px; }
  .w3-top .w3-row .nav-inner > .w3-col { flex: 1 1 0%; }
  .w3-top .w3-row .nav-inner > .w3-col a { padding: 8px 6px; font-size: 14px; }
}
/* remove hover/focus background for the logo image link only */
.w3-top .w3-row .nav-inner a.logo-link:hover,
.w3-top .w3-row .nav-inner a.logo-link:focus {
  background-color: transparent !important;
}
/* rotating text in the header (responsive + fade) */
.rotator { display: block; text-align: center; margin-top: 12px; position: relative; z-index: 5; }
.rotator-text {
  display: block;
  color: #F5A438 !important; /* override w3.css color */
  text-transform: capitalize; /* Title Case (capitalize each word) */
  text-shadow: 0 2px 4px rgba(0,0,0,0.95);
  font-weight: 700;
  line-height: 1;
  /* responsive size directly (avoid variable scoping issues) */
  font-size: clamp(56px, 8vw, 90px);
  transition: opacity .6s ease-in-out;
  opacity: 1;
}

/* header paragraph (non-rotating) — uppercase, white, and twice the rotator size */
header .w3-display-middle p:not(.rotator-text) {
  /* subtitle line shown under the rotating h3; keep it white and smaller */
  text-transform: uppercase;
  color: #ffffff;
  font-size: clamp(16px, 2.8vw, 22px);
  line-height: 1.1;
  margin: 0;
}
.rotator-text.fade-out { opacity: 0; }
/* rotating array lines rendered as h3.rot-line (separate styling from p#rotating-text) */
.rot-line {
  color: #F5A438;
  text-transform: capitalize;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  font-size: clamp(40px, 7vw, 72px);
  transition: opacity .6s ease-in-out;
  opacity: 1;
}
.rot-line.fade-out { opacity: 0; }
/* render the border image as a positioned <img> element so the full
   image height is preserved without clipping. The image is placed
   absolutely at the bottom of each section and sits behind the content. */
#home, #about, #menu, #where { position: relative; }
.section-border-img { display: none; }
/* Single global border image (top-most) shown once; attached to sections when
   a nav link is clicked. By default it's fixed to the bottom of the viewport. */
#global-border {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  z-index: 99999;
  transition: top .18s ease, bottom .18s ease, opacity .12s ease;
}

/* center the four main sections vertically and horizontally */
#home, #about, #menu, #where {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  box-sizing: border-box;
  /* give sections room at the bottom so their content doesn't collide with
     the decorative border image which sits at the bottom of the viewport */
  padding-top: 8px;
  padding-bottom: clamp(80px, 12vw, 240px);
}

/* ensure section content sits above the global border image */
#home .w3-display-middle, #about .w3-content, #menu .w3-content, #where .w3-content {
  position: relative;
  z-index: 1;
}

/* override W3.CSS absolute centering for the header middle so it participates
   in the flex flow and centers vertically like the other sections */
#home .w3-display-middle {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: flex; /* already set globally but ensure here */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px) {
  .section-border-img { width: 96%; left: 2%; }
}
/* video slider styles */
.video-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* remove the very large top margin that pushed the track down and
     prevented the .w3-content from being vertically centered */
  margin: 12px 0 16px;
}
.video-slider .vs-track {
  width: 100%;
  max-width: 700px;
  overflow: hidden;
  position: relative;
}
.video-slider .vs-slide {
  display: none;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.video-slider .vs-slide.active { display: block; }
.video-slider video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}
.video-slider h5 { margin: 12px 0 8px; }
.video-slider .vs-btn {
  background: rgba(0, 0, 0, 0);
  color: #fff;
  border: none;
  padding: 10px 14px;
  font-size: 22px;
  cursor: pointer;
  border-radius: 4px;
}
.video-slider .vs-btn:focus { outline: 2px solid #fff; }
.video-slider .prev { margin-right: 12px; }
.video-slider .next { margin-left: 12px; }

/* dots */
.vs-dots { text-align: center; margin-top: 12px; }
.vs-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; margin: 0 6px; background: rgba(0,0,0,0.3); cursor: pointer; }
.vs-dots button.active { background: #333; }

/* testimonial slider styles */
.test-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}
.test-slider .ts-track {
  width: 100%;
  max-width: 700px;
  overflow: hidden;
}

/* On large screens make the testimonial track span roughly half the available width */

@media (min-width: 992px) {
  .test-slider .ts-track {
    width: 80%;
    max-width: none;
  }
}
.test-slider .ts-slide { display: none; padding: 20px 28px; box-sizing: border-box; background: #F5A438; border-radius: 6px; }
.test-slider .ts-slide.active { display: block; }
.test-slider .ts-slide h5 { text-align: left; margin: 6px 0; font-weight: bold; text-transform: uppercase;}
.test-slider .ts-slide img { height: 64px; object-fit: cover; display: block; }
.test-slider .ts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* show heading on the left and image on the right */
  flex-direction: row-reverse;
  width: 100%;
}
@media (max-width: 600px) {
  /* stack vertically on small screens (image above heading) */
  .test-slider .ts-head { flex-direction: column; }
  .test-slider .ts-head img { margin-bottom: 8px; }
}
.test-slider .ts-slide { transition: padding .2s ease; }
@media (min-width: 992px) {
  .test-slider .ts-slide { padding: 28px 48px; }
}
.test-slider .ts-head h5 { flex: 1 1 auto; text-align: left; }
.test-slider .ts-head img { flex: 0 0 auto; }
.test-slider .ts-slide p { text-align: center; color: #333; }
.test-slider .ts-btn { background: rgba(0,0,0,0); color:#fff; border:none; padding:8px 12px; font-size:18px; border-radius:4px; cursor:pointer; }
.test-slider .ts-btn:focus{ outline:2px solid #000; }

/* Center the testimonials section vertically in the viewport */
#menu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding-top: 32px;
  padding-bottom: 32px;
}
#menu .w3-content {
  width: 100%;
  max-width: 900px; /* let content expand a bit when centered */
}

@media (max-width: 768px) {
  /* reduce vertical padding on small screens */
  #menu { padding-top: 18px; padding-bottom: 18px; }
}

/* Center the ABOUT US section vertically in the viewport (similar to #menu) */
/* Center the ABOUT (services) section vertically and account for the fixed
   top navigation by subtracting an estimated nav height (64px). Reduce
   padding so the content truly centers. Make the inner .w3-content a
   vertically-centered column as well. */
#about {
  display: flex;
  align-items: center;
  justify-content: center;
  /* make the ABOUT (services) section fill the full viewport height */
  min-height: 100dvh;
  padding-top: 8px;
  /* add bottom padding to make room for the decorative border so it doesn't
     overlap the section's content */
  padding-bottom: clamp(80px, 12vw, 240px);
  background-color: transparent;
}
#about .w3-content {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#where .w3-content {
  width: 100%;
  max-width: 900px;
}
@media (max-width: 768px) {
  #where {padding-top: 18px; padding-bottom: 18px; }
  #pepglow {overflow:visible !important; width:160px !important;height:auto !important;}
}

/* responsive */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  #pepglow, #pepplussquad {display:none !important;}
  .s2 a {font-size:xx-small !important;}
  .test-slider .ts-btn { background: rgba(0, 0, 0, 0.4)); color:#FFFFFF00;; border:none; padding:8px 12px; font-size:18px; border-radius:4px; cursor:pointer; }



}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .bgimg, #menu, #where, #about {background-position: 50% 72% !important;
    background-size: 104.63% auto !important;}
}
/* Large devices (laptops/desktops, 992px and up) */
 
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  #menu, #where, #about {background-position: 50% 72% !important;
    background-size: 104.63% auto !important;}
  #menu, #where {
    .w3-col.l2 {width:18% !important;}
  }  
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .bgimg, #menu, #where, #about {background-position: 5% 58% !important;
    background-size: 101% auto !important;}
  
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #F5A438;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  /*position: fixed;
  bottom: 23px;
  right: 28px;*/
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  border: 3px solid #f1f1f1;
  z-index: 33;
}

/* Add styles to the form container */
.form-container {
  max-width: 46rem;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=email] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 10px;
  border: none;
  cursor: pointer;
  width: 35%;
  margin-bottom:5px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

/* --- Hamburger / compact mobile menu --- */
.hamburger{
  display: none;
  background: transparent;
  border: 0;
  font-size: 28px;
  padding: 8px 12px;
  cursor: pointer;
  color: #fff; /* adjust if needed to match header tone */
  align-self: center;
}

@media (max-width: 780px) {
  /* ensure the top row can contain the hamburger and the absolutely-positioned menu */
  .w3-top .w3-row {
    position: relative;
  }

  /* show hamburger and hide inline nav by default on small screens */
  .hamburger { display: block; }
  .nav-inner { display: none; }

  /* when the menu is open, show it as a vertical dropdown that fills width */
  .nav-inner.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; /* place below the top bar row */
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.78); /* semi-opaque backdrop */
    z-index: 9999;
    padding-bottom: 8px;
  }

  /* nav columns should be flexible and horizontally aligned inside the vertical menu */
  .nav-inner.open > .w3-col {
    display: flex;
    min-width: 0;
    padding: 0 12px;
  }

  /* make links full-width and comfortably tappable */
  .nav-inner.open a {
    display: block;
    width: 100%;
    padding: 12px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* keep the logo visually centered and first in the list */
  .nav-inner.open .logo-link {
    order: 0;
    justify-content: center;
    padding: 10px 0;
  }
}

/* --- Mobile logo sizing and no-ellipsis for open hamburger menu --- */
/* Keep logo anchor flexible and avoid clipping */
.nav-inner .logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  overflow: visible;
}

/* constrain the small header icon so it doesn't overflow horizontally */
.nav-inner .logo-link img#pepglow {
  max-height: clamp(28px, 10vh, 56px);
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  padding-left: 3rem;
}

/* ensure nav columns can shrink (helps around ~834px) */
.w3-top .w3-row .nav-inner > .w3-col {
  min-width: 0;
}

/* When the mobile menu is open, show full text and allow wrapping (no ellipsis) */
.nav-inner.open a,
.nav-inner.open .w3-button {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* small viewport tweak to reduce logo clipping on mid-size devices */
@media (max-width: 860px) {
  .nav-inner .logo-link img#pepglow {
    max-width: 86%;
    height: auto;
  }
}

/* --- Ensure background images cover their sections --- */
#menu, #where, .bgimg {
  /* make the background fill the section similar to #about's inline style */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* If a section is too short, ensure it still presents a reasonable height for the background */
#menu, #where {
  min-height: 56vh; /* give content room; adjust if you'd rather be 100vh */
}

/* --- Fix nav ellipses on very small screens (<=430px) --- */
@media (max-width: 430px) {
  /* allow nav links to wrap and show full text (no ellipsis) */
  .w3-top .nav-inner a,
  .w3-top .nav-inner .w3-button {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2;

  }

  /* make sure the logo in the nav scales to avoid cutting neighbors */
  .nav-inner .logo-link img#pepglow {
    max-height: 40px;
    width: auto;
    height: auto;
    display: block;
  }

  /* when collapsed (nav hidden by hamburger) we still want the layout to allow wrapping
     so when the menu is shown items display fully */
  .nav-inner { flex-wrap: wrap; }
  .nav-inner > .w3-col { min-width: 0; }
  .test-slider .ts-slide h5 { text-align: center; }

  /* On small phones allow testimonial track and slides to expand/scroll
     instead of clipping long paragraphs. This overrides the default
     overflow:hidden on the track and permits vertical scrolling if needed. */
  .test-slider {
    align-items: flex-start;
    max-height: none;
    overflow: visible;
  }
  .test-slider .ts-track {
    overflow: visible;
    max-height: none;
  }
  /* Constrain the testimonial track to the viewport on small phones and allow
     vertical scrolling so long cards are reachable (accounts for header/nav
     and decorative border). Adjust the subtraction value if your top bar
     or border is taller. */
  .test-slider .ts-track {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .test-slider .ts-slide {
    display: block;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
    margin-bottom: 12px;
  }
  /* Force center-align nav links when the hamburger menu is open on very small screens */
  .nav-inner.open a,
  .w3-top .nav-inner.open a,
  .w3-top .nav-inner.open .w3-button {
    text-align: center !important;
  }
  /* Make each nav column a centered flex container so links (and the logo)
     are truly centered within the dropdown and don't inherit left padding
     that forces wrapping. Also remove the extra left padding on the small
     logo to avoid pushing neighbors. */
  .nav-inner.open > .w3-col {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .nav-inner.open a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: normal !important; /* allow wrapping but keep centered */
  }
  /* reduce logo anchor left padding that was added globally so it won't
     push other items when the menu is open */
  .nav-inner.open .logo-link img#pepglow {
    padding-left: 0 !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* --- Fix testimonial slider text clipping on very small screens --- */
@media (max-width: 390px) {
  .test-slider {
    max-height: 80vh;
    overflow-y: auto;
    padding-bottom: 16px;
  }
  .ts-slide {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-height: none;
    padding-bottom: 12px;
  }
  .ts-slide p, .ts-slide h5 {
    font-size: 0.98em;
    line-height: 1.25;
  }
}