@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600");

/*
Telephasic by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

body {
-webkit-text-size-adjust: none;
}

mark {
background-color: transparent;
color: inherit;
}

input::-moz-focus-inner {
border: 0;
padding: 0;
}

input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}


/* Basic */

@-ms-viewport {
width: device-width;
}

html {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit;
}

body {
background: #f5f7fa;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
color: #52575c;
line-height: 1.75em;
font-size: 14pt;
}

body.is-preload *, body.is-preload *:before, body.is-preload *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}



input, textarea, select {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
color: #52575c;
line-height: 1.75em;
font-size: 15pt;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 300;
color: #52575c;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
text-decoration: none;
}

h2 {
font-size: 2em;
line-height: 1.25em;
}

h3 {
font-size: 1.5em;
line-height: 1.5em;
position: relative;
z-index: 1;
}

h4{
font-size: 2em;
line-height: 1.25em;
font-weight: bold;
}

h5{
font-size: 2em;
line-height: 1.25em;
font-weight: bold;
text-align: center;
}

a {
-moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
-ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
color: inherit;
text-decoration: none;
border-bottom: none;
}

a:hover {
color: #f35858;
border-bottom-color: rgba(255, 255, 255, 0);
}

strong, b {
font-weight: 400;
color: #42474c;
}

em, i {
font-style: italic;
}

sub {
position: relative;
top: 0.5em;
font-size: 0.8em;
}

sup {
position: relative;
top: -0.5em;
font-size: 0.8em;
}

hr {
border: 0;
border-top: solid 1px #c2c7cc;
}

blockquote {
border-left: solid 0.5em #c2c7cc;
padding: 1em 0 1em 2em;
font-style: italic;
}

p, ul, ol, dl, table {
margin-bottom: 1.5em;
}

br.clear {
clear: both;
}

.features {
margin-bottom: 1.5em;
}

.feature {
text-align: center;
}

/* Sections/Article */

section, article {
margin-bottom: 3em;
}

section > :last-child,
article > :last-child,
section:last-child,
article:last-child {
margin-bottom: 0;
}

.row > section, .row > article {
margin-bottom: 0;
}

header {
margin-bottom: 1.5em;

}

header > p {
display: block;
color: #f35858;
padding: 0.75em 0 1em 0;
font-size: 1.5em;
line-height: 1.5em;
}

header.major {
text-align: center;
}

#content{
position: relative;
z-index: 1;
}
/* Container */

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

@media screen and (max-width: 1280px) {

.container {
width: 960%; /* Converted to percentage for responsiveness */
}

}

@media screen and (max-width: 1080px) {

.container {
width: 100%;
}

}

@media screen and (max-width: 820px) {

.container {
width: 100%;
}

}

@media screen and (max-width: 736px) {

.container {
width: 100%;
}

}

@media screen and (max-width: 480px) {

.container {
width: 100%;
}

}

/* Row */

.row {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
align-items: stretch;
}

.row > * {
box-sizing: border-box;
}

.row.gtr-uniform > * > :last-child {
margin-bottom: 0;
}

.row.aln-left {
justify-content: flex-start;
}

.row.aln-center {
justify-content: center;
}

.row.aln-right {
justify-content: flex-end;
}

.row.aln-top {
align-items: flex-start;
}

.row.aln-middle {
align-items: center;
}

.row.aln-bottom {
align-items: flex-end;
}

.row > .imp {
order: -1;
}

.row > .col-1 {
width: 8.33333%;
}

.row > .off-1 {
margin-left: 8.33333%;
}

.row > .col-2 {
width: 16.66667%;
}

.row > .off-2 {
margin-left: 16.66667%;
}

.row > .col-3 {
width: 25%;
}

.row > .off-3 {
margin-left: 25%;
}

.row > .col-4 {
width: 33.33333%;
}

.row > .off-4 {
margin-left: 33.33333%;
}

.row > .col-5 {
width: 41.66667%;
}

.row > .off-5 {
margin-left: 41.66667%;
}

.row > .col-6 {
width: 50%;
}

.row > .off-6 {
margin-left: 50%;
}

.row > .col-7 {
width: 58.33333%;
}

.row > .off-7 {
margin-left: 58.33333%;
}

.row > .col-8 {
width: 66.66667%;
}

.row > .off-8 {
margin-left: 66.66667%;
}

.row > .col-9 {
width: 75%;
}

.row > .off-9 {
margin-left: 75%;
}

.row > .col-10 {
width: 83.33333%;
}

.row > .off-10 {
margin-left: 83.33333%;
}

.row > .col-11 {
width: 91.66667%;
}

.row > .off-11 {
margin-left: 91.66667%;
}

.row > .col-12 {
width: 100%;
}

.row > .off-12 {
margin-left: 100%;
}

.row.gtr-0 {
margin-top: 0px;
margin-left: 0px;
}

.row.gtr-0 > * {
padding: 0px 0 0 0px;
}

.row.gtr-0.gtr-uniform {
margin-top: 0px;
}

.row.gtr-0.gtr-uniform > * {
padding-top: 0px;
}

.row.gtr-25 {
margin-top: -12.5px;
margin-left: -12.5px;
}

.row.gtr-25 > * {
padding: 12.5px 0 0 12.5px;
}

.row.gtr-25.gtr-uniform {
margin-top: -12.5px;
}

.row.gtr-25.gtr-uniform > * {
padding-top: 12.5px;
}

.row.gtr-50 {
margin-top: -25px;
margin-left: -25px;
}

.row.gtr-50 > * {
padding: 25px 0 0 25px;
}

.row.gtr-50.gtr-uniform {
margin-top: -25px;
}

.row.gtr-50.gtr-uniform > * {
padding-top: 25px;
}

.row {
margin-top: -50px;
margin-left: -50px;
}

.row > * {
padding: 50px 0 0 50px;
}

.row.gtr-uniform {
margin-top: -50px;
}

.row.gtr-uniform > * {
padding-top: 50px;
}

.row.gtr-150 {
margin-top: -75px;
margin-left: -75px;
}

.row.gtr-150 > * {
padding: 75px 0 0 75px;
}

.row.gtr-150.gtr-uniform {
margin-top: -75px;
}

.row.gtr-150.gtr-uniform > * {
padding-top: 75px;
}

.row.gtr-200 {
margin-top: -100px;
margin-left: -100px;
}

.row.gtr-200 > * {
padding: 100px 0 0 100px;
}

.row.gtr-200.gtr-uniform {
margin-top: -100px;
}

.row.gtr-200.gtr-uniform > * {
padding-top: 100px;
}

@media screen and (max-width: 1280px) {

.row {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
align-items: stretch;
}

.row > * {
box-sizing: border-box;
}

.row.gtr-uniform > * > :last-child {
margin-bottom: 0;
}

.row.aln-left {
justify-content: flex-start;
}

.row.aln-center {
justify-content: center;
}

.row.aln-right {
justify-content: flex-end;
}

.row.aln-top {
align-items: flex-start;
}

.row.aln-middle {
align-items: center;
}

.row.aln-bottom {
align-items: flex-end;
}

.row > .imp-normal {
order: -1;
}

.row > .col-1-normal {
width: 8.33333%;
}

.row > .off-1-normal {
margin-left: 8.33333%;
}

.row > .col-2-normal {
width: 16.66667%;
}

.row > .off-2-normal {
margin-left: 16.66667%;
}

.row > .col-3-normal {
width: 25%;
}

.row > .off-3-normal {
margin-left: 25%;
}

.row > .col-4-normal {
width: 33.33333%;
}

.row > .off-4-normal {
margin-left: 33.33333%;
}

.row > .col-5-normal {
width: 41.66667%;
}

.row > .off-5-normal {
margin-left: 41.66667%;
}

.row > .col-6-normal {
width: 50%;
}

.row > .off-6-normal {
margin-left: 50%;
}

.row > .col-7-normal {
width: 58.33333%;
}

.row > .off-7-normal {
margin-left: 58.33333%;
}

.row > .col-8-normal {
width: 66.66667%;
}

.row > .off-8-normal {
margin-left: 66.66667%;
}

.row > .col-9-normal {
width: 75%;
}

.row > .off-9-normal {
margin-left: 75%;
}

.row > .col-10-normal {
width: 83.33333%;
}

.row > .off-10-normal {
margin-left: 83.33333%;
}

.row > .col-11-normal {
width: 91.66667%;
}

.row > .off-11-normal {
margin-left: 91.66667%;
}

.row > .col-12-normal {
width: 100%;
}

.row > .off-12-normal {
margin-left: 100%;
}

.row.gtr-0 {
margin-top: 0px;
margin-left: 0px;
}

.row.gtr-0 > * {
padding: 0px 0 0 0px;
}

.row.gtr-0.gtr-uniform {
margin-top: 0px;
}

.row.gtr-0.gtr-uniform > * {
padding-top: 0px;
}

.row.gtr-25 {
margin-top: -10px;
margin-left: -10px;
}

.row.gtr-25 > * {
padding: 10px 0 0 10px;
}

.row.gtr-25.gtr-uniform {
margin-top: -10px;
}

.row.gtr-25.gtr-uniform > * {
padding-top: 10px;
}

.row.gtr-50 {
margin-top: -20px;
margin-left: -20px;
}

.row.gtr-50 > * {
padding: 20px 0 0 20px;
}

.row.gtr-50.gtr-uniform {
margin-top: -20px;
}

.row.gtr-50.gtr-uniform > * {
padding-top: 20px;
}

.row {
margin-top: -40px;
margin-left: -40px;
}

.row > * {
padding: 40px 0 0 40px;
}

.row.gtr-uniform {
margin-top: -40px;
}

.row.gtr-uniform > * {
padding-top: 40px;
}

.row.gtr-150 {
margin-top: -60px;
margin-left: -60px;
}

.row.gtr-150 > * {
padding: 60px 0 0 60px;
}

.row.gtr-150.gtr-uniform {
margin-top: -60px;
}

.row.gtr-150.gtr-uniform > * {
padding-top: 60px;
}

.row.gtr-200 {
margin-top: -80px;
margin-left: -80px;
}

.row.gtr-200 > * {
padding: 80px 0 0 80px;
}

.row.gtr-200.gtr-uniform {
margin-top: -80px;
}

.row.gtr-200.gtr-uniform > * {
padding-top: 80px;
}

}

