/*
	Contents:
	1. Google Fonts Import
	2. Common Styles
	3. Sidebar
	4. Main
	5. Works Grid
	6. Index Page
	7. Project Page
	8. About Page
	9. Blog Page
	10. Blog Single
	11. Contact Page
	12. Responsive
*/

/*
	1. Google Fonts Import
*/
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400';
@import 'https://fonts.googleapis.com/css?family=Lora:400,400italic';

/*
	2. Common Styles
*/


:root{

    --bg:#f7f7f5;

    --card:#ffffff;

    --text:#111111;

    --muted:#666666;

    --border:rgba(0,0,0,0.08);

    --radius:22px;

    --shadow:
    0 10px 30px rgba(0,0,0,0.03);

}


*{
    box-sizing:border-box;
}

body{
    background:var(--bg);

    color:var(--text);

    margin:0;

    font-family:'Inter',sans-serif;

    -webkit-font-smoothing:antialiased;
}


h1,h2,h3,h4,h5{
    margin:0;
    line-height:1.2;
    color:var(--text);
}

p{
    margin:0;
    color:var(--muted);
    line-height:1.7;
}





body {
    font-family:'Inter',sans-serif;
    font-weight:400;
}

.global-outer {

    width:100%;

    max-width:100%;

    margin:0 auto;

    overflow:hidden;
}

.global-outer .global-inner {

    width:100%;

    max-width:100%;

    padding:20px;

    overflow:hidden;

    box-sizing:border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
     line-height:1.2;
    color:#111;
    font-family:'Inter',sans-serif;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 12px;
}

p {
    font-size: 15px;
    line-height: 1.8;
    color: #6d6d6d;
}

p.lead {
    font-size: 19px;
}

a {
    color: #48ba86;
    border-bottom: 1px solid rgba(72, 186, 134, 0);
    padding-bottom: 1px;
    -webkit-transition: color 200ms, border-color 200ms;
            transition: color 200ms, border-color 200ms;
}

a:hover, a:active, a:focus {
    color: #32845e;
    text-decoration: none;
    border-color: rgba(72, 186, 134, 0.3);
}

a:focus {
    outline: none;
}

ul {
    font-size: 15px;
    color: #6d6d6d;
}

blockquote {
    font-size: 18px;
    font-family: 'Inter';
    font-style: italic;
    line-height: 2;
    padding-top: 15px;
    padding-bottom: 15px;
    color: rgba(109, 109, 109, 0.7);
}

input, textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    border: none;
    background-color: rgba(0, 0, 0, 0.04);
    padding: 10px;
    font-size: 13px;
    border-radius: 2px;
    border-bottom: 1px solid transparent;
    -webkit-transition: background-color 200ms, border-color 300ms, border-radius 100ms;
            transition: background-color 200ms, border-color 300ms, border-radius 100ms;
    box-sizing: border-box;
}

input:focus, textarea:focus {
    background-color: #fff;
    border-radius: 0;
    border-color: rgba(0, 0, 0, 0.08);
}

.btn {
    display: inline-block;
    text-align: center;
    margin: auto;
    background-color: #48ba86;
    color: #fff;
    font-size: 13px;
    border-radius: 2px;
    padding: 8px 14px;
    -webkit-transition: background-color 200ms;
            transition: background-color 200ms;
}

.btn:hover {
    background-color: #39966c;
    color: #fff;
}

.btn:active {
    background-color: #32845e;
}

.btn:focus {
    color: #fff;
}

.btn.small {
    padding: 5px 10px;
}

.btn.large {
    padding: 12px 18px;
}

::-moz-selection {
    background-color: #48ba86;
    color: #fff;
}

::selection {
    background-color: #48ba86;
    color: #fff;
}

.carousel {
    position: relative;
    overflow: hidden;
}

.carousel:after {
    content: '';
    position: absolute;
    bottom: -55px;
    left: 0;
    display: block;
    width: 100%;
    height: 55px;
    box-shadow: inset 0 -50px 50px -50px rgba(0, 0, 0, 0.5);
    -webkit-transition: bottom 300ms;
            transition: bottom 300ms;
}

.carousel .carousel-indicators {
    bottom: 0;
}

.carousel .carousel-indicators li {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin: 0 3px;
    border: 1px solid #fff;
    overflow: hidden;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
}

.carousel .carousel-indicators li:nth-child(1) {
    -webkit-transition: opacity 200ms 100ms, -webkit-transform 200ms 100ms;
            transition: opacity 200ms 100ms, -webkit-transform 200ms 100ms;
            transition: transform 200ms 100ms, opacity 200ms 100ms;
            transition: transform 200ms 100ms, opacity 200ms 100ms, -webkit-transform 200ms 100ms;
}

.carousel .carousel-indicators li:nth-child(2) {
    -webkit-transition: opacity 200ms 200ms, -webkit-transform 200ms 200ms;
            transition: opacity 200ms 200ms, -webkit-transform 200ms 200ms;
            transition: transform 200ms 200ms, opacity 200ms 200ms;
            transition: transform 200ms 200ms, opacity 200ms 200ms, -webkit-transform 200ms 200ms;
}

.carousel .carousel-indicators li:nth-child(3) {
    -webkit-transition: opacity 200ms 300ms, -webkit-transform 200ms 300ms;
            transition: opacity 200ms 300ms, -webkit-transform 200ms 300ms;
            transition: transform 200ms 300ms, opacity 200ms 300ms;
            transition: transform 200ms 300ms, opacity 200ms 300ms, -webkit-transform 200ms 300ms;
}

.carousel .carousel-indicators li:nth-child(4) {
    -webkit-transition: opacity 200ms 400ms, -webkit-transform 200ms 400ms;
            transition: opacity 200ms 400ms, -webkit-transform 200ms 400ms;
            transition: transform 200ms 400ms, opacity 200ms 400ms;
            transition: transform 200ms 400ms, opacity 200ms 400ms, -webkit-transform 200ms 400ms;
}

.carousel .carousel-indicators li:nth-child(5) {
    -webkit-transition: opacity 200ms 500ms, -webkit-transform 200ms 500ms;
            transition: opacity 200ms 500ms, -webkit-transform 200ms 500ms;
            transition: transform 200ms 500ms, opacity 200ms 500ms;
            transition: transform 200ms 500ms, opacity 200ms 500ms, -webkit-transform 200ms 500ms;
}

.carousel .carousel-indicators li:nth-child(6) {
    -webkit-transition: opacity 200ms 600ms, -webkit-transform 200ms 600ms;
            transition: opacity 200ms 600ms, -webkit-transform 200ms 600ms;
            transition: transform 200ms 600ms, opacity 200ms 600ms;
            transition: transform 200ms 600ms, opacity 200ms 600ms, -webkit-transform 200ms 600ms;
}

.carousel .carousel-indicators li:nth-child(7) {
    -webkit-transition: opacity 200ms 700ms, -webkit-transform 200ms 700ms;
            transition: opacity 200ms 700ms, -webkit-transform 200ms 700ms;
            transition: transform 200ms 700ms, opacity 200ms 700ms;
            transition: transform 200ms 700ms, opacity 200ms 700ms, -webkit-transform 200ms 700ms;
}

.carousel .carousel-indicators li:nth-child(8) {
    -webkit-transition: opacity 200ms 800ms, -webkit-transform 200ms 800ms;
            transition: opacity 200ms 800ms, -webkit-transform 200ms 800ms;
            transition: transform 200ms 800ms, opacity 200ms 800ms;
            transition: transform 200ms 800ms, opacity 200ms 800ms, -webkit-transform 200ms 800ms;
}

.carousel .carousel-indicators li:nth-child(9) {
    -webkit-transition: opacity 200ms 900ms, -webkit-transform 200ms 900ms;
            transition: opacity 200ms 900ms, -webkit-transform 200ms 900ms;
            transition: transform 200ms 900ms, opacity 200ms 900ms;
            transition: transform 200ms 900ms, opacity 200ms 900ms, -webkit-transform 200ms 900ms;
}

.carousel .carousel-indicators li:nth-child(10) {
    -webkit-transition: opacity 200ms 1000ms, -webkit-transform 200ms 1000ms;
            transition: opacity 200ms 1000ms, -webkit-transform 200ms 1000ms;
            transition: transform 200ms 1000ms, opacity 200ms 1000ms;
            transition: transform 200ms 1000ms, opacity 200ms 1000ms, -webkit-transform 200ms 1000ms;
}

.carousel .carousel-indicators li:nth-child(11) {
    -webkit-transition: opacity 200ms 1100ms, -webkit-transform 200ms 1100ms;
            transition: opacity 200ms 1100ms, -webkit-transform 200ms 1100ms;
            transition: transform 200ms 1100ms, opacity 200ms 1100ms;
            transition: transform 200ms 1100ms, opacity 200ms 1100ms, -webkit-transform 200ms 1100ms;
}

.carousel .carousel-indicators li:nth-child(12) {
    -webkit-transition: opacity 200ms 1200ms, -webkit-transform 200ms 1200ms;
            transition: opacity 200ms 1200ms, -webkit-transform 200ms 1200ms;
            transition: transform 200ms 1200ms, opacity 200ms 1200ms;
            transition: transform 200ms 1200ms, opacity 200ms 1200ms, -webkit-transform 200ms 1200ms;
}

.carousel .carousel-indicators li:nth-child(13) {
    -webkit-transition: opacity 200ms 1300ms, -webkit-transform 200ms 1300ms;
            transition: opacity 200ms 1300ms, -webkit-transform 200ms 1300ms;
            transition: transform 200ms 1300ms, opacity 200ms 1300ms;
            transition: transform 200ms 1300ms, opacity 200ms 1300ms, -webkit-transform 200ms 1300ms;
}

.carousel .carousel-indicators li:nth-child(14) {
    -webkit-transition: opacity 200ms 1400ms, -webkit-transform 200ms 1400ms;
            transition: opacity 200ms 1400ms, -webkit-transform 200ms 1400ms;
            transition: transform 200ms 1400ms, opacity 200ms 1400ms;
            transition: transform 200ms 1400ms, opacity 200ms 1400ms, -webkit-transform 200ms 1400ms;
}

