/* SPARKY DYNAMICALLY GENERATED CSS - DO NOT EDIT THIS FILE!
YOUR CHANGES WILL BE OVERWRITTEN AFTER NEXT SAVE OF TEMPLATE PARAMETERS!
You can add your custom CSS code in template options, under Custom tab or
you can edit file custom.css to add your CSS code. */

@import url('../../sparky_framework/css/icons/fontawesome.min.css');

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshRTM9jo7eTWk.ttf);
}
    
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/XRXI3I6Li01BKofiOc5wtlZ2di8HDFwmRTM9jo7eTWk.ttf);
}
    
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/XRXI3I6Li01BKofiOc5wtlZ2di8HDBImRTM9jo7eTWk.ttf);
}
    
* {
    box-sizing: border-box;
}

body {
    color:var(--sparkycolor3);
    font-size:18px;
    line-height:1.8;
    font-family:'Nunito', sans-serif;
    
    font-weight:400;
    font-style:normal;
    background:#ebf5d6;
}

input, textarea, button, select {
    font-family:'Nunito', sans-serif;
}

.content_sparky li, dl, dd, dt {
    line-height:1.8;
}

.sparky_container::after {
    content:'';
    display:table;
    clear:both;
}

.clr {
    clear:both;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border:none;
}

.sparky_container {
    margin:0 auto;
    padding:0;
}

.sparky_container > .sparky_cell {
    float:left;
}


/* GRID SYSTEM */

.sparkle1 {
    width: 8.3333333333333%;
}

.sparkle2 {
    width: 16.666666666667%;
}

.sparkle3 {
    width: 25%;
}

.sparkle4 {
    width: 33.333333333333%;
}

.sparkle5 {
    width: 41.666666666667%;
}

.sparkle6 {
    width: 50%;
}

.sparkle7 {
    width: 58.333333333333%;
}

.sparkle8 {
    width: 66.666666666667%;
}

.sparkle9 {
    width: 75%;
}

.sparkle10 {
    width: 83.333333333333%;
}

.sparkle11 {
    width: 91.666666666667%;
}

.sparkle12 {
    width: 100%;
}

.full .sparky_container {
    width:100%;
}

/* ROW SETTINGS */

.sparky_row1.sparky_full {
    background-color:var(--sparkycolor2);
}

.sparky_row2.sparky_full {
    background-color:var(--sparkycolor2);
}

.sparky_row4.sparky_full {
    background-color:#000;
}

.sparky_row5.sparky_full {
    background-color:var(--sparkycolor3);
}


/* SCREEN < 768px AND < TEMPLATE WIDTH */

@media (max-width: 767px) {
    .sparky_container {
        width: 100%;
    }

    .sparky_container > [class*='sparkle'] {
        width: 100% !important;
    }

    .two [class*='sparkle'] {
        width: 50% !important;
    }

    .full .sparky_container {
        width:100%;
    }

    .full .sparky_container > .sparky_cell {
        margin: 0;
        padding: 0;
    }
}

/* SCREEN >= 768px AND < TEMPLATE WIDTH */

@media (min-width: 768px) {
    .sparky_container {
        width: 750px;
    }
}

/* SCREEN >= 992px AND < TEMPLATE WIDTH */

@media (min-width: 992px) {
    .sparky_container {
        width: 970px;
    }
}

/* SCREEN >= TEMPLATE WIDTH */

@media (min-width:1200px) {
    .sparky_container {
        width:1170px;
    }

    [class*='sparkle'] {
        margin-left: 0;
    }
}
.one .sparkle1 {
    width: 8.3333333333333% !important;
}
.one .sparkle2 {
    width: 16.666666666667% !important;
}
.one .sparkle3 {
    width: 25% !important;
}
.one .sparkle4 {
    width: 33.333333333333% !important;
}
.one .sparkle5 {
    width: 41.666666666667% !important;
}
.one .sparkle6 {
    width: 50% !important;
}
.one .sparkle7 {
    width: 58.333333333333% !important;
}
.one .sparkle8 {
    width: 66.666666666667% !important;
}
.one .sparkle9 {
    width: 75% !important;
}
.one .sparkle10 {
    width: 83.333333333333% !important;
}
.one .sparkle11 {
    width: 91.666666666667% !important;
}
.one .sparkle12 {
    width: 100% !important;
}
.fluid .sparky_container {
    width: 100%;
}
.sparky_container > .sparky_cell {
    padding:15px 15px;
}

/* FONTS AND TYPOGRAPHY */

h1, h1 a {
    padding:30px 0;
    margin:0;
    line-height:1;
    color:var(--sparkycolor3);
    font-size:60px;
    font-family:'Nunito', sans-serif;
    
    font-weight:900;
    font-style:normal;
}

h2, h2 a {
    padding:15px 0;
    margin:0;
    line-height:1;
    color:var(--sparkycolor3);
    font-size:48px;
    font-family:'Nunito', sans-serif;
    
    font-weight:700;
    font-style:normal;
}

h2.row_heading {
    padding-left:15px;
    padding-right:15px;
}

h3 {
    padding:15px 0;
    margin:0;
    color:var(--sparkycolor3);
    font-size:30px;
    line-height:1.2;
    font-family:'Nunito', sans-serif;
    
    font-weight:700;
    font-style:normal;
}