@media screen and (max-width: 1080px) {

.row {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
align-items: stretch;
}

.row > * {
box-sizing: border-box;
}

.row.gtr-uniform > * > :last-child {
margin-bottom: 0;
}

.row.aln-left {
justify-content: flex-start;
}

.row.aln-center {
justify-content: center;
}

.row.aln-right {
justify-content: flex-end;
}

.row.aln-top {
align-items: flex-start;
}

.row.aln-middle {
align-items: center;
}

.row.aln-bottom {
align-items: flex-end;
}

.row > .imp-narrow {
order: -1;
}

.row > .col-1-narrow {
width: 8.33333%;
}

.row > .off-1-narrow {
margin-left: 8.33333%;
}

.row > .col-2-narrow {
width: 16.66667%;
}

.row > .off-2-narrow {
margin-left: 16.66667%;
}

.row > .col-3-narrow {
width: 25%;
}

.row > .off-3-narrow {
margin-left: 25%;
}

.row > .col-4-narrow {
width: 33.33333%;
}

.row > .off-4-narrow {
margin-left: 33.33333%;
}

.row > .col-5-narrow {
width: 41.66667%;
}

.row > .off-5-narrow {
margin-left: 41.66667%;
}

.row > .col-6-narrow {
width: 50%;
}

.row > .off-6-narrow {
margin-left: 50%;
}

.row > .col-7-narrow {
width: 58.33333%;
}

.row > .off-7-narrow {
margin-left: 58.33333%;
}

.row > .col-8-narrow {
width: 66.66667%;
}

.row > .off-8-narrow {
margin-left: 66.66667%;
}

.row > .col-9-narrow {
width: 75%;
}

.row > .off-9-narrow {
margin-left: 75%;
}

.row > .col-10-narrow {
width: 83.33333%;
}

.row > .off-10-narrow {
margin-left: 83.33333%;
}

.row > .col-11-narrow {
width: 91.66667%;
}

.row > .off-11-narrow {
margin-left: 91.66667%;
}

.row > .col-12-narrow {
width: 100%;
}

.row > .off-12-narrow {
margin-left: 100%;
}

.row.gtr-0 {
margin-top: 0px;
margin-left: 0px;
}

.row.gtr-0 > * {
padding: 0px 0 0 0px;
}

.row.gtr-0.gtr-uniform {
margin-top: 0px;
}

.row.gtr-0.gtr-uniform > * {
padding-top: 0px;
}

.row.gtr-25 {
margin-top: -10px;
margin-left: -10px;
}

.row.gtr-25 > * {
padding: 10px 0 0 10px;
}

.row.gtr-25.gtr-uniform {
margin-top: -10px;
}

.row.gtr-25.gtr-uniform > * {
padding-top: 10px;
}

.row.gtr-50 {
margin-top: -20px;
margin-left: -20px;
}

.row.gtr-50 > * {
padding: 20px 0 0 20px;
}

.row.gtr-50.gtr-uniform {
margin-top: -20px;
}

.row.gtr-50.gtr-uniform > * {
padding-top: 20px;
}

.row {
margin-top: -40px;
margin-left: -40px;
}

.row > * {
padding: 40px 0 0 40px;
}

.row.gtr-uniform {
margin-top: -40px;
}

.row.gtr-uniform > * {
padding-top: 40px;
}

.row.gtr-150 {
margin-top: -60px;
margin-left: -60px;
}

.row.gtr-150 > * {
padding: 60px 0 0 60px;
}

.row.gtr-150.gtr-uniform {
margin-top: -60px;
}

.row.gtr-150.gtr-uniform > * {
padding-top: 60px;
}

.row.gtr-200 {
margin-top: -80px;
margin-left: -80px;
}

.row.gtr-200 > * {
padding: 80px 0 0 80px;
}

.row.gtr-200.gtr-uniform {
margin-top: -80px;
}

.row.gtr-200.gtr-uniform > * {
padding-top: 80px;
}

}

@media screen and (max-width: 820px) {

.row {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
align-items: stretch;
}

.row > * {
box-sizing: border-box;
}

.row.gtr-uniform > * > :last-child {
margin-bottom: 0;
}

.row.aln-left {
justify-content: flex-start;
}

.row.aln-center {
justify-content: center;
}

.row.aln-right {
justify-content: flex-end;
}

.row.aln-top {
align-items: flex-start;
}

.row.aln-middle {
align-items: center;
}

.row.aln-bottom {
align-items: flex-end;
}

.row > .imp-narrower {
order: -1;
}

.row > .col-1-narrower {
width: 8.33333%;
}

.row > .off-1-narrower {
margin-left: 8.33333%;
}

.row > .col-2-narrower {
width: 16.66667%;
}

.row > .off-2-narrower {
margin-left: 16.66667%;
}

.row > .col-3-narrower {
width: 25%;
}

.row > .off-3-narrower {
margin-left: 25%;
}

.row > .col-4-narrower {
width: 33.33333%;
}

.row > .off-4-narrower {
margin-left: 33.33333%;
}

.row > .col-5-narrower {
width: 41.66667%;
}

.row > .off-5-narrower {
margin-left: 41.66667%;
}

.row > .col-6-narrower {
width: 50%;
}

.row > .off-6-narrower {
margin-left: 50%;
}

.row > .col-7-narrower {
width: 58.33333%;
}

.row > .off-7-narrower {
margin-left: 58.33333%;
}

.row > .col-8-narrower {
width: 66.66667%;
}

.row > .off-8-narrower {
margin-left: 66.66667%;
}

.row > .col-9-narrower {
width: 75%;
}

.row > .off-9-narrower {
margin-left: 75%;
}

.row > .col-10-narrower {
width: 83.33333%;
}

.row > .off-10-narrower {
margin-left: 83.33333%;
}

.row > .col-11-narrower {
width: 91.66667%;
}

.row > .off-11-narrower {
margin-left: 91.66667%;
}

.row > .col-12-narrower {
width: 100%;
}

.row > .off-12-narrower {
margin-left: 100%;
}

.row.gtr-0 {
margin-top: 0px;
margin-left: 0px;
}

.row.gtr-0 > * {
padding: 0px 0 0 0px;
}

.row.gtr-0.gtr-uniform {
margin-top: 0px;
}

.row.gtr-0.gtr-uniform > * {
padding-top: 0px;
}

.row.gtr-25 {
margin-top: -7.5px;
margin-left: -7.5px;
}

.row.gtr-25 > * {
padding: 7.5px 0 0 7.5px;
}

.row.gtr-25.gtr-uniform {
margin-top: -7.5px;
}

.row.gtr-25.gtr-uniform > * {
padding-top: 7.5px;
}

.row.gtr-50 {
margin-top: -15px;
margin-left: -15px;
}

.row.gtr-50 > * {
padding: 15px 0 0 15px;
}

.row.gtr-50.gtr-uniform {
margin-top: -15px;
}

.row.gtr-50.gtr-uniform > * {
padding-top: 15px;
}

.row {
margin-top: -30px;
margin-left: -30px;
}

.row > * {
padding: 30px 0 0 30px;
}

.row.gtr-uniform {
margin-top: -30px;
}

.row.gtr-uniform > * {
padding-top: 30px;
}

.row.gtr-150 {
margin-top: -45px;
margin-left: -45px;
}

.row.gtr-150 > * {
padding: 45px 0 0 45px;
}

.row.gtr-150.gtr-uniform {
margin-top: -45px;
}

.row.gtr-150.gtr-uniform > * {
padding-top: 45px;
}

.row.gtr-200 {
margin-top: -60px;
margin-left: -60px;
}

.row.gtr-200 > * {
padding: 60px 0 0 60px;
}

.row.gtr-200.gtr-uniform {
margin-top: -60px;
}

.row.gtr-200.gtr-uniform > * {
padding-top: 60px;
}

}

@media screen and (max-width: 736px) {

.row {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
align-items: stretch;
}

.row > * {
box-sizing: border-box;
}

.row.gtr-uniform > * > :last-child {
margin-bottom: 0;
}

.row.aln-left {
justify-content: flex-start;
}

.row.aln-center {
justify-content: center;
}

.row.aln-right {
justify-content: flex-end;
}

.row.aln-top {
align-items: flex-start;
}

.row.aln-middle {
align-items: center;
}

.row.aln-bottom {
align-items: flex-end;
}

.row > .imp-mobile {
order: -1;
}

.row > .col-1-mobile {
width: 8.33333%;
}

.row > .off-1-mobile {
margin-left: 8.33333%;
}

.row > .col-2-mobile {
width: 16.66667%;
}

.row > .off-2-mobile {
margin-left: 16.66667%;
}

.row > .col-3-mobile {
width: 25%;
}

.row > .off-3-mobile {
margin-left: 25%;
}

.row > .col-4-mobile {
width: 33.33333%;
}

.row > .off-4-mobile {
margin-left: 33.33333%;
}

.row > .col-5-mobile {
width: 41.66667%;
}

.row > .off-5-mobile {
margin-left: 41.66667%;
}

.row > .col-6-mobile {
width: 50%;
}

.row > .off-6-mobile {
margin-left: 50%;
}

.row > .col-7-mobile {
width: 58.33333%;
}

.row > .off-7-mobile {
margin-left: 58.33333%;
}

.row > .col-8-mobile {
width: 66.66667%;
}

.row > .off-8-mobile {
margin-left: 66.66667%;
}

.row > .col-9-mobile {
width: 75%;
}

.row > .off-9-mobile {
margin-left: 75%;
}

.row > .col-10-mobile {
width: 83.33333%;
}

.row > .off-10-mobile {
margin-left: 83.33333%;
}

.row > .col-11-mobile {
width: 91.66667%;
}

.row > .off-11-mobile {
margin-left: 91.66667%;
}

.row > .col-12-mobile {
width: 100%;
}

.row > .off-12-mobile {
margin-left: 100%;
}

.row.gtr-0 {
margin-top: 0px;
margin-left: 0px;
}

.row.gtr-0 > * {
padding: 0px 0 0 0px;
}

.row.gtr-0.gtr-uniform {
margin-top: 0px;
}

.row.gtr-0.gtr-uniform > * {
padding-top: 0px;
}

.row.gtr-25 {
margin-top: -5px;
margin-left: -5px;
}

.row.gtr-25 > * {
padding: 5px 0 0 5px;
}

.row.gtr-25.gtr-uniform {
margin-top: -5px;
}

.row.gtr-25.gtr-uniform > * {
padding-top: 5px;
}

.row.gtr-50 {
margin-top: -10px;
margin-left: -10px;
}

.row.gtr-50 > * {
padding: 10px 0 0 10px;
}

.row.gtr-50.gtr-uniform {
margin-top: -10px;
}

.row.gtr-50.gtr-uniform > * {
padding-top: 10px;
}

.row {
margin-top: -20px;
margin-left: -20px;
}

.row > * {
padding: 20px 0 0 20px;
}

.row.gtr-uniform {
margin-top: -20px;
}

.row.gtr-uniform > * {
padding-top: 20px;
}

.row.gtr-150 {
margin-top: -30px;
margin-left: -30px;
}

.row.gtr-150 > * {
padding: 30px 0 0 30px;
}

.row.gtr-150.gtr-uniform {
margin-top: -30px;
}

.row.gtr-150.gtr-uniform > * {
padding-top: 30px;
}

.row.gtr-200 {
margin-top: -40px;
margin-left: -40px;
}

.row.gtr-200 > * {
padding: 40px 0 0 40px;
}

.row.gtr-200.gtr-uniform {
margin-top: -40px;
}

.row.gtr-200.gtr-uniform > * {
padding-top: 40px;
}

}