.carousel .carousel-indicators li:nth-child(15) {
    -webkit-transition: opacity 200ms 1500ms, -webkit-transform 200ms 1500ms;
            transition: opacity 200ms 1500ms, -webkit-transform 200ms 1500ms;
            transition: transform 200ms 1500ms, opacity 200ms 1500ms;
            transition: transform 200ms 1500ms, opacity 200ms 1500ms, -webkit-transform 200ms 1500ms;
}

.carousel .carousel-indicators li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #fff;
    -webkit-transition: width 300ms;
            transition: width 300ms;
}

.carousel .carousel-indicators li.active {
    width: 10px;
    height: 10px;
    background-color: transparent;
}

.carousel .carousel-indicators li.active:before {
    width: 100%;
}

.carousel .carousel-indicators li:hover:before {
    width: 100%;
}

.carousel:hover:after {
    bottom: 0;
}

.carousel:hover .carousel-indicators li {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

.image-source-link {
    color: #98c3d1;
}

.mfp-with-zoom.mfp-container, .mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container {
    opacity: 0;
}

.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

.page-title h1 {
    margin: 0;
    line-height: 1;
}

.page-title p {
    margin-top: 25px;
}

.page-title .page-title-image {
    margin-top: 30px;
}

.page-title .page-title-image img {
    width: 100%;
}

/*
	3. Sidebar
*/








#sidebar .sidebar-inner {
  padding-left: 30px;
  padding-top: 10px;
}

#sidebar .logo {
    display: inline-block;
    margin-bottom: 5px;
    padding-top: 10px;
    border: none;
}

#sidebar nav {
    padding: 10px 0 10px;
    color: #0e0e0e;
}

#sidebar nav ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}



#sidebar nav ul li a, #sidebar nav ul li span {
    display: inline-block;
    padding: 4px 0;
    color: #0e0e0e;
    text-decoration: none;
    -webkit-transition: color 100ms;
            transition: color 100ms;
    border: none;
    font-weight: 300;
}

#sidebar nav ul li a.current, #sidebar nav ul li span.current {
    color: #48ba86;
}

#sidebar nav ul li a:hover, #sidebar nav ul li span:hover {
    color: #48ba86;
    cursor: pointer;
}

#sidebar nav ul li a:hover:before, #sidebar nav ul li span:hover:before {
    background-color: #48ba86;
}

#sidebar nav ul li.dropdown span {
    position: relative;
}

#sidebar nav ul li.dropdown span:after, #sidebar nav ul li.dropdown span:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto -13px auto auto;
    display: inline-block;
    width: 7px;
    height: 1px;
    background-color: #0e0e0e;
    -webkit-transition: background-color 100ms, -webkit-transform 200ms;
            transition: background-color 100ms, -webkit-transform 200ms;
            transition: transform 200ms, background-color 100ms;
            transition: transform 200ms, background-color 100ms, -webkit-transform 200ms;
}

#sidebar nav ul li.dropdown span:before {
    margin-right: -10px;
    width: 1px;
    height: 7px;
}

#sidebar nav ul li.dropdown span.current:after,
#sidebar nav ul li.dropdown span.current:before {
    background-color: #48ba86;
}

#sidebar nav ul li.dropdown span:hover:after,
#sidebar nav ul li.dropdown span:hover:before {
    background-color: #48ba86;
}

#sidebar nav ul li.dropdown ul {
    display: none;
}

#sidebar nav ul li.dropdown ul li {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
}

#sidebar nav ul li.dropdown ul li:nth-child(1) {
    -webkit-transition: opacity 200ms 100ms, -webkit-transform 400ms 100ms;
            transition: opacity 200ms 100ms, -webkit-transform 400ms 100ms;
            transition: transform 400ms 100ms, opacity 200ms 100ms;
            transition: transform 400ms 100ms, opacity 200ms 100ms, -webkit-transform 400ms 100ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(2) {
    -webkit-transition: opacity 200ms 200ms, -webkit-transform 400ms 200ms;
            transition: opacity 200ms 200ms, -webkit-transform 400ms 200ms;
            transition: transform 400ms 200ms, opacity 200ms 200ms;
            transition: transform 400ms 200ms, opacity 200ms 200ms, -webkit-transform 400ms 200ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(3) {
    -webkit-transition: opacity 200ms 300ms, -webkit-transform 400ms 300ms;
            transition: opacity 200ms 300ms, -webkit-transform 400ms 300ms;
            transition: transform 400ms 300ms, opacity 200ms 300ms;
            transition: transform 400ms 300ms, opacity 200ms 300ms, -webkit-transform 400ms 300ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(4) {
    -webkit-transition: opacity 200ms 400ms, -webkit-transform 400ms 400ms;
            transition: opacity 200ms 400ms, -webkit-transform 400ms 400ms;
            transition: transform 400ms 400ms, opacity 200ms 400ms;
            transition: transform 400ms 400ms, opacity 200ms 400ms, -webkit-transform 400ms 400ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(5) {
    -webkit-transition: opacity 200ms 500ms, -webkit-transform 400ms 500ms;
            transition: opacity 200ms 500ms, -webkit-transform 400ms 500ms;
            transition: transform 400ms 500ms, opacity 200ms 500ms;
            transition: transform 400ms 500ms, opacity 200ms 500ms, -webkit-transform 400ms 500ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(6) {
    -webkit-transition: opacity 200ms 600ms, -webkit-transform 400ms 600ms;
            transition: opacity 200ms 600ms, -webkit-transform 400ms 600ms;
            transition: transform 400ms 600ms, opacity 200ms 600ms;
            transition: transform 400ms 600ms, opacity 200ms 600ms, -webkit-transform 400ms 600ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(7) {
    -webkit-transition: opacity 200ms 700ms, -webkit-transform 400ms 700ms;
            transition: opacity 200ms 700ms, -webkit-transform 400ms 700ms;
            transition: transform 400ms 700ms, opacity 200ms 700ms;
            transition: transform 400ms 700ms, opacity 200ms 700ms, -webkit-transform 400ms 700ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(8) {
    -webkit-transition: opacity 200ms 800ms, -webkit-transform 400ms 800ms;
            transition: opacity 200ms 800ms, -webkit-transform 400ms 800ms;
            transition: transform 400ms 800ms, opacity 200ms 800ms;
            transition: transform 400ms 800ms, opacity 200ms 800ms, -webkit-transform 400ms 800ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(9) {
    -webkit-transition: opacity 200ms 900ms, -webkit-transform 400ms 900ms;
            transition: opacity 200ms 900ms, -webkit-transform 400ms 900ms;
            transition: transform 400ms 900ms, opacity 200ms 900ms;
            transition: transform 400ms 900ms, opacity 200ms 900ms, -webkit-transform 400ms 900ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(10) {
    -webkit-transition: opacity 200ms 1000ms, -webkit-transform 400ms 1000ms;
            transition: opacity 200ms 1000ms, -webkit-transform 400ms 1000ms;
            transition: transform 400ms 1000ms, opacity 200ms 1000ms;
            transition: transform 400ms 1000ms, opacity 200ms 1000ms, -webkit-transform 400ms 1000ms;
}

#sidebar nav ul li.dropdown ul li a {
    font-size: 13px;
}

#sidebar nav ul li.dropdown ul li a:before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1px;
    background-color: #0e0e0e;
    margin-bottom: 4px;
    margin-right: 6px;
    -webkit-transition: background-color 100ms;
            transition: background-color 100ms;
}

#sidebar nav ul li.dropdown ul li a.current:before {
    background-color: #48ba86;
}

#sidebar nav ul li.dropdown ul li a:hover:before {
    background-color: #48ba86;
}

#sidebar nav ul li.dropdown.expanded span:before {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
}

#sidebar nav ul li.dropdown.expanded ul li {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(1) {
    -webkit-transition: opacity 200ms 100ms, -webkit-transform 200ms 100ms;
            transition: opacity 200ms 100ms, -webkit-transform 200ms 100ms;
            transition: transform 200ms 100ms, opacity 200ms 100ms;
            transition: transform 200ms 100ms, opacity 200ms 100ms, -webkit-transform 200ms 100ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(2) {
    -webkit-transition: opacity 200ms 200ms, -webkit-transform 200ms 200ms;
            transition: opacity 200ms 200ms, -webkit-transform 200ms 200ms;
            transition: transform 200ms 200ms, opacity 200ms 200ms;
            transition: transform 200ms 200ms, opacity 200ms 200ms, -webkit-transform 200ms 200ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(3) {
    -webkit-transition: opacity 200ms 300ms, -webkit-transform 200ms 300ms;
            transition: opacity 200ms 300ms, -webkit-transform 200ms 300ms;
            transition: transform 200ms 300ms, opacity 200ms 300ms;
            transition: transform 200ms 300ms, opacity 200ms 300ms, -webkit-transform 200ms 300ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(4) {
    -webkit-transition: opacity 200ms 400ms, -webkit-transform 200ms 400ms;
            transition: opacity 200ms 400ms, -webkit-transform 200ms 400ms;
            transition: transform 200ms 400ms, opacity 200ms 400ms;
            transition: transform 200ms 400ms, opacity 200ms 400ms, -webkit-transform 200ms 400ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(5) {
    -webkit-transition: opacity 200ms 500ms, -webkit-transform 200ms 500ms;
            transition: opacity 200ms 500ms, -webkit-transform 200ms 500ms;
            transition: transform 200ms 500ms, opacity 200ms 500ms;
            transition: transform 200ms 500ms, opacity 200ms 500ms, -webkit-transform 200ms 500ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(6) {
    -webkit-transition: opacity 200ms 600ms, -webkit-transform 200ms 600ms;
            transition: opacity 200ms 600ms, -webkit-transform 200ms 600ms;
            transition: transform 200ms 600ms, opacity 200ms 600ms;
            transition: transform 200ms 600ms, opacity 200ms 600ms, -webkit-transform 200ms 600ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(7) {
    -webkit-transition: opacity 200ms 700ms, -webkit-transform 200ms 700ms;
            transition: opacity 200ms 700ms, -webkit-transform 200ms 700ms;
            transition: transform 200ms 700ms, opacity 200ms 700ms;
            transition: transform 200ms 700ms, opacity 200ms 700ms, -webkit-transform 200ms 700ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(8) {
    -webkit-transition: opacity 200ms 800ms, -webkit-transform 200ms 800ms;
            transition: opacity 200ms 800ms, -webkit-transform 200ms 800ms;
            transition: transform 200ms 800ms, opacity 200ms 800ms;
            transition: transform 200ms 800ms, opacity 200ms 800ms, -webkit-transform 200ms 800ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(9) {
    -webkit-transition: opacity 200ms 900ms, -webkit-transform 200ms 900ms;
            transition: opacity 200ms 900ms, -webkit-transform 200ms 900ms;
            transition: transform 200ms 900ms, opacity 200ms 900ms;
            transition: transform 200ms 900ms, opacity 200ms 900ms, -webkit-transform 200ms 900ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(10) {
    -webkit-transition: opacity 200ms 1000ms, -webkit-transform 200ms 1000ms;
            transition: opacity 200ms 1000ms, -webkit-transform 200ms 1000ms;
            transition: transform 200ms 1000ms, opacity 200ms 1000ms;
            transition: transform 200ms 1000ms, opacity 200ms 1000ms, -webkit-transform 200ms 1000ms;
}

#sidebar .basket-open {
    position: absolute;
    top: 10px;
    right: 20px;
    border-bottom: none;
}

#sidebar .basket-open .cart-indicator {
    position: relative;
    overflow: hidden;
}

#sidebar .basket-open .cart-indicator i {
    font-size: 16px;
    color: #bfbfbf;
    -webkit-transition: color 200ms;
            transition: color 200ms;
}

#sidebar .basket-open .cart-indicator span {
    position: absolute;
    top: -5px;
    right: -12px;
    display: block;
    width: 16px;
    height: 16px;
    background-color: #48ba86;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    padding-top: 2px;
}

#sidebar .basket-open:hover .cart-indicator i {
    color: #6d6d6d;
}

#sidebar .copyright {
    padding-top: 20px;
    color: #bfbfbf;
    font-size: 13px;
}

#sidebar .widgets-block {
    margin: 50px 0;
}

#sidebar .widgets-block .widget {
    margin: 0 0 80px;
}

#sidebar .widgets-block .widget:last-of-type {
    margin-bottom: 0;
}

#sidebar .widgets-block .widget .title {
    display: block;
    color: #bfbfbf;
    margin: 0 0 5px;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

#sidebar .widgets-block .widget .title:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgba(191, 191, 191, 0.12);
    margin-top: 3px;
}

#sidebar .widgets-block .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sidebar .widgets-block .widget ul li {
    display: block;
    padding: 5px 0;
}