h3.row_subheading {
    padding-left:15px;
    padding-right:15px;
}

h4 {
    padding:15px 0;
    margin:0;
    color:var(--sparkycolor3);
    font-size:24px;
    line-height:1.4;
    font-family:'Nunito', sans-serif;
    
    font-weight:700;
    font-style:normal;
}

a {
    color:var(--sparkycolor1);
    font-weight:bold;
    font-style:normal;
    text-decoration:none;
}

a:hover, a:active, a:focus {
    color:var(--sparkycolor3);
    text-decoration:none;
}

p {
    margin: 0 0 15px;
}

button,
button.btn,
a.btn,
button.btn-primary,
p.readmore a,
a.readmore {
    display: inline-block;
    padding: 4px 12px;
    color: #333333;
    text-align: center;
    vertical-align: middle;
    background-color: #f5f5f5;
    background-image:none;
    border: 1px solid #cccccc;
    font-size:inherit;
    line-height:inherit;
    text-shadow:none;
    border-radius:0;
    box-shadow:none;
}

button:hover,
button.btn:hover,
button.btn-primary:hover,
button:active,
button.btn:active,
button.btn-primary:active,
button:focus,
button.btn:focus,
button.btn-primary:focus,
p.readmore a:hover,
p.readmore a:focus,
a.readmore:hover,
a.readmore:focus {
    color: #333333;
    text-decoration: none;
    background-color: #eeeeee;
    background-image:none;
}

p.readmore a.btn span {
    display:none;
}

/* blog layout */

.blog-items {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    clear:both;
}

.blog-items.columns-2 .blog-item {
    width:calc(50% - 7.5px);
}

.blog-items.columns-3 .blog-item {
    width:calc(33.33% - 7.5px);
}

.blog-items.columns-4 .blog-item {
    width:calc(25% - 7.5px);
}

.blog-items.columns-5 .blog-item {
    width:calc(20% - 7.5px);
}

.blog-items.columns-6 .blog-item {
    width:calc(16.66% - 7.5px);
}

@media (max-width: 767px) {

    .blog-items.columns-2 .blog-item,
    .blog-items.columns-3 .blog-item,
    .blog-items.columns-4 .blog-item,
    .blog-items.columns-5 .blog-item,
    .blog-items.columns-6 .blog-item {
        width:100%;
    }

}

.page-header {
    padding: 0;
    margin: 0;
    border: 0;
}

.pull-left.item-image, figure.left.item-image {
    margin-right:15px;
    float:left;
}

.pull-right.item-image, figure.right.item-image {
    margin-left:15px;
    float:right;
}

/* forms */

form {
    margin:0;
}

.form-inline {
    display:inline;
}

#login-form input {
    padding: 4px;
}

/* lists */

ul, ol {
    margin: 15px 45px;
    padding: 0;
}

div.item-page ol li, div.item-page ul li {
    margin: 0 0 10px 0;
    padding: 0;
}

div.icons ul.dropdown-menu li {
    margin: 0;
}


.fa, .fas, [class*=' icon-'], [class^=icon-] {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

ul.arrow, ul.arrowleft, ul.calendar, ul.checklist, ul.clock, ul.delete, ul.email, ul.file, ul.folder, ul.heart, ul.information, ul.lock, ul.pencil, ul.play, ul.rss, ul.person, ul.shop, ul.song, ul.star, ul.star2, ul.trash, ul.tweak, ul.unlock, ul.warn {
    margin: 15px 45px;
    padding: 0;
}

ul.arrow li, ul.arrowleft li, ul.calendar li, ul.checklist li, ul.clock li, ul.delete li, ul.email li, ul.file li, ul.folder li, ul.heart li, ul.information li, ul.lock li, ul.pencil li, ul.play li, ul.rss li, ul.person li, ul.shop li, ul.song li, ul.star li, ul.star2 li, ul.trash li, ul.tweak li, ul.unlock li, ul.warn li {
    list-style: none;
    padding: 0 15px;
}

ul.arrow li:before, ul.arrowleft li:before, ul.calendar li:before, ul.checklist li:before, ul.clock li:before, ul.delete li:before, ul.email li:before, ul.file li:before, ul.folder li:before, ul.heart li:before, ul.information li:before, ul.lock li:before, ul.pencil li:before, ul.play li:before, ul.rss li:before, ul.person li:before, ul.shop li:before, ul.song li:before, ul.star li:before, ul.star2 li:before, ul.trash li:before, ul.tweak li:before, ul.unlock li:before, ul.warn li:before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    padding: 0;
    margin: 0 -30px;
    position: absolute;
}

ul.arrow li:before {
    content: '\f061';
}

ul.arrowleft li:before {
    content: '\f060';
} 

ul.calendar li:before {
    content: '\f073';
}

ul.checklist li:before {
    content: '\f00c';
}

ul.clock li:before {
    content: '\f017';
}

ul.delete li:before {
    content: '\f00d';
}

ul.email li:before {
    content: '\f0e0';
}

ul.file li:before {
    content: '\f15b';
}

ul.folder li:before {
    content: '\f07b';
}

ul.heart li:before {
    content: '\f004';
}

ul.information li:before {
    content: '\f05a';
}

ul.lock li:before {
    content: '\f023';
}

ul.pencil li:before {
    content: '\f303';
}

