/*

TemplateMo 577 Liberty Market

https://templatemo.com/tm-577-liberty-market

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background-color: #1e1e1e;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #fff;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #fff;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Roboto', sans-serif;
}

::selection {
  background: #7453fc;
  color: #fff;
}

::-moz-selection {
  background: #7453fc;
  color: #fff;
}

.border-button a {
  font-size: 14px;
  color: #fff;
  background-color: transparent;
  border: 1px solid #7453fc;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.border-button a:after {
  width: 78%;
  height: 2px;
  background-color: #fff;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.border-button a:hover {
  background-color: #7453fc;
  color: #fff;
}

.main-button a {
  font-size: 14px;
  color: #fff;
  background-color: #7453fc;
  border: 1px solid #7453fc;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.main-button a:after {
  width: 78%;
  height: 2px;
  background-color: #fff;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.main-button a:hover {
  background-color: #fff;
  color: #7453fc;
  border: 1px solid #fff;
}

section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  margin-bottom: 80px;
  text-align: center;
}

.section-heading .line-dec {
  width: 100px;
  height: 2px;
  background-color: #7453fc;
  margin: 0 auto 30px auto;
}

.section-heading h2 {
  margin-top: 10px;
  line-height: 36px;
  font-size: 30px;
  font-weight: 700;
  text-transform: capitalize;
  color: #fff;
}

.section-heading h2 em {
  color: #7453fc;
  font-style: normal;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.98);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #7453fc;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #7453fc;
  border-radius: 50%;
}



/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: #d3c7f5 !important;
  height: 70px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  background-color: transparent;
  position: absolute;
  height: 70px;
  top: 30px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
  display: flex;
  background-color: #d3c7f5;
  padding: 15px 30px;
  border-radius: 50px;
}

.background-header .main-nav {
  padding: 0px;
  background-color: transparent;
}

.header-area .main-nav .logo {
  flex-basis: 30%;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo img {
  width: 223px;
}

.background-header .main-nav .logo {
  margin-top: 8px;
}

.background-header .main-nav .logo img {
  width: 180px;
}

.header-area .main-nav .nav {
  display: inline-flex;
  flex-basis: 70%;
  justify-content: flex-end;
  vertical-align: middle;
  text-align: right;
  margin-top: 15px;
  margin-right: 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
  flex-wrap: nowrap;
}

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block;
  flex: 0 1 auto;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-transform: capitalize;
  color: #2a2a2a;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  border: transparent;
  padding: 8px 15px;
  border-radius: 18px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-left: 25px !important;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #d3c7f5;
  background-color: #7453fc;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #fff;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 17px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #7453fc;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #7453fc;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #7453fc;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #7453fc;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #7453fc;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #7453fc;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #7453fc;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #7453fc;
}

.header-area.header-sticky {
  min-height: 70px;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area {
    top: 0;
  }
  .header-area .main-nav {
    background-color: transparent;
    border-radius: 0px;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 15px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #7453fc!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #d3c7f5;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area.header-sticky .nav {
    margin-top: 85px !important;
    text-align: center;
  }
  .background-header.header-sticky .nav {
    margin-top: 70px !important;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #d3c7f5;
    border-bottom: 1px solid #d3c7f5;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #d3c7f5 !important;
    color: #1e1e1e !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #fff !important;
    color: #7453fc!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-image: url(../images/banner-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 290px;
  padding-bottom: 240px;
  background-color: #2a2a2a;
}

.main-banner h6 {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.main-banner h2 {
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  line-height: 66px;
  text-transform: uppercase;
}

.main-banner p {
  margin-top: 20px;
}

.main-banner .buttons {
  margin-top: 30px;
  display: flex;
  justify-content: start;
}

.main-banner .border-button {
  margin-right: 15px;
}

.main-banner .owl-banner {
  margin-top: -40px;
}

.main-banner .owl-nav {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom: -76px;
  text-align: center;
}

.main-banner .owl-nav .owl-prev {
  margin-right: 7.5px;
}

.main-banner .owl-nav .owl-next {
  margin-left: 7.5px;
}

.main-banner .owl-nav .owl-prev span,
.main-banner .owl-nav .owl-next span  {
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 24px;
  display: inline-block;
  color: #7453fc;
  background-color: #fff;
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-nav .owl-prev span:hover,
.main-banner .owl-nav .owl-next span:hover {
  opacity: 1;
}


/* 
---------------------------------------------
Categories & Collections Style
--------------------------------------------- 
*/