#sidebar .widgets-block .widget.filter li {
    color: #0e0e0e;
    -webkit-transition: color 100ms;
            transition: color 100ms;
}

#sidebar .widgets-block .widget.filter li.active {
    color: #48ba86;
}

#sidebar .widgets-block .widget.filter li:hover {
    color: #48ba86;
    cursor: pointer;
}

#sidebar .widgets-block .widget.twitter ul li {
    line-height: 1.7;
    font-size: 13px;
    padding: 15px 0;
}

#sidebar .widgets-block .widget.twitter ul li:first-child {
    padding-top: 0;
}

#sidebar .widgets-block .widget.twitter ul li:last-child {
    padding-bottom: 0;
}

#sidebar .widgets-block .widget.twitter ul li .time {
    display: block;
    margin: 7px 0 0;
    color: #bfbfbf;
    font-size: 13px;
    border: none;
}

#sidebar .widgets-block .widget.twitter ul li .time:hover {
    color: #48ba86;
}

#sidebar .widgets-block .widget.recent-projects ul li a {
    display: block;
    border: none;
    color: #6d6d6d;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebar .widgets-block .widget.recent-projects ul li a:hover {
    color: #48ba86;
}

#sidebar .widgets-block .widget.blog-categories ul li a {
    display: block;
    border: none;
    color: #6d6d6d;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebar .widgets-block .widget.blog-categories ul li a:hover {
    color: #48ba86;
}

#sidebar .widgets-block .widget.tags ul li {
    display: inline-block;
    margin: 5px 0;
    padding: 0;
}

#sidebar .widgets-block .widget.tags ul li a {
    display: block;
    color: #bfbfbf;
    border: none;
    background-color: rgba(191, 191, 191, 0.1);
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 150px;
    white-space: nowrap;
    -webkit-transition: background-color 200ms, color 200ms;
            transition: background-color 200ms, color 200ms;
}

#sidebar .widgets-block .widget.tags ul li a:hover {
    color: #6d6d6d;
    background-color: rgba(191, 191, 191, 0.2);
}

/*
	4. Main
*/

#main {
    width: 100%;
    display: block;
    margin-top: 0 !important;
}




#main .main-outer {
    overflow: hidden;
     padding-left: 0 !important;
}

/*
	5. Works Grid
*/

#works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}

 
 



.works-item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
   border: 1px solid rgba(0,0,0,0.06);      /* subtle outline */
}


 
.works-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.08);
}


#works-grid .works-item {
    display: block;
    position: relative;
    overflow: hidden;
    border: none;
     
    margin: 0 !important;
    padding-bottom: 0;
    z-index: 3;
}

#works-grid .works-item .picture {
    position: relative;
}

 

#works-grid .works-item .picture .content .text {
    padding: 20px;
    text-align: center;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
    -webkit-transition: opacity 100ms, -webkit-transform 250ms;
            transition: opacity 100ms, -webkit-transform 250ms;
            transition: transform 250ms, opacity 100ms;
            transition: transform 250ms, opacity 100ms, -webkit-transform 250ms;
}

#works-grid .works-item .picture .content .text h2 {
    color: #fff;
    margin: 0 0 5px;
    padding: 0;
    font-size: 19px;
    line-height: 1.5;
}

#works-grid .works-item .picture .content .text ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#works-grid .works-item .picture .content .text ul li {
    display: inline;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 400;
}

#works-grid .works-item .picture .content .text ul li:after {
    content: '—';
    margin-left: 3px;
}

#works-grid .works-item .picture .content .text ul li:last-child:after {
    content: '';
    margin: 0;
}

#works-grid .works-item .picture img {
    width: 100%;
}

#works-grid .works-item .picture:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 250ms;
            transition: opacity 250ms;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

#works-grid .works-item:hover .picture .content .text {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}

#works-grid .works-item:hover .picture:before {
    opacity: 1;
}

 

/*
	6. Index Page
*/

#index-page #main .load-more {
    margin-top: 30px;
    text-align: center;
}

/*
	7. Project Page
*/

#project-page #main .title-image img {
    width: 100%;
}

#project-page #main .gallery a {
    display: block;
    margin-bottom: 20px;
    border-bottom: none;
}

#project-page #main .gallery a img {
    width: 100%;
}

#project-page #main .description {
    margin: 50px 0 30px;
}

#project-page #main .description h1 {
    margin: 0;
}

#project-page #main .description p {
    font-size: 15px;
    margin: 10px 0 20px;
}

#project-page #main .description .categories {
    list-style: none;
    margin: -5px 0 35px;
    padding: 0;
}

#project-page #main .description .categories li {
    display: inline;
    color: #bfbfbf;
    font-size: 13px;
    font-weight: 300;
    margin-right: 3px;
}

#project-page #main .description .categories li:after {
    content: '—';
    margin-left: 5px;
}

#project-page #main .description .categories li:last-child {
    margin-right: 0;
}

#project-page #main .description .categories li:last-child:after {
    content: '';
    margin-left: 0;
}

#project-page #main .description .subtitle {
    margin: 50px 0 0;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-weight: 400;
    color: #0e0e0e;
    font-family: sans-serif;
}

#project-page #main .details {
    margin: 50px 0 30px;
    padding: 15px 30px;
}

#project-page #main .details ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#project-page #main .details ul li {
    color: #bfbfbf;
    margin: 10px 0;
    padding: 5px 0;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-weight: 400;
}

#project-page #main .details ul li:first-child {
    margin-top: 0;
    padding-top: 0;
}

#project-page #main .details ul li:last-child {
    margin-bottom: 0;
}

#project-page #main .details ul li span {
    display: block;
    color: #6d6d6d;
    margin-top: 2px;
    text-transform: none;
    font-size: 13px;
    font-weight: 400;
}

#project-page #main .project-image {
    position: relative;
    margin-top: 30px;
}

#project-page #main .project-image .caption {
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    font-size: 13px;
    padding: 4px 12px;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
    -webkit-transition: opacity 100ms, -webkit-transform 250ms;
            transition: opacity 100ms, -webkit-transform 250ms;
            transition: transform 250ms, opacity 100ms;
            transition: transform 250ms, opacity 100ms, -webkit-transform 250ms;
}

#project-page #main .project-image img {
    width: 100%;
}

#project-page #main .project-image:hover .caption {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}

#project-page #main .carousel {
    margin-top: 30px;
}

#project-page #main .carousel .item img {
    width: 100%;
}

#project-page #main .end-page {
    margin-top: 50px;
    overflow: hidden;
}

#project-page #main .end-page .projects-navigation {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 8px;
    border: none;
}

#project-page #main .end-page .projects-navigation .arrow {
    position: relative;
    display: block;
    width: 35px;
    height: 1px;
    background-color: #bfbfbf;
    -webkit-transition: background-color 300ms, -webkit-transform 300ms;
            transition: background-color 300ms, -webkit-transform 300ms;
            transition: transform 300ms, background-color 300ms;
            transition: transform 300ms, background-color 300ms, -webkit-transform 300ms;
}