ul.person li:before {
    content: '\f007';
}

ul.play li:before {
    content: '\f04b';
}

ul.rss li:before {
    content: '\f09e';
}

ul.shop li:before {
    content: '\f07a';
}

ul.song li:before {
    content: '\f001';
}

ul.star li:before {
    content: '\f005';
}

ul.star2 li:before {
    content: '\f006';
}

ul.trash li:before {
    content: '\f2ed';
}

ul.tweak li:before {
    content: '\f0ad';
}

ul.unlock li:before {
    content: '\f09c';
}

ul.warn li:before {
    content: '\f071';
}

/* font awesome icon sizes */

.fa-1 {
    font-size: 1em;
}

.fa-2 {
    font-size: 2em;
}

.fa-3 {
    font-size: 4em;
}

.fa-4 {
    font-size: 7em;
}

.fa-5 {
    font-size: 12em;
}

.fa-6 {
    font-size: 16em;
}

.fontawesome-icon-list {
    font-size: 10px;
}

.fontawesome-icon-list i {
    font-size: 16px;
}

.warning, .info, .error {
    padding:15px 30px;
    min-height: 50px;
}

.warning {
    color:#000;
    border: 1px solid #ffcc00;
    background:#ffff66;
}

.info {
    color:#006699;
    border: 1px solid #006699;
    background:#bde1ff;
}

.error {
    color:#900;
    border: 1px solid #900;
    background:#f8b5b5;
}

.warning:before, .info:before, .error:before {
    font-family: 'Font Awesome 6 Free';
    font-size: 32px;
    font-weight: 900;
    line-height:1;
    margin: 0 30px 0 0;
    float: left;
}

.warning:before {
    content: '\f071';
    color: #ffcc00;
}

.info:before {
    content: '\f05a';
    color:#006699;
}

.error:before {
    content: '\f057';
    color:#900;
}

.outline {
    background: transparent;
}

.warning.outline {
    color: #d5aa00;
}

.typewriter {
    background: url('../images/typewriter_bg.png');
    padding:20px 15px 20px 30px;
    color:#000;
    font-family:'Courier New', Courier, monospace;
    line-height:20px;
}

.quote {
    margin-left: auto;
    margin-right: auto;
    padding: 15px 15px 15px 15px;
    font-size: 24px;
    font-style: normal;
    line-height: 1.4;
    text-align: center;
    max-width: 600px;
}

.dropcap:first-letter {
    font-size: 300%;
    font-weight:bold;
    float:left;
    margin:0 10px 5px 0;
    line-height: 1;
}

.p_number:first-letter {
    display:block;
    float:left;
    font-family: monospace;
    font-size: 400%;
    line-height:1;
    font-weight:bold;
    text-align: center;
    margin:0 15px 15px 0;
    padding:5px 15px;
    position: relative;
    color: #fff;
    background: #ccc;
}

.inset_left {
    display:block;
    float:left;
    width: 150px;
    font-style: italic;
    margin: 15px 15px 15px 0;
}

.inset_right {
    display:block;
    float:right;
    width: 150px;
    font-style: italic;
    margin: 15px 0 15px 15px;
}

.inset_title {
    font-weight:bold;
    display:block;
}

img.img_left {
    float:left;
    margin:0 30px 30px 0;
}

img.img_right {
    float:right;
    margin:0 0 30px 30px;
}

blockquote {
    border-left: 3px solid #ccc;
    font-family: Georgia, serif;
    font-style: italic;
    margin: 15px;
    padding: 15px;
}

legend {
    display: block;
    padding: 15px;
    margin-bottom: 5px;
    background:#f5f5f5;
    border: 0;
    font-size:inherit;
    line-height:inherit;
}

code {
    display: block;
    padding: 1em;
    color:inherit;
    border:0;
}


.quote:before {
    display: block;
    text-align: center;
    font-family: 'Font Awesome 6 Free';
    content: '\f10d';
    font-size: 1.5em;
    font-style: normal;
    font-weight: 900;
    color: #ccc;
    float: none;
    margin-bottom: 15px;
}

.fontawesome-icon-list div {
    width: 25%;
    float: left;
    padding: 5px 0;
}

.fontawesome-icon-list i {
    width: 30px;
    color: #333;
}

@media(min-width:600px) {
    .two-cols {
        -moz-column-count:2;
        -webkit-column-count:2;
        column-count:2;
        -moz-column-gap:3em;
        -webkit-column-gap:3em;
        column-gap:3em;
    }

    .three-cols {
        -moz-column-count:3;
        -webkit-column-count:3;
        column-count:3;
        -moz-column-gap:3em;
        -webkit-column-gap:3em;
        column-gap:3em;
    }

    .four-cols {
        -moz-column-count:4;
        -webkit-column-count:4;
        column-count:4;
        -moz-column-gap:3em;
        -webkit-column-gap:3em;
        column-gap:3em;
    }

    .five-cols {
        -moz-column-count:5;
        -webkit-column-count:5;
        column-count:5;
        -moz-column-gap:2em;
        -webkit-column-gap:2em;
        column-gap:2em;
    }

    .six-cols {
        -moz-column-count:6;
        -webkit-column-count:6;
        column-count:6;
        -moz-column-gap:2em;
        -webkit-column-gap:2em;
        column-gap:2em;
    }
}