.categories-collections {
  background-image: url(../images/dark-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 80px 0px 150px 0px;
  position: relative;
}

/* .categories-collections:after {
  background-image: url(/assets/images/category-collection-dec.png);
  width: 300px;
  height: 282px;
  position: absolute;
  bottom: 0;
  right: 30px;
  content: '';
} */

.categories .item {
  background-color: #282b2f;
  text-align: center;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #404245;
  position: relative;
}

.categories .item .icon {
  width: 62px;
  height: 62px;
  display: inline-block;
  text-align: center;
  line-height: 62px;
  background-color: #fff;
  border-radius: 50%;
}

.categories .item .icon img {
  max-width: 31px;
}

.categories .item h4 {
  margin-top: 15px;
  font-size: 20px;
}

.categories .item .icon-button a {
  display: inline-block;
  width: 46px;
  height: 46px;
  line-height: 46px;
  background-color: #fff;
  color: #7453fc;
  border-radius: 50%;
  font-size: 18px;
  position: absolute;
  left: 50%;
  bottom: -23px;
  transform: translateX(-23px);
  transition: all .3s;
  opacity: 0;
  visibility: hidden;
}

.categories .item .icon-button a:hover {
  background-color: #7453fc;
  color: #fff;
}

.categories .item:hover .icon-button a {
  visibility: visible;
  opacity: 1;
}

.collections {
  margin-top: 140px;
}

.collections .item img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.collections .item .down-content {
  background-color: #282b2f;
  border: 1px solid #404245;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 30px;
}

.collections .item .down-content h4 {
  font-size: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.collections .item {
  padding-bottom: 60px;
}

.collections .item span {
  color: #fff;
  display: inline-block;
  width: 48%;
  font-size: 15px;
}

.collections .item span strong {
  font-size: 20px;
}

.collections .item span.category {
  text-align: right;
}

.collections .item .main-button a {
  width: 100%;
  text-align: center;
}

.collections .item .main-button {
  margin-top: 20px;
  margin-bottom: -60px;
}

.collections .item .main-button a:hover {
  background-color: #fff;
  border: 1px solid #fff;
  color: #7453fc;
}

.collections .owl-nav {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50px);
  text-align: center;
}

.collections .owl-nav .owl-prev {
  position: absolute;
  left: -23px;
}

.collections .owl-nav .owl-next {
  position: absolute;
  right: -23px;
}

.collections .owl-nav .owl-prev span,
.collections .owl-nav .owl-next span  {
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 24px;
  display: inline-block;
  color: #7453fc;
  background-color: #fff;
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.collections .owl-nav .owl-prev span:hover,
.collections .owl-nav .owl-next span:hover {
  opacity: 1;
}


/* 
---------------------------------------------
Create NFT Style
--------------------------------------------- 
*/

.create-nft {
  background-image: url(../images/main-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 80px 0px;
  position: relative;
}

.create-nft .section-heading .line-dec {
  
  background-color: #fff;
}

.create-nft .section-heading {
  text-align: center;
  margin-bottom: 50px;
}

.create-nft .main-button {
  text-align: right;
}

.create-nft .item {
  margin-top: 30px;
  position: relative;
}

.create-nft .first-item .number {
  position: absolute;
  right: 0;
  top: -20px;
}

.create-nft .first-item:after {
  position: absolute;
  width: 1px;
  height: 95%;
  background-color: rgba(255, 255, 255, 0.2);
  content: '';
  right: 5px;
  top: 5%;
}

.create-nft .second-item .number {
  position: absolute;
  right: 0;
  top: -20px;
}

.create-nft .second-item:after {
  position: absolute;
  width: 1px;
  height: 95%;
  background-color: rgba(255, 255, 255, 0.2);
  content: '';
  right: 5px;
  top: 5%;
}

.item .icon {
  width: 62px;
  height: 62px;
  display: inline-block;
  text-align: center;
  line-height: 62px;
  background-color: #fff;
  border-radius: 50%;
  
}

.create-nft .item .icon img {
  max-width: 31px;
}

.create-nft h4 {
  font-size: 20px;
  
  
}

.create-nft p {
  margin-right: 10px;
}

.create-nft .item a {
  color: #3CF;
}



/* 
---------------------------------------------
Currently Market Style
--------------------------------------------- 
*/

.currently-market {
  background-image: url(../images/dark-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
  position: relative;
}

.currently-market-item {
  width: 45%;
  margin: 0 auto;
}

.currently-market .section-heading {
  text-align: left;
}

.currently-market .section-heading .line-dec {
  margin-left: 0;
}

.currently-market .filters {
  text-align: right;
}

.currently-market .filters ul li {
  display: inline-block;
  margin-left: 10px;
  font-size: 15px;
  color: #fff;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: all .3s;
}

.currently-market .filters ul li:first-child {
  margin-left: 0px;
}


.currently-market .filters ul li.active,
.currently-market .filters ul li:hover {
  background-color: #7453fc;
}

.currently-market .item {
  background-color: #282b2f;
  border: 1px solid #404245;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  margin-bottom: 30px;
}

.currently-market .item .right-content {
  margin-left: 30px;
  width: 100%;
}

.currently-market .item .right-content h4 {
  font-size: 20px;
  margin-bottom: 25px;
}

.currently-market .item .right-content span.author {
  display: flex;
  margin-bottom: 25px;
}

.currently-market .item .right-content span.author img {
  margin-right: 15px;
}

.currently-market .item .right-content span.author h6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
}

.currently-market .item .right-content span.author a {
  color: #7453fc;
  font-weight: 700;
  margin-top: 5px;
}

.currently-market .item span {
  color: #fff;
  display: inline-block;
  font-size: 15px;
}

.currently-market .item .line-dec {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  margin-bottom: 25px;
  margin-top: 30px;
}

.currently-market .item span strong {
  font-size: 20px;
}

.currently-market .item span.bid {
  line-height: 35px;
}

.currently-market .item span.bid em,
.currently-market .item span.ends em {
  font-style: normal;
}

.currently-market .item span.ends {
  text-align: right;
  float: right;
  line-height: 35px;
}

.currently-market .item .text-button {
  margin-top: 40px;
}

.currently-market .item .text-button a {
  font-size: 15px;
  font-weight: 700;
  color: #7453fc;
  border-bottom: 1px solid #7453fc;
}



/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background: rgb(36, 36, 46);
  
  text-align: center;
  padding: 25px 0px;
}

footer p {
  color: #fff;
}

footer p a {
  color: #fff;
  font-weight: 500;
  transition: all .3s;
}

footer p a:hover {
  color: #fff;
  opacity: 0.75;
}


/* 
---------------------------------------------
Page Heading Style
--------------------------------------------- 
*/

.normal-space {
  padding: 250px 0px 120px 0px !important;
}

.page-heading {
  background-image: url(../images/heading-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 250px;
  text-align: center;
  background-color: #2a2a2a;
}

.page-heading h6 {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.page-heading h2 {
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  line-height: 66px;
  text-transform: uppercase;
}

.page-heading span {
  color: #8a75da;
  font-size: 15px;
}

.page-heading span a {
  color: #fff;
}

.page-heading .buttons {
  margin-top: 35px;
  display: flex;
  justify-content: center;
}

.page-heading .buttons .main-button {
  margin-right: 15px;
}

.page-heading .buttons .border-button {
  margin-left: 15px;
}



/* 
---------------------------------------------
Explore Style
--------------------------------------------- 
*/

.featured-explore {
  margin-top: 60px;
  margin-bottom: -300px;
}

.featured-explore .owl-features {
  min-height: 100%;
}

.featured-explore .item .thumb {
  position: relative;
  overflow: hidden;
}

.featured-explore .item .thumb:hover .hover-effect {
  visibility: visible;
  opacity: 1;
  right: 30px;
}

.featured-explore .item .thumb .hover-effect {
  position: absolute;
  right: -100%;
  bottom: 30px;
  padding: 30px 40px;
  border-radius: 20px;
  border: 1px solid rgba(64, 66, 69, 0.9);
  background-color: rgba(40, 43, 47, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
}

.featured-explore .item .hover-effect .content h4 {
  font-size: 20px;
  margin-bottom: 25px;
}

.featured-explore .item .hover-effect .content span.author {
  display: flex;
  margin-bottom: 0px;
}

.featured-explore .item .hover-effect .content span.author img {
  margin-right: 15px;
}

.featured-explore .item .hover-effect .content span.author h6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
}

.featured-explore .item .hover-effect .content span.author a {
  color: #7453fc;
  font-weight: 700;
  margin-top: 5px;
}

.featured-explore .owl-nav {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-23px);
  text-align: center;
}

.featured-explore .owl-nav .owl-prev {
  position: absolute;
  left: 30px;
}

.featured-explore .owl-nav .owl-next {
  position: absolute;
  right: 30px;
}

.featured-explore .owl-nav .owl-prev span,
.featured-explore .owl-nav .owl-next span  {
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 22px;
  font-weight: 700;
  display: inline-block;
  color: #7453fc;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.5;
  transition: all .3s;
}

.featured-explore .owl-nav .owl-prev span:hover,
.featured-explore .owl-nav .owl-next span:hover {
  opacity: 1;
}

.discover-items {
  background-image: url(../images/dark-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 400px 0px 120px 0px;
  position: relative;
}

.discover-items .section-heading {
  text-align: left;
}

.discover-items .section-heading .line-dec {
  margin-left: 0;
}

.discover-items #search-form {
  margin-top: 15px;
}

.discover-items #search-form input,
.discover-items #search-form select {
  width: 100%;
  height: 46px;
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 23px;
  background-color: transparent;
  padding: 0px 15px;
  font-size: 14px;
  color: #fff;
}

.discover-items #search-form select {
  cursor: pointer;
}

.discover-items #search-form select option {
  background-color: #2a2a2a;
}