@media screen and (max-width: 480px) {

.row {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
align-items: stretch;
}

.row > * {
box-sizing: border-box;
}

.row.gtr-uniform > * > :last-child {
margin-bottom: 0;
}

.row.aln-left {
justify-content: flex-start;
}

.row.aln-center {
justify-content: center;
}

.row.aln-right {
justify-content: flex-end;
}

.row.aln-top {
align-items: flex-start;
}

.row.aln-middle {
align-items: center;
}

.row.aln-bottom {
align-items: flex-end;
}

.row > .imp-mobilep {
order: -1;
}

.row > .col-1-mobilep {
width: 8.33333%;
}

.row > .off-1-mobilep {
margin-left: 8.33333%;
}

.row > .col-2-mobilep {
width: 16.66667%;
}

.row > .off-2-mobilep {
margin-left: 16.66667%;
}

.row > .col-3-mobilep {
width: 25%;
}

.row > .off-3-mobilep {
margin-left: 25%;
}

.row > .col-4-mobilep {
width: 33.33333%;
}

.row > .off-4-mobilep {
margin-left: 33.33333%;
}

.row > .col-5-mobilep {
width: 41.66667%;
}

.row > .off-5-mobilep {
margin-left: 41.66667%;
}

.row > .col-6-mobilep {
width: 50%;
}

.row > .off-6-mobilep {
margin-left: 50%;
}

.row > .col-7-mobilep {
width: 58.33333%;
}

.row > .off-7-mobilep {
margin-left: 58.33333%;
}

.row > .col-8-mobilep {
width: 66.66667%;
}

.row > .off-8-mobilep {
margin-left: 66.66667%;
}

.row > .col-9-mobilep {
width: 75%;
}

.row > .off-9-mobilep {
margin-left: 75%;
}

.row > .col-10-mobilep {
width: 83.33333%;
}

.row > .off-10-mobilep {
margin-left: 83.33333%;
}

.row > .col-11-mobilep {
width: 91.66667%;
}

.row > .off-11-mobilep {
margin-left: 91.66667%;
}

.row > .col-12-mobilep {
width: 100%;
}

.row > .off-12-mobilep {
margin-left: 100%;
}

.row.gtr-0 {
margin-top: 0px;
margin-left: 0px;
}

.row.gtr-0 > * {
padding: 0px 0 0 0px;
}

.row.gtr-0.gtr-uniform {
margin-top: 0px;
}

.row.gtr-0.gtr-uniform > * {
padding-top: 0px;
}

.row.gtr-25 {
margin-top: -5px;
margin-left: -5px;
}

.row.gtr-25 > * {
padding: 5px 0 0 5px;
}

.row.gtr-25.gtr-uniform {
margin-top: -5px;
}

.row.gtr-25.gtr-uniform > * {
padding-top: 5px;
}

.row.gtr-50 {
margin-top: -10px;
margin-left: -10px;
}

.row.gtr-50 > * {
padding: 10px 0 0 10px;
}

.row.gtr-50.gtr-uniform {
margin-top: -10px;
}

.row.gtr-50.gtr-uniform > * {
padding-top: 10px;
}

.row {
margin-top: -20px;
margin-left: -20px;
}

.row > * {
padding: 20px 0 0 20px;
}

.row.gtr-uniform {
margin-top: -20px;
}

.row.gtr-uniform > * {
padding-top: 20px;
}

.row.gtr-150 {
margin-top: -30px;
margin-left: -30px;
}

.row.gtr-150 > * {
padding: 30px 0 0 30px;
}

.row.gtr-150.gtr-uniform {
margin-top: -30px;
}

.row.gtr-150.gtr-uniform > * {
padding-top: 30px;
}

.row.gtr-200 {
margin-top: -40px;
margin-left: -40px;
}

.row.gtr-200 > * {
padding: 40px 0 0 40px;
}

.row.gtr-200.gtr-uniform {
margin-top: -40px;
}

.row.gtr-200.gtr-uniform > * {
padding-top: 40px;
}

}

/* Image */

.image {
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
-ms-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
display: inline-block;
outline: 0;
border: 0;
}

.image img {
display: block;
width: 100%;
}

.image.fit {
display: block;
width: 100%;
}

.image.featured {
display: block;
width: 100%;
margin: 0 0 3em 0;
}

.image.left {
float: left;
margin: 0 2em 2em 0;
}

.image.centered {
display: block;
margin: 0 0 3em 0;
}

.image.centered img {
margin: 0 auto;
width: auto;
}

a.image:hover {
opacity: 0.85;
}

/* List */

ul {
list-style: disc;
padding-left: 1em;
}

ul li {
padding-left: 0.5em;
}

ol {
list-style: decimal;
padding-left: 1.25em;
}

ol li {
padding-left: 0.25em;
}

/* Actions */

ul.actions {
padding-top: 1em;
list-style: none;
padding-left: 0;
}

ul.actions.major {
text-align: center;
}

ul.actions li {
display: inline-block;
margin-left: 1em;
padding-left: 0;
}

ul.actions li:first-child {
margin-left: 0;
}

/* Divided */

ul.divided {
list-style: none;
padding-left: 0;
}

ul.divided li {
border-top: solid 1px #d2d7dc;
padding-top: 2em;
margin-top: 2em;
padding-left: 0;
}

ul.divided li:first-child {
padding-top: 0;
margin-top: 0;
border-top: 0;
}

/* Icons */

ul.icons {
list-style: none;
padding-left: 0;
}

ul.icons li {
padding-left: 0;
}

ul.icons li:before {
display: inline-block;
color: #fff;
background: #61666b;
width: 2.5em;
height: 2.5em;
border-radius: 0.35em;
text-align: center;
line-height: 2.5em;
margin-right: 0.75em;
}

/* Menu */

ul.menu {
list-style: none;
padding-left: 0;
}

ul.menu li {
display: inline-block;
border-left: solid 1px #d2d7dc;
padding-left: 1em;
margin-left: 1em;
}

ul.menu li:first-child {
border-left: 0;
padding-left: 0;
margin-left: 0;
}

/* Form */

form .actions {
padding-top: 0;
}

form label {
display: block;
font-weight: 300;
color: #52575c;
margin: 0 0 0.5em 0;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
-moz-transition: background-color 0.25s ease-in-out;
-webkit-transition: background-color 0.25s ease-in-out;
-ms-transition: background-color 0.25s ease-in-out;
transition: background-color 0.25s ease-in-out;
-webkit-appearance: none;
display: block;
background: #f9fbfe;
border: solid 1px #d2d7dc;
border-radius: 0.35em;
width: 100%;
line-height: 1.5em;
padding: 0.75em;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
background: #fff;
}

form textarea {
min-height: 7em;
}

form ::-webkit-input-placeholder {
color: #555 !important;
}

form :-moz-placeholder {
color: #555 !important;
}

form ::-moz-placeholder {
color: #555 !important;
}

form :-ms-input-placeholder {
color: #555 !important;
}

form ::-moz-focus-inner {
border: 0;
}

/* Table */

table {
width: 100%;
}

table.default {
width: 100%;
}

table.default tbody tr {
border-top: solid 1px #D2D7DC;
}

table.default tbody tr:nth-child(2n+1) {
background: #f9fbfe;
}

table.default td {
padding: 0.5em 1em 0.5em 1em;
}

table.default th {
text-align: left;
font-weight: 400;
padding: 0.5em 1em 0.5em 1em;
}

table.default tfoot {
border-top: solid 1px #D2D7DC;
}

/* Button */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
-moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
-ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
display: inline-block;
color: inherit;
background: none;
text-decoration: none;
border: solid 1px #c2c7cc;
border-radius: 0.35em;
padding: 0.8em 2em 0.8em 2em;
cursor: pointer;
outline: 0;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
color: #f35858;
border-color: rgba(243, 88, 88, 0.5);
}

/* Icons */

.icon {
text-decoration: none;
text-decoration: none;
}

.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}

.icon:before {
line-height: inherit;
}

.icon > .label {
display: none;
}

.icon.solid:before {
font-weight: 900;
}

.icon.brands:before {
font-family: 'Font Awesome 5 Brands';
}

/* Wrappers */

.wrapper {
position: relative;
background: #fff;
overflow-x: hidden;
padding: 6em 0 6em 0;
}

.image-wrapper {
position: relative;
}

.image-wrapper .image {
position: relative;
z-index: 2;
}

.image-wrapper.first:before {
content: '';
display: block;
width: 2000%;
height: 100%;
position: absolute;
left: -1000%;
top: 0;
z-index: 1;
box-shadow: inset 0px 0px 0px 1px #e8e8e8;
background: #f6f8fb url("images/image-wrapper.svg");
}

#header-wrapper {
position: sticky;
padding: 4em 0 2em 0;
background-image: url("images/header.svg");
background-image: url("images/overlay.png"), url("images/header.svg"), -moz-linear-gradient(75deg, #FF7088 15%, #F2B69D 55%);
background-image: url("images/overlay.png"), url("images/header.svg"), -webkit-linear-gradient(75deg, #FF7088 15%, #F2B69D 55%);
background-image: url("images/overlay.png"), url("images/header.svg"), -ms-linear-gradient(75deg, #FF7088 15%, #F2B69D 55%);
background-image: url("images/overlay.png"), url("images/header.svg"), linear-gradient(75deg, #FF7088 15%, #F2B69D 55%);
background-color: #f08c89;
background-size: 100% 620%;
background-size: 128px 128px, 100% 620%, auto;
background-repeat: repeat, no-repeat, no-repeat;
top: 0;
z-index: 500 !important;
}


#promo-wrapper {
position: relative;
background-image: url("images/overlay.png"), url("../../images/promo.jpg");
background-size: 192px 192px, cover;
background-position: top left, center center;
color: #fff;
text-align: center;
padding: 6em 0 6em 0;
}

#footer-wrapper {
-webkit-transform: translate3d(0, 0, 0);
position: relative;
border-top: solid 1px #c2c7cc;
padding: 0; /* Set padding to 0 to eliminate space */
background-image: url("images/overlay.png"), url("images/footer.svg");
background-size: 128px 128px, 100% 100%;
overflow: hidden; /* Contains floated children if necessary */
top: 3%;

}

/* Reset margins for child elements */
#footer-wrapper h3,
#footer-wrapper p,
#footer-wrapper ul {
margin: 0;
}


/* Header */

#logo {
position: absolute;
z-index: 1;
top: 2%;
left: 15%;
width: 15em;
margin-left: -7.5em;

}

#logo a {
display: block;
width: 100%;
height: 4em;
line-height: 4em;
background: rgba(255, 255, 255, 0.15);
border: solid 1px;
border-color: #fff;
border-color: rgba(255, 255, 255, 0.75);
border-top: 0;
border-radius: 0 0 0.35em 0.35em;
color: #fff;
display: inline-block;
font-weight: 600;
letter-spacing: 3px;
text-align: center;
text-transform: uppercase;
}

#nav {
text-align: center;
position: absolute;
top: 2%;
left: 50%;
width: auto;
height: 4em;
line-height: 4em;
margin-top: 20px;
z-index: 600;
}

#nav > ul {
margin: 0;
}

#nav > ul > li {
display: inline-block;
margin-left: 0.5em;
}

#nav > ul > li > ul {
display: none;
}

#nav > ul > li > span, #nav > ul > li > a {
color: #fff;
text-decoration: none;
outline: 0;
border: 0;
border: solid 1px rgba(255, 255, 255, 0);
border-radius: 0.35em;
padding: 0.3em 1em 0.3em 1em;
-moz-transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
-webkit-transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
-o-transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
-ms-transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
}

#nav > ul > li.active > span, #nav > ul > li.active > a {
border-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
}

#nav > ul > li:first-child {
margin-left: 0;
}

#nav > ul > li.break {
margin-left: 0.5em;
}

.dropotron {
text-align: left;
line-height: 2em;
border-radius: 0.35em;
min-width: 12em;
background: #fff;
line-height: 1em;
padding: 0.85em 0 0.85em 0;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
margin-top: -0.8em;
list-style: none;
}

.dropotron a, .dropotron span {
display: block;
padding: 0.65em 1em 0.65em 1em;
border-top: solid 1px #e8e8e8;
border-bottom: 0;
}

.dropotron li {
padding-left: 0;
}

.dropotron li:first-child > a, .dropotron li:first-child > span {
border-top: 0;
}

.dropotron li.active > a, .dropotron li.active > span {
color: #f35858;
}