.abovecontent {
    padding: 0 0 30px 0;
}

.belowcontent {
    padding: 30px 0 0 0;
}


/* LOGO */

.sparky_logo {
    color:var(--sparkycolor1);
    font-size:24px;
    font-family:'Nunito', sans-serif;
    font-weight:900;
    font-style:normal;
    
    text-decoration:none;
}
.sparky_slogan {
    color:var(--sparkycolor1);
    font-size:12px;
    font-family:'Nunito', sans-serif;
    font-weight:400;
    font-style:normal;
    
    text-decoration:none;
}

.sparky_logo_link {
    display:block;
}


/* DROP-DOWN MENU */

ul.mnu_mainmenu {
    display:block;
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:absolute;
    z-index:100;
    white-space:nowrap;
    text-align:right;
    position:relative;
    font-family:'Nunito', sans-serif;
}

.mnu_mainmenu ul {
    margin:0;
    list-style-type:none;
    list-style-position:outside;
    text-align:initial;
    position:absolute;
    z-index:100;
    background:var(--sparkycolor1);
    width:200px;
    border:0px solid #dddddd;
    padding:5px;
}

.mnu_mainmenu > li > a, .mnu_mainmenu > li > span {
    display:block;
    margin:0;
    text-decoration:none;
    color:var(--sparkycolor3);
    font-size:16px;
    padding:0 20px;
    font-weight:700;
    font-style:normal;
    height:60px;
    line-height:60px;
    cursor:pointer;
}

.mnu_mainmenu  > li.active > a, .mnu_mainmenu > li.active > span {
    color:var(--sparkycolor3);
    cursor:pointer;
}

.mnu_mainmenu > li > a:hover, .mnu_mainmenu > li:hover > a, .mnu_mainmenu > li > a:hover, .mnu_mainmenu > li:hover > span {
    color:var(--sparkycolor1);
}

.mnu_mainmenu > li {
    display:inline-block;
    position:relative;
    margin:0;
    padding:0;
    border-right:0px solid var(--sparkycolor4);
    border-bottom:0px solid var(--sparkycolor4);
    border-top:0px solid var(--sparkycolor4);
}

.mnu_mainmenu > li.active {
}

.mnu_mainmenu > li:first-child {
    border-left:0px solid var(--sparkycolor4);
}

.mnu_mainmenu li:hover {
    position:relative;
}

.mnu_mainmenu li ul li:hover {
    background-color:var(--sparkycolor4);
}

.mnu_mainmenu li ul li {
    height:35px;
    border-bottom:0px solid #dddddd;
    padding:0 10px;
    margin: 0;
    
}

.mnu_mainmenu li ul a, .mnu_mainmenu li ul span {
    display: block;
    line-height:35px;
    font-size:14px;
    color:var(--sparkycolor5);
    font-weight:400;
    font-family:'Nunito', sans-serif;
    font-style:normal;
    padding-top:0;
    cursor:pointer;
}

.mnu_mainmenu li ul li:hover > a, .mnu_mainmenu li ul li:hover > span {
    color:var(--sparkycolor5);
}

.mnu_mainmenu li ul ul {
    left: calc(200px - 5px);
    margin-top:-5px;
}

.mnu_mainmenu ul ul {
    top:0px;
}

.mnu_mainmenu .sub {
    font-size:10px;
    line-height:normal;
    display:block;
}

.mnu_mainmenu > li > ul {
    display: none;
}


/* STANDARD MENU */
ul.mnu_bottommenu1 , ul.mnu_bottommenu2  {
    display:block;
    margin:0;
    padding:0;
}
ul.mnu_bottommenu1 ul, ul.mnu_bottommenu2 ul {
    margin:10px;
    padding:0;
}
.mnu_bottommenu1 li, .mnu_bottommenu2 li {
    display:block;
}
.mnu_bottommenu1 > li, .mnu_bottommenu2 > li {
    margin-bottom:5px;
    padding:5px 0px;
    font-size:16px;
    font-weight:400;
    font-style:normal;
}
.mnu_bottommenu1 > li > a, .mnu_bottommenu2 > li > a {
    color:var(--sparkycolor5);
    font-family:'Nunito', sans-serif;
    font-weight:400;
    font-style:normal;
}
.mnu_bottommenu1 > li > a:hover, .mnu_bottommenu2 > li > a:hover {
    color:var(--sparkycolor1);
}
.mnu_bottommenu1 > li li, .mnu_bottommenu2 > li li {
    margin:0;
    padding:0;
    font-size:11px;
    line-height:15px;
    font-weight:400;
    font-style:normal;
}
.mnu_bottommenu1 > li li a, .mnu_bottommenu2 > li li a {
    color:#782320;
    font-family:'Nunito', sans-serif;
    font-weight:400;
    font-style:normal;
}
.mnu_bottommenu1 > li li a:hover, .mnu_bottommenu2 > li li a:hover {
    color:#333333;   
}

/* RESPONSIVE TOP MENU */

.js .nav-collapse {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    zoom: 1;
}

.nav-collapse.opened {
    max-height: 9999px;
    position:absolute;
}

.nav-collapse.opened > ul {
    position: fixed;
    top: 0;
    left: 5%;
    width: 90%;
    height: auto;
    background:#444;
}

