* { text-decoration: none; list-style: none; margin: 0px; padding: 0px; outline: none; }

body {
    margin: 0px; 
    padding: 0px; 
    font-family: 'Open Sans', sans-serif; 
    background-color: aliceblue;
}

section { width: 100%; max-width: 1200px; margin: 0px auto; display: table; position: relative; }

main {
    padding-top: 145px; /* Adjusted to account for fixed header */
}

header {
    width: 100%; 
    display: table;
    background-color: #197560; 
    margin-bottom: 50px; 
    position: fixed; 
    top: 0;
    background-size: cover; 
    background-image: url("img/banner.jpg"); 
    z-index: 1;
    height: auto; /* Allow header to adjust its height based on content */
    min-height: 100px; /* Set a minimum height to ensure it's not too small */
}

.content footer p { font-size: .7em; text-align: center; float: none; }

nav { width: auto; float: right; }
nav ul { display: table; float: right; }
nav ul li { float: left; }
nav ul li:last-child { padding-right: 0px; }
nav ul li a { color: #c2e0ff; font-size: 1.2em; padding: 15px 8px; display: inline-block; transition: all 0.5s ease 0s; }
nav ul li a:hover { background-color: rgba(124, 189, 255, 0.8); color: #1a5c4d; transition: all 0.5s ease 0s; }
nav ul li a:hover i { color: #81d9c4; transition: all 0.5s ease 0s; }
nav ul li a i { padding-right: 10px; color: #c2e0ff; transition: all 0.5s ease 0s; }

footer { float: none; }
footer nav { float: none; display: block; clear: both; margin: auto; }
footer nav ul { margin: auto; float: none; }
footer nav ul li a { font-size: .85em; padding: 5px; color: rgb(53, 53, 53); }

.toggle-menu ul { display: table; width: 25px; margin-top: 10px; }
.toggle-menu ul li { width: 100%; height: 3px; background-color: #c2e0ff; margin-bottom: 4px; }
.toggle-menu ul li:last-child { margin-bottom: 0px; }

.decor { width: auto; }
input#toggle-1[type=checkbox], label.toggle-menu { display: none; }
.clear { float: none; }
.star { color: yellow; }
section.hidden { display: none; }

#aboutus, #modelswefix, #faq, #howtoship, #terms, #contact, #repairform { display: block; }
#paymentemail, #paymentemaillabel, #csz { display: none; }

form.form-table {
    max-width: 400px;
    display: grid;
    grid-template-columns: 100px 1fr; 
    grid-gap: 5px;
}
form.form-table label { display: block; text-align: right; color: #7c7c7c; }
form.form-table label:after { content: ":"; }
form.form-table input, select, textarea { margin-left: 0px; border: 2px solid #7c7c7c; border-radius: 4px; background-color: #ececec; }

.doprint { display: none; }
.submit { padding: 5px; }

.content { display: table; margin-bottom: 60px; width: 900px; }
.content h2 { font-size: 1.25em; font-weight: 500; color: #002e5b; border-bottom: 1px solid #81d9c4; display: table; padding-bottom: 10px; margin-bottom: 10px; }
.content h1 { font-size: 1.4em; font-weight: 500; color: #002e5b; border-bottom: 1px solid #81d9c4; display: table; padding-bottom: 10px; margin-bottom: 10px; }
.content p { font-size: 1em; line-height: 22px; color: #7c7c7c; text-align: justify; }
.content li { font-size: 1em; line-height: 22px; color: #7c7c7c; }

footer { display: table; padding-bottom: 30px; width: 100%; }

ol {
  list-style-type: none;         /* no numbers */
  padding-left: 0;               /* align with surrounding text */
  margin: 1em 0;
}
ol li {
  margin-bottom: 0.5em;
  line-height: 1.6;
}
ul {
  margin: 1em 0;
  padding-left: 1.5em;   /* controls how far bullets sit in */
  list-style-position: outside; /* ensures wrapped lines align under the text, not the bullet */
}

ul li {
  margin: 0.5em 0;       /* breathing room between items */
  line-height: 1.5;      /* better readability */
}
.gallery { display: block; float: left; padding: 1em; }

h3 { color: #002e5b; padding: 1em; width: fit-content; font-size: 1.1em; font-weight: 500; }
.sub { clear: left; display: block; padding: 1em; }
#logo { padding: 1px; max-height: 115px; width: auto; }

.button {
    background-color: #4CAF50;
    border: none;
    color: black;
    padding: 9px;
    margin: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    right: 0;
    bottom: -55px;
    z-index: 100;
}

@media only screen and (min-width: 1441px) {
    nav ul li a { font-size: 1.2em; padding: 15px 8px; }
}

@media only screen and (max-width: 1440px) {
    section { max-width: 95%; }
    nav ul li a { font-size: 1.2em; padding: 8px; margin-top: 25px; }
}

@media only screen and (max-width: 1220px) and (min-width: 981px) {
    #logo { max-width:300px}
}

@media only screen and (max-width: 1100px) and (min-width: 981px) {
    nav ul li a { font-size: .9em; padding: 6px; margin-top: 25px; }
    nav ul { padding: 9px; }
}

@media only screen and (max-width: 980px) {
    #logo { padding: 0 0 13px; }
    input#toggle-1[type=checkbox] { position: absolute; top: -9999px; left: -9999px; background: none; }
    input#toggle-1[type=checkbox]:focus { background: none; }
    label.toggle-menu { float: right; padding: 8px 0px; display: inline-block; cursor: pointer; }
    input#toggle-1[type=checkbox]:checked ~ nav { display: block; }
    .content p { font-size: 1.1em; }
    nav.topmenu { display: none; z-index: 1000; position: absolute; right: 0px; top: 53px; background-color: rgba(0, 85, 170, 0.938); padding: 0px; }
    nav.topmenu ul { width: auto; padding: 0px; }
    nav.topmenu ul li { float: none; padding: 0px; width: 100%; display: table; }
    nav.topmenu ul li a { color: #FFF; font-size: 1em; padding: 15px 20px; margin: 0px; display: block; border-bottom: 1px solid rgba(225,225,225,0.1); }
    nav.topmenu ul li a i { color: #81d9c4; padding-right: 13px; }
    .button { right: -35px; }
    .content { width: 90%; }
}

@media only screen and (max-width: 480px) {
    
    section { max-width: 90%; }
    .decor { max-width: 100%; height: auto; }
    #logo { width: 290px; height: 101px; }
    form.form-table {
        max-width: 20px;
        display: grid;
        grid-template-columns: 80px 1fr; 
        grid-gap: 5px;
    }
    form.form-table label { font-size: small; }
    form.form-table input, select, textarea { width: min-content; }
    form.form-table { max-width: 100%; grid-template-columns: 1fr; }
form.form-table label { text-align: left; }
}

@media only screen and (max-width: 400px) {
    #logo { font-size: 1.3em; width: 265px;}
    .content h1 { font-size: 1.3em; }
    .content h2 { font-size: 1.15em; }
    .button { padding: 5px; }
}

@media only screen and (max-width: 360px) {
    label { padding: 5px 0px; }
    #logo { font-size: 1.3em; width: 260px;}
    nav { top: 47px; }
    .content h1 { font-size: 1.22em; }
    .content h2 { font-size: 1.1em; }
    .button {margin: 40px;}
}

@media only screen and (max-width: 340px) {
    .gallery { padding-left: 0px; }
}

@media only screen and (max-width: 320px) {
    h1 { padding: 20px 0px; }
}

@media print {
    header { display: none; position: static; }
    footer { display: none; }
    main { 
        width: 100%; 
        margin: 7pt;
        padding-top: 0;
        float: none;
    }
    @page { margin: 2cm }
    * { font-size: 14pt; display: block; line-height: normal; margin: -1pt; }
    .disclaimer { font-size: 9pt; }
    #repairform { width: 90%; position: absolute; top: 30px; }
    form.form-table input, select, textarea { margin-left: 0px; border: 0pt; }
    select { appearance: none; }
    h2.dontprint { display: none; }
    li, ul.address { padding: 0 0 0 1pt; }
    .disclaimer p { display: block; line-height: normal; margin-top: 5pt; }
    .dontprint { display: none; }
    .doprint { display: block; font-size: 9pt; }
    .submit { display: none; }
    #csz { display: block; }
    #city, #state, #zip { display: none; }
    .test { display: none; }
    #sta, #zi { display: none; }
    .ships { position: relative; top: -25pt; }
    h3 { margin: 5pt 0 5pt 0; }
    p { margin-top: 10pt; padding-top: 5pt; }
}
.rebrand-inline {
  margin: 1em 0;
  font-style: italic;
  color: #444;
}
.rebrand-inline strong {
  color: #0e5cad; /* brand blue */
}