/* 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');

* {
    box-sizing: border-box;
}

body {
    color:var(--sparkycolor2);
    font-size:18px;
    line-height:1.5;
    font-family:'Ubuntu', sans-serif;
    text-align:left;
    font-weight:300;
    font-style:normal;
    background:#000000 url('../images/logo2.png') center center no-repeat fixed;
}

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

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

.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:#000000;
}

.sparky_row2.sparky_full {
    background-color:#1a1919;
}

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

.sparky_row5.sparky_full {
    background-color:#29292b;
}

.sparky_row6.sparky_full {
    background-color:#4a473a;
}

.sparky_row8.sparky_full {
    background-color:#353636;
}

.sparky_row9.sparky_full {
    background-color:#e3c010;
}

.sparky_row10.sparky_full {
    background-color:#000000;
}

.sparky_row11.sparky_full {
    background-color:#0d0d0d;
}

.sparky_row12.sparky_full {
    background-color:#000000;
}

.sparky_row14.sparky_full {
    background-color:#000000;
}

.sparky_row15.sparky_full {
    background-color:#454343;
}


/* 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:1230px) {
    .sparky_container {
        width:1200px;
    }

    [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:0px 15px;
}

/* FONTS AND TYPOGRAPHY */

h1, h1 a {
    padding:30px 0;
    margin:0;
    line-height:1.7;
    color:var(--sparkycolor2);
    font-size:1.5rem;
    font-family:'Ubuntu', sans-serif;
    
    font-weight:300;
    font-style:normal;
}

h2, h2 a {
    padding:15px 0;
    margin:0;
    line-height:1.7;
    color:#ffd700;
    font-size:1.3rem;
    font-family:'Arvo', serif;
    
    font-weight:700;
    font-style:normal;
}

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

h3 {
    padding:15px 0;
    margin:0;
    color:var(--sparkycolor2);
    font-size:1.3rem;
    line-height:1.7;
    font-family:'Ubuntu', sans-serif;
    
    font-weight:400;
    font-style:normal;
}

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

h4 {
    padding:15px 0;
    margin:0;
    color:#333333;
    font-size:1.4rem;
    line-height:1.7;
    font-family:'Ubuntu', sans-serif;
    
    font-weight:400;
    font-style:normal;
}

a {
    color:#419666;
    font-weight:300;
    font-style:italic;
    text-decoration:none;
}

a:hover, a:active, a:focus {
    color:#fdcc29;
    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:#fac955;
    font-size:36px;
    font-family:'Arvo', serif;
    font-weight:400;
    font-style:normal;
    text-align:center;
    text-decoration:none;
}
.sparky_slogan {
    color:#fac955;
    font-size:20px;
    font-family:'Ubuntu', sans-serif;
    font-weight:400;
    font-style:normal;
    text-align:center;
    text-decoration:none;
}

.sparky_logo_link {
    display:block;
}


/* DROP-DOWN MENU */

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

.mnu_topmenu ul {
    margin:0;
    list-style-type:none;
    list-style-position:outside;
    text-align:initial;
    position:absolute;
    z-index:100;
    background:#f0ce38;
    width:175px;
    border:0px solid #dddddd;
    padding:5px;
}

.mnu_topmenu > li > a, .mnu_topmenu > li > span {
    display:block;
    margin:0;
    text-decoration:none;
    color:#000000;
    font-size:1.6em;
    padding:0 15px;
    font-weight:300;
    font-style:normal;
    height:40px;
    line-height:40px;
    cursor:pointer;
}

.mnu_topmenu  > li.active > a, .mnu_topmenu > li.active > span {
    color:#3b3b3a;
    cursor:pointer;
}

.mnu_topmenu > li > a:hover, .mnu_topmenu > li:hover > a, .mnu_topmenu > li > a:hover, .mnu_topmenu > li:hover > span {
    color:#f0ce38;
}

.mnu_topmenu > li {
    display:inline-block;
    position:relative;
    text-align:left;
    margin:0;
    padding:0;
    border-right:0px solid var(--sparkycolor1);
    border-bottom:0px solid var(--sparkycolor1);
    border-top:0px solid var(--sparkycolor1);
    background:#f0ce38;
}

.mnu_topmenu > li.active {
    background:#000000;
}

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

.mnu_topmenu li:hover {
    position:relative;
    background:#000000;
}

.mnu_topmenu li ul li:hover {
    background-color:#222222;
}

.mnu_topmenu li ul li {
    height:40px;
    border-bottom:0px solid #dddddd;
    padding:0 0px;
    margin: 0;
    
    text-align:left;
}

.mnu_topmenu li ul a, .mnu_topmenu li ul span {
    display: block;
    line-height:40px;
    font-size:20px;
    color:#000000;
    font-weight:300;
    font-family:'Ubuntu', sans-serif;
    font-style:normal;
    padding-top:0;
    cursor:pointer;
}

.mnu_topmenu li ul li:hover > a, .mnu_topmenu li ul li:hover > span {
    color:#f0ce38;
}

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