.nav-collapse.opened > ul ul {
    width: 100%;
    position: relative;
    left:0;
    padding:0;
    margin:0;
    background:#444;
    border:0;
}

.nav-collapse.opened > ul ul li {
    height:auto;
}

.nav-collapse.opened li {
    width: 100%;
    display: block;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    text-align:initial;
}

.nav-collapse.opened li.active, .nav-collapse.opened li:hover {
    background-color:#333;
}

.nav-collapse.opened li.active a {
    color:#fff !important;
}

.nav-collapse.opened li a,
.nav-collapse.opened li span {
    padding:0 15px;
    margin:0;
    line-height:50px;
    height:50px;
    color:#fff !important;
}

.nav-collapse.opened li li a,
.nav-collapse.opened li li span {
    padding:0 30px;
    line-height:30px;
    height:30px;
}

.nav-toggle {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background: url('../images/tinynav.png');
    background-size: 42px 84px;
    width: 42px;
    height: 42px;
    text-indent:-9999px;
    display:inline-block;
    float:right;
}

.nav-toggle.active {
    position: fixed;
    z-index: 999;
    right: 5%;
    top: 0;
    margin-top:5px;
    margin-right:15px;
    background-position: bottom;
}

#blocker {
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:9999;
}

@media screen and (min-width: 992px) {

    .js .nav-collapse {
        position: relative;
    }

    .js .nav-collapse.closed {
        max-height: none;
    }

    .nav-toggle {
        display: none;
    }

}

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

    .nav-collapse.closed {
        overflow:hidden;
    }

    .firstClick + ul {
        display: none !important;
    }

}
    
/* IMAGE ANIMATION */

.img-with-animation {
    opacity: 0;
    position: relative;
}

.img-with-animation[data-animation='grow-in'] {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.6s cubic-bezier(0.15, 0.84, 0.35, 1.25);}

.img-with-animation[data-animation='fade-in-from-left'] {
    left: -40px;
}

.img-with-animation[data-animation='fade-in-from-right'] {
    right: -40px;
}

.img-with-animation[data-animation='fade-in-from-bottom'] {
    bottom: -100px;
}

/* FLOATING ROW (usually for top menu) */

@keyframes topmenushow {
    0% {
        opacity: 1;
        transform: translateY(-50px);
    }
    
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fix_menu {
    position: fixed;
    top: 0;
    z-index: 89;
    width: 100%;
    background: rgba(255,255,255,.9) !important;
}

.topmenushow {
    animation-name: topmenushow;
    animation-fill-mode: both;
    animation-duration: .5s;
}

.element-invisible {
    display:none !important;
}

/* forms */

.input-group {
    margin-bottom:15px;
}

.has-danger input {
    border-color:red;
}

.form-control-feedback {
    color:red;
    padding: 0 15px;
}

.control-group {
    margin-bottom:15px;
}

.input-prepend .add-on,
.input-prepend .btn,
a.jmodedit {
    box-sizing: content-box;
}

.nav-tabs.nav-stacked {
    margin:0;
}

a.modal.btn, a.btn.hasTooltip, a.btn.modal-button {
    font-size:13px;
}

.input-password-toggle .icon-eye::before {
    content: '\f06e';
}

.input-password-toggle .icon-eye-slash::before {
    content: '\f070';
}

.btn .icon-edit::before {
    content: '\f044';
}

/* front-end edit */

a.jmodedit.btn {
    position: relative;
    z-index: 9999;
    padding: 15px;
    margin: 0;
    line-height: 1;
    color: #fff;
    background: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-decoration: none;
}

a.jmodedit.btn > span.icon-edit {
    color: #fff
}

a.jmodedit.btn:hover {
    padding: 15px;
    margin: 0;
    line-height: 1;
    color: #fff;
    background: #000;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-decoration: none;
}

.moduletable [role='tooltip'] {
    color: #333;
    background: #fff;
    font-weight: 400;
    line-height: 1.5;
}

form#modules-form {
    background: #fff;
    color: #333;
    padding: 15px;
}

form#modules-form legend {
    color: #fff;
    background: #333;
    border: 0;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 18px;
}

[aria-describedby^='editarticle'] {
    padding: 15px;
    margin: 0;
    line-height: 1;
    color: #fff;
    background: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-decoration: none;
    position: absolute;
    z-index: 9999;
    left: 15px;
}

[aria-describedby^='editarticle']:hover {
    color: #fff;
    background: #333;
}

[aria-describedby^='editarticle'] [role='tooltip'] {
    color: #333;
    background: #fff;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 15px;
    margin-left: -15px;
}

.edit.item-page button span {
    margin:0 5px;
}

#jform_publish_up_img, #jform_publish_down_img {
    padding:7px 12px 6px;
}

#jformposition_chzn ul.chzn-results li:nth-child(1),
#jformposition_chzn ul.chzn-results li:nth-child(2),
#jformposition_chzn ul.chzn-results li:nth-child(3) {
    display:none;
} 

/* article info */

dl.article-info {
    display:inline-block;
    width:auto;
    margin:0 0 10px;
    padding:4px 3px 3px;
    font-size:13px;
}

dl.article-info dt.article-info-term {
    display:none;
}

dl.article-info dd {
    display:inline-block;
    padding:0 5px;
    margin:0;
    border-right:1px solid #ccc;
}