.dropotron.level-0 {
font-size: 0.9em;
margin-top: 0;
}

.dropotron.level-0:before {
content: '';
position: absolute;
top: -1em;
width: 1em;
height: 1em;
border-bottom: solid 0.5em #fff;
border-left: solid 0.5em rgba(255, 255, 255, 0);
border-right: solid 0.5em rgba(255, 255, 255, 0);
}

.dropotron.level-0.center:before {
left: 50%;
margin-left: -0.5em;
}

.dropotron.level-0.left:before {
left: 1em;
}

.dropotron.level-0.right:before {
right: 1em;
}
/* Hero */

#hero {
position: relative;
color: #fff;
text-align: center;
z-index: 1;
}

#hero h2 {
color: #fff;
font-size: 3em;
}

#hero strong {
color: inherit;
}

#hero header > span {
color: #fff;
}

#hero p {
font-size: 1.5em;
line-height: 1.5em;
}

#hero .button {
background: #fff;
border-color: rgba(255, 255, 255, 0);
color: #f08c89;
font-size: 1.25em;
}

#hero .button:hover {
border-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
}

#hero a {
color: #fff;
border-color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}

#hero a:hover {
border-color: rgba(255, 255, 255, 0);
}

/* Promo */

#promo {
background: rgba(255, 255, 255, 0.05);
border: solid 1px rgba(255, 255, 255, 0.25);
border-radius: 0.5em;
padding: 1.75em 2.5em 1.75em 2.5em;
display: inline-block;
position: relative;
z-index: 1;
}

#promo h2 {
color: #fff;
display: inline-block;
margin-right: 1em;
font-size: 1.75em;
}

#promo .button {
background: #fff;
border-color: rgba(255, 255, 255, 0);
color: #27636B;
font-size: 1.25em;
}

#promo .button:hover {
border-color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
}

/* Main */

#main {
padding-bottom: 4em;
}

/* Sidebar */

#sidebar section {
border-top: solid 1px #d2d7dc;
margin-top: 3em;
padding-top: 3em;
text-align: center;
list-style: none;
position: relative;
z-index: 1;
}

#sidebar section li{
text-align: left;
margin-left: calc((100% - 213px) / 2); /* Adjust 1000px to your desired header width */
}

/* Style for the sidebar links */
#sidebar a {
text-decoration: none; /* Remove underline */
color: #000; /* Set default text color */
transition: color 0.3s ease; /* Smooth transition for hover effect */
}

/* Highlight text color on hover */
#sidebar a:hover {
color: #1DA1F2; /* Change to blue when hovered (Twitter blue) */
}

#sidebar section:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0;
}

/* Footer */

#footer {
position: relative;
z-index: 1;
}

#footer header.major {
margin-bottom: 3em;
}

/* Copyright */

#copyright {
position: relative;
z-index: 1;
text-align: left;
border-top: solid 1px #d2d7dc;
color: #a2a7ac;
padding-top: 2em;
margin-top: 4em;
margin-bottom: 50px;
}

/* self opt */


@media screen and (max-width: 3840px) {
#nav {
left: 60%;

}

}
@media screen and (max-width: 1920px) {
#nav {
left: 50%;

}

}

@media screen and (max-width: 1440px) {
#nav {
left: 43%;

}

}
/* Normal */

@media screen and (max-width: 1280px) {

/* Basic */

body, input, textarea, select {
line-height: 1.5em;
font-size: 13pt;
}

span.extra {
display: none;
}
/* nav */
#nav {
left: 38%;

}
/* Wrappers */

.wrapper {
padding: 5em 0 5em 0;
}

#header-wrapper {
padding: 2em 0 2em 0;
position: sticky;
top: 0;
z-index: 500;
}

.homepage #header-wrapper {
padding: 3em 20px 3em 20px;
position: sticky;
top: 0;
z-index: 500;
} 

/* Padding for About page */
.about #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Products page */
.products #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Detergent page */
.detergent #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Salt page */
.salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Industrial Salt page */
.industrial-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Dishwashing Salt page */
.dishwashing-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for water softener Salt page */
.water-softener-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for De-Icing Salt page */
.de-icing-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Pool Salt page */
.pool-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Oil Field Salt page */
.oil-field-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Food Grade Salt page */
.food-grade-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Pulverized Salt page */
.pulverized-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Animal Feed Salt page */
.animal-feed-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Colored Speckles page */
.colored-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Green Speckles page */
.green-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Red Speckles page */
.red-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Blue Speckles page */
.blue-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Orange Speckles page */
.orange-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Pink Speckles page */
.pink-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Contact page */
.contact #header-wrapper {
    padding: 3em 20px 3em 20px;
}

.our-factories #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.detergent-powder-salt #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.blog #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post1 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post2 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post3 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post4 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

#promo-wrapper {
padding: 5em 0 5em 0;
}

#footer-wrapper {
padding: 5em 0 5em 0;
}

}

/* Narrow */

@media screen and (max-width: 1080px) {

/* Sections/Article */

header br {
display: none;
}

/* Button */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
padding-left: 1.25em;
padding-right: 1.25em;
}

/* Wrappers */

.wrapper {
padding: 4em 2em 4em 2em;
}

#header-wrapper {
padding: 5em 0 1em 0;
position: sticky;
top: 0;
z-index: 500;
}

.homepage #header-wrapper {
padding: 3em 20px 3em 20px;
position: sticky;
top: 0;
z-index: 500;
}

/* Padding for About page */
.about #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Products page */
.products #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Detergent page */
.detergent #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Salt page */
.salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Industrial Salt page */
.industrial-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Dishwashing Salt page */
.dishwashing-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for water softener Salt page */
.water-softener-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for De-Icing Salt page */
.de-icing-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Pool Salt page */
.pool-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Oil Field Salt page */
.oil-field-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Food Grade Salt page */
.food-grade-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Pulverized Salt page */
.pulverized-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Animal Feed Salt page */
.animal-feed-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Colored Speckles page */
.colored-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Green Speckles page */
.green-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Red Speckles page */
.red-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Blue Speckles page */
.blue-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Orange Speckles page */
.orange-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Pink Speckles page */
.pink-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Contact page */
.contact #header-wrapper {
    padding: 3em 20px 3em 20px;
}

.our-factories #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.detergent-powder-salt #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.blog #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post1 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post2 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post3 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post4 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

#promo-wrapper {
padding: 2em;
}

#footer-wrapper {
padding: 4em 2em 4em 2em;
}

/* Header */

#nav {
position: relative;
margin: 0.5em 0 0 0;
line-height: 2.25em;
height: 2.25em;
left: 10%;
}

#nav > ul > li {
margin-left: 0;
}

#nav > ul > li.break {
margin-left: 0;
}

.dropotron.level-0 {
margin-top: 1.1em;
}

/* Hero */

#hero {
padding: 3.5em 4em 0 4em;
}

#hero h2 {
font-size: 2.75em;
}

#hero p br {
display: none;
}

/* Promo */

#promo {
padding: 1.75em 2.5em 1.75em 2.5em;
display: inline-block;
}

#promo .button {
font-size: 1.25em;
}

#promo h2 {
display: block;
margin: 0 0 1em 0;
font-size: 1.5em;
}

/* Copyright */

#copyright {
padding-top: 2em;
margin-top: 3em;
}

}

/* Narrower */

@media screen and (max-width: 820px) {

/* Basic */

body, input, textarea, select {
line-height: 1.5em;
font-size: 14pt;
}

span.extra {
display: inline;
}

.features {
margin-bottom: 0;
}

/* wrappers */

.homepage #header-wrapper {
padding: 3em 20px 3em 15px;
}

/* Sections/Article */

section, article {
margin-bottom: 3em;
}

.row > section, .row > article {
margin-bottom: 3em;
}

section:last-child,
article:last-child {
margin-bottom: 0;
}

.row > section:last-child,
.row > article:last-child {
margin-bottom: 0;
}

/* Menu */

ul.menu {
text-align: center;
}

ul.menu li {
display: block;
border: 0;
padding: 0;
margin: 0;
line-height: 2em;
}

ul.menu li:first-child {
border-top: 0;
}

/* Actions */

ul.actions.major {
padding-top: 2em;
}

/* Header */


#nav {
font-size: 0.9em;
}

#nav {
left: 10%;

}


/* Hero */

#hero h2 {
font-size: 2.5em;
}

/* Main */

#main {
padding-bottom: 0;
}

/* Content */

#content {
margin-bottom: 3em;
}

/* Sidebar */
    
    #sidebar section h3, /* Hide the header */
    #sidebar section a:not(.featured) { /* Hide the list items but not the featured image link */
        display: none; 
    }
}

/* Footer */

#footer header.major {
margin-bottom: 1.5em;
}

}

/* Mobile */

#navPanel, #navButton {
display: none;
}