.discover-items #search-form input::placeholder,
.discover-items #search-form select::placeholder {
  color: #fff;
}

.discover-items #search-form button {
  font-size: 14px;
  color: #fff;
  background-color: #7453fc;
  border: 1px solid #7453fc;
  height: 46px;
  line-height: 46px;
  text-align: center;
  width: 100%;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.discover-items #search-form button:after {
  width: 78%;
  height: 2px;
  background-color: #fff;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.discover-items #search-form button:hover {
  background-color: #fff;
  color: #7453fc;
  border: 1px solid #fff;
}

.discover-items .item span.banner {
  font-size: 15px;
  background-color: #7453fc;
  color: #fff;
  font-weight: 500;
  padding: 5px 15px;
  display: inline-block;
  position: absolute;
  border-radius: 16px;
  left: 50%;
  transform: translateX(-50%);
  top: -16px;
}

.discover-items .item span.author {
  display: inline-flex;
  width: 100%;
}

.discover-items .item span.author img {
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.discover-items .item img {
  margin-top: -32px;
  position: relative;
  z-index: 1;
}

.discover-items .item h4 {
  font-size: 20px;
  margin-top: 30px;
}

.discover-items .item .line-dec {
  width: 100%;
  height: 1px;
  background-color: rgba(255,255,255,0.2);
  margin: 30px 0px;
}

.discover-items .item {
  background-color: #282b2f;
  border: 1px solid #404245;
  padding: 30px;
  border-radius: 20px;
  position: relative;
  margin-bottom: 52px;
}

.discover-items .item span {
  color: #fff;
  display: inline-block;
  font-size: 15px;
}

.discover-items .item span strong {
  font-size: 20px;
}

.discover-items .item span.category {
  text-align: right;
}

.discover-items .item .main-button {
  margin-top: 20px;
  margin-bottom: -60px;
  text-align: center;
}

.top-seller {
  background-image: url(../images/main-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 80px 0px 30px 0px;
  position: relative;
}

.top-seller .section-heading .line-dec {
  background-color: #fff;
}

.top-seller .item {
  display: flex;
  margin-bottom: 30px;
}

.top-seller .item img {
  margin-right: 15px;
}

.top-seller .item h4 {
  font-size: 20px;
  margin-top: 12px;
  margin-right: 10px;
}

.top-seller .item h6 {
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  text-align: left;
}

.top-seller .item a {
  font-size: 14px;
  cursor: auto;
  color: #fff;
  font-weight: 400;
  margin-top: 5px;
}


/* 
---------------------------------------------
Details Page Style
--------------------------------------------- 
*/

.item-details-page {
  background-image: url(../images/dark-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 80px 0px 0px 0px;
  position: relative;
}

/* .item-details-page:after {
  background-image: url(/assets/images/category-collection-dec.png);
  width: 300px;
  height: 282px;
  position: absolute;
  bottom: 0;
  right: 30px;
  content: '';
  z-index: 1;
} */

.item-details-page .left-image {
  margin-right: 30px;
}

.item-details-page h4 {
  font-size: 20px;
  margin-bottom: 25px;
}

.item-details-page span.author {
  display: flex;
  margin-bottom: 30px;
}

.item-details-page span.author img {
  margin-right: 15px;
}

.item-details-page span.author h6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
}

.item-details-page span.author a {
  color: #7453fc;
  font-weight: 700;
  margin-top: 5px;
}



.item-details-page span {
  color: #fff;
  display: inline-block;
  font-size: 15px;
}

.item-details-page span strong {
  font-size: 20px;
  color: #7453fc;
}

.item-details-page p {
  position: relative;
  z-index: 2;
}

.item-details-page span.bid,
.item-details-page span.owner,
.item-details-page span.ends  {
  line-height: 35px;
  position: relative;
  z-index: 2;
}

.item-details-page span.bid em,
.item-details-page span.ends em,
.item-details-page span.owner em {
  font-style: normal;
  color: #afafaf;
}

.item-details-page form {
  margin-top: 40px;
}


.item-details-page form label {
  color: #afafaf;
  font-size: 15px;
  font-weight: 500;
  margin-right: 10px;
}

.item-details-page form input {
  width: 100px;
  height: 46px;
  border: 1px solid #7453fc;
  outline: none;
  border-radius: 23px;
  background-color: transparent;
  color: #fff;
  text-align: center;
  margin-right: 15px;
}

.item-details-page form input::placeholder {
  color: #fff;
}

.item-details-page button {
  font-size: 14px;
  color: #fff;
  background-color: #7453fc;
  border: 1px solid #7453fc;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.item-details-page button:after {
  width: 50%;
  height: 2px;
  background-color: #fff;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.item-details-page button:hover {
  background-color: #fff;
  color: #7453fc;
  border: 1px solid #fff;
}

.current-bid {
  margin-top: 1px;
}

.current-bid select {
  float: right;
  width: 150px;
  background-color: transparent;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  border: none;
  outline: none;
  cursor: pointer;
}

.current-bid .mini-heading h4 {
  background-color: #7453fc;
  display: inline-block;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 22px;
}

.current-bid .item {
  position: relative;
  z-index: 2;
  margin-top: 30px;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  background-color: #24242ed7;
  
}

.current-bid .item .left-img {
  flex-basis: 80%;
  display: inline-flex;
}

.current-bid .item .right-content {
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 30px;
  padding-left: 20px;
  width: 100%;
}

.current-bid .item .right-content h4 {
  font-size: 20px;
  margin-bottom: 0px;
}

.current-bid .item .right-content a {
  font-size: 15px;
  color: #7453fc;
  font-weight: 700;
}

.current-bid .item .right-content .line-dec {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 25px 0px;
  
}

.current-bid .item .right-content h6 {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 8px;
}

.current-bid .item .right-content h6 em {
  font-size: 18px;
  color: #7453fc;
  font-style: normal;
  font-weight: 700;
}

.current-bid .item .right-content span.date {
  font-size: 15px;
  color: #7453fc;
}


/* 
---------------------------------------------
Author Page Style
--------------------------------------------- 
*/

.author-page {
  background-image: url(../images/dark-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px 120px 0px;
  position: relative;
}

.author-page .author {
  display: flex;
}

.author-page .author h4 {
  margin-top: 60px;
  font-size: 20px;
  margin-left: 30px;
}

.author-page .author h4 a {
  font-size: 15px;
  color: #7453fc;
}

.author-page .right-info {
  background-color: #282b2f;
  border: 1px solid #404245;
  padding: 20px 30px;
  border-radius: 20px;
  margin-left: 100px;
}

.author-page .right-info .info-item {
  margin-bottom: 20px;
}

.author-page .right-info i {
  color: #7453fc;
  font-size: 22px;
}

.author-page .right-info h6 {
  font-size: 20px;
  color: #7453fc;
  margin-top: 4px;
}

.author-page .right-info h6 em {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  color: #fff;
}

.author-page .right-info h5 {
  font-size: 20px;
  color: #afafaf;
  margin-top: 10px;
}

.author-page .right-info .main-button a {
  width: 100%;
  text-align: center;
}

.author-page .section-heading {
  margin-top: 80px;
  text-align: left;
}

.author-page .section-heading .line-dec {
  margin-left: 0;
}

.author-page .item span.author {
  display: inline-flex;
  width: 100%;
}

.author-page .item span.author img {
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.author-page .item img {
  margin-top: -32px;
  position: relative;
  z-index: 1;
}

.author-page .item h4 {
  font-size: 20px;
  margin-top: 30px;
}

.author-page .item .line-dec {
  width: 100%;
  height: 1px;
  background-color: rgba(255,255,255,0.2);
  margin: 30px 0px;
}

.author-page .item {
  background-color: #282b2f;
  border: 1px solid #404245;
  padding: 30px;
  border-radius: 20px;
  position: relative;
  margin-bottom: 52px;
}

.author-page .item span {
  color: #fff;
  display: inline-block;
  font-size: 15px;
}

.author-page .item span strong {
  font-size: 20px;
}

.author-page .item span.category {
  text-align: right;
}

.author-page .item .main-button {
  margin-top: 20px;
  margin-bottom: -60px;
  text-align: center;
}


/* 
---------------------------------------------
Create Page Style
--------------------------------------------- 
*/

#contact {
  background-color: #37393c;
  border-radius: 20px;
  padding: 30px 30px;
  margin-bottom: 120px;
}

#contact input {
  width: 100%;
  height: 46px;
  text-align: left;
  padding: 0px 15px;
  background-color: #282b2f;
  border: 1px solid #404245;
  margin-bottom: 30px;
  font-weight: 500;
  color: #afafaf;
}

#contact input::placeholder {
  color: #afafaf;
}

#contact label {
  font-size: 15px;
  color: #fff;
  margin-bottom: 8px;
}

