@charset "utf-8";
/* base2.css — FINAL 2025 — every single fix applied, no duplicates, no phone experiments */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
.keep-together {
    white-space: nowrap;
}


html { font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif; line-height:1.5; color:#313131; }
body {
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    background: #fff;
    padding-bottom: 10px;
}

/* Header */
#head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; background:#086C7B; padding:8px 20px 8px 8px; }
#head #logo img { height:88px; width:auto; }
#nav ul { display:flex; flex-wrap:wrap; gap:20px; list-style:none; }
#nav a {
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
}
#nav a:hover { color:#39E7F9; }

/* Hero Cards */
#top-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
#cell1,#cell2 {
    flex: 1;
    min-width: 280px;
    background: rgba(9,98,108,0.48);
    border-radius: 12px;
    padding-top: 20px;
    padding-right: 24px;
    padding-left: 24px;
    padding-bottom: 7px;
    display: flex;
    flex-direction: column;
}
.secButton { margin-top:auto; padding-top:20px; }

/* HERO ROW – force white text */
#top-row,
#top-row h1,
#top-row h2,
#top-row p,
#top-row a {
    color: #ffffff !important;
    font-weight: bolder;
    padding-bottom: 1px;
}

/* Star + Title on same line */
#SecHead2 { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
#SecHead2 #star img { width:77px; flex-shrink:0; }
#textC2 h1 { margin:0; font-size:2rem; line-height:1.2; color:#fff; }

/* Buttons */
.button {
    display: inline-block;
    background: #068C9B;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: bold;
    transition: all .2s;
    text-decoration: none;
    border-top: thin solid #8CF2FC;
    border-bottom: thin solid #06373B;
}
.button:hover { background:#025A64; color:#39E7F9; }

/* SMALL BUTTON – smaller for product descriptions */
.button--small {
    display: inline-block;
    background: #09626C;
    color: #fff;
    font-weight: bold;
    text-decoration: none;                /* no underline ever */
    padding: 1px 5px;                     /* 1px top/bottom, 5px left/right */
    border-radius: 3px;
    border: 1px solid #09626C;
    border-top-color: #0e8a97;
    border-left-color: #0e8a97;
    border-bottom-color: #05454e;
    border-right-color: #05454e;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.4),
        0 1px 2px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    font-size: 0.9rem;                    /* optional: slightly smaller text for better fit */
    line-height: 1.4;
}

.button--small:hover {
    color: #07DAF1;
    background: #0a7580;
}

.button--small:visited {
    color: #b0efff;
}
/* Images */
.image1 img, .imageSingle img { max-width:100%; height:auto; border-radius:8px; display:block; margin:0 auto; }

/* Content Columns */
.content-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 5px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 11px;
    padding: 0 10px;
}
#cell1r,#cell2r {
    background: rgba(9,98,108,0.57);
    border-radius: 12px;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
}


/* Footer */
#footer .tablet { display:block; }
#footer .mobil { display:none; }

/* PHONE NUMBER IN PRODUCT SECTION – link on mobile only, bold text on desktop */
.pDesk--small   { display: inline; font-weight: bold; color: #fff; }
.pMobile--small { display: none; }


@media (max-width:639px) { #footer .tablet{display:none;} 
#footer .mobil{display:block;} 
    .pDesk--small   { display: none; }
    .pMobile--small { display: inline; }
}

#footer { text-align:center; padding:30px 20px; background:#086C7B; color:#fff; margin-top:11px; }
#footer a { color:#fff; font-weight:bold; text-decoration:none; }
#footer a:hover { color:#39E7F9; }

/* Responsive */
@media (min-width:640px)  { body{padding:20px;} #nav a{font-size:1.4rem;} }
@media (min-width:1024px) { 
    body{max-width:1300px; margin:0 auto; padding:30px;} 
    #top-row{flex-wrap:nowrap;} 
    .content-columns{grid-template-columns:1fr 1fr;} 
    #cell1r,#cell2r{min-height:380px; background:rgba(9,98,108,0.57);}
.text--bigger {
    font-size: larger;
    font-weight: bold;
    text-shadow: 3px 3px 3px #000000;
}

}
@media (min-width:1200px) { #head #logo img{height:98px;} #nav a{font-size:1.7rem;} }

/* Utility */
.center-text { text-align:center; }
.large { font-size:2rem; font-weight:bold; }
h1, h2 { text-shadow:2px 2px 3px #000; color:#fff; }

/* PRODUCT DESCRIPTIONS – white text (black → white) */
.content-columns,
.content-columns h2,
.content-columns p {
    color: #ffffff !important;   /* white text */
}

/* Keep small buttons readable – they already have white text, but just in case */
/*.content-columns a.button--small {
    color: #fff !important;
}*/

/* PERFECT VERTICAL CENTER FOR IMAGE IN LEFT HERO CARD (#cell1) */
#cell1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* pushes content to top, button to bottom, image centered */
}

/* Optional: add a little breathing room so image isn’t touching text */
#cell1 .image1 {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;                     /* lets the image area take available space */
}