@media screen and (max-width: 768px) {
/* nav */
.hamburger {
    position: absolute;
    display: block;
    width: 60px; /* Width of the hamburger icon */
    cursor: pointer;
    background: none; /* No background */
    outline: none; /* Remove outline */
    border: none; /* No border */
right: 16px;
top: 34%;
}

.hamburger .bar,
.hamburger:after,
.hamburger:before {
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    background-color: #FFF; /* Color of the hamburger bars */
    margin: 6px 0px;
    transition: 0.4s; /* Smooth transition */
}

.mobile-nav {
    position: fixed; /* Fixed position for mobile navigation */
    top: 0;
    left: 100%; /* Start off-screen */
    width: 100%;
    min-height: 100vh; /* Full height on mobile */
max-height: 100vh;
    display: block; /* Display the navigation */
    z-index: 98; /* Positioned under the header */
    background-image: url("images/header.svg");
background-image: url("images/overlay.png"), url("images/header.svg"), -moz-linear-gradient(75deg, #FF7088 15%, #F2B69D 55%);
background-image: url("images/overlay.png"), url("images/header.svg"), -webkit-linear-gradient(75deg, #FF7088 15%, #F2B69D 55%);
background-image: url("images/overlay.png"), url("images/header.svg"), -ms-linear-gradient(75deg, #FF7088 15%, #F2B69D 55%);
background-image: url("images/overlay.png"), url("images/header.svg"), linear-gradient(75deg, #FF7088 15%, #F2B69D 55%);
background-color: #f08c89;
    padding-top: 120px; /* Padding for content below the header */
    transition: 0.4s; /* Smooth transition */
transform: translateX(100%); /* Start off-screen */
overflow-y: auto; /* Enables vertical scrolling */
}

.mobile-nav.is-active {
    left: 0; /* Moves into view */
transform: translateX(0); /* Move into view */
}

.mobile-nav a {
    display: block; /* Full-width links */
    top: 20%;
max-width: 200px;
    margin: 0 auto 16px;
    text-align: center;
    padding: 12px 16px;
    background-color: transparent; /* Link background color */
    color: #FFF; /* Link text color */
font-weight: bold;
    text-decoration: none; /* No underline */
margin-top: 20%;
text-align: center;
}

.mobile-nav a:hover {
    background-color: transparent; /* Change background on hover */
color: #1DA1F2;
}

mobile-nav .hamburger {
    display: block; /* Ensure hamburger is visible in mobile nav */
}

.close-menu {
    position: absolute; /* Position it in the top right corner */
    display: block; /* Ensure it's displayed */
    font-size: 50px; /* Adjust the font size for the "X" */
    font-weight: bold; /* Keep it bold */
    color: #FFF; /* Set color to white */
    background: none; /* No background */
    border: none; /* No border */
    cursor: pointer; /* Pointer on hover */
    top: 12.2%; /* Position from the top */
    padding: 0; /* Remove padding */
    line-height: 1; /* Adjust line height to fit the X snugly */
    transition: color 0.3s; /* Smooth color transition */
	left: 50%;                   /* Position from the left */
    transform: translate(-50%, -50%); /* Center the button */
}

/* Optional: Add a hover effect */
.close-menu:hover {
    color: #FF9FDB; /* Change color on hover */
}

/* nav dropdown */

.dropdown {
    margin: 0; /* Ensure no margin */
}

.dropdown-menu {
    display: none; /* Hide by default */
    padding: 0; /* Remove padding */
    list-style: none; /* Remove list styling */
    z-index: 99; /* Ensure it appears above other elements */
}

.dropdown-menu li {
    margin: 0; /* Reset margin for list items */
}

.dropdown-menu a {
    display: block; /* Full-width links */
    padding: 12px 16px; /* Padding for links */
    color: #FFF; /* Text color */
    text-decoration: none; /* No underline */
    background-color: transparent; /* Lighter color for dropdown items */
text-align: center;
font-weight: bold;
}

.dropdown-menu a:hover {
    background-color: transparent; /* Change background on hover */
color: #1DA1F2;
}

/* Align arrow buttons under the links */
.arrow-button {
    display: block; /* Block display to ensure it's on a new line */
    cursor: pointer; /* Pointer on hover */
    background: none; /* No background */
    border: none; /* No border */
    color: #FFF; /* Color for the arrow */
    font-size: 18px; /* Size of the arrow */
    text-align: right; /* Align the arrow with the menu items */
    padding: 0; /* No padding */
    margin-top: 4px; /* Add some space between the nav link and the arrow */
left: 50%; /* Center horizontally */
}

/* Submenu styling */
.dropdown-submenu {
    display: none; /* Hidden by default */
    list-style: none; /* Remove bullets */
padding: 0; /* Remove padding */
}

.dropdown-submenu li {
    margin: 0; /* Reset margin */
}

.dropdown-submenu a {
    display: block; /* Full-width links */
    padding: 12px 16px; /* Padding for submenu items */
    background-color: trasnparent; /* Background color for submenu */
    color: #FFF; /* Text color */
    text-decoration: none; /* Remove underline */
text-align: center;
font-weight: bold;
}

.dropdown-submenu a:hover {
    background-color: transparent; /* Background color change on hover */
color: #1DA1F2;
}

/* Nav */

#nav {
display: none;
}

}

@media screen and (max-width: 736px) {

/* Basic */

html, body {
overflow-x: hidden;
}

body, input, textarea, select {
font-size: 13pt;
letter-spacing: 0;
}

h2 {
font-size: 1.5em;
line-height: 1.25em;
}

.wrapper .container .product-header h2 {
    text-align: center;
}

/* Sections/Article */

header {
margin-bottom: 1em;
}

header > p {
font-size: 1em;
}

/* Divided */

ul.divided li {
padding-top: 0.75em;
margin-top: 0.75em;
}

/* Wrappers */

.wrapper {
padding: 3em 20px 3em 20px;
}

#header-wrapper {
padding: 3em 20px 3em 20px;
text-align: center;
position: sticky;
}

.homepage #header-wrapper {
padding: 3em 20px 3em 20px;
}

/* Padding for About page */
.about #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Products page */
.products #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Detergent page */
.detergent #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Salt page */
.salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Industrial Salt page */
.industrial-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Dishwashing Salt page */
.dishwashing-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for water softener Salt page */
.water-softener-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for De-Icing Salt page */
.de-icing-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Pool Salt page */
.pool-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Oil Field Salt page */
.oil-field-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Food Grade Salt page */
.food-grade-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Pulverized Salt page */
.pulverized-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Animal Feed Salt page */
.animal-feed-salt #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Colored Speckles page */
.colored-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Green Speckles page */
.green-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Red Speckles page */
.red-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Blue Speckles page */
.blue-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Orange Speckles page */
.orange-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Pink Speckles page */
.pink-speckles #header-wrapper {
    padding: 3em 20px 3em 20px;
}

/* Padding for Contact page */
.contact #header-wrapper {
    padding: 3em 20px 3em 20px;
}

.our-factories #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.blog #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post1 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post2 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post3 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

.post4 #header-wrapper {
	padding: 3em 20px 3em 20px;
}

#promo-wrapper {
padding: 20px;
}

#footer-wrapper {
padding: 3em 20px 3em 20px;
}

/* Header */

#header-wrapper {
        padding: 1em 0;  /* Reduce padding */
        text-align: left;  /* Align content to the left */
        width: 100%;
position: sticky;

}



#logo {
position: left;
left: -30px;
top: 0;
margin: 0;
width: 100%;
display: inline-block; /* Shrink to fit the logo */
}




/* Footer */

#footer ul.divided {
margin: 0;
}

#footer ul.divided li:first-child {
border-top: solid 1px #d2d7dc;
padding-top: 0.75em;
margin-top: 0.75em;
}

#footer ul.divided:first-child li:first-child {
border-top: 0;
padding-top: 0;
margin-top: 0;
}

/* Hero */

#hero {
padding: 2.5em 2em 0 2em;
}

#hero header {
margin: 0 0 1.25em 0;
}

#hero header h2 {
font-size: 1.5em;
}

#hero p {
font-size: 1em;
}

/* Nav */

#navButton {
    position: fixed;
    top: 20px;
    right: 20px;
    height: 44px;
    width: 44px;
    z-index: 10001;
    transition: transform 0.5s ease;
}

#navButton .toggle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    background-color: #333;
    border-radius: 5px;
}

#navButton .toggle:before {
    content: '\f0c9';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 24px;
    color: #fff;
    display: block;
    line-height: 44px;
margin: 0 auto;
}

/* Navigation Panel */
#navPanel {
    position: fixed;
    top: 0;
    right: -100%; /* Start off-screen */
    width: 250px;
    height: 100vh;
    background-color: #45474a;
    background-size: cover;
    z-index: 10002;
    transition: right 0.5s ease;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.25);
}

body.navPanel-visible #navPanel {
    right: 0; /* Slide in */
}

body.navPanel-visible #navButton {
    transform: translateX(-250px); /* Move hamburger left with the panel */
}

/* Panel Links */
#navPanel .link {
    display: block;
    padding: 10px;
    color: #ddd;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#navPanel .link:hover {
    background-color: #333;
    color: white;
}

/* Page Movement */
body.navPanel-visible #page-wrapper {
    transform: translateX(-250px); /* Move content left when panel opens */
    transition: transform 0.5s ease;
}
#navPanel .link.depth-0 {
color: #fff;
font-weight: 400;
}

#navPanel .indent-1 {
display: inline-block;
width: 1em;
}

#navPanel .indent-2 {
display: inline-block;
width: 2em;
}

#navPanel .indent-3 {
display: inline-block;
width: 3em;
}

#navPanel .indent-4 {
display: inline-block;
width: 4em;
}

#navPanel .indent-5 {
display: inline-block;
width: 5em;
}

#navPanel .depth-0 {
color: #fff;
}

body.navPanel-visible #page-wrapper {
-moz-transform: translateY(50vh);
-webkit-transform: translateY(50vh);
-ms-transform: translateY(50vh);
transform: translateY(50vh);
}

body.navPanel-visible #navButton {
-moz-transform: translateY(50vh);
-webkit-transform: translateY(50vh);
-ms-transform: translateY(50vh);
transform: translateY(50vh);
}

body.navPanel-visible #navPanel {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}

.arrow-button {
    margin: 0 auto;             /* Center horizontally */
}


/* Sidebar */
    
    #sidebar section h3, /* Hide the header */
    #sidebar section a:not(.featured) { /* Hide the list items but not the featured image link */
        display: none; 
    }
}

/* Mobile (Portrait) */

@media screen and (max-width: 480px) {

/* Basic */

body, input, textarea, select {
font-size: 12pt;
letter-spacing: 0;
}

.feature {
text-align: left;
}

/* Sections/Article */

section, article {
margin-bottom: 2em;
}

.row > section,
.row > article {
margin-bottom: 2em;
}

header.major {
text-align: left;
}

/* wrappers */

#footer-wrapper {
padding: 3em 20px 3em 20px;
}


/* Image */

.image {
display: block;
}

.image.full, .image.left {
float: none;
display: block;
width: 100%;
margin: 0 0 1.5em 0;
}

.image-centered {
float: none;
display: block;
width: 100%;
margin: 0 0 1.5em 0;
}

/* Actions */

ul.actions li {
display: block;
margin: 1em 0 0 0;
}

ul.actions li:first-child {
margin-top: 0;
}

ul.actions.major {
text-align: left !important;
}

/* Form */

form textarea {
min-height: 10em;
}

/* Button */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
display: block;
width: 100%;
text-align: center;
}

/* Header */

#logo {
left: -33px;
}

.arrow-button {
    text-align: center; /* Align the arrow with the menu items */
    }
/* Hero */

#hero {
padding: 2.5em 0 0 0;
}

/* Promo */

#promo {
padding: 20px;
}

/* contact */

.contact-form .col-12-mobile {
    margin-left: 0; /* Push everything to the left */
}

.contact-form .col-12-mobile input[name="name"],
.contact-form .col-12-mobile input[name="email"] {
    width: 240%;
    padding: 1em; /* Add padding for better spacing */
    box-sizing: border-box; /* Ensure padding does not affect the width */
margin-left: -25px;
}
/* Target the message box */
.contact-form .col-12 textarea[name="message"] {
    width: 113%;
    margin-left: -25px;
}

/* Target the submit and reset buttons */
.contact-form .actions input[type="submit"],
.contact-form .actions input[type="reset"] {
    width: 113%;
	 margin-left: -25px;
	margin-top: 5px;
}



/* Content */

#content {
margin-bottom: 2em;
}


/* Footer */

#footer header.major {
margin-bottom: 1em;
}

}



/* slideshow images */
* {
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
margin: 0;
}

.slideshow-container {
position: relative;
width: 100%; /* Occupies full width of the device */
height: auto; /* Height will be adjusted automatically based on image aspect ratio */
margin: auto;
overflow: hidden; /* Ensures content stays within the box */
}

.mySlides {
display: none;
position: relative;
width: 100%; /* Each slide occupies full width */
height: auto; /* Maintains aspect ratio */
}

img {
width: 100%; /* Make sure the image spans the full width */
height: auto; /* Keeps the aspect ratio */
}
/* Force images to 960x540 and crop them if they don't fit */
img {
width: 1500px;
height: 540px;
object-fit: cover; /* Scale and crop images to fill the container */
}
/* Text overlay - bigger, positioned middle left */
.text {
color: white;
-webkit-text-stroke: 1px black; /* Border color and width */
font-size: 72px; /* 2 times bigger */
font-weight: bold;
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%); /* Center vertically */
text-align: left;
line-height: 1.5; /* Adjust this value as needed */
margin-left: 50px;
}

/* Fade animation */
.fade {
animation-name: fade;
animation-duration: 3s;
animation-timing-function: ease-in-out; /* Makes the fade smooth */
}

@keyframes fade {
from {opacity: 0.2;} /* Start from completely transparent */
to {opacity: 1;} /* Fade to fully visible */
}

/* Arrow buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

.prev {
left: 0;
border-radius: 3px 0 0 3px;
}

.next {
right: 0;
border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

/* Dot indicators (optional - hidden) */
.dot {
display: none;
}