.mnu_topmenu ul ul {
    top:0px;
}

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

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


/* STANDARD MENU */

ul.mnu_bottommenu1 {
    display:block;
    margin:0;
    padding:0;
    text-align:left;
}

ul.mnu_bottommenu1 ul {
    margin:2px;
    padding:0;
}

.mnu_bottommenu1 li {
    display:block;
}

nav ul.mnu_bottommenu1 > li {
    margin-bottom:1px;
    padding:1px 0px;
    font-size:20px;
    font-weight:300;
    font-style:normal;
    text-align:left;
}

.mnu_bottommenu1 > li > a {
    color:#f0ce38;
    font-family:'Ubuntu', sans-serif;
    font-weight:300;
    font-style:normal;
}

.mnu_bottommenu1 > li > a:hover {
    color:var(--sparkycolor2);
}

.mnu_bottommenu1 > li li {
    margin:0;
    padding:0;
    font-size:20px;
    line-height:21px;
    font-weight:300;
    font-style:normal;
    text-align:left;
}

.mnu_bottommenu1 > li li a {
    color:#000000;
    font-family:;
    font-weight:300;
    font-style:normal;
    text-align:left;
}

.mnu_bottommenu1 > li li a:hover {
    color:#000000;   
}

/* 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;
}

.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/logo2.png) 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 */

/*
 * CUSTOM.CSS
 * FINAL CONSOLIDATED FILE
 */

/* ===================================================
   1. CORE CUSTOM VARIABLES & TYPOGRAPHY
   =================================================== */

:root {
    --text-primary: #ffffff;      /* Main text color (White) */
    --text-secondary: #ffd700;    /* Accent color for H2, links (Gold/Yellow) */
    --font-primary: 'Ubuntu', sans-serif;
    --font-secondary: 'Arvo', serif;
}

/* Base Body/Paragraph Styles */
body {
    font-size: 1rem;
    line-height: 1.5;
}

p {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: justify;
}

/* Apply common spacing and font rules to all headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0; 
    padding: 15px 0;
    line-height: 1.3;
    color: var(--text-primary); 
    font-family: var(--font-primary);
}

/* Specific Heading Size and Color Overrides */
h1 {
    color: var(--text-secondary); /* Set to #ffd700 */
    font-size: 2.5rem; 
    font-weight: 300;
    padding-top: 30px;
}

h2 {
    color: var(--text-secondary);
    font-size: 1.8rem;
    font-family: var(--font-secondary);
    font-weight: 700;
}

h3 {
    font-size: 1.5rem;
    font-weight: 400;
}

h4 {
    font-size: 1.2rem;
    font-weight: 400;
    color: #cccccc;
}

a {
    color: var(--text-secondary);
    font-weight: 300;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #fdcc29;
    text-decoration: underline;
}

.quote {
    padding: 15px;
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    max-width: 600px;
    margin: 30px auto;
}

/* ===================================================
   2. LOGO ROW CENTERING (Flexbox)
   =================================================== */

.logorow {
    background-color: #000000; /* Pure Black */
    
    /* Flexbox centering */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap; 
    
    padding: 20px 0;
    margin: 30px 0;
}

.logorow img,
.logorow a {
    margin: 10px 20px;
}

/* ===================================================
   3. GLOBAL / CONTAINERS & SECTIONS
   =================================================== */