#project-page #main .end-page .projects-navigation .arrow:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: -4px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    -webkit-transition: border-color 300ms;
            transition: border-color 300ms;
}

#project-page #main .end-page .projects-navigation .arrow.arrow-left:after {
    left: 0;
    border-right: 5px solid #bfbfbf;
}

#project-page #main .end-page .projects-navigation .arrow.arrow-right:after {
    right: 0;
    border-left: 5px solid #bfbfbf;
}

#project-page #main .end-page .projects-navigation.previous-project {
    float: left;
}

#project-page #main .end-page .projects-navigation.next-project {
    float: right;
}

#project-page #main .end-page .projects-navigation:hover .arrow {
    background-color: #48ba86;
}

#project-page #main .end-page .projects-navigation:hover .arrow.arrow-left {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
}

#project-page #main .end-page .projects-navigation:hover .arrow.arrow-left:after {
    border-right-color: #48ba86;
}

#project-page #main .end-page .projects-navigation:hover .arrow.arrow-right {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
}

#project-page #main .end-page .projects-navigation:hover .arrow.arrow-right:after {
    border-left-color: #48ba86;
}

#project-page #main .end-page .share-block {
    text-align: center;
    margin-top: 3px;
}

#project-page #main .end-page .share-block ul {
    list-style: none;
    margin: auto;
    padding: 0;
}

#project-page #main .end-page .share-block ul li {
    display: inline-block;
}

#project-page #main .end-page .share-block ul li a {
    display: block;
    padding: 5px;
    color: #bfbfbf;
    border: none;
    font-size: 14px;
}

#project-page #main .end-page .share-block ul li a:hover {
    color: #48ba86;
}

#project-page.alternate .end-page {
    margin-top: 100px;
}

/*
	8. About Page
*/

#about-page #main .services {
    margin-top: 60px;
}

#about-page #main .services .service-block {
    margin-bottom: 30px;
}

#about-page #main .services .service-block h4 {
    margin: 0;
}

#about-page #main .services .service-block p {
    margin: 15px 0 0;
}

#about-page #main .team {
    margin-top: 100px;
}

#about-page #main .team .team-title {
    text-align: center;
    margin-bottom: 70px;
}

#about-page #main .team .team-title h2 {
    margin: 0;
}

#about-page #main .team .team-title p {
    margin: 0;
    font-size: 17px;
}

#about-page #main .team .team-member {
    text-align: center;
    margin-bottom: 30px;
}

#about-page #main .team .team-member .photo {
    border-radius: 500px;
    overflow: hidden;
}

#about-page #main .team .team-member .photo img {
    width: 100%;
}

#about-page #main .team .team-member .content {
    margin-top: 20px;
}

#about-page #main .team .team-member .content h3 {
    margin: 0;
}

#about-page #main .team .team-member .content p {
    margin: 0;
}

#about-page #main .team .team-member .content .social-links {
    list-style: none;
    margin: 15px 0 0;
    padding: 0;
}

#about-page #main .team .team-member .content .social-links li {
    display: inline-block;
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}

#about-page #main .team .team-member .content .social-links li:nth-child(1) {
    -webkit-transition: opacity 200ms 100ms, -webkit-transform 200ms 100ms;
            transition: opacity 200ms 100ms, -webkit-transform 200ms 100ms;
            transition: transform 200ms 100ms, opacity 200ms 100ms;
            transition: transform 200ms 100ms, opacity 200ms 100ms, -webkit-transform 200ms 100ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(2) {
    -webkit-transition: opacity 200ms 200ms, -webkit-transform 200ms 200ms;
            transition: opacity 200ms 200ms, -webkit-transform 200ms 200ms;
            transition: transform 200ms 200ms, opacity 200ms 200ms;
            transition: transform 200ms 200ms, opacity 200ms 200ms, -webkit-transform 200ms 200ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(3) {
    -webkit-transition: opacity 200ms 300ms, -webkit-transform 200ms 300ms;
            transition: opacity 200ms 300ms, -webkit-transform 200ms 300ms;
            transition: transform 200ms 300ms, opacity 200ms 300ms;
            transition: transform 200ms 300ms, opacity 200ms 300ms, -webkit-transform 200ms 300ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(4) {
    -webkit-transition: opacity 200ms 400ms, -webkit-transform 200ms 400ms;
            transition: opacity 200ms 400ms, -webkit-transform 200ms 400ms;
            transition: transform 200ms 400ms, opacity 200ms 400ms;
            transition: transform 200ms 400ms, opacity 200ms 400ms, -webkit-transform 200ms 400ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(5) {
    -webkit-transition: opacity 200ms 500ms, -webkit-transform 200ms 500ms;
            transition: opacity 200ms 500ms, -webkit-transform 200ms 500ms;
            transition: transform 200ms 500ms, opacity 200ms 500ms;
            transition: transform 200ms 500ms, opacity 200ms 500ms, -webkit-transform 200ms 500ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(6) {
    -webkit-transition: opacity 200ms 600ms, -webkit-transform 200ms 600ms;
            transition: opacity 200ms 600ms, -webkit-transform 200ms 600ms;
            transition: transform 200ms 600ms, opacity 200ms 600ms;
            transition: transform 200ms 600ms, opacity 200ms 600ms, -webkit-transform 200ms 600ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(7) {
    -webkit-transition: opacity 200ms 700ms, -webkit-transform 200ms 700ms;
            transition: opacity 200ms 700ms, -webkit-transform 200ms 700ms;
            transition: transform 200ms 700ms, opacity 200ms 700ms;
            transition: transform 200ms 700ms, opacity 200ms 700ms, -webkit-transform 200ms 700ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(8) {
    -webkit-transition: opacity 200ms 800ms, -webkit-transform 200ms 800ms;
            transition: opacity 200ms 800ms, -webkit-transform 200ms 800ms;
            transition: transform 200ms 800ms, opacity 200ms 800ms;
            transition: transform 200ms 800ms, opacity 200ms 800ms, -webkit-transform 200ms 800ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(9) {
    -webkit-transition: opacity 200ms 900ms, -webkit-transform 200ms 900ms;
            transition: opacity 200ms 900ms, -webkit-transform 200ms 900ms;
            transition: transform 200ms 900ms, opacity 200ms 900ms;
            transition: transform 200ms 900ms, opacity 200ms 900ms, -webkit-transform 200ms 900ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(10) {
    -webkit-transition: opacity 200ms 1000ms, -webkit-transform 200ms 1000ms;
            transition: opacity 200ms 1000ms, -webkit-transform 200ms 1000ms;
            transition: transform 200ms 1000ms, opacity 200ms 1000ms;
            transition: transform 200ms 1000ms, opacity 200ms 1000ms, -webkit-transform 200ms 1000ms;
}

#about-page #main .team .team-member .content .social-links li a {
    display: block;
    width: 28px;
    height: 28px;
    color: rgba(191, 191, 191, 0.7);
    font-size: 16px;
    border-bottom: none;
    line-height: 1;
    padding-top: 6px;
}

#about-page #main .team .team-member .content .social-links li a:hover {
    color: #48ba86;
}

#about-page #main .team .team-member:hover .social-links li {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

#about-page #main .studio {
    margin-top: 50px;
}

#about-page #main .studio h2 {
    line-height: 1;
    margin: 0;
}

#about-page #main .studio p {
    margin-top: 25px;
}

#about-page #main .approach {
    margin-top: 80px;
}

#about-page #main .approach img {
    width: 100%;
}

#about-page #main .approach .text {
    padding: 25px 0;
}

#about-page #main .approach .text h2 {
    margin: 0;
}

#about-page #main .approach .text p {
    font-size: 19px;
}

#about-page #main .approach .text .links {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
}

#about-page #main .approach .text .links li {
    margin-bottom: 15px;
}

#about-page #main .approach .text .links li:last-child {
    margin-bottom: 0;
}

#about-page #main .approach .text .links li a {
    font-size: 17px;
    border-bottom: 1px solid rgba(72, 186, 134, 0.3);
}

#about-page #main .approach .text .links li a:hover {
    border-color: #48ba86;
}

/*
	9. Blog Page
*/

#blog-page #main .articles-list {
    margin-top: 10px;
}

#blog-page #main article {
    border-bottom: 1px solid rgba(191, 191, 191, 0.2);
}

#blog-page #main article .post {
    position: relative;
    display: block;
    border: none;
    padding: 40px 0;
}

#blog-page #main article .arrow {
    position: absolute;
    display: block;
    top: 50%;
    right: 0;
    width: 35px;
    height: 1px;
    background-color: #bfbfbf;
    -webkit-transition: opacity 300ms;
            transition: opacity 300ms;
    opacity: 0;
}

#blog-page #main article .arrow:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: -4px;
    right: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #bfbfbf;
    -webkit-transition: border-color 300ms;
            transition: border-color 300ms;
}

#blog-page #main article .content {
    display: inline-block;
    -webkit-transition: -webkit-transform 250ms;
            transition: -webkit-transform 250ms;
            transition: transform 250ms;
            transition: transform 250ms, -webkit-transform 250ms;
}

#blog-page #main article .content h2 {
    margin: 0;
    padding-right: 50px;
    line-height: 1.2;
    -webkit-transition: color 250ms;
            transition: color 250ms;
}

#blog-page #main article .content > ul {
    list-style: none;
    margin: 3px 0 0;
    padding: 0;
}

#blog-page #main article .content > ul > li {
    display: inline-block;
    margin-right: 20px;
}

#blog-page #main article .content > ul > li:last-child {
    margin-right: 0;
}

#blog-page #main article .content > ul > li.author {
    display: inline-block;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

#blog-page #main article .content > ul > li.author:before {
    content: 'by';
    margin-right: 3px;
}

#blog-page #main article .content > ul > li.categories ul {
    padding: 0;
}

#blog-page #main article .content > ul > li.categories ul li {
    display: inline;
    color: #bfbfbf;
    font-size: 13px;
    font-weight: 300;
}