#contact input#file {
  padding: 8px 0px;
  background-color: transparent;
  border: none;
  border-radius: 0px;
}

#contact button {
  margin-top: 30px;
  width: 100%;
  text-align: center;
}


.categories-collections .section-heading h2 {
  font-size: 36px; /* Aumentado de 30px default para melhor legibilidade */
}

.categories-collections p {
  font-size: 16px; /* Aumentado de 15px default para destacar informações */
  line-height: 32px; /* Ajuste para espaçamento melhor, sem lentidão */
}

.categories-collections a img {
  max-width: 220x; /* Reduz o tamanho dos botões/ícones (ajuste se precisar menor, ex: 150px) */
  display: block; /* Garante alinhamento central */
  margin: 0 auto 20px auto; /* Espaçamento e centralização, boa prática para mobile/TV */
}

.categories-collections p.direct-download {
  text-align: center; /* Alinha ao centro a frase e o link */
  font-size: 16px; /* Tamanho default do link */
}

.categories-collections p.direct-download span {
  font-size: 20px; /* Um pouco maior que o link */
  font-weight: 600; /* Levemente bold para destaque, boa prática */
}

.categories-collections p.centered-text {
  text-align: center; /* Centraliza as frases */
  font-size: 18px; /* Maiores que antes */
  margin-bottom: 20px; /* Espaçamento melhor */
}