.container {
    max-width: 100%; 
    margin: 0 auto;
    padding: 40px 20px;
    background: linear-gradient(135deg, #000000 0%, #5b5b5c 100%);
    color: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

.section {
    background: rgba(255, 255, 255, 0.1); 
    padding: 25px;
    margin: 30px 0;
    border-radius: 10px;
    border-left: 5px solid #ffd700;
    backdrop-filter: blur(10px);
}

.sizes-section {
    background: rgba(255, 255, 255, 0.15);
    padding: 30px;
    border-radius: 10px;
    margin: 30px 0;
}

.underline {
    text-decoration: underline;
    text-decoration-color: #fccf17;
    text-underline-offset: 5px;
}

.pro-tip {
    background: #17c7fc;
    color: #000000;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    font-style: italic;
    margin-top: 15px;
}

.western-u {
    text-decoration: none;
    border-bottom: 3px solid #ffd700;
}

/* ===================================================
   4. DUMPSTER SIZES (Cards) & FLOATING IMAGES
   =================================================== */
.dumpster-size {
    background: black;
    color: #fccf17;
    padding: 25px;
    margin: 20px 0;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dumpster-size:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.dumpster-size h3 {
    color: #fccf17;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dumpster-size h3 i {
    font-size: 1.5em;
    color: #fccf17;
}

/* Container to ensure text wraps around the floated image */
.size-list-container {
    overflow: auto; 
    margin-bottom: 20px; 
}

.size-image {
    float: right; 
    width: 40%; 
    padding: 10px;
    margin-left: 20px;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* ===================================================
   5. TABLES (Capacity Charts)
   =================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: #000000;
    border-radius: 8px;
    overflow: hidden;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #333333; 
}

th {
    background: #000000;
    color: white;
    font-weight: 600;
}

tr:nth-child(even) {
    background: #111111;
}

tr:hover {
    background: #fccf17;
    color: #000000; 
}

/* Default Hiding of the Image Wrapper's content */
.responsive-service-table .image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
}

/* ===================================================
   6. CALL TO ACTION (CTA)
   =================================================== */
.f-third.sml.black {
    text-align: center;
    font-size: 1.5em;
    margin: 30px 0;
}

.req-form.cta-phone {
    color: #ffd700;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.req-form.cta-phone:hover {
    color: #fff;
}

.landfill-link {
    color: #ffd700;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    padding: 10px 20px;
    background: rgba(255, 215, 0, 0.2);
    border-radius: 5px;
    transition: background 0.3s ease;
}

.landfill-link:hover {
    background: rgba(255, 215, 0, 0.3);
}

/* CTA Block */
.cta-block-container {
    text-align: center;
    padding: 20px 0;
    background-color: #000000;
}

.cta-headline {
    font-size: 2em;
    color: #FFCC00;
    margin-bottom: 5px;
}

.cta-subhead {
    font-size: 1.5em;
    color: #FFFFFF;
    font-weight: bold;
    margin-bottom: 20px;
}

.cta-buttons a.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    margin: 0 10px;
    transition: background-color 0.3s;
}

.btn-call {
    background-color: #FFCC00;
    color: #000000;
    border: 2px solid #FFCC00;
}

.btn-call:hover {
    background-color: #e6b800;
}

.btn-book-online {
    background-color: transparent;
    color: #FFCC00;
    border: 2px solid #FFCC00;
}

.btn-book-online:hover {
    background-color: #FFCC00;
    color: #000000;
}

/* ===================================================
   7. RESPONSIVE STYLES (Mobile Overrides)
   =================================================== */
/* Font Size Scaling (Desktop/Large Screens) */
@media (min-width: 1024px) {
    html {
        font-size: 110%;
    }
}

/* Table Column Layout (Desktop/Tablet Default) */
.service-column {
    width: 33.33%;
}

/* Mobile Specific Adjustments (Max Width 768px) */
@media (max-width: 768px) {
    .container {
        padding: 20px 15px;
        margin: 10px;
    }

    table {
        font-size: 0.9em;
    }

    th, td {
        padding: 8px;
    }

    /* Stacks the 3 service columns for mobile view */
    .responsive-service-table table,
    .responsive-service-table thead,
    .responsive-service-table tbody,
    .responsive-service-table tr,
    .responsive-service-table th,
    .responsive-service-table td {
        display: block;
        width: 100%;
    }

    .service-column {
        width: 100%;
        margin-bottom: 10px;
    }

    .service-column img {
        width: 100% !important;
        height: auto;
    }
    
    /* FIX: Display the column header text inline with the data cell */
    .responsive-service-table td::before {
        content: attr(data-label); 
        font-weight: bold; 
        color: var(--text-secondary); 
        display: inline-block; 
        width: 50%; 
        padding-right: 10px;
        text-align: left;
    }
    
    /* Mobile fix for Floating Images */
    .size-image {
        float: none; 
        width: 100%;
        margin-left: 0;
        margin-bottom: 15px;
        box-sizing: border-box; 
    }
}

/* ===================================================
   8. CONTENT OVERRIDES & UX ENHANCEMENTS (New Styles)
   =================================================== */

/* Styles for the introductory paragraph span */
.intro-paragraph .highlight {
    /* Sets the font size to 24px, matching the original requirement */
    font-size: 1.333em; 
    font-weight: 700; 
    color: var(--text-secondary); /* Uses the accent color for the highlight */
}

/* Enhancing the contact information display */
.contact-info {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.4);
}

.contact-info ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
}

.contact-info li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Styling the Click-to-Call link to stand out */
.contact-info a.cta-link {
    font-size: 1.5rem; /* Make the phone number large */
    font-weight: 700;
    color: #FFCC00; /* A slightly brighter gold */
    text-decoration: none;
}

.contact-info .note {
    font-size: 0.9em;
    color: #999999;
    font-weight: 300;
}

/* Ensure industry list items have some spacing */
.industry-list li {
    margin-bottom: 5px;
    line-height: 1.6;
}

/* New styles for the related services link group (from latest review) */
.link-group {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on mobile */
    gap: 15px;
    margin-top: 20px;
}

.link-group a {
    /* Make the links look like outlined buttons */
    border: 1px solid var(--text-secondary); /* Gold border */
    padding: 10px 15px;
    border-radius: 5px;
    background: transparent;
    font-weight: 400; /* Slightly heavier than default link weight */
    text-align: center;
    flex-grow: 1; /* Allows them to fill space on desktop */
}

.link-group a:hover {
    background: rgba(255, 215, 0, 0.2); /* Light gold fill on hover */
    text-decoration: none;
}