#blog-page #main article .content > ul > li.categories ul li:after {
    content: '—';
    margin-left: 5px;
}

#blog-page #main article .content > ul > li.categories ul li:last-child {
    margin-right: 0;
}

#blog-page #main article .content > ul > li.categories ul li:last-child:after {
    content: '';
    margin-left: 0;
}

#blog-page #main article .content p {
    font-size: 15px;
}

#blog-page #main article:hover .arrow {
    opacity: 1;
}

#blog-page #main article:hover .content {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
}

#blog-page #main article:hover .content h2 {
    color: rgba(14, 14, 14, 0.6);
}

#blog-page #main .end-page {
    margin-top: 50px;
    overflow: hidden;
}

#blog-page #main .end-page .pages-navigation {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 8px;
    border: none;
}

#blog-page #main .end-page .pages-navigation .arrow {
    position: relative;
    display: block;
    width: 35px;
    height: 1px;
    background-color: #bfbfbf;
    -webkit-transition: background-color 300ms, -webkit-transform 300ms;
            transition: background-color 300ms, -webkit-transform 300ms;
            transition: transform 300ms, background-color 300ms;
            transition: transform 300ms, background-color 300ms, -webkit-transform 300ms;
}

#blog-page #main .end-page .pages-navigation .arrow:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: -4px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    -webkit-transition: border-color 300ms;
            transition: border-color 300ms;
}

#blog-page #main .end-page .pages-navigation .arrow.arrow-left:after {
    left: 0;
    border-right: 5px solid #bfbfbf;
}

#blog-page #main .end-page .pages-navigation .arrow.arrow-right:after {
    right: 0;
    border-left: 5px solid #bfbfbf;
}

#blog-page #main .end-page .pages-navigation.previous-page {
    float: left;
}

#blog-page #main .end-page .pages-navigation.next-page {
    float: right;
}

#blog-page #main .end-page .pages-navigation:hover .arrow {
    background-color: #48ba86;
}

#blog-page #main .end-page .pages-navigation:hover .arrow.arrow-left {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
}

#blog-page #main .end-page .pages-navigation:hover .arrow.arrow-left:after {
    border-right-color: #48ba86;
}

#blog-page #main .end-page .pages-navigation:hover .arrow.arrow-right {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
}

#blog-page #main .end-page .pages-navigation:hover .arrow.arrow-right:after {
    border-left-color: #48ba86;
}

#blog-page #main .end-page .pagination {
    list-style: none;
    margin: 3px 0 0;
    padding: 0;
    text-align: center;
}

#blog-page #main .end-page .pagination li {
    display: inline-block;
}

#blog-page #main .end-page .pagination li a {
    display: block;
    border-bottom: none;
    padding: 4px 10px;
    color: #0e0e0e;
}

#blog-page #main .end-page .pagination li a:hover {
    color: #48ba86;
}

#blog-page #main .end-page .pagination li.current {
    color: #bfbfbf;
    margin: 4px 8px;
}

#blog-page.alternative #main article {
    border-bottom: none;
    margin-bottom: 70px;
}

#blog-page.alternative #main article:last-of-type {
    margin-bottom: 0;
}

#blog-page.alternative #main article .image {
    display: block;
    position: relative;
    overflow: hidden;
    border-bottom: none;
    z-index: 3;
}

#blog-page.alternative #main article .image i {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 15px;
    font-size: 20px;
    color: #fff;
    z-index: 2;
    opacity: 0;
    -webkit-transition: top 250ms, opacity 100ms;
            transition: top 250ms, opacity 100ms;
}

#blog-page.alternative #main article .image img {
    width: 100%;
}

#blog-page.alternative #main article .image:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 250ms;
            transition: opacity 250ms;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

#blog-page.alternative #main article .image:hover i {
    top: 10px;
    opacity: 1;
}

#blog-page.alternative #main article .image:hover:before {
    opacity: 1;
}

#blog-page.alternative #main article .content {
    margin-top: 20px;
}

#blog-page.alternative #main article .content .title h2 {
    -webkit-transition: color 150ms;
            transition: color 150ms;
    padding-right: 0;
}

#blog-page.alternative #main article .content .title:hover h2 {
    color: #48ba86;
}

#blog-page.alternative #main article .content > ul {
    margin: 6px 0 0;
}

#blog-page.alternative #main article .content p {
    margin: 30px 0 40px;
}

#blog-page.alternative #main article .content .read-more {
    font-size: 17px;
    border-bottom: 1px solid rgba(72, 186, 134, 0.3);
}

#blog-page.alternative #main article .content .read-more:hover {
    border-color: #48ba86;
}

#blog-page.alternative #main article:hover .content {
    -webkit-transform: none;
            transform: none;
}

#blog-page.alternative #main article:hover .content h2 {
    color: #0e0e0e;
}

/*
	10. Blog Single
*/

#blog-single #main article .title-image {
    margin-bottom: 20px;
}

#blog-single #main article .title-image img {
    width: 100%;
}

#blog-single #main article .article-top h2 {
    margin: 0;
    padding-right: 50px;
    line-height: 1.2;
    -webkit-transition: color 250ms;
            transition: color 250ms;
}

#blog-single #main article .article-top > ul {
    list-style: none;
    margin: 6px 0 30px;
    padding: 0;
}

#blog-single #main article .article-top > ul > li {
    display: inline-block;
    margin-right: 20px;
}

#blog-single #main article .article-top > ul > li:last-child {
    margin-right: 0;
}

#blog-single #main article .article-top > ul > li.author {
    display: inline-block;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

#blog-single #main article .article-top > ul > li.author:before {
    content: 'by';
    margin-right: 3px;
}

#blog-single #main article .article-top > ul > li.time {
    font-size: 13px;
    color: #bfbfbf;
}

#blog-single #main article .article-top > ul > li.categories ul {
    padding: 0;
}

#blog-single #main article .article-top > ul > li.categories ul li {
    display: inline;
    color: #bfbfbf;
    font-size: 13px;
    font-weight: 300;
}

#blog-single #main article .article-top > ul > li.categories ul li:after {
    content: '—';
    margin-left: 5px;
}

#blog-single #main article .article-top > ul > li.categories ul li:last-child {
    margin-right: 0;
}

#blog-single #main article .article-top > ul > li.categories ul li:last-child:after {
    content: '';
    margin-left: 0;
}

#blog-single #main .end-page {
    margin-top: 50px;
    overflow: hidden;
}

#blog-single #main .end-page .articles-navigation {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 8px;
    border: none;
}

#blog-single #main .end-page .articles-navigation .arrow {
    position: relative;
    display: block;
    width: 35px;
    height: 1px;
    background-color: #bfbfbf;
    -webkit-transition: background-color 300ms, -webkit-transform 300ms;
            transition: background-color 300ms, -webkit-transform 300ms;
            transition: transform 300ms, background-color 300ms;
            transition: transform 300ms, background-color 300ms, -webkit-transform 300ms;
}

#blog-single #main .end-page .articles-navigation .arrow:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: -4px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    -webkit-transition: border-color 300ms;
            transition: border-color 300ms;
}

#blog-single #main .end-page .articles-navigation .arrow.arrow-left:after {
    left: 0;
    border-right: 5px solid #bfbfbf;
}

#blog-single #main .end-page .articles-navigation .arrow.arrow-right:after {
    right: 0;
    border-left: 5px solid #bfbfbf;
}

#blog-single #main .end-page .articles-navigation.previous-article {
    float: left;
}

#blog-single #main .end-page .articles-navigation.next-article {
    float: right;
}

#blog-single #main .end-page .articles-navigation:hover .arrow {
    background-color: #48ba86;
}

#blog-single #main .end-page .articles-navigation:hover .arrow.arrow-left {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
}

#blog-single #main .end-page .articles-navigation:hover .arrow.arrow-left:after {
    border-right-color: #48ba86;
}

#blog-single #main .end-page .articles-navigation:hover .arrow.arrow-right {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
}

#blog-single #main .end-page .articles-navigation:hover .arrow.arrow-right:after {
    border-left-color: #48ba86;
}

#blog-single #main .end-page .share-block {
    text-align: center;
    margin-top: 3px;
}

#blog-single #main .end-page .share-block ul {
    list-style: none;
    margin: auto;
    padding: 0;
}

#blog-single #main .end-page .share-block ul li {
    display: inline-block;
}

#blog-single #main .end-page .share-block ul li a {
    display: block;
    padding: 5px;
    color: #bfbfbf;
    border: none;
    font-size: 14px;
}

#blog-single #main .end-page .share-block ul li a:hover {
    color: #48ba86;
}

#blog-single #main .comments h3 {
    margin: 0 0 30px;
}

#blog-single #main .comments .comments-list {
    margin-top: 70px;
}

#blog-single #main .comments .comments-list .comment {
    margin-bottom: 60px;
}

#blog-single #main .comments .comments-list .comment:last-child {
    margin-bottom: 0;
}

#blog-single #main .comments .comments-list .comment.reply {
    margin-left: 70px;
}

#blog-single #main .comments .comments-list .comment .user-photo {
    float: left;
    overflow: hidden;
    border-radius: 100%;
    margin-right: 25px;
}

#blog-single #main .comments .comments-list .comment .user-photo img {
    width: 100%;
}

#blog-single #main .comments .comments-list .comment .content {
    overflow: hidden;
}

#blog-single #main .comments .comments-list .comment .content h4 {
    display: inline-block;
    margin: 0 8px 0 0;
    line-height: 1;
}

#blog-single #main .comments .comments-list .comment .content .time {
    font-size: 11px;
    color: #bfbfbf;
}

#blog-single #main .comments .comments-list .comment .content p {
    margin: 15px 0 20px;
}

#blog-single #main .comments .comments-list .comment .content .reply {
    display: inline-block;
    border-bottom: 1px solid rgba(72, 186, 134, 0.3);
}