/*  about */
.about-section {
text-align: center; /* Center text in the section */
background-color: #ffffff; /* Example background color */
padding: 20px; /* Add some padding around the section */
}

.about-section h2 {
background-color: #f8f8f8; /* Example background color */
padding: 20px; /* Add some padding around the header */
text-align: center; /* Center the text inside the header */
margin-bottom: 20px; /* Add space below the header */
border: 1px solid #ddd; /* Optional: Add a border around the header */
text-align: center;
margin-bottom: 50px;

}

.about-section p {
margin-top: 10px; /* Add margin above paragraph */
text-align: left;
}
.row {
display: flex; /* Enable flexbox */
justify-content: space-around; /* Align children to the right */
}

@media screen and (max-width: 480px) {

  .about-section h2 {
white-space: nowrap;
display: inline-block;
left: 50%;
font-size: 15px;
}
 .about-section p {
margin-left: 4px; 
text-align: justify;
}
}

/*  factories */
.factories-section {
position: relative;
text-align: center; /* Center text in the section */
background-color: #ffffff; /* Example background color */
padding: 20px; /* Add some padding around the section */
z-index: 1;
}

.factories-section h2 {
background-color: #f8f8f8; /* Example background color */
border: 1px solid #ddd; /* Optional: Add a border around the header */
padding: 20px; /* Add some padding around the header */
text-align: center; /* Center the text inside the header */
margin-bottom: 20px; /* Add space below the header */

text-align: center;
margin-bottom: 50px;
}

.factories-section p {
margin-top: 10px; /* Add margin above paragraph */
text-align: left;
}
.row {
display: flex; /* Enable flexbox */
justify-content: space-around; /* Align children to the right */
position: relative;
}

@media screen and (max-width: 480px) {

  .factories-section h2 {

display: inline-block;
margin-left: -20px;
}
 .factories-section p {
margin-left: 4px; 
text-align: justify;
}
}

/* speckles */
.speckles-section {
text-align: center; /* Center text in the section */
background-color: #ffffff; /* Example background color */
padding: 20px; /* Add some padding around the section */
}

.speckles-section h2 {
background-color: #f8f8f8; /* Example background color */
padding: 20px; /* Add some padding around the header */
text-align: center; /* Center the text inside the header */
margin-bottom: 20px; /* Add space below the header */
border: 1px solid #ddd; /* Optional: Add a border around the header */
text-align: center;
margin-bottom: 50px;

}

.speckles-section p {
margin-top: 10px; /* Add margin above paragraph */
text-align: left;
}
.row {
display: flex; /* Enable flexbox */
justify-content: space-around; /* Align children to the right */
}

@media screen and (max-width: 480px) {

  .speckles-section h2 {
white-space: nowrap;
display: inline-block;
left: 50%;
font-size: 12px;
padding: 10px;
}
 .speckles-section p {
margin-left: 4px; 
text-align: justify;
}
}

/* footer icons*/
#copyright .row {
display: flex;
justify-content: space-between;
align-items: center;
}

#copyright .menu {
list-style: none;
padding: 0;
margin: 0;
}

#copyright .icons {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 50px; /* Adjust gap between icons */
margin-left: 300px;
margin-bottom: 20px;
}

#copyright .icons li {
display: inline-block;
}

#copyright .icons li a {
color: #333; /* Adjust icon color */
font-size: 1.5em; /* Adjust icon size */
text-decoration: none;
border: none;
}

#copyright .icons li a:hover {
color: #f35858; /* Color change on hover */
text-decoration: none;
}

/* Styles for screens 1280px and smaller */
@media (max-width: 1280px) {
    .social-media-icons {
        display: flex; /* Use flexbox for icons */
        justify-content: right; /* Center icons horizontally */
margin-left: -300px;
    }   

    
}



/* Styles for screens 1080px and smaller */
@media (max-width: 1080px) {
    .social-media-icons {
        display: flex; /* Use flexbox for icons */
        justify-content: right; /* Center icons horizontally */
margin-left: -300px;
    }   

    
}

/* Styles for screens 820px and smaller */
@media (max-width: 820px) {
    .social-media-icons {
        margin-bottom: 10px; /* Add some spacing below the icons */
        display: flex; /* Use flexbox for icons */
        justify-content: center; /* Center icons horizontally */
margin-left: -300px;
    }

    #copyright .row {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align items */
        text-align: center; /* Center text */
    }

    .copyright-text {
        display: flex; /* Ensure copyright text stays in line */
        justify-content: center; /* Center the copyright text */
        align-items: center; /* Align the copyright text */
white-space: nowrap;
    }
}

/* Styles for screens 736px and smaller */
@media (max-width: 736px) {
    .social-media-icons {
        margin-bottom: 10px; /* Add some spacing below the icons */
        display: flex; /* Use flexbox for icons */
        justify-content: center; /* Center icons horizontally */
margin-left: -300px;
    }

    #copyright .row {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align items */
        text-align: center; /* Center text */
    }

    .copyright-text {
        display: flex; /* Ensure copyright text stays in line */
        justify-content: center; /* Center the copyright text */
        align-items: center; /* Align the copyright text */
white-space: nowrap;
    }
}

/* Styles for screens 480px and smaller */
@media (max-width: 480px) {
    .social-media-icons {
        margin-bottom: 10px; /* Add some spacing below the icons */
        display: flex; /* Use flexbox for icons */
        justify-content: center; /* Center icons horizontally */
margin-left: -300px;
    }

    #copyright .row {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align items */
        text-align: center; /* Center text */
    }

    .copyright-text {
        display: flex; /* Ensure copyright text stays in line */
        justify-content: center; /* Center the copyright text */
        align-items: center; /* Align the copyright text */
white-space: nowrap;
    }
}

/* contact section*/
#footer-wrapper{
.contact-heading {
font-size: 1.5em; /* Adjust the font size */
font-weight: bold; /* Make the text bold */
color: #333; /* Change the text color */
margin-top: 50px; /* Add space below the heading */
margin-left: 20px;
}

.contact-info {
font-size: 1em; /* Adjust the font size */
line-height: 1.6; /* Increase line height for readability */
color: #555; /* Set text color */
margin-left: 20px;
}

.contact-info a {
color: #000000; /* Style the email link */
text-decoration: none; /* Remove underline from link */
}

.contact-info a:hover {
text-decoration: none; /* Add underline on hover */
color: #d14848; /* Darken color on hover */
}
}
/* product header*/

.product-header {
position: relative;
z-index: 1;
background-color: #f8f8f8; /* Example background color */
padding: 20px; /* Add some padding around the header */
text-align: center; /* Center the text inside the header */
margin-bottom: 20px; /* Add space below the header */
border: 1px solid #ddd; /* Optional: Add a border around the header */
margin-bottom: 150px;
}

.product-header h2 {
font-size: 2em; /* Adjust the font size */
color: #333; /* Set text color */
margin: 0; /* Remove default margin */
}

/*products page*/

/* Product Image Styles */
/* Wrapper for product images */
.product-round-image {
display: flex;
flex-wrap: wrap; /* Allow wrapping to new lines */
justify-content: center; /* Center align items horizontally */
margin: 20px auto; /* Center the wrapper with top/bottom margin */
max-width: 800px; /* Optional: Limit max width */
text-align: center;
}

/* Image wrapper for each image */
.image-wrapper {
flex: 0 0 calc(33.33% - 20px); /* Three items per row minus margin */
margin: 10px; /* Space between images */
position: relative; /* For positioning overlay */
margin-bottom: 30px;
text-align: center;

}



/* Round image styles */
.round-image {
border-radius: 50%; /* Make images round */
width: 100%; /* Full width of the container */
max-width: 200px;
height: 200px; /* Fixed height for consistency */
object-fit: cover; /* Maintain aspect ratio and fill the circle */
transition: filter 0.3s; /* Smooth transition for hover effect */
z-index: 1;
}

/* Text description under the image */
.image-description {
text-align: center; /* Center the text */
margin-top: 8px; /* Space above the description */
font-weight: bold; /* Optional: Make description bold */
width: 100%;
}

/* Button styling */
.product-button {
    padding: 10px 20px;
    background-color: #ff6600; /* Orange color for button */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px; /* Space between description and button */
}

.product-button:hover {
    background-color: #e55b00; /* Darker orange on hover */
}
/* Change description text color to blue on hover */
.image-wrapper:hover .image-description {
color: #1DA1F2; /* Change to blue when hovered */
}
/* Overlay for hover effect */
.overlay {
position: absolute;
top: 35.5%;
left: 50%;
transform: translate(-50%, -50%); /* Move it back by half its size */

width: 100%;
max-width: 200px;
height: 100%;
max-height: 200px;
background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
color: white; /* Text color */
display: flex; /* Flexbox for centering */
align-items: center; /* Center vertically */
justify-content: center; /* Center horizontally */
border-radius: 50%; /* Match image shape */
opacity: 0; /* Hide overlay initially */
transition: opacity 0.3s; /* Smooth transition for hover */
z-index: 10;
}

/* Hover effect for image wrapper */
.image-wrapper:hover .overlay {
opacity: 1; /* Show overlay on hover */
}


/* Darken the image on hover */
.image-wrapper:hover .round-image {
filter: brightness(0.7); /* Darken the image */
}

.product-round-image a {
text-decoration: none; /* Remove underline from links */
border: none; /* Ensure no borders */
}


/* Media queries for screens 3840px and smaller */
@media (max-width: 3840px) {
  .overlay {  
top: 38%;
width: 100%;
max-width: 300px;
height: 100%;
max-height: 250px;
   }

.round-image {
border-radius: 50%; /* Make images round */
width: 100%; /* Full width of the container */
max-width: 300px;
height: 250px; /* Fixed height for consistency */
object-fit: cover; /* Maintain aspect ratio and fill the circle */
transition: filter 0.3s; /* Smooth transition for hover effect */
z-index: 1;
}
}


/* Media queries for screens 1920px and smaller */
@media (max-width: 1920px) {
  .overlay {  
top: 36%;
width: 100%;
max-width: 200px;
height: 100%;
max-height: 200px;
   }

.round-image {
border-radius: 50%; /* Make images round */
width: 100%; /* Full width of the container */
max-width: 200px;
height: 200px; /* Fixed height for consistency */
object-fit: cover; /* Maintain aspect ratio and fill the circle */
transition: filter 0.3s; /* Smooth transition for hover effect */
z-index: 1;
}
}


/* Media queries for screens 1440px and smaller */
@media (max-width: 1440px) {
    
    .overlay {
position: absolute;
top: 35.5%;
left: 50%;
transform: translate(-50%, -50%); /* Move it back by half its size */

width: 100%;
max-width: 200px;
height: 100%;
max-height: 200px;
background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
color: white; /* Text color */
display: flex; /* Flexbox for centering */
align-items: center; /* Center vertically */
justify-content: center; /* Center horizontally */
border-radius: 50%; /* Match image shape */
opacity: 0; /* Hide overlay initially */
transition: opacity 0.3s; /* Smooth transition for hover */
z-index: 10;
}
}

/* Media queries for screens 1280px and smaller */
@media (max-width: 1280px) {
    
    /* Overlay adjustments */
    .overlay {
       
        top: 37.2%; /* Center vertically */
        
        transform: translate(-50%, -50%); /* Center the overlay */
    }
}

