:root{
    --primary:#005B96;
    --secondary:#00AEEF;
    --green:#00C853;
    --dark:#1F2937;
    --light:#F8FAFC;
}
/* Google Fonts are loaded from the HTML head for better performance */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Sofia Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:#333;
}

/* Rich text output from admin editor (CKEditor) */
.page-content,
.wysiwyg-content{
    line-height:1.65;
}
.page-content > * + *,
.wysiwyg-content > * + *{
    margin-top:0.85rem;
}
.page-content h1,.page-content h2,.page-content h3,.page-content h4,.page-content h5,.page-content h6,
.wysiwyg-content h1,.wysiwyg-content h2,.wysiwyg-content h3,.wysiwyg-content h4,.wysiwyg-content h5,.wysiwyg-content h6{
    line-height:1.25;
    margin-top:1.2rem;
    margin-bottom:0.55rem;
}
.page-content ul,.page-content ol,
.wysiwyg-content ul,.wysiwyg-content ol{
    padding-left:1.5rem;
}
.page-content li + li,
.wysiwyg-content li + li{
    margin-top:0.35rem;
}
.page-content img,
.wysiwyg-content img{
    max-width:100%;
    height:auto;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

header{
    background:#fff;
    box-shadow:0 2px 15px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:999;
}

header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
}

.logo{
    font-size:28px;
    font-weight:800;
    color:var(--primary);
}

/* Logo image sizing when using the site logo image */
.site-logo{height:68px;object-fit:contain;display:block}

nav ul{
    display:flex;
    gap:35px;
    list-style:none;
}

nav a{
    text-decoration:none;
    color:#222;
    font-weight:500;
}

.btn-header,
.btn-primary{
    background:var(--primary);
    color:white;
    text-decoration:none;
    padding:14px 28px;
    border-radius:8px;
}

/* Checkbox styling for public site */
input[type="checkbox"]{
    width:16px;
    height:16px;
    accent-color: var(--primary);
    cursor:pointer;
}

.btn-secondary{
    border:2px solid white;
    color:white;
    text-decoration:none;
    padding:14px 28px;
    border-radius:8px;
}

.hero{
    /* reduce hero height by 60px to make it slightly smaller */
    min-height:calc(85vh - 60px);
    background:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
    url('https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1920&q=80');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}

.hero-content{
    width:90%;
    max-width:1200px;
    margin:auto;
    color:white;
}

.hero h1{
    font-size:64px;
    max-width:800px;
    margin:20px 0;
}

.hero p{
    max-width:600px;
    font-size:20px;
}

.hero-buttons{
    margin-top:40px;
    display:flex;
    gap:20px;
}

.badge{
    background:rgba(255,255,255,.2);
    padding:10px 20px;
    border-radius:30px;
}

.categories,
.advantages,
.cta{
    padding:100px 0;
}

.categories h2{
    text-align:center;
    margin-bottom:50px;
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.card{
    background:white;
    padding:40px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 25px rgba(0,0,0,.08);
}

/* Products grid: 4 per row on desktop, 2 on tablet, 1 on mobile */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(11,22,40,.06);text-align:left;display:flex;flex-direction:column}
.product-card .thumb{width:100%;overflow:hidden}
.product-card .thumb img{width:100%;height:auto;display:block;object-fit:cover}
.product-card .body{padding:14px 16px;flex:1;display:flex;flex-direction:column}
.product-card h3{font-size:1.05rem;margin:0 0 8px;color:var(--dark)}
.product-card .meta{font-size:0.95rem;color:#6b7280;flex:1}
.product-card .actions{margin-top:12px;text-align:right}
.product-card .btn{
    display:inline-block;
    padding:8px 12px;
    font-size:0.95rem;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    border-radius:8px;
}
.product-card .btn:visited,
.product-card .btn:hover,
.product-card .btn:active,
.product-card .btn:focus{
    color:#fff;
    text-decoration:none;
}

@media(max-width:1024px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.products-grid{grid-template-columns:1fr}.product-card .thumb{height:160px}}

.card i{
    font-size:45px;
    color:var(--secondary);
    margin-bottom:20px;
}

.advantages{
    background:#f5f7fa;
}

.advantages .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
}