dl.article-info dd:first-of-type {
    padding:0 5px 0 0;
}

dl.article-info dd:last-child {
    border:0;
}

/* print/email drop-down */

.items-leading .icons,
.items-row .icons {
    float:right;
    width:15%;
}

.dropdown-menu li a span {
    padding:0 10px;
    background-image:none !important;
}

.dropdown-menu li a span:before {
    margin-left:-10px;
}

/* pagination */

.icon-angle-left:before {
    content: '\f104';
}

.icon-angle-double-left:before {
    content: '\f100';
}

.icon-angle-right:before {
    content: '\f105';
}

.icon-angle-double-right:before {
    content: '\f101';
}

/* pager */

.pager li > a, .pager li > span {
    background: transparent;
    border: 1px solid #121212;
    border-radius: 0;
    color: #121212;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 25px;
    text-transform: uppercase;
}

/* tags */

ul.tags.list-inline, .mod-tagspopular ul {
    margin:0;
    padding:15px 0;
    list-style:none;
}

ul.tags.list-inline li, .mod-tagspopular ul li {
    display:inline-block;
    border:1px solid #ccc;
    padding:0;
    border-radius:4px;
    line-height:13px;
}

ul.tags.list-inline li:hover, .mod-tagspopular ul li:hover {
    background:#f5f5f5;
}

ul.tags.list-inline li a.btn, .mod-tagspopular ul li a {
    display:inline-block;
    background:none;
    border:none;
    text-shadow:none;
    color:#999;
    padding:5px;
    margin:0;
    font-size:13px;
    line-height:13px;
}

ul.tags.list-inline li a.btn:hover, .mod-tagspopular ul li a:hover {
    color:#666 !important;
}

/* rating */

.content_rating {
    display: inline-block;
    margin-inline-end: 15px;
}

.content_vote {
    display: inline-block;
    margin-bottom: 15px;
}

.content_rating ul {
    margin: 0 0 15px;
}

.content_vote select {
    display: inline-block;
    height: 30px;
}