/* Media queries for screens 1080px and smaller */
@media (max-width: 1080px) {
    
    /* Overlay adjustments */
    .overlay {
       
        top: 37.2%; /* Center vertically */
        
        transform: translate(-50%, -50%); /* Center the overlay */
    }
}
/* Media queries for screens 820px and smaller */
@media (max-width: 820px) {
    
    /* Overlay adjustments */
    .overlay {
       
        top: 36.5%; /* Center vertically */
        
        transform: translate(-50%, -50%); /* Center the overlay */
    }
}


/* Media queries for screens 736px and smaller */
@media (max-width: 736px) {
    
    /* Overlay adjustments */
    .overlay {
       
        top: 37.5%; /* Center vertically */
        
        transform: translate(-50%, -50%); /* Center the overlay */
    }
}
/* Media queries for screens 480px and smaller */
@media (max-width: 480px) {
    .product-round-image {
        width: 80%; /* Set a smaller width for the product container */
        height: auto; /* Let height adjust automatically */
        margin: 10px auto;  /* Center with auto margins and add vertical margin */
        display: flex; /* Use flex to center content */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align items */
    }

    .image-wrapper {
        width: 100%; /* Full width for the wrapper */
        height: 200px; /* Fixed height for consistent sizing */
        overflow: hidden; /* Hide overflow to maintain circular appearance */
        position: relative; /* Ensure the overlay positions relative to this */
        border-radius: 50%; /* Keep it circular */
    }

    .round-image {
        width: 90%; /* Use full width of the wrapper */
        height: 100%; /* Use full height of the wrapper */
        object-fit: cover; /* Cover the container while maintaining aspect ratio */
        border-radius: 50%; /* Ensure the image is circular */
    }

    .image-description {
        text-align: center; /* Center the description text */
        margin-top: 5px; /* Add space above the description */
        font-weight: bold; /* Optional: Make description bold */
        width: 100%; /* Ensure it takes the full width */
    }

    /* Overlay adjustments */
    .overlay {
        width: 90%; /* Match the overlay width to the image */
        height: 100%; /* Match the overlay height to the image */
        border-radius: 50%; /* Keep overlay circular */
        top: 38%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Center the overlay */
    }
}
/* icon colors*/

/* Default color for icons */
.icons a {
color: #333; /* Set your default icon color */
transition: color 0.3s ease; /* Smooth color transition on hover */
}

/* Hover color for icons */

/* Specific hover colors for each icon */
.fa-x-twitter:hover {
color: #14171a !important; /* Twitter blue */
}

.fa-linkedin-in:hover {
color: #0077b5 !important; /* LinkedIn blue */
}

.fa-facebook-f:hover {
color: #1877f2 !important; /* Facebook blue */
}

.fa-instagram:hover {
color: #E4405F !important; /* YouTube red */
}

/* rounded edge image*/

.rounded-edge-image {
border-radius: 15px; /* Adjust the value for the desired roundness */
/* Optional: Add a box shadow for a more pronounced effect */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* hero 2 blinds slideshow*/

.image-blinds .container {
margin: 0 auto;
position: relative;
overflow: hidden;
}

.image-blinds .container span {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
}

.image-blinds .container ul,
.image-blinds .container li {
padding: 0;
margin: 0;
list-style: none;
}

.image-blinds .container li {
display: none;
}

.image-blinds .container li.active {
display: inline;
}

* {
box-sizing: border-box; /* Set box-sizing globally for all elements */
}

@media screen and (max-width: 3840px) {


.image-blinds .container img {
    object-fit: fill;
    width: 3840px;
}


}

@media screen and (max-width: 1920px) {


.image-blinds .container img {
    object-fit: fill;
    width: 1920px;
}


}


@media screen and (max-width: 1440px) {


.image-blinds .container img {
    object-fit: cover;
width: 100%;

}


}

@media screen and (max-width: 480px) {

.image-blinds .container {
overflow: hidden;
height: auto;
}

.image-blinds .container img {
    object-fit: fill;
    margin: 0 20px 10px 0; /* Adjust values to reposition */

height: 530px;
}


}

/* hero 1 slideshow*/
.slider {
width: 100%;
max-width: 100vw;
height: 700px;
margin: auto;
position: relative;
overflow: hidden;
}

.slider .list {
position: absolute;
width: max-content;
height: 100%;
left: 0;
top: 0;
display: flex;
transition: 1s;
}

.slider .list img {
width: 100%;
max-width: 100vw;
height: 100%;
object-fit: cover;
}

.slider .buttons {
position: absolute;
top: 45%;
left: 2.5%;
width: 95%;
display: flex;
justify-content: space-between;
}

.slider .buttons button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff5;
color: #fff;
border: none;
font-family: monospace;
font-weight: bold;
}

.slider .dots {
position: absolute;
bottom: 10px;
left: 0;
color: #fff;
width: 97%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}

.slider .dots li {
list-style: none;
width: 10px;
height: 10px;
background-color: #fff;
margin: 10px;
border-radius: 20px;
transition: 0.5s;
}

.slider .dots li.active {
width: 30px;
}

.slider .item {
position: relative; /* Make the item a positioned element */
}

.slider .item .textov {
position: absolute; /* Ensure overlay is positioned */
-webkit-text-stroke: 1px black; /* Border color and width */
text-align: left;
top: 48%; /* Center vertically */
left: 34%; /* Center horizontally */
transform: translate(-50%, -50%); /* Center adjustment */
color: white; /* Text color */
font-size: 72px; /* Larger text */
text-shadow: 2px 2px 0 black; /* Black outline effect */
line-height: 1.5; /* Adjust this value as needed */
opacity: 0; /* Initially hidden */
transition: opacity 0.5s ease; /* Smooth fade in */
font-weight: bold; /* Make text bold */
}

.slider .item.active .textov {
opacity: 1; /* Show overlay when item is active */
}

@media screen and (max-width: 3840px) {
.slider .item img {
width: 3840px;
height: 100%;
object-fit: fill;
}

}

@media screen and (max-width: 1920px) {

.slider .item img {
width: 1920px;
height: 100%;
object-fit: fill;
}


}


@media screen and (max-width: 1440px) {

.slider .item img {
width: 1440px;
height: 100%;
object-fit: fill;
}


}


@media screen and (max-width: 1080px) {

.slider .item .textov {
font-size: 60px;
    white-space: nowrap; /* Prevent text from wrapping */
    margin-left: 50px;
position: absolute;
}


}
@media screen and (max-width: 820px) {

.slider .item .textov {
    font-size: 40px; /* Adjust font size as needed */
    white-space: nowrap; /* Prevent text from wrapping */
    margin-left: 15px;
position: absolute;
}
.slider .item img {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    object-fit: fill; /* Ensure the entire image fits without cropping */
}

}

@media screen and (max-width: 768px) {
.slider {
height: 400px;
}
.slider .list img {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    object-fit: fill; /* Ensure the entire image fits without cropping */
}
.slider .item .textov {
        font-size: 25px; /* Smaller text size on smaller screens */
        left: 30%; /* Adjust horizontal centering */
white-space: nowrap; /* Prevent text from wrapping */
margin-left: 0px;
}
}
@media screen and (max-width: 480px) {

.slider .item .textov {
        font-size: 25px;
        left: 43%; /* Adjust horizontal centering */

}
}
/* contact form */

.contact-form .row {
margin: 0 auto;
padding: 20px;
}

.contact-form .col-6 {
width: 50%;
float: left;
}

.contact-form .col-12-narrower {
width: 100%;
margin-bottom: 20px;
}

.contact-form input[name="name"],
.contact-form input[name="email"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
}

.contact-form textarea[name="message"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
height: 150px;
}

.contact-form .actions li input[type="submit"],
.contact-form .actions li input[type="reset"] {
background-color: transparent; /* Keep background transparent */
color: #000; /* Initial text color */
border: 2px solid #000; /* Border to define the button */
padding: 10px 20px;
cursor: pointer;
transition: color 0.3s ease; /* Smooth transition for text color */
}

.contact-form .actions li input[type="submit"]:hover {
color: #28a745; /* Green text on hover */
}

.contact-form .actions li input[type="reset"]:hover {
color: #dc3545; /* Red text on hover */
}


/* Additional mobile optimizations */


/* hiding elements */
   @media (min-width: 768px) {
    .hamburger {
        display: none; /* Hide hamburger button on desktop */
    }

    .mobile-nav {
        display: none; /* Hide mobile nav on desktop */
    }
}

@media screen and (max-width: 480px) {
    .row {
        flex-direction: column;
    }
    .container {
        padding: 10px;
    }
    .contact-form input, .contact-form textarea {
        width: 100%;
        font-size: 1em;
    }
    .contact-form .actions li {
        margin: 10px 0;
    }
}
/* slicebox 3 css */

/* demo.css */
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Volkhov:400italic,700);

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/* General Demo Style */


h11, h12, h15 {
	margin: 20px 20px 50px 20px;
	font-size: 56px;
	color: #fff;
	font-family: "Volkhov", serif;
	text-align: center;
	font-weight: 700;
	text-shadow: 1px 1px 3px #e0d1bc;
}

h11 span, h15 {
margin: 20px 20px 70px 20px;
	font-size: 56px;
	display: block;
	font-weight: bold;
	color: #000000;
	text-shadow: 0px 1px 1px #fff;
}

.wrapper-ss {
	position: relative;
	max-width: 840px;
	width: 100%;
	padding: 0 50px;
	margin: 0 auto;
}

/* Header Style */
.codrops-top {
	line-height: 24px;
	font-size: 11px;
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	font-family: Cambria, Georgia, serif;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

.codrops-top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.6);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}



/* slicebox.css */
/* Slicebox Style */
.sb-slider {
	margin: 10px auto;
	position: relative;
	overflow: hidden;
	width: 100%;
	list-style-type: none;
	padding: 0;
	z-index: 20;
}

.sb-slider li {
	margin: 0;
	padding: 0;
	display: none;
}

.sb-slider li > a {
	outline: none;
}

.sb-slider li > a img.img-ss {
	border: none;
}

.sb-slider img.img-ss {
    width: 100%;    
    height: 100%;    
    object-fit: cover;         
    display: block;             /* Remove inline-block image gaps */
}

.sb-description {
	padding: 20px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	z-index: 1000;
	position: absolute;
	background: #CBBFAE;
	background: rgba(190,176,155, 0.4);
	border-left: 4px solid rgba(255,255,255,0.7);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);	
	opacity: 0;
	color: #fff;

	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-o-transition: all 200ms;
	-ms-transition: all 200ms;
	transition: all 200ms;
}

.sb-slider li.sb-current .sb-description {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);	
	opacity: 1;
}

.sb-slider li.sb-current .sb-description:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);	
	background: rgba(190,176,155, 0.7);
}

.sb-perspective {
	position: relative;
height: 360 !important;

}

.sb-perspective .sb-animating {
height: 360px !important;
max-width: 600px !important;
}

.sb-perspective > div {
	position: absolute;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-backface-visibility : hidden;
	-moz-backface-visibility : hidden;
	-o-backface-visibility : hidden;
	-ms-backface-visibility : hidden;
	backface-visibility : hidden;
}

.sb-side {
	margin: 0;
	display: block;
	position: absolute;
	-moz-backface-visibility : hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}




/* custom.css */


.shadow {
	width: 100%;
	height: 168px;
	position: relative;
	margin-top: -110px;
	background: transparent url(images/shadow.png) no-repeat bottom center;
	background-size: 100% 100%; /* stretches it */
	z-index: 10;
	display: none;
}