#blog-single #main .comments .comments-list .comment .content .reply:hover {
    border-color: #48ba86;
}

#blog-single #main .comments .leave-comment {
    margin-top: 70px;
}

#blog-single #main .comments .leave-comment form input,
#blog-single #main .comments .leave-comment form textarea {
    border-color: rgba(0, 0, 0, 0.08);
    background-color: transparent;
    margin-bottom: 30px;
}

#blog-single #main .comments .leave-comment form input:focus,
#blog-single #main .comments .leave-comment form textarea:focus {
    border-color: rgba(0, 0, 0, 0.3);
}

#blog-single #main .comments .leave-comment form textarea {
    min-height: 250px;
}

/*
	11. Contact Page
*/

#contact-page #google-map {
    margin-top: 30px;
    width: 100%;
    height: 400px;
}

#contact-page #main .offices-information {
    margin-top: 50px;
}

#contact-page #main .offices-information h2 {
    line-height: 1;
    margin: 0;
}

#contact-page #main .offices-information p {
    margin-top: 25px;
}

#contact-page #main .offices-list {
    margin-top: 60px;
}

#contact-page #main .offices-list .office-block {
    margin-bottom: 30px;
}

#contact-page #main .offices-list .office-block h4 {
    margin: 0;
}

#contact-page #main .offices-list .office-block p {
    margin: 15px 0 0;
}

#contact-page #main .offices-list .office-block p .phone {
    display: inline-block;
    color: #6d6d6d;
    border-bottom: 1px dotted rgba(191, 191, 191, 0.7);
    margin: 3px 0;
    padding-bottom: 0;
}

#contact-page #main .offices-list .office-block p .phone:hover {
    border-bottom-color: transparent;
    color: #0e0e0e;
}

#contact-page #main .say-hello {
    margin-top: 80px;
}

#contact-page #main .say-hello h2 {
    line-height: 1;
    margin: 0;
}

#contact-page #main .say-hello p {
    margin-top: 25px;
}

#contact-page #main .say-hello form {
    margin-top: 50px;
}

#contact-page #main .say-hello form input,
#contact-page #main .say-hello form textarea {
    border-color: rgba(0, 0, 0, 0.08);
    background-color: transparent;
    margin-bottom: 30px;
}

#contact-page #main .say-hello form input:focus,
#contact-page #main .say-hello form textarea:focus {
    border-color: rgba(0, 0, 0, 0.3);
}

#contact-page #main .say-hello form input.invalid,
#contact-page #main .say-hello form textarea.invalid {
    border-color: #f44336;
    color: #f44336;
    border-radius: 0;
}

#contact-page #main .say-hello form textarea {
    min-height: 250px;
}

#contact-page #main .say-hello form #message {
    margin-top: 20px;
}

#contact-page #main .say-hello form #message p {
    margin: 0;
    margin: 0;
}

#contact-page #main .say-hello form #message .error p {
    color: #f44336;
}

#contact-page #main .say-hello form #message .success p {
    color: #48ba86;
}

/*
	12. Responsive
*/

 
}

@media (max-width: 768px) {
    .global-outer .global-inner {
        padding: 0 60px 30px;
    }






    #sidebar .sidebar-inner {
        padding-right: 0 !important;
        float: none !important;
    }

    #sidebar .logo {
        margin-bottom: 15px;
    }

    #sidebar .intro {
        border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
        padding-bottom: 20px;
    }

    #sidebar nav {
        padding: 15px 0 10px;
    }

    #sidebar nav ul li {
        display: inline-block;
        margin: 0 5px;
    }

    #sidebar nav ul li.dropdown {
        poisiion: relative;
        margin-right: 17px;
    }

    #sidebar nav ul li.dropdown ul {
        position: absolute;
        margin-top: 5px;
        background-color: #fff;
        padding: 0 15px;
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.035);
        text-align: left;
        z-index: 10;
    }

    #sidebar nav ul li.dropdown ul li {
        display: block;
    }

    #sidebar nav ul li.dropdown ul li:first-child {
        padding-top: 10px;
    }

    #sidebar nav ul li.dropdown ul li:last-child {
        padding-bottom: 10px;
    }

    #sidebar nav ul li.dropdown ul li a {
        display: block;
    }

    #sidebar .copyright {
        display: none;
    }

    #sidebar .widgets-block .widget {
        margin: 30px 0 50px;
    }

    #sidebar .widgets-block .widget .title:after {
        display: none;
    }

    #sidebar .widgets-block .widget ul li {
        display: inline-block;
        margin: 0 5px;
    }

    #main {
        float: none;
        width: 100%;
    }

    #main .main-outer {
        padding-left: 0;
    }

    #project-page #main .end-page {
        text-align: center;
    }

    #project-page #main .end-page .projects-navigation .arrow,
    #project-page #main .end-page .projects-navigation.previous-project,
    #project-page #main .end-page .projects-navigation.next-project {
        float: none;
    }

    #project-page #main .end-page .share-block {
        margin: 20px 0;
    }

    #blog-page #main .end-page {
        text-align: center;
    }

    #blog-page #main .end-page .pages-navigation .arrow,
    #blog-page #main .end-page .pages-navigation.previous-page,
    #blog-page #main .end-page .pages-navigation.next-page {
        float: none;
    }

    #blog-page #main .end-page .pagination {
        margin: 20px 0;
    }

    #blog-single #main .end-page {
        text-align: center;
    }

    #blog-single #main .end-page .articles-navigation .arrow,
    #blog-single #main .end-page .articles-navigation.previous-article,
    #blog-single #main .end-page .articles-navigation.next-article {
        float: none;
    }

    #blog-single #main .end-page .share-block {
        margin: 20px 0;
    }
}

@media (max-width: 540px) {
    .global-outer .global-inner {
        padding: 0 60px 10px;
    }

    #works-grid .works-item {
        width: 100% !important;
    }

    #blog-single #main .comments .comments-list .comment.reply {
        margin-left: 35px;
    }
}



/* TAG FILTER STYLING */

.tag-container {
  margin-bottom: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-container strong {
  width: 100%;
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
}

.tag-btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  background: #f1f1f1;
  color: #333;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}

.tag-btn:hover {
  background: #111;
  color: #fff;
}

.tag-btn.active {
  background: #111;
  color: #111;
}


/* =========================
   FINAL FIX (P TAG OVERRIDE)
========================= */

/* target ONLY coin hover text */
#works-grid .works-item .picture .content .text p {
    color: #ffffff !important;   /* 🔥 override grey */
    font-size: 13px !important;
    line-height: 1.2 !important; /* 🔥 reduce spacing */
    margin: 0 !important;
    opacity: 1 !important;
}

/* tighten title spacing */
#works-grid .works-item .picture .content .text h2 {
    margin-bottom: 3px !important;
    line-height: 1.2 !important;
}

#works-grid .works-item .picture .content .text {
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}


/* =========================
   SIDEBAR MATCH (COINS)
========================= */

/* intro text */
#sidebar .intro {
    font-size: 14px;
    color: #313131;
    line-height: 1.8;
    font-weight: 300;
}

/* category title */
#sidebar .widget strong {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #bfbfbf;
}

/* sidebar links */
#sidebar .widget ul li a {
    color: #313131;
    font-size: 15px;
    font-weight: 300;
    text-decoration: none;
    display: inline-block;
    padding: 4px 0;
    transition: color 0.2s ease;
}

/* hover effect */
#sidebar .widget ul li a:hover {
    color: #48ba86;
}

/* active category */
#sidebar .widget ul li a.active {
    color: #48ba86;
    font-weight: 400;
}


/* =========================
   PREMIUM SIDEBAR UI
========================= */

/* intro text */
#sidebar .intro {
    font-size: 14px;
    color: #313131;
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 25px;
}

/* section title */
#sidebar .widget strong {
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0e0e0e;
    position: relative;
}

/* subtle divider line */
#sidebar .widget strong:after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin-top: 6px;
}

/* list spacing */
#sidebar .widget ul li {
    margin: 6px 0;
}

/* links */
#sidebar .widget ul li a {
    position: relative;
    color: #313131;
    font-size: 15px;
    font-weight: 300;
    text-decoration: none;
    padding-left: 0;
    transition: all 0.25s ease;
}

/* hover effect (slide + color) */
#sidebar .widget ul li a:hover {
    color: #48ba86;
    padding-left: 6px;
}

/* active state */
#sidebar .widget ul li a.active {
    color: #48ba86;
    font-weight: 400;
    padding-left: 10px;
}

/* active indicator dot */
#sidebar .widget ul li a.active:before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background: #48ba86;
    border-radius: 50%;
}

/* smooth feel */
#sidebar .widget ul li a:before {
    transition: all 0.25s ease;
}


/* REMOVE OVERLAY */
.picture .content {
  display: none !important;
}

/* TEXT BELOW */
.coin-info {
  text-align: center;
  margin-top: 10px;
}

.coin-info h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.coin-info p {
  font-size: 13px;
  color: #777;
}



/* IMAGE FLIP */
.coin-image {
  position: relative;
  overflow: hidden;
}

.coin-image img {
  width: 100%;
  display: block;
  transition: opacity 0.4s ease;
}

/* BACK IMAGE */
.coin-image .back {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* HOVER EFFECT */
.coin-image:hover .front {
  opacity: 0;
}

.coin-image:hover .back {
  opacity: 1;
}



/* DISABLE OLD HOVER OVERLAY */
#works-grid .works-item .picture .content {
  display: none !important;
}

#works-grid .works-item .picture:before {
  display: none !important;
}

/* DISABLE OLD HOVER OVERLAY */
#works-grid .works-item .picture .content {
  display: none !important;
}

#works-grid .works-item .picture:before {
  display: none !important;
}



.coin-image {
  position: relative;
  overflow: hidden;
}

.coin-image img {
  width: 100%;
  display: block;
  transition: opacity 0.4s ease;
}

