html {background:#f7f7f7; letter-spacing:.01em;}
/* Import Inter from Google Fonts */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Apply Inter Font Globally */
* {
    font-family: 'Inter', sans-serif !important;
}

body {width:100%; font-size:14px; font-family:'Inter',Inter,Inter,Inter,Inter; text-align:center; margin:0; padding:0 0 5em; background:#f7f7f7;}
#head, #main, #main-bg, .testimonials, footer, .testimonial-inner-wrapper {max-width:960px; width:100%; margin:0 auto; }

#head {display:inline-block; font-size:12px;}
header {width:100%; margin:0 auto; position:relative; height:auto; float:left; background:#f7f7f7; padding:1em 0 0;}
header a.logo {
    background: url(images/logo.png) no-repeat center;
    background-size: contain;
    display: inline-block;
    float: left;
    width: 100%;
    max-width: 350px;
    height: auto;
    aspect-ratio: 16 / 5;
}

header > div {width:auto; margin:0 0 0 5%; padding:5px; float:right;}
header .contact p {margin:0; padding:2px 0;}
header .tel {font-size:2em; font-size:26px; color:#0060ce; font-weight:bold;}

header nav {
    margin:5px auto 0; z-index:1500; position:relative; float:left; width:100%; font-size:14px;
    background: rgba(255, 255, 255, 0.4); /* Transparent white background */
    box-shadow: 1px 1px 5px #ddd; border-radius: 30px;
    backdrop-filter: blur(10px);
}

    .nav-buttons {
    display: flex;
    gap: 10px; /* Adjust spacing between navigation buttons */
}

.secondary-links {
    display: flex;
    gap: 15px; /* Adjust spacing between links */
    margin-top: 10px; /* Adds space between navigation and links */
}
/* Main Navigation - Ensure Seamless Background */
header nav {
    margin: 5px auto 0;
    z-index: 1500;
    position: relative;
    float: left;
    width: 100%;
    font-size: 14px;
    background: transparent; /* Remove any unwanted background color */
    border-radius: 30px;
    backdrop-filter: none; /* Remove blur effect if applied */
    box-shadow: none; /* Removes any shadow that might be creating contrast */
}

/* Main Navigation List */
header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-weight: bold;
    display: flex;
    justify-content: space-around;
    gap: 8px; /* Keeps spacing between buttons */
    background: transparent; /* Ensures no unwanted background between buttons */
}

/* Navigation Buttons */
header nav a {
    display: block;
    padding: 11px 15px;
    text-decoration: none;
    color: #333;
    background: white; /* Ensures uniform button background */
    border-radius: 30px;
    font-weight: 500;
    text-align: center;
    transition: 0.4s;
    min-width: 120px; /* Consistent button size */
    box-shadow: none; /* Ensure no button shadow */
}



header nav li {
    position: relative;
    margin: 0;
    padding: 0;
    flex: 1;
}

/* Regular Navigation Links */
header nav a {
    display: block;
    padding: 11px 15px;
    text-decoration: none;
    color: #333;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    font-weight: 500;
    text-align: center;
    transition: 0.4s;
}

header nav a:hover,
header nav .current_page_item a,
header nav .current_page_item a:hover {
    background: rgba(135, 206, 250, 0.3);
    color: #007bff;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

/* DROPDOWN MEGA MENU */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* Ensures the dropdown matches the Home button width */
    background: white;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
    display: none;
    border-radius: 8px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.dropdown:hover .mega-menu {
    display: flex;
    visibility: visible;
    opacity: 1;
    flex-direction: column;
    align-items: center;
}

/* COLUMN INSIDE MEGA MENU */
.mega-column {
    width: 100%;
    padding: 5px 0; /* Keeps content centered */
}

/* HEADING (FULL WIDTH) */
.mega-column h3 {
    font-size: 16px;
    color: #222;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    padding-bottom: 10px;
}

/* BUTTONS INSIDE DROPDOWN */
.mega-column a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    color: #222;
    padding: 12px 0;
    margin: 5px auto; /* Centers buttons perfectly */
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%; /* Adjust this to tweak button width */
    transition: all 0.3s ease-in-out;
}

.mega-column a:hover {
    background: rgba(135, 206, 250, 0.3);
    color: #007bff;
    box-shadow: 0px 5px 15px rgba(0, 123, 255, 0.3);
}
document.addEventListener("DOMContentLoaded", function () {
    var dropdowns = document.querySelectorAll(".dropdown");

    dropdowns.forEach(function (dropdown) {
        dropdown.addEventListener("mouseenter", function () {
            var megaMenu = this.querySelector(".mega-menu");
            if (megaMenu) {
                megaMenu.style.display = "flex";
                megaMenu.style.visibility = "visible";
                megaMenu.style.opacity = "1";
            }
        });

        dropdown.addEventListener("mouseleave", function () {
            var megaMenu = this.querySelector(".mega-menu");
            if (megaMenu) {
                megaMenu.style.display = "none";
                megaMenu.style.visibility = "hidden";
                megaMenu.style.opacity = "0";
            }
        });
    });
});



header nav #menu-sub a {padding:10px 36px; color:#00499d; border-color:#ddd; box-shadow:-1px 0 0 0 #f7f7f7;
    background-image: url(images/arrow-blue.png); background-position:32px center; background-repeat:no-repeat;}
header nav #menu-sub a:hover {padding:10px 36px; color:#000; background:url(/images/arrow-darkblue.png) 32px center; background-repeat:no-repeat;}

 /*nav li ul {position:absolute; left:-999em; padding:.5em; margin:0; width:100%; min-width:200px; font-size:.9rem; background:#fff; border:1px solid #eee; border-top:none;}
 nav li li {display:block; width:100%; margin:0; padding:0;}
 nav li li a {margin:0; line-height:1.1; padding:10px 5px; border:none;}
 nav .current-menu-item li a {color:#444;}
 nav li:hover ul,  nav li li li:hover ul, nav li.sfhover ul, nav li li.sfhover ul {left:0;}
 nav li li ul {display:none;}
 nav li li:hover ul {left:200px; top:0; display:block; border-top:8px solid #eee;}*/




#main {clear:both; margin:0px auto;}
#main-bg {float:left; box-shadow:1px 1px 5px #ddd; background:#fff;}

#content {float:left; background:#fff; text-align:left; padding:2%; width:70%; position:relative;}

.home #content > div + div {clear:both;text-align:center; text-transform:uppercase; font:700 20px Arial; line-height:80px;}
.home #content > div + div > div {width:49.9%; float:left; margin:1% auto 0; color:#005ccd; background:#e7ecf0;}
.home #content > div + div > div + div {float:right;}
.home #content, .compare #content {padding:0 .5%; width:99%;}

div.product-list {clear:both; float:left; margin:30px auto; font-size:.9em; position:relative; width:100%;}
.product-list .compare {float:left; margin-right:15px;}
  .product-list .compare input {margin:5px; border:none; background:none; text-decoration:underline; color:#777}
.product-list p {margin:10px 0; font-size:.9em;} /* desc */
.product-list p.price {margin-right:5px; font-size:1.2em; color:#585858; } /* price */
.product-list a.add {clear:both; margin:10px auto; font-size:.9em; padding:5px 10px;} /* add to cart */
.product-list img {max-width:200px;}

.compareProd {float:left; margin:1% 0 1% 1%; padding:1%; height:auto;}
.compareProd img {margin:10px auto; display:block;}


article.product {
    margin: 15px auto;
    padding: 20px;
    background: #fff; /* Keeps it clean */
    border-radius: 12px; /* Smooth edges */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    overflow: hidden; /* Prevents layout shifts */
}

/* 🔹 IMAGE FIX – Prevents Overlaps */
article.product > img {
    float: left;
    max-width: 390px;
    height: auto;
    border-radius: 12px; /* Rounds image */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: block; /* Ensures no floating issues */
}

/* 🔹 SPECS FIX – Ensures Perfect Alignment */
article.product .specs {
    padding: 15px 15px 25px;
    margin: 0 auto 20px;
    font-size: 12px;
    background: #f9f9f9; /* Slightly lighter for contrast */
    width: 37%;
    float: right;
    border-radius: 12px; /* Smooth box edges */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: block; /* Forces it to behave */
}

/* 🔹 HEADERS & TEXT */
article.product .specs h3 {
    text-align: center;
    color: #3a79b4;
    margin: 0;
    padding: 6px 0;
    font-size: 16px;
    font-weight: 600;
}

article.product .specs ul {
    margin: 0;
    padding: 0;
}

article.product .specs li {
    list-style: none;
    padding: 6px 0;
    border-bottom: 1px solid #ddd; /* Adds subtle dividers */
}

/* 🔹 PRICE TEXT FIX */
article.product .price {
    color: #444;
    font-size: 1.4em;
    font-weight: 600;
}

article.product .code {
    font-size: 0.85em;
    color: #999;
}

/* 🔹 NO TOUCHING THE SIDEBAR */
aside#sidebar {
    width: 20%;
    font-size: 12px;
    margin: 0;
    padding: 0 2% 3% 2%;
    float: left;
    list-style: none;
    background: #fff;
}

/* Sidebar stays untouched */
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar strong {
    padding: 10px 0 0;
    display: block;
}

#sidebar li a {
    display: block;
    text-align: left;
    margin: 0;
    padding: 7px 0 0 0;
    color: #333;
}

#sidebar li a strong {
    font-weight: normal;
    font-size: 16px;
}

#sidebar li ul {
    padding-top: 10px;
}