.categories-collections p.coming-soon {
  font-size: 20px; /* Maior que as frases acima */
  text-align: center; /* Centraliza para consistência */
  margin-top: 30px; /* Mais espaço acima */
}

@media (max-width: 900.98px) { /* Para mobile xs, adiciona separação no stack */
  .categories-collections .icons-row .col-lg-4 {
    margin-bottom: 20px; /* Separação entre ícones empilhados; ajuste se quiser mais (ex: 30px) */
  }
  .categories-collections .icons-row .col-lg-4:last-child {
    margin-bottom: 0; /* Remove margem do último para não adicionar espaço extra no final */
  }
}

.categories-collections .icons-row .col-lg-4 {
  text-align: center; /* Centraliza cada ícone dentro da sua coluna, corrigindo desalinhamento por tamanhos diferentes */
}

.categories-collections .icons-row {
  margin-top: 40px; /* Margem maior acima */
  margin-right: 100px;
  margin-left: 100px;
  margin-bottom: 40px; /* Margem maior abaixo */
}

.categories-collections .row img {
  max-width: 220px; /* Para os ícones 'coming soon' lado a lado, menores que os botões principais */
  margin: 0 auto; /* Centraliza em colunas */
}


.current-bid .item {
  display: flex;
  align-items: flex-start; /* Alinha topo para consistência em descrições variáveis */
  gap: 1px; /* Espaço entre imagem e texto, otimizado para visual */
}