.advantage{
    background:white;
    margin-bottom:15px;
    padding:20px;
    border-radius:10px;
}

.cta{
    text-align:center;
}

.cta h2{
    margin-bottom:30px;
    font-size:42px;
}

footer{
    background:var(--dark);
    color:white;
}

footer .container{
    padding:30px 0;
    display:flex;
    justify-content:space-between;
}

@media(max-width:768px){

 .hero h1{
     font-size:42px;
 }

 nav{
     display:none;
 }

 .advantages .container{
     grid-template-columns:1fr;
 }

 footer .container{
     flex-direction:column;
     gap:10px;
 }
}

/* Hamburger menu (mobile) */
.hamburger{
    display:none;
    background:transparent;
    border:0;
    font-size:22px;
    padding:6px 10px;
    cursor:pointer;
}

@media(max-width:768px){
    .hamburger{display:inline-block}
    /* When header has .open, show a stacked nav dropdown */
    header.open nav{display:block;position:absolute;top:72px;left:10px;right:10px;background:white;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:999}
    header.open nav ul{display:flex;flex-direction:column;gap:0}
    header.open nav li{padding:12px 16px;border-bottom:1px solid #f3f4f6}
    header.open nav li a{display:block}
}

/* active nav link styling for front-end if used */
nav a.active{background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff;padding:8px;border-radius:6px}

/* Contact page styles */
.contact-grid{display:flex;gap:32px;align-items:flex-start}
.contact-left{flex:1}
.contact-right{flex:1}
.address-card{background:white;padding:18px;border-radius:10px;box-shadow:0 8px 30px rgba(11,22,40,.04);margin-bottom:14px;text-align:left}
.contact-form .card{padding:20px}
.form-group{margin-bottom:12px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;color:var(--dark)}
.form-group input[type="text"],.form-group input[type="email"],.form-group textarea{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:15px}
.form-group textarea{min-height:120px;resize:vertical}
.btn-primary{background:var(--primary);color:#fff;padding:10px 18px;border-radius:8px;border:0;display:inline-block}

@media(max-width:900px){
    .contact-grid{flex-direction:column}
}

/* Mobile responsive tweaks for contact page */
@media (max-width:900px) {
    .contact-grid{gap:18px}
    .contact-left, .contact-right{min-width:0}
    /* On mobile, make each column occupy ~90% of the viewport and center it */
    .contact-left, .contact-right{width:90vw;max-width:760px;margin:0 auto}
    .address-card{padding:14px}
    .contact-form .card{padding:16px}
    .form-group input[type="text"],.form-group input[type="email"],.form-group textarea{font-size:15px}
    .form-group textarea{min-height:110px}
    /* Make submit button full width on smaller screens */
    .contact-form .card .form-group .btn-primary{width:100%;margin:12px 0 0}
}

@media (max-width:480px){
    .container{width:95%}
    .contact-left h3, .contact-right h3{font-size:18px}
    .address-card{padding:12px}
    .form-group input[type="text"],.form-group input[type="email"],.form-group textarea{padding:10px}
    .form-group textarea{min-height:100px}
}

/* Ensure contact form content is left-aligned; only submit button is centered */
.contact-form .card{text-align:left}
.contact-form .card .form-group input,
.contact-form .card .form-group textarea,
.contact-form .card .form-group label{text-align:left}
.contact-form .card .form-group .btn-primary{display:block;margin:12px auto 0}



/* Social icons styling */
/* Header social icons: fixed size (20px) and keep color consistent for all link states */
.header-social-icons i {
    font-size:20px !important; /* explicit 20px as requested */
    line-height:1;
    color: inherit;
}
.header-social-icons a {
    color: #222; /* match header link color */
    text-decoration: none;
}
/* Prevent color changes on visited/active/hover/focus for header social links */
.header-social-icons a,
.header-social-icons a:visited,
.header-social-icons a:active,
.header-social-icons a:hover,
.header-social-icons a:focus {
    color: #222;
}

/* Footer social icons: ensure white color and prevent color changes on visited/active/hover/focus */
footer .social-icons,
footer .social-icons a,
footer .social-icons a:visited,
footer .social-icons a:active,
footer .social-icons a:hover,
footer .social-icons a:focus {
    color: #fff !important;
}
footer .social-icons i {
    color: inherit;
}