.coin-image img.back {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* Hover effect */
.coin-image:hover img.back {
  opacity: 1;
}

.coin-image:hover img:first-child {
  opacity: 0;
}

/* TEXT BELOW */
.coin-info {
  padding: 6px 4px;          /* ↓ reduced spacing */
  text-align: left;
}

.coin-info h3 {
  font-size: 18px;
  margin: 6px 0 2px;        /* ↓ tighter gap */
  line-height: 1.2;         /* ↓ less vertical space */
  color: #111;              /* darker title */
}

.coin-info p {
  font-size: 13px;
  color: #181818;              /* darker (was too light) */
  margin: 0;
  line-height: 1.3;         /* tighter */
}


/* CARD CONTAINER */


/* HOVER EFFECT */

.coin-info h3 {
  font-family:'Inter',sans-serif;
  font-weight: 400;
}

.coin-info p {
  font-size: 12px;
  letter-spacing: 0.3px;
}

/* IMAGE */
.coin-image img {
  border-radius: 12px 12px 0 0;            /* round top only */
}

/* TITLE */
.coin-info h3 {
  font-size: 17px;
  margin: 6px 0 3px;
  line-height: 1.2;
  color: #111;
}

/* TITLE */
.coin-info h3 {
  font-size: 17px;
  margin: 6px 0 3px;
  line-height: 1.2;
  color: #111;
}




/* OVERLAY */
.coin-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* BUTTON */
.view-btn {
  background: #fff;
  color: #111;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* HOVER EFFECT */
.coin-image:hover .coin-overlay {
  opacity: 1;
}

.coin-image:hover .view-btn {
  transform: scale(1.05);
}


/* ICON ALWAYS VISIBLE */
.view-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background:rgba(17,24,39,.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #131313;
  text-decoration: none;

  opacity: 1;                 /* always visible */
  transform: scale(1);        /* no shrink */

  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* HOVER EFFECT (only style change now) */
.view-icon:hover {
  background: #ff4800;
  color: #fff;
  transform: scale(1.1);
}





coin-image img {
  opacity: 0;
  transform: scale(0.98);
  transition: all 0.5s ease;
}

/* when loaded */
.coin-image img.loaded {
  opacity: 1;
  transform: scale(1);
}


.coin-badge-text {
  background: #111;
  color: #fff;
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 12px;
  margin-left: 6px;
}


 

.coin-badge-text {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: 0.3px;
}




/* GOLD - RARE */
.coin-badge-text.rare {
  background: linear-gradient(135deg, #ff8512, #ff0909);
  color: #ffffff;
}

/* GREEN - NEW */
.coin-badge-text.new {
  background: #48ba86;
  color: #fff;
}

/* OPTIONAL EXTRAS */
.coin-badge-text.sold {
  background: #999;
  color: #fff;
}

.coin-badge-text.premium {
  background: #111;
  color: #fff;
}

/* SILVER */
.coin-badge-text.silver {
  background: #c0c0c0;
  color: #111;
}

/* TOKEN */
.coin-badge-text.token {
  background: #8b5a2b;
  color: #fff;
}

/* FANTASY COIN */
.coin-badge-text.fantasy-coin {
  background: #6a5acd;
  color: #fff;
}

/* PUNCH MARK */
.coin-badge-text.punch-mark {
  background: #444;
  color: #fff;
}


.tag-container {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-btn {
  padding: 6px 14px;
  border-radius: 20px;
  background: #f2f2f2;
  font-size: 13px;
  text-decoration: none;
  color: #333;
  transition: all 0.2s ease;
}

.tag-btn:hover,
.tag-btn.active {
  background: #111;
  color: #111;
}

#liveSearch {
  transition: all 0.2s ease;
}

#liveSearch:focus {
  border-color: #111;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}



.coin-specs {
  margin-top: 25px;
}

.coin-specs table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.coin-specs td {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}

.coin-specs td:first-child {
  color: #777;
  width: 40%;
}

.coin-specs td:last-child {
  color: #111;
  font-weight: 500;
}

/* subtle hover */
.coin-specs tr:hover {
  background: #fafafa;
}

/* RARITY BOX */
.rarity-box {
  text-align: center;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  min-width: 70px;
}

.rarity-box span {
  display: block;
  font-size: 11px;
  opacity: 0.7;
}

.rarity-box strong {
  font-size: 20px;
}

/* FOOTER SECTION */
.coin-footer {
  margin-top: 25px;
  font-size: 14px;
  color: #444;
}

.coin-footer a {
  color: #48ba86;
  text-decoration: none;
}



/* RARITY SCALE */
.rarity-box {
  min-width: 140px;
}

.rarity-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.rarity-bar {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
}

.rarity-fill {
  height: 100%;
  border-radius: 10px;
}

.rarity-value {
  font-size: 12px;
  margin-top: 5px;
  color: #f3f3f3;
}



/* =========================
   UI IMPROVEMENT PATCH
========================= */

/* BODY BACKGROUND */
body {
  background: #f7f7f7;
}

/* MAIN CONTAINER */
#main .container-fluid {
  padding: 30px 40px;
}

/* =========================
   SIDEBAR IMPROVEMENT
========================= */
#sidebar {
  background: #fff;
  border-right: 1px solid #eee;
    width: 220px !important;
  flex-shrink: 0 !important;
  float: none !important;
  padding-top: 30px;
  margin-top: 30px;
  
}

 


 

#sidebar .intro {
  font-size: 13px;
  color: #777;
  margin-bottom: 20px;
}

#sidebar ul {
  padding-left: 0;
  margin-left: 0;
}

#sidebar ul li a {
  display: block;
  padding: 8px 0;
  color: #444;
  font-size: 14px;
}

#sidebar ul li a:hover {
  color: #000;
  font-weight: 500;
}

/* =========================
   TOP BAR (SEARCH + SORT)
========================= */
.top-bar {
  background: #fff;
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid #eee;
    margin-top: 0;
  margin-bottom: 18px;
    margin-top: 0;
 
}

.top-bar input {
  background: #f5f5f5;
  border: none;
  padding: 10px 16px;
  border-radius: 25px;
  width: 240px;
}

.top-bar input:focus {
  outline: none;
  background: #fff;
  border: 1px solid #ddd;
}

.top-bar select {
  background: #f5f5f5;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
}

/* =========================
   COIN GRID
========================= */
 

/* CARD */





/* IMAGE */
.works-item .picture {
  position: relative;
}

.works-item img {
  border-radius: 14px 14px 0 0;
}

/* VIEW ICON */
.view-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  background:rgba(17,24,39,.92);
  color: #fff;
  border-radius: 50%;
  padding: 6px 8px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* =========================
   CARD CONTENT
========================= */
.coin-info {
  padding: 12px 14px;
}

.coin-info h3 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

.coin-info p {
  font-size: 13px;
  color: #777;
}

/* =========================
   BADGE STYLE (LIKE BIDINN)
========================= */
.coin-badge-text {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 20px;
  font-weight: 500;
}

/* COLORS */
.coin-badge-text.token { background:#8b5a2b; color:#fff; }
.coin-badge-text.new { background:#2ecc71; color:#fff; }
.coin-badge-text.silver { background:#bdc3c7; color:#111; }
.coin-badge-text.rare { background:gold; color:#111; }

/* =========================
   TAG FILTER (CLEAN LOOK)
========================= */
.tag-container {
  margin-top: 10px;
}

.tag-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    color:var(--text-soft);

    text-decoration:none;

    font-size:13px;
    font-weight:500;

    transition:.2s ease;
}

.tag-btn:hover{

    background:#f59e0b;

    border-color:#f59e0b;

    color:#111;

    transform:translateY(-1px);
}

.tag-btn.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* =========================
   LOAD MORE BUTTON
========================= */
.btn {
  background: #111;
  border-radius: 25px;
  padding: 10px 18px;
  font-size: 13px;
}

.btn:hover {
  background: #000;
}

/* =========================
   SPACING FIXES
========================= */
.coin-info p {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {

  #sidebar {
    display: none;
  }

  

  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

}


/* FIX GRID LAYOUT */
 

/* REMOVE OLD FLOAT BEHAVIOR */
#works-grid .works-item {
  width: 100%;
  margin: 0;
}


@media (max-width: 992px) {
  #works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  #works-grid {
    grid-template-columns: 1fr;
  }
}

 
 
 

.global-inner {
  display: flex;
  gap: 30px;
  padding: 30px 40px !important;
}



/* sidebar */
#sidebar {
  width: 240px;
  flex-shrink: 0;
}

/* main area */
#main {
  flex: 1;
  min-width: 0;
}
 

/* MAIN CONTENT */
#main .main-outer {
  padding-left: 0 !important;
  overflow: visible;
}

.global-outer {
  opacity: 1 !important; /* remove fade-in hiding */
}





 

/* =========================
   HARD RESET (FIX TEMPLATE)
========================= */

/* STOP template from hiding everything */
.global-outer {
  opacity: 1 !important;
  overflow: visible !important;
}

/* FIX inner container */


/* REMOVE float system */
 

/* MAIN AREA */
#main {
  float: none !important;
  width: auto !important;
  flex: 1;
}

/* REMOVE hidden clipping everywhere */
#main,
#works-grid,
.main-outer {
  overflow: visible !important;
}

/* =========================
   GRID (FINAL)
========================= */

 

/* FORCE cards to behave */
#works-grid .works-item {
  width: 100% !important;
  margin: 0 !important;
  display: block;
}


/* =========================
   FINAL LAYOUT FIX
========================= */

/* Kill template animation + clipping */
.global-outer {
  opacity: 1 !important;
  overflow: visible !important;
}

/* Convert layout to FLEX (clean) */

/* Sidebar */
 

/* Main area */
#main {
  float: none !important;
  flex: 1;
  width: auto !important;
}

/* REMOVE ALL CLIPPING */
.main-outer,
#main,
#works-grid {
  overflow: visible !important;
}

/* =========================
   GRID (FINAL CLEAN)
========================= */

 

/* Card */
#works-grid .works-item {
  width: 100% !important;
  margin: 0 !important;
  display: block;
}


 