.current-bid .left-icon {
  flex-shrink: 0; /* Impede encolhimento da imagem */
  margin-top: 30px;
  margin-left: 30px;
}

.current-bid .right-content p {
  margin: 0; /* Remove margem extra para descrições curtas */
  font-size: 15px; /* Tamanho padrão do template */
  line-height: 24px; /* Otimizado para leitura sem lentidão */
  color: #fff;
}

.trial-info {
  text-align: center; /* Centraliza */
  font-size: 20px; /* Levemente maior para destaque */
  margin-top: 25px; /* Espaço acima */
  margin-bottom: 1px;
  color: #f3f3f3;
  background-color: #ffffff42;
}


/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .top-seller .item {
    justify-content: center;
  }
}

@media (max-width: 992px) {
  .main-banner .owl-banner {
    margin-top: 80px;
  }
  .categories .item {
    margin-bottom: 35px;
  }
  .create-nft .section-heading,
  .currently-market .section-heading {
    text-align: center;
  }
  .currently-market-item {
    width: 100%;
  }
  .create-nft .section-heading .line-dec,
  .currently-market .section-heading .line-dec {
    margin: 0 auto;
  }
  .create-nft .main-button,
  .currently-market .filters {
    text-align: center;
  }
  .currently-market .filters {
    margin-bottom: 30px;
    margin-top: -30px;
  }
  .create-nft p {
    margin-right: 0px;
  }
  .create-nft .first-item:after,
  .create-nft .second-item:after,
  .create-nft .first-item .number,
  .create-nft .second-item .number {
    display: none;
  }
  .create-nft .item {
    text-align: center;
    margin-top: 45px;
  }
  .discover-items #search-form {
    margin-bottom: 40px;
    margin-top: -30px;
  }
  .discover-items #search-form fieldset {
    margin-bottom: 30px;
  }
  .top-seller .item h6 {
    font-size: 16px;
  }
  .item-details-page .left-image {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  .current-bid select {
    float: none;
  }
  .author-page .author {
    justify-content: center;
  }
  .author-page .right-info {
    margin-left: 0px;
    margin-top: 30px;
  }
}