.sb-description h3 {
	font-size: 20px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.sb-description h3 a {
	color: #4a3c27;
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

.nav-arrows-ss {
    display: none;
}

.nav-arrows-ss a {
margin: 0 20px;
    width: 42px;
	height: 42px;
	background: #cbbfae url(images/nav.png) no-repeat top left;
	position: absolute;
	top: 50%;
	left: 20px;
	text-indent: -9000px;
	cursor: pointer;
	
	opacity: 0.9;
	border-radius: 50%;
	box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

.nav-arrows-ss a:first-child{
	left: auto;
	right: 20px;
	margin: 0 20px;
	background-position: top right;
}


.nav-arrows-ss a:hover {
    background-color: rgba(0, 0, 0, 0.8);  /* Darker background on hover */
}


.nav-dots {
	text-align: center;
	position: absolute;
	bottom: -5px;
	height: 30px;
	width: 100%;
	left: 0;
	display: none;
}

.nav-dots span {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin: 3px;
	background: #cbbfae;
	cursor: pointer;
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.6), 
		inset 0 1px 1px rgba(0,0,0,0.1);
}

.nav-dots span.nav-dot-current {
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.6), 
		inset 0 1px 1px rgba(0,0,0,0.1), 
		inset 0 0 0 3px #cbbfae,
		inset 0 0 0 8px #fff;
}

.nav-options {
	width: 70px;
	height: 30px;
	position: absolute;
	right: 70px;
	bottom: 0px;
	display: none;
}

.nav-options span {
	width: 30px;
	height: 30px;
	background: #cbbfae url(../images/options.png) no-repeat top left;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.7;
	display: inline-block;
	border-radius: 50%;
}

.nav-options span:first-child{
	background-position: -30px 0px;
	margin-right: 3px;
}

.nav-options span:hover {
	opacity: 1;
}


@media screen and (max-width: 3840px) {

.nav-arrows-ss a {
margin: 0 100px;
    width: 60px;
	height: 60px;
	background: #cbbfae url(images/nav.png) no-repeat top left;
	position: absolute;
	top: 50%;
	left: 20%;
	text-indent: -9000px;
	cursor: pointer;
	background-size: 120px 60px;
	opacity: 0.9;
	border-radius: 50%;
	box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

.nav-arrows-ss a:first-child{
	left: auto;
	right: 20%;
	top: 50%;
	margin: 0 100px;
	background-position: top right;
}

.shadow {
	width: 22%;
	position: relative;
	margin-left: 39%;
}

}

@media screen and (max-width: 1920px) {

.nav-arrows-ss a {
margin: 0 20px;
    width: 60px;
	height: 60px;
	background: #cbbfae url(images/nav.png) no-repeat top left;
	position: absolute;
	top: 50%;
	left: 20px;
	text-indent: -9000px;
	cursor: pointer;
	background-size: 120px 60px;
	opacity: 0.9;
	border-radius: 50%;
	box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

.nav-arrows-ss a:first-child{
	left: auto;
	right: 20px;
	margin: 0 20px;
	background-position: top right;
}

.shadow {
	width: 40%;
	height: 168px;
	position: relative;
	margin-top: -110px;
	background: transparent url(images/shadow.png) no-repeat bottom center;
	background-size: 100% 100%; /* stretches it */
	z-index: 10;
	display: none;
		margin-left: 30%;
}

}

@media screen and (max-width: 1440px) {

.nav-arrows-ss a {
margin: 0 20px;
    width: 42px;
	height: 42px;
	background: #cbbfae url(images/nav.png) no-repeat top left;
	position: absolute;
	top: 50%;
	left: 20px;
	text-indent: -9000px;
	cursor: pointer;
	
	opacity: 0.9;
	border-radius: 50%;
	box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

.nav-arrows-ss a:first-child{
	left: auto;
	right: 20px;
	margin: 0 20px;
	background-position: top right;
}

.shadow {
	width: 50%;
		margin-left: 25%;
}
}

@media screen and (max-width: 1280px) {

.nav-arrows-ss a {
	left: 0px;
	margin: 0 0px;
	margin-top: 20px;
	z-index: 21;

}

.nav-arrows-ss a:first-child{

	right: 0px;
	margin: 0 0px;
		margin-top: 20px;
}

/* Targeting h4 */
#content h4 {
    margin-left: 1%;
}

/* Targeting h3 */
#content h3 {
    margin-left: 1%;
}

/* Targeting p */
#content p {
    margin-left: 1%;
}

/* Targeting the image */
#content .image.featured img {
    margin-left: 1%;
}
.shadow {
	width: 55%;
		margin-left: 23%;
}
}

@media screen and (max-width: 1080px) {

.nav-arrows-ss a {
	width: 35px;
	height: 35px;
	left: 0px;
	margin: 0 0px;
	margin-top: 20px;
	background-size: 55px 33px;
	z-index: 21;

}

.nav-arrows-ss a:first-child{

	right: 0px;
	margin: 0 0px;
		margin-top: 20px;
}

body {
overflow-x: visible;
    
}

.wrapper {
overflow-x: hidden;
}

.container {
overflow-x: hidden;
}

/* Header styles */
#sidebar h3 {
    text-align: left;
}

}

@media screen and (max-width: 820px) {

.nav-arrows-ss a {
	width: 25px;
	height: 25px;
	left: 0px;
	margin: 0 0px;
	margin-top: 20px;
	background-size: 45px 24px;
	z-index: 21;

}

.nav-arrows-ss a:first-child{

	right: 0px;
	margin: 0 0px;
		margin-top: 20px;
}

body, html {

    
}

}



@media screen and (max-width: 736px) {

.nav-arrows-ss a {
	width: 25px;
	height: 25px;
	left: 0px;
	margin: 0 0px;
	margin-top: 20px;
	background-size: 45px 24px;
	z-index: 21;

}

.nav-arrows-ss a:first-child{

	right: 0px;
	margin: 0 0px;
		margin-top: 20px;
}

h15 {
	
	font-size: 35px;
}

h11 span, h15 {

	font-size: 35px;
	
}

.sb-description h3 {
	font-size: 12px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.sb-description {
	padding: 15px;
	
}
.shadow {
	width: 100%;
	height: 168px;
	position: relative;
	margin-top: -110px;
	background: transparent url(images/shadow.png) no-repeat bottom center;
	background-size: 100% 100%; /* stretches it */
	z-index: 10;
	display: none;
}
}

@media screen and (max-width: 480px) {

.nav-arrows-ss a {
width: 16px;
height: 16px;
	left: 0px;
	margin: 0 0px;
	margin-top: 20px;
	background-size: 28px 16px;

}

.nav-arrows-ss a:first-child{

	right: 0px;
	margin: 0 0px;
		margin-top: 20px;
}

h15 {
	
	font-size: 30px;
}

h11 span, h15 {

	font-size: 30px;
	
}

.sb-description h3 {
	font-size: 8px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.sb-description {
	padding: 10px;
	
}

}


/* Button styles */
#upButton {
  position: fixed;
  bottom: 20px;
  right: -50px; /* Start off-screen */
  background-color: #333;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  opacity: 0; /* Start invisible */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transitions */
}

/* Button hover effect */
#upButton:hover {
  background-color: #555;
}

/* Button visible state */
#upButton.show {
  opacity: 1; /* Fade in */
  transform: translateX(-70px); /* Slide in from the right */
}

@media screen and (max-width: 480px) {
#upButton {
 width: 10%;
height: 7%;
display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  text-align: center; /* Center text as a fallback */
}
}

/* blog */
/* Hero Image Section */
.hero-image {
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url('images/blog.jpg');
    background-size: cover;
    background-position: center;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  
}

.overlay-text h20 {
    font-size: 40px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  color: white;
text-shadow: 2px 2px 0 black; /* Black outline effect */
}

/* Blog Post Preview Section */
.blog-previews {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
}

.preview-item {
    display: flex;
    width: 80%;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none; /* Remove underline for the link */
    color: inherit; /* Inherit text color */
    position: relative;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect: Raise and shadow */
.preview-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.preview-image {
    width: 30%;
    overflow: hidden;
}

.preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-content {
    padding: 20px;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.preview-content h21 {
    font-size: 24px;
    margin-bottom: 10px;
}

.preview-content p {
    font-size: 16px;
    color: #555;
}

.discover-more {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.discover-more span {
    color: #fc7f93;
}

/* Responsive Design for Blog Post Previews */
@media screen and (max-width: 480px) {

.hero-image {
    background-size: fill;
}
    /* Adjust the title font size */
    .hero-image .overlay-text h20 {
        font-size: 22px; /* Smaller font size for better visibility */
    }

    /* Blog post previews: Adjust layout */
    .blog-previews {
        padding: 20px;
    }

    .preview-item {
        flex-direction: column; /* Stack image and text vertically */
        width: 100%; /* Occupy full width */
        height: auto; /* Adjust height dynamically */
        padding: 0; /* Remove padding */
        border-radius: 10px; /* Rounded corners */
        overflow: hidden; /* Ensure content stays inside the rounded corners */
        background: #fff; /* Ensure a white background */
    }

    .preview-image {
        width: 100%; /* Make image occupy full width */
        height: 50%; /* Occupy half of the preview height */
border-radius: 0;
overflow: hidden;
    }

    .preview-image img {
        width: 100%; /* Ensure image scales correctly */
        height: 100%;
        object-fit: cover;
    }

    .preview-content {
        width: 100%; /* Adjust text to full width */
        text-align: center; /* Center-align text */
        padding: 10px; /* Add spacing around text */
    }

    .preview-content h21 {
        font-size: 18px; /* Adjust title size for smaller screens */
        margin-bottom: 5px;
    }

    .preview-content p {
        font-size: 14px; /* Smaller font for better fit */
    }

    .discover-more {
        position: absolute; /* Remove absolute positioning */
        margin-top: 10px; /* Add space above */
        text-align: center; /* Center-align text */
        font-size: 12px; /* Smaller font */
    }
}

/* blog posts */
 /* Header */
        

        /* Main image */
        .posts-image {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .posts-image img {
            width: 80%;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* Blog content box */
        .blog-content {
            position: relative;
            max-width: 70%;
            margin: -100px auto 40px; /* Pull up the box over the image */
            background-color: white;
            padding: 20px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            border-radius: 8px;
        }

        .blog-content h10 {
            margin-top: 0;
            font-size: 2.5em;
            color: #333;
font-weight: bold;
line-height: 1.5;
        }

        .blog-post-details {
            font-size: 0.9em;
            color: #777;
            margin-bottom: 20px;
        }

        .blog-content p {
            line-height: 1.6;
            color: #555;
        }

.h15 {
    margin: 20px 20px 50px 20px;
    font-size: 56px;
    color: #000000; /* Default color */
    font-family: "Volkhov", serif;
    text-align: center;
    font-weight: 700;
    text-shadow: 1px 1px 3px #e0d1bc;
    display: block; /* Matches your existing h15 styling */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth hover transitions */
}

.factory-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.factory-link:hover .h15 {
    color: #007bff; /* Change text color on hover */
    text-shadow: 0px 1px 1px #fff; /* Optional: Change shadow on hover */
}

.em {
color: #007BFF; /* Bootstrap primary blue */
      text-decoration: underline; /* Makes it underlined */
      font-weight: bold; /* Makes it stand out */
      cursor: pointer; /* Adds a pointer cursor to indicate clickability */
      transition: color 0.3s ease; /* Smooth color change on hover */
    }

    .em:hover {
      color: #0056b3; /* Darker blue on hover */