.content_vote input.btn {
    height: 30px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

/* blog */

.items-more ol.nav {
    margin:0;
}

.items-more ol.nav li a {
    border:0;
    padding:5px 0;
}

.items-more ol.nav li a:hover,
.items-more ol.nav li a:focus {
    background:none;
}

/* category */

ul.category {
    margin:0;
    padding:0;
    list-style:none;
}

ul.category li {
    padding:10px 0;
}

ul.category li .list-title {
    font-size:18px;
}

/* contact form */


/* search form */

ol.com-finder__results-list,
ol.com-finder__results-list ul.result__taxonomy {
    margin: 0;
}

.com-finder__explained {
    padding-bottom: 30px;
}

/* user */

.registration legend,
.profile-edit legend {
    border:0;
    font-size:18px;
}

ul.mod-login__options {
    margin-left:0;
    margin-right:0;
}

/* breadcrumbs */

ol.mod-breadcrumbs {
    margin: 0;
}

/* faq */

.accordion-header {
    padding: 0;
}


/**********************
 *CSS Animations by:
 *http://codepen.io/vivinantony
***********************/
.spinner1 {
    width: 40px;
    height: 40px;
    position: relative;
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner2 {
    width: 40px;
    height: 40px;
    position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner2 .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
    0%, 80%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 40% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

.spinner3 {
    width: 40px;
    height: 40px;
    position: relative;  
    -webkit-animation: rotate 2.0s infinite linear;
    animation: rotate 2.0s infinite linear;
}

.dot1, .dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
    top: auto;
    bottom: 0px;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes rotate {
    100% { -webkit-transform: rotate(360deg) }
}
@keyframes rotate {
    100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }
}

@-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
    0%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

.spinner4 {
    width: 30px;
    height: 30px;
    background-color: #fff;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
    0% { 
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    } 50% { 
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    } 100% { 
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

.spinner5 {
    width: 32px;
    height: 32px;
    position: relative;
}

.cube1, .cube2 {
    background-color: #fff;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: cubemove 1.8s infinite ease-in-out;
    animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
    25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
    75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
    100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cubemove {
    25% { 
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    } 50% { 
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    } 50.1% { 
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    } 75% { 
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    } 100% { 
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

.spinner6 {
    width: 50px;
    height: 30px;
    text-align: center;
}

.spinner6 > div {
    background-color: #fff;
    height: 100%;
    width: 6px;
    margin-left:2px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner6 .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner6 .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner6 .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner6 .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
    0%, 40%, 100% { 
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% { 
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

.spinner7 {
    width: 90px;
    height: 30px;
    text-align: center;
}

.spinner7 > div {
    background-color: #fff;
    height: 15px;
    width: 15px;
    margin-left:3px;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: stretchdelay 0.7s infinite ease-in-out;
    animation: stretchdelay 0.7s infinite ease-in-out;
}

.spinner7 .circ2 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.spinner7 .circ3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.spinner7 .circ4 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.spinner7 .circ5 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: translateY(-10px) }  
    20% { -webkit-transform: translateY(-20px) }
}

@keyframes stretchdelay {
    0%, 40%, 100% { 
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
    } 20% {
        transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
    }
}

.fl.spinnerimage {
    background:url(../images/-1) center no-repeat;
    width: 100%;
    height: 100%;
    left: 0 !important;
    top: 0 !important;
}

#page_transition_mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(97, 191, 129);
    z-index: 999;
    display: block;
}

/* Custom user code */

/* Default styling for mobile devices (up to 767px) */
.fix_menu .sparky_logo_image {
    width: 246% !important;
}

/* Tablet devices (768px to 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .fix_menu .sparky_logo_image {
        width: 200% !important;
    }
}

/* Large devices/Desktop (1024px and up) */
@media screen and (min-width: 1024px) {
    .fix_menu .sparky_logo_image {
        width: 80% !important;
    }
}

/* Extra large devices (1200px and up) - Optional */
@media screen and (min-width: 1200px) {
    .fix_menu .sparky_logo_image {
        width: 80% !important;
    }
}








.homepage_slider {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: #daecb5;
  overflow: hidden;
}

/* Dimmed background image layer (no blur) */
.homepage_slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #333 url('https://akitonfarms.com/images/akitonihome%201%201.webp?1750429399000') no-repeat center/cover;
  background-attachment: fixed;
  z-index: 1;
}

/* Dark overlay to dim the background image */
.homepage_slider::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Ensure carousel content stays on top and sharp */
.homepage_slider .hot-swipe-carousel,
.homepage_slider .swiper-container,
.homepage_slider .swiper-wrapper,
.homepage_slider .swiper-slide,
.homepage_slider .carousel-content,
.homepage_slider > div {
  position: relative;
  z-index: 2;
}

/* Add semi-transparent background to carousel with padding */
.homepage_slider .hot-swipe-carousel,
.homepage_slider .swiper-container {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 40px 30px !important;
  border-radius: 12px !important;
  margin: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Also target the main carousel wrapper */
.homepage_slider .moduletable,
.homepage_slider [class*="hot"],
.homepage_slider [class*="swiper"],
.homepage_slider [class*="carousel"] {
  background: rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 40px 30px !important;
  border-radius: 12px !important;
  margin: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Ensure text is light and readable on dark background */
.homepage_slider .hot-swipe-carousel *,
.homepage_slider .swiper-container *,
.homepage_slider .moduletable *,
.homepage_slider [class*="hot"] *,
.homepage_slider [class*="swiper"] *,
.homepage_slider [class*="carousel"] * {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Style headings specifically */
.homepage_slider h1,
.homepage_slider h2,
.homepage_slider h3,
.homepage_slider h4,
.homepage_slider h5,
.homepage_slider p,
.homepage_slider h6 {
  color: #ffffff !important;
  font-weight: bold !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* Style links */
.homepage_slider a {
  color: #66ccff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.homepage_slider a:hover {
  color: #99ddff !important;
}

/* Responsive */
@media (max-width: 768px) {
  .homepage_slider::before {
    background-attachment: scroll;
  }
  
  .homepage_slider {
    min-height: 80vh;
  }
  
  .homepage_slider .hot-swipe-carousel,
  .homepage_slider .swiper-container,
  .homepage_slider .moduletable,
  .homepage_slider [class*="hot"],
  .homepage_slider [class*="swiper"],
  .homepage_slider [class*="carousel"] {
    padding: 25px 20px !important;
    margin: 15px !important;
  }
}

@media (max-width: 480px) {
  .homepage_slider .hot-swipe-carousel,
  .homepage_slider .swiper-container,
  .homepage_slider .moduletable,
  .homepage_slider [class*="hot"],
  .homepage_slider [class*="swiper"],
  .homepage_slider [class*="carousel"] {
    padding: 20px 15px !important;
    margin: 10px !important;
    border-radius: 8px !important;
  }
}







.sparky_container > .sparky_cell {
    padding: 0px 15px;
}

.fix_menu .sparky_logo_image {
    width: 43%;
}
.
}
floating .sparky_logo_image{
width:70%;
}

@media (max-width: 767px) {
.sparky_logo_image{
width:170px;
}
  .fix_menu .sparky_logo_image {
    width: 100px;
}
}
body{
overflow-x: hidden; /
}
.whatsapp-button {
    position: fixed; /* Fixed position */
    bottom: 20px;    /* Distance from the bottom of the viewport */
    left: 20px;      /* Distance from the left */
    z-index: 1000;   /* Ensure it stays on top */
    opacity: 0;      /* Start hidden */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition effect for opacity and transform */
    pointer-events: none; /* Prevent interaction when hidden */
    padding: 12px; /* Adjust padding to create a circular background */
    background-color: #4ec95c; /* Green background color */
    border-radius: 50%; /* Round the edges of the background */
    width: 54px;  /* Ensure the width and height are consistent */
    height: 54px; /* Same height as width to maintain round shape */
    display: flex;
    justify-content: center;
    align-items: center;
}

.whatsapp-button.visible {
    opacity: 1;      /* Fully visible */
    pointer-events: auto; /* Enable interaction when visible */
}

.whatsapp-button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    transition: transform 0.3s ease; /* Smooth hover transition */
    transform-origin: center; /* Scale outward from the center */
}

.whatsapp-button a {
    display: block; /* Make sure the link is a block element */
}

.whatsapp-button img {
    width: 20px;   /* Set the image size to 20px */
    height: 20px;  /* Set the image height to 20px */
    object-fit: contain; /* Ensure the image keeps its aspect ratio and fits neatly */
    display: block; /* Make the image a block element */
}

/* Media query for small screens */
@media (max-width: 480px) {
    .whatsapp-button {
        width: 50px; /* Increase button size on small devices */
        height: 50px; /* Maintain round shape */
        padding: 12px; /* Adjust padding to maintain proportions */
    }

    .whatsapp-button img {
        width: 20px;  /* Keep the image size fixed at 20px */
        height: 20px; /* Ensure the image maintains its original aspect ratio */
    }
}




@media screen and (max-width: 997px) {
    .spacerr {
        display: none;
    }
}

.homepage_image {
    border-radius: 10px; /* Adjust the value for rounded corners */
    transition: filter 0.3s ease; /* Smooth transition effect */
}

.homepage_image:hover {
    filter: brightness(1.1); /* Slightly brightens the image */
}


#page_transition_mask {
   
  background-color:#81ac0c!important;
}

.newsrow{
display:none}


a.kori {
    color: #84ba2f !important; /* Default link color (green) */
}

a.kori:visited {
    color: yellow !important; /* Color when the link is visited */
}

a.kori:active {
    color: yellow !important; /* Color when the link is actively clicked */
}



/* Style for ChronoForms input fields */
input[type="text"], input[type="email"], input[type="password"], textarea {
    padding: 1em;              /* Padding inside fields (you can adjust this as needed) */
    margin-bottom: 1em;        /* Space between input fields */
    border: 1px solid #ccc;    /* Border width and color */
    border-radius: 5px;        /* Rounded corners */
    width: 100%;               /* Make inputs fill the available width */
    font-size: 16px;           /* Font size for better readability */
}

/* Focus effect on input fields */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
    border: 2px solid #81ac0c; /* Blue border on focus */
    outline: none;             /* Remove default outline */
}



.fix_menu {
    position: fixed;
    top: 0;
    z-index: 89;
    width: 100%;
  height: 9%!important;
    background: rgba(218, 236, 181, 0.9) !important;
}

@media (max-width: 600px) {
    .fix_menu {
        height: 9% !important; /* Adjust the height for small devices */
    }
}
.logorow {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}


.nav-collapse.opened > ul ul {
    width: 100%;
    position: relative;
    left: 0;
    padding: 0;
    margin: 0;
    background: #5a7708;
    border: 0;
}



.nav-collapse.opened > ul {
    position: fixed;
    top: 0;
    left: 5%;
    width: 90%;
    height: auto;
    background: #81ac0c;
}


.nav-collapse.opened li.active, .nav-collapse.opened li:hover {
    background-color: #6c8f0a;
}


html {
  scroll-behavior: smooth; /* Optional: smooth scroll by default */
  scroll-padding-top: 70px; /* Adjust this value based on your fixed menu height */
}





/* Back to the top button */
.back-to-top-button {
    position: fixed;              /* Fixed position */
    bottom: 20px;                 /* Distance from the bottom of the viewport */
    right: 20px;                  /* Distance from the right of the viewport */
    z-index: 1000;                /* Ensure it stays on top */
    opacity: 0;                   /* Start hidden */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition effect for opacity and scaling */
    pointer-events: none;         /* Prevent interaction when hidden */
}

/* When visible, make the button appear */
.back-to-top-button.visible {
    opacity: 1;                   /* Fully visible */
    pointer-events: auto;         /* Enable interaction when visible */
    transform: scale(1.1);         /* Scale up slightly for a smoother effect */
}

/* Back to the top button image */
.back-to-top-button img {
    width: 20px;                  /* Smaller image width */
    height: 20px;                 /* Smaller image height */
}

/* Back to the top button appearance (round, background, shadow) */
.back-to-top-button a {
    display: inline-flex;         /* Align items */
    justify-content: center;      /* Center content */
    align-items: center;          /* Center content */
    width: 54px;                  /* Increase button width */
    height: 54px;                 /* Increase button height */
    border-radius: 50%;           /* Make it round */
    background-color: #81ac0c;    /* Initial background color */
    border: 5px solid white;      /* Increase border thickness */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Add shadow for contrast */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for background color and scaling */
}

/* Hover effect: change background color to #b3641d */
.back-to-top-button:hover a {
    transform: scale(1.1);         /* Slightly enlarge on hover */
    background-color: #6c8f0a;     /* Change background color on hover */
}

/* Maintain the original border color on hover */
.back-to-top-button a:hover {
    border-color: white;           /* Keep the border color white */
}

/* Adding hover effects on the image */
.back-to-top-button:hover img {
    transform: scale(1.1);         /* Slightly enlarge image */
}

/* Responsive styles */
@media (max-width: 768px) {
    .back-to-top-button a {
        width: 47px;              /* Smaller button size on tablets and small screens */
        height: 47px;             /* Smaller button size */
    }
    .back-to-top-button img {
        width: 18px;              /* Smaller image size */
        height: 18px;             /* Smaller image size */
    }
}

@media (max-width: 480px) {
    .back-to-top-button a {
        width: 47px;              /* Even smaller button on very small screens */
        height: 47px;             /* Even smaller button */
    }
    .back-to-top-button img {
        width: 15px;              /* Smaller image size */
        height: 15px;             /* Smaller image size */
    }
}