@media (max-width: 1200px) {
  
}

/* Definição para orange-button (baseado no nome, laranja #ff6600) */
.orange-button {
  font-size: 14px;
  color: #fff;
  background-color: #7453fc;
  border: 1px solid #7453fc;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.orange-button:hover {
  background-color: #fff;
  color: #7453fc;
  border: 1px solid #fff;
}

/* Logout button: estilo igual ao orange, mas padding menor para tamanho do texto + margem */
.logout-button {
  font-size: 14px;
  color: #fff;
  background-color: #ffb07c;
  border: 1px solid #ffb07c;
  padding: 10px 20px; /* Pequena margem no inicio/fim */
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.logout-button:hover {
  background-color: #fff;
  color: #ffb07c;
  border: 1px solid #fff;
}

.cancel-button {
  font-size: 14px;
  color: #fff;
  background-color: #fc562d;
  border: 1px solid #fc562d;
  padding: 12px 30px; /* Pequena margem no inicio/fim */
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cancel-button:after {
  width: 50%;
  height: 2px;
  background-color: #fff;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.cancel-button:hover {
  background-color: #fff;
  color: #fc562d;
  border: 1px solid #fff;
}

/* Retângulo para infos */
.info-rectangle {
  background-color: #37393c; /* Cinza */
  padding: 30px;
  border-radius: 20px;
  width: fit-content;
  margin: 0 auto; /* Centralizado */
  text-align: left;
}

/* Tabela: texto branco */
.table th, .table td {
  color: #fff !important; /* Branco, override fundo escuro */
}

.th-center {
  text-align: center !important; /* Centro só nos th com essa class */
}

/* Paginação como botões orange */
.pagination a.pagination-button {
  font-size: 14px;
  color: #fff;
  background-color: #ff6600;
  border: 1px solid #ff6600;
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 25px;
  transition: all .3s;
}

.pagination a.pagination-button:hover {
  background-color: #fff;
  color: #ff6600;
}

.pagination a.pagination-button.active {
  background-color: #fff;
  color: #ff6600;
  border: 1px solid #fff;
}

/* Mobile: tabela responsiva, quebrar texto */
@media (max-width: 768px) {
  .table-responsive {
    width: 100%;
    overflow-x: auto;
  }
  
  .table td {
    word-break: break-word; /* Quebra texto/links longos */
    white-space: normal; /* Permite quebra */
  }
}

/* Reduzir margin nas p do retângulo */
.info-p {
  margin-bottom: 5px; /* Pequeno espaçamento, remove o "enorme" */
}

/* Centralizar paginação */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* Espaçamento opcional, boa prática */
}

/* Strokes da tabela roxas */
.table th,
.table td {
  border-color: #7453fc !important; /* Roxo visível no fundo escuro */
}

.table thead th {
  border-bottom: 2px solid #7453fc !important; /* Linha mais grossa dividindo título/conteúdo */
}

.table tbody tr:last-child td {
  border-bottom-color: #7453fc !important; /* Última linha visível */
}

/* Controle dos botões de action */
.action-buttons {
  display: flex;
  gap: 10px; /* Espaço entre botões, em vez de margin-right */
  justify-content: center;
  flex-wrap: nowrap; /* Lado a lado por default */
}

/* Em telas menores, forçar column */
@media (max-width: 991px) {
  .action-buttons {
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap; /* Um em cima do outro */
  }
}

.playlist-create-button {
  font-size: 14px;
  color: #fff;
  background-color: #7453fc;
  border: 1px solid #7453fc;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.playlist-create-button:after {
  width: 78%;
  height: 2px;
  background-color: #fff;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.playlist-create-button:hover {
  background-color: #fff;
  color: #7453fc;
  border: 1px solid #fff;
}

.video-container {
  max-width: 560px; /* Limite máximo para tornar menor em telas grandes */
  margin: 0 auto 30px auto; /* Centraliza horizontalmente e adiciona espaçamento abaixo */
}

.video-container iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  box-sizing: border-box;
  object-fit: contain;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Faz os botões ocuparem largura total em mobile */
  gap: 20px; /* Espaçamento entre botões, otimizado para touch */
}