#sidebar hr {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #333, #ccc, #fff);
}

/* 🔹 SLIDESHOW FIX */
.slides-row {
    clear: both;
    float: left;
    display: inline-block;
}

.cycle-slideshow {
    margin: 0 2% 0 0;
    padding: 0;
    float: left;
    width: 63%;
    border-radius: 12px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.home aside > div {
    border-top: 1px solid #ddd;
    height: 80px; /* Reduced from previous size */
    margin: 0;
    background: #e0e4eb;
    display: flex;
    align-items: center;
    padding: 8px 12px;
}

.home aside > div:first-child {
    border: none;
}

.home aside > div a {
    display: flex;
    align-items: center;
    width: 100%;
    opacity: 1;
    text-decoration: none;
    padding: 8px 0;
    box-sizing: border-box;
}

.home aside > div a:hover {
    opacity: 0.7;
}

.home aside > div a::before {
    content: "";
    display: block;
    width: 50px; /* Smaller */
    height: 50px; /* Smaller */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Assign specific images to each block */
.home aside > div:nth-child(1) a::before {
    background-image: url(images/box.png);
}

.home aside > div:nth-child(2) a::before {
    background-image: url(images/answers-doc.png);
}

.home aside > div:nth-child(3) a::before {
    background-image: url(images/info-screen.png);
}

.home aside .title {
    margin: 0;
    padding: 0;
    font: 400 22px 'Oswald', Arial, Verdana, Helvetica, Sans-Serif; /* Adjusted */
    color: #0067dc;
    text-transform: uppercase;
}

.home aside p {
    margin: 0;
    padding: 0;
    color: #666;
    font-size: 12px;
    line-height: 16px;
}


.home-menu ul {border-left:1px solid #ddd; width:13%; float:left; margin:2% auto; padding:1.75%;}
  .home-menu ul:nth-last-of-type(6) {border:none;}
.home-menu li {padding:5px 0; margin:0; list-style:none; font-size:13px; line-height:1; text-transform:none; text-align:left;}
  .home-menu li a {color:#777; font-weight:normal;}
.home-menu li a img {margin:0 auto 10px; display:block;}
.home-menu hr { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc);}

.testimonial-outer-wrapper {clear:both; background:#f1f6fa; width:100%; padding:10px 0 5px;}
.testimonial-inner-wrapper {height:120px; margin:0 auto; text-align:left; }
.testimonial-inner-wrapper .column.one {float:left; width:224px; width:22%; border-right:1px solid #dae2e3; margin:10px 0; padding:0 10px; height:100px; }
.testimonial-inner-wrapper .column.one a {text-decoration:underline;}
.testimonial-inner-wrapper .column.one h4 {font-size:20px; color:#005fcd; font-weight:600; text-transform:uppercase;}
.testimonial-inner-wrapper .column.two {float:left; width:731px; width:75%; }
.testimonial-inner-wrapper a {float:left; width:731px; width:100%; color:#111;}
.testimonial {font:400 12px/20px; margin:25px 0 0 10px; text-overflow:ellipsis; overflow:hidden; height:63px; width:95%; }

#foot {clear:both; font-size:12px; border-top:1px solid #eee; box-shadow:0 1px 2px #ddd;}
footer {color:#7c7c7c; line-height:1; background:#f1f1f2; margin:4em auto;}
footer > div {float:left; width:16%; margin:0; padding:0 0 2% 2%; text-align:left;}
footer div.copy {background:url(images/credit.png) right 20px no-repeat; font-size:10px; border-top:1px solid #eee; padding:50px 0 0; margin:3em 0 0; width:auto; clear:right; float:right;}
footer h3 {color:#333; margin:0 0 1em; padding:0; }
footer a {display:block; color:#88888b; padding:0 0 .7em}
 footer a:hover {color:#444;}

#expertForm {background:#f1f5f9; padding:2em;}
#expertForm label {float:left; width:50%; display:block; text-align:right;}
#expertForm label > input {padding:7px; margin:0 0 20px 10px;}
#expertForm select, #expertForm textarea {padding:2px; margin:0 0 20px 10px;}
#expertForm textarea {float:none; width:75%; padding:10px; margin:0 auto 20px; display:block;}

#contactForm {width:45%; float:left; background:#f1f5f9;}
#contactForm fieldset {border:none;}
#contactForm legend {text-align:center; width:100%; font-size:16px; font-weight:bold; color:#005fcd;}
#contactForm label {display:none;}
#contactForm input {width:27%; margin:10px 1% 10px; display:inline; float:left; border:none; padding:5px 2%; color:#666;}
#contactForm textarea {clear:both; width:93%; margin:0 auto; border:none; padding:10px 2%;}
.button, input.button, a.button, #contactForm input.button {width:98%; padding:10px 20px; background:#005fcd; color:#fff; border:none; font-size:14px; font-weight:bold; letter-spacing:2px;}
.button:hover, input.button:hover, a.button:hover, #contactForm input#submit:hover {background:#005fcd; color:#fff; cursor:pointer;}
.antispam {display:none;}
input[type=checkbox], input[type=radio], label input {border:none; width:auto; float:none;}
label.error {color:red; width:100%; padding:0; margin:0; text-align:center; }
.error {border-color:red;}
input:focus {background:#fff;}

a {text-decoration:none; color:#1668af;}
a:focus, a:active {background:none; outline:none;}
a:hover {text-decoration:underline;}
a[href^=tel] {color:inherit; text-decoration:none;}
img, a.img, img a {border:none; max-width:100%; height:auto;}
a.btn, .btn {background:#eee; padding:3px 6px; border-radius:5px; border:1px solid #ddd;}
a.btn:hover, .btn:hover {text-decoration:none; background:#ddd;}
pre {white-space:pre-wrap; background:#f6eaff; padding:5px;}

a.edit {position:absolute; top:10px; right:20px; background:#2bc695; color:#fff; padding:.5em;}
.edit {background:#f7f7f7; float:left; width:97.5%; padding:1%; border:2px solid red;}
.edit strong {display:block; font-size:1.4em; margin:1em auto 0; text-align:center;}
.edit label {font-weight:bold;}
.edit textarea {display:block; width:99%; min-height:200px; margin:0 auto 1em;}
.edit label {margin:.5em auto 0; display:block;}
.edit input {width:97%;}
.edit input.btn {margin:1em auto; width:auto; padding:5px 1em; display:block; background:red; color:#fff;}

.video-container {position:relative; padding-bottom:56.25%; padding-top:35px; height:0; overflow:hidden;}
.video-container iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

.video-container {position:relative; padding-bottom:56.25%; padding-top:35px; height:0; overflow:hidden;}
.video-container iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

td, th {vertical-align:top; padding:5px;}
h1,h2,h3,h4,h5 { padding:2px 0 3px; margin:0; }
h1 {font-size:1.5em; font-weight:normal;}
h2 {font-size:1.2em}
h3 {font-size:1.2em}
h4 {font-size:1.1em}
h5 {font-size:1em}
.thanks {font-size:1.5em; padding:15px; display:block; text-align:center;}
b.count {}

.aligncenter, div.aligncenter {	display:block; margin:20px auto;}
.alignleft { float:left; margin:0 20px 20px 0; }
.alignright { float:right; margin:0 0 20px 20px;}
.clear {clear:both;}

a.add {color:#fff; text-transform:uppercase; padding:5px 35px 5px 10px; font-size:1.2em; letter-spacing:1px; border-radius:5px;
background:#009cd7; opacity:1; margin:5px auto; display:inline-block;
background:url(/images/arrow-r-add.png) 125px no-repeat, -moz-linear-gradient(top,  #009cd7 0%, #0070ca 100%);
background:url(/images/arrow-r-add.png) 125px no-repeat, -webkit-linear-gradient(top,  #009cd7 0%,#0070ca 100%);
background:url(/images/arrow-r-add.png) 125px no-repeat, linear-gradient(to bottom,  #009cd7 0%,#0070ca 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009cd7', endColorstr='#0070ca',GradientType=0 );
}
a.add:hover {text-decoration:none; opacity:.8;}
.share {clear:left; margin:20px auto; display:inline-block; }


ul.tabs {clear:both; display:block; margin:auto; padding:0; list-style:none;}
ul.tabs li {background:#8c8c8c; color:#fff; display:inline-block; padding:10px 15px; font-weight:bold; cursor:pointer;}
ul.tabs li.current {background:#eee; color:#858585;}
.tab-content {display:none; background:#ededed; color:#585858; padding:15px;}
.tab-content.current {display:inherit; float:left;}
ul.tabs + div + div + div + div {background:#eee; color:#585858; margin:10px auto; padding:10px;}








/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */
    @media only screen and (max-width: 959px) {
header > div {float:left; margin:auto;}
header a.logo {margin-left:10px;}
header .contact { float:none; font-size:.9em; padding:0 5px;}
header > a.cart {margin-right:15px; }
header form {right:10px;}
header nav #menu-sub a, header nav #menu-sub a:hover {background-position:10px center; padding:10px 20px;}
.home #content, .compare #content {padding:0 0%; width:96%;}
.home aside {height:280px;}
.home aside .title {font-size:1.6em;}
.testimonial-inner-wrapper {position:relative;}
.testimonial-inner-wrapper .read-more {float:right; position:absolute; right:4%; bottom:5px; text-align:right;}
#contact {width:65%;}
#contact input,#contact textarea {width:70%;}
    }


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */
    @media only screen and (max-width: 767px) {
#head, #main, #main-bg, .testimonials, footer, .testimonial-inner-wrapper {width:96%;}
body {margin:0;}
header {width:96%;}

header a.logo {background-size:100%; background-position:center; width:60px; height:70px;}
header .contact {font-size:.7em; padding:0 5px; margin-top:-5px;}
header .contact p a {font-size:14px;}
header form {display:none;}
header nav #menu-sub a, header nav #menu-sub a:hover {background:none; border-bottom:2px solid; padding:10px 5px;}
header nav #menu-sub li a {min-height:34px;}
.cycle-slideshow  {width:100%; float:none;}
.home aside {float:none; margin:8px 0 0; width:100%; height:330px;}
.home #content > div + div > div {width:100%; float:none;}
.home-menu ul {width:46%; height:715px;}
.home-menu li {font-size:20px; line-height:1.5;}
.testimonial-inner-wrapper .column.two {display:none;}
.testimonial-inner-wrapper .column.one {width:92%;}
.testimonial-inner-wrapper .read-more {text-align:center; margin:auto; position:relative; }
footer > div, #contactForm {width:100%; float:none; text-align:center;}
.home #content {float:none;width:100%;}
footer div.copy {float:none; background-position:center;}
footer h3 {font-size:25px;}
footer a {font-size:20px; line-height:normal;}
#sidebar {clear:both;width:100%;display:block;}
#contact {width:100%; float:none;}
#contact input,#contact textarea {width:90%;}
h1,h2,h3,h4,h5,h1.storytitle,h1.storytitle a {text-align:center;}
.alignleft,.alignright {margin:10px auto;float:none;display:block;}
   }


/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
#contact {width:100%; float:none;}
#contact input,#contact textarea {width:70%;}
    }

    @media only screen and (max-width: 700px) {
header nav #menu-sub li a {min-height:34px;}
	}

    @media only screen and (max-width: 550px) {
header nav #menu-sub li a {min-height:51px; padding:10px 5px;}
	}

    @media only screen and (max-width: 360px) {
header nav #menu-sub li a {min-height:51px;}
	}

    @media only screen and (max-width: 348px) {
header nav #menu-sub li a {min-height:51px;}
	


}