#works-grid .works-item {
  width: 100% !important;
}

/* ===== FORCE FIX ===== */

#main .main-outer {
  overflow: visible !important;
}


/* HARD RESET */

.global-outer {
  opacity: 1 !important;
  overflow: visible !important;
  padding-top: 0 !important;
}



#main .main-outer {
  overflow: visible !important;
}

 

#main {
  width: auto !important;
  flex: 1;
}


/* ===== CRITICAL FIX ===== */

/* REMOVE LAYOUT BREAKER */
 

/* FIX MAIN EXPANSION */
#main {
  flex: 1 !important;
  min-width: 0 !important; /* 🔥 REQUIRED FOR GRID INSIDE FLEX */
}

#sidebar .widget.filter ul,
#sidebar .widget.filter li {
  list-style: none !important;
  padding: 0;
  margin: 0;
}


 

/* ==================================================
   NEW RESPONSIVE LAYOUT SYSTEM
================================================== */

.global-inner{
    padding:32px !important;
}

#main .main-outer{
    display:flex;
    gap:32px;

    overflow:visible !important;
}

/* SIDEBAR */

#sidebar{
    width:220px;
    flex-shrink:0;
}

/* CONTENT */

.coins-wrapper{
    flex:1;
    min-width:0;
}

/* GRID */

#works-grid{
    display:grid !important;

    grid-template-columns:
    repeat(3,minmax(0,1fr));

    gap:24px;

    width:100%;
}

/* IMAGES */

.coin-image img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
}

/* CARDS */

.works-item{
    border-radius:20px;
    overflow:hidden;
}

/* MOBILE */

@media(max-width:768px){

     

#works-grid{
    display:grid !important;

    grid-template-columns:
    repeat(2, minmax(0,1fr)) !important;

    gap:14px !important;

    width:100% !important;

    max-width:100% !important;
}



/* SEARCH + BADGE ROW */

.top-bar > div:first-child{
    display:flex !important;
    flex-direction:column;
    gap:12px;
    align-items:stretch !important;
}

/* INPUT */

.top-bar input{
    width:100% !important;
    min-width:0;
}

/* SELECTS */

.top-bar select{
    width:100%;
}

/* RESULT COUNT */

.top-bar > div:nth-child(2){
    text-align:left !important;
    font-size:14px;
}

/* SORT */

.top-bar > div:last-child{
    text-align:left !important;
}

     
 

#works-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px !important;
}

.coin-info{
    padding:14px;
}

.coin-info h3{
    font-size:17px;
    line-height:1.35;
}

.coin-info p{
    font-size:13px;
}


.works-item .picture{
    aspect-ratio: 1 / 1;
    overflow:hidden;
}

.works-item .picture img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


.coin-info{
    padding:16px;
}

.coin-info h3{
    font-size:18px;
    line-height:1.35;
    margin-bottom:6px;
}

.coin-info p{
    font-size:14px;
    color:#777;
}

.global-inner{
    padding:12px !important;
}

#main{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.main-outer{
    width:100% !important;
    padding:0 !important;
}

#sidebar{
    display:none !important;
}

.coin-info h3{
    font-size:16px;
    line-height:1.35;
    
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    
    overflow:hidden;
}

.works-item .picture{
    aspect-ratio:0.95/1;
}






/* TABLET */

@media(min-width:769px) and (max-width:1100px){

    #works-grid{
        grid-template-columns:
        repeat(2,minmax(0,1fr));
    }

}




@media(max-width:768px){

    /* FULL MOBILE WIDTH */
    .global-inner{
        padding:0 !important;
    }

    .main-outer{
        width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }

    #main{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        float:none !important;
        display:block !important;
    }

    /* HIDE SIDEBAR */
    #sidebar{
        display:none !important;
    }

    /* MAIN WRAPPER */
    .coins-wrapper{
        width:100% !important;
        padding:14px !important;
        margin:0 !important;
    }

    /* HERO */
    .collection-hero{
        padding:22px 18px !important;
        border-radius:0 !important;
    }

    .collection-hero h1{
        font-size:34px !important;
        line-height:1.05 !important;
    }

    /* TOP BAR */
    .top-bar{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;

        padding:16px !important;
    }

    .top-bar > div{
        width:100% !important;
        text-align:left !important;
    }

    .top-bar input,
    .top-bar select{
        width:100% !important;
    }

    /* TAGS */
    .tag-container{
        gap:8px !important;
    }

    .tag-btn{
        font-size:13px !important;
        padding:8px 14px !important;
    }

    /* GRID */
    #works-grid{
        display:grid !important;

        grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

        gap:14px !important;

        width:100% !important;
    }

    /* CARD */
    .works-item{
        width:100% !important;
        min-width:0 !important;
        border-radius:18px !important;
    }

    .works-item .picture{
        aspect-ratio:1/1 !important;
        overflow:hidden !important;
    }

    .works-item .picture img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
    }

    /* CONTENT */
    .coin-info{
        padding:14px !important;
    }

    .coin-info h3{
        font-size:16px !important;
        line-height:1.35 !important;

        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;

        overflow:hidden;
    }

    .coin-info p{
        font-size:13px !important;
        line-height:1.5 !important;
    }

}


 




/* ========================================
   DARK MODE OVERRIDES
======================================== */

body.dark{
    background:var(--bg);
    color:var(--text);
}

/* SIDEBAR */

body.dark #sidebar .sidebar-inner{
    background:var(--card);
    border-right:1px solid var(--border);
}

body.dark #sidebar nav ul li a,
body.dark #sidebar nav ul li span,
body.dark #sidebar .widget.filter li{
    color:#d1d5db;
}

body.dark #sidebar nav ul li a:hover,
body.dark #sidebar .widget.filter li:hover{
    color:#fff;
}

/* HEADINGS + TEXT */

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6{
    color:#fff;
}

body.dark p{
    color:var(--muted);
}

/* CARDS */

body.dark .works-item{
    background:var(--card);
    border:1px solid var(--border);
    box-shadow:none;
}

body.dark .coin-info{
    background:var(--card);
}

body.dark .coin-info h3{
    color:#fff;
}

body.dark .coin-info p{
    color:#9ca3af;
}

/* HERO */

body.dark .collection-hero{
    background:var(--card);
    border:1px solid var(--border);
}

body.dark .collection-hero p{
    color:#9ca3af;
}

/* TOP BAR */

body.dark .top-bar{
    background:var(--card);
    border:1px solid var(--border);
}

/* INPUTS */

body.dark input,
body.dark textarea,
body.dark select{

    background:#111827 !important;

    color:#f5f5f5 !important;

    border:1px solid rgba(255,255,255,0.08) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder{
    color:#9ca3af;
}

/* TAGS */

body.dark .tag-btn{
    background:#232833;
    color:#e5e7eb;
}

body.dark .tag-btn:hover,
body.dark .tag-btn.active{
    background:#fff;
    color:#111;
}

/* BUTTONS */

body.dark .btn,
body.dark .empty-btn{
    background:#fff;
    color:#111;
}

/* LINKS */

body.dark a{
    color:#d1d5db;
}

body.dark a:hover{
    color:#fff;
}



/* =========================
   DARK MODE
========================= */

body.dark{

    --bg:#0f1115;

    --card:#171a21;

    --text:#f5f5f5;

    --muted:#9ca3af;

    --border:rgba(255,255,255,0.08);

    --tag:#232833;

    --shadow:
      0 12px 40px rgba(0,0,0,0.45);

    background:var(--bg) !important;
    color:var(--text) !important;
}


/* GLOBAL */

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6{
    color:var(--text) !important;
}

body.dark p{
    color:var(--muted) !important;
}


/* SIDEBAR */

body.dark #sidebar{
    background:#11151d !important;
}

body.dark #sidebar nav ul li a,
body.dark #sidebar .intro,
body.dark .widget.filter li{
    color:#d6d6d6 !important;
}


/* CARDS */

body.dark .collection-hero,
body.dark .top-bar,
body.dark .works-item,
body.dark .empty-state{
    background:var(--card) !important;
    border-color:var(--border) !important;
    box-shadow:var(--shadow);
}


/* INPUTS */

body.dark input,
body.dark select,
body.dark textarea{
    background:#232833 !important;
    border-color:var(--border) !important;
    color:#fff !important;
}


/* COIN INFO */

body.dark .coin-info{
    background:#171a21 !important;
}

body.dark .coin-info h3{
    color:#fff !important;
}

body.dark .coin-info p{
    color:#a0a7b4 !important;
}


/* TAGS */

body.dark .tag-btn{
    background:#232833 !important;
    color:#e5e7eb !important;
}

body.dark .tag-btn.active,
body.dark .tag-btn:hover{
    background:#fff !important;
    color:#111 !important;
}


/* BUTTON */

body.dark .theme-toggle{
    background:#232833 !important;
    color:#fff !important;
}






@media (max-width: 768px){

    .coin-title,
    .single-title,
    .detail-title{
        font-size:42px !important;
        line-height:1.1;
    }

    .coin-meta,
    .coin-subtitle,
    .meta-text{
        font-size:18px !important;
    }

    .breadcrumbs,
    .breadcrumbs a{
        font-size:24px !important;
    }

    .share-row,
    .share-row a,
    .share-btn{
        font-size:16px !important;
    }

    .rarity-label,
    .rarity-score{
        font-size:18px !important;
    }

    .coin-description{
        font-size:18px !important;
        line-height:1.7;
    }

    .coin-table td,
    .coin-table th{
        font-size:17px !important;
        padding:18px 20px !important;
    }

    .tag-btn,
    .coin-tag{
        font-size:15px !important;
        padding:10px 16px !important;
    }

    .note-form input,
    .note-form textarea{
        font-size:17px !important;
    }

    .note-submit{
        font-size:17px !important;
        padding:16px 22px !important;
    }

    .theme-toggle{
        font-size:16px !important;
        padding:14px 18px !important;
    }
}