@media (min-width: 992px) {
  .button-container {
    flex-direction: row !important;
    justify-content: space-between; /* Create esquerda, Cancel direita nos extremos */
    align-items: center;
  }

  .playlist-create-button,
  .cancel-button {
    width: auto; /* Tamanho natural (do padding/texto), como o cancel atual */
  }

  #contact .playlist-create-button,
  #contact .cancel-button {
    width: auto !important;
    margin-top: 0 !important;
  }
}

/* Alinhamento para dropdown-toggle: bandeira + texto */
.dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important; /* Espaço entre bandeira e texto */
  justify-content: center !important; /* Centraliza no botão */
  white-space: nowrap !important; /* Impede quebra de linha no texto */
}

/* Para mobile: mantém alinhado quando nav vertical */
@media (max-width: 991px) {
  .dropdown-toggle {
    justify-content: center !important; /* Centraliza no menu vertical (não esquerda) */
  }
}

/* Alinhamento para itens do dropdown-menu: bandeira + texto na mesma linha */
.dropdown-menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important; /* Espaço entre bandeira e texto */
  justify-content: center !important; /* Centraliza no item */
  white-space: nowrap !important; /* Impede quebra de linha */
}

/* Para mobile: centraliza no menu vertical */
@media (max-width: 991px) {
  .dropdown-menu li a {
    justify-content: center !important;
  }
}

/* Reduzir font-size para texto de tradução (toggle e menu) */
#lang-toggle,
.dropdown-menu li a {
  font-size: 12px !important; /* Menor que 14px padrão */
}

/* No mobile: mantém tamanho padrão (não reduz) */
@media (max-width: 991px) {
  #lang-toggle,
  .dropdown-menu li a {
    font-size: 14px !important; /* Tamanho original do template */
  }
}

/* Impedir wrap em telas intermediárias (993px a 1200px) */
/* @media (min-width: 993px) {
  .header-area .main-nav {
    padding: 15px 10px !important;
  }
  .header-area .main-nav .logo {
    flex-basis: 30% !important;
  }
  .header-area .main-nav .nav li {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .header-area .main-nav .nav li a {
    font-size: 14px !important;
    padding: 8px 15px !important;
    white-space: nowrap !important;
  }
} */

/* Espaço vertical entre itens no dropdown-menu (desktop) */
.dropdown-menu li {
  margin-bottom: 10px !important; /* Espaço entre idiomas */
}

.dropdown-menu li:last-child {
  margin-bottom: 0 !important; /* Sem espaço extra no último */
}

/* Ajustes para mobile: centralização sem shift */
@media (max-width: 991px) {
  .header-area .main-nav .nav li.dropdown a.dropdown-toggle,
  .dropdown-menu li a {
    padding: 0 40px !important; /* Aumenta padding horizontal para centralizar img + texto sem shift, compensando seta */
    justify-content: center !important;
  }
}

/* Reforço para tamanho fixo nas bandeiras no mobile */
@media (max-width: 991px) {
  .header-area .main-nav .nav li.dropdown a.dropdown-toggle img,
  .dropdown-menu li a img {
    width: 20px !important;
    height: 15px !important;
    min-width: 20px !important;
    object-fit: contain !important;
  }
}

/* Reforço para centralização no dropdown-menu mobile */
@media (max-width: 991px) {
  .dropdown-menu li a {
    text-align: center !important; /* Reforça centralização de texto */
    box-sizing: border-box !important; /* Garante que padding fique dentro do width */
  }
}

/* Posicionar seta do dropdown absolutely para não interferir no flex center */
.dropdown-toggle {
  position: relative !important;
  padding-right: 30px !important; /* Espaço para a seta no right */
}

.dropdown-toggle::after {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Forçar tamanho fixo nas bandeiras SVGs para evitar scaling/expansion */
.dropdown-toggle img,
.dropdown-menu li a img {
  width: 20px !important;
  height: 15px !important;
  min-width: 20px !important; /* Impede min-width auto expandindo */
  object-fit: contain !important; /* Mantém aspect-ratio sem distorção */
}

.dark-bg-override {
  background-image: url(../images/dark-bg.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.dark-bg-override .section-heading .line-dec {
  background-color: #7453fc !important;
}

.main-bg-override {
  background-image: url(../images/main-bg.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.main-bg-override .section-heading .line-dec {
  background-color: #fff !important;
}