:root {
  --c-black: #111111;
  --c-gray-dark: #444;
  --c-gray-e5: #e5e5e5;
  --c-gray-9: #999;
  --c-gray-8: #888;
  --c-gray-7: #777;
  --c-gray-6: #444;
  --c-gray-4: #444;
  --c-gray-2: #222;
  --c-gray-1: #111;
  --c-white: #ffffff;
  --c-red: #c2172e;
  --c-blue: #242583;
  --c-gblue: #233683;
  --c-blue-link: #242583;
  --c-turquise-gray: #e7f0f2;
  --c-turquise-lite: #95cad5;
  --c-turquise-serius: #2e97ac;
  --c-green-serius: #559089;
  --c-blue-serius: #0d80ce;
  --c-colorbox: #478192;
  --c-colorbox-lite: #e7f0f2;
  --h-head: 76px;
  --w-body: 1310px;
}

body {
  margin: 0;
  color: var(--c-black);
  background-color: var(--c-black);
  font-family: roboto;
  overflow: hidden;
}
.bodyStarted {
  overflow-y: visible;
  overflow-x: hidden; /* margin-top: 62px;*/
}
.brand-vapes {
  display: flex;
  flex-direction: row;
}
.brand-vapes > a {
  margin-right: 16px;
}
@media (max-width: 640px) {
  .brand-vapes {
    flex-direction: column;
    align-items: center;
  }
  .brand-vapes > a {
    width: 100% !important;
  }
}
.showMob {
  display: none;
}
@media (max-width: 1024px) {
  .hidePad {
    display: none !important;
  }
}
@media (max-width: 540px) {
  .hideMob {
    display: none !important;
  }
  .showMob {
    display: block;
  }
}
.mt-64 {
  margin-top: 64px;
}
.mb-64 {
  margin-bottom: 64px;
}

.pt-64 {
  padding-top: 64px;
}
.pb-64 {
  padding-bottom: 64px;
}
.mt-0 {
  margin-top: 0px !important;
}
.mb-0 {
  margin-bottom: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}
.pb-0 {
  padding-bottom: 0px !important;
}

@media (max-width: 640px) {
  .mt-64 {
    margin-top: 0px;
  }
  .mb-64 {
    margin-bottom: 0px;
  }

  .pt-64 {
    padding-top: 0px;
  }
  .pb-64 {
    padding-bottom: 0px;
  }
}

/*   Logo + brillo  */

.logo {
  position: relative;
  width: 110px;
  height: 110px;
}
.logo > img,
.logo > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.logo > div {
  background-image: url(../img/logo_brillo.png);
  opacity: 0.8;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: -100px;
  overflow: hidden;
  animation: logo-brillo 4500ms linear 0s infinite;
}
.logoH2 {
  color: var(--c-gray-dark);
  margin: 48px 0 24px 0;
}
@keyframes logo-brillo {
  0%,
  46% {
    background-position-y: -100px;
  }
  50% {
    background-position-y: 0px;
  }
  54%,
  100% {
    background-position-y: 100px;
  }
}
@keyframes logo-brillo-big {
  0%,
  46% {
    background-position-y: -150px;
  }
  50% {
    background-position-y: 0px;
  }
  54%,
  100% {
    background-position-y: 150px;
  }
}
@media (max-width: 1280px) {
  .logo {
    position: relative;
    width: 96px;
    height: 96px;
  }
}
@media (max-width: 1024px) {
  .logoCompany {
    width: 88px;
    height: 88px;
    margin-bottom: 16px;
  }
}
@media (max-width: 768px) {
  .logoH2 {
    margin: 28px 0 24px 0;
  }
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.title {
  font-size: 44px;
  line-height: 48px;
  letter-spacing: 1px;
  font-weight: 500;
}
.titleProd {
  font-size: 35px;
  letter-spacing: -0.2px;
}
.subTitle {
  font-size: 30px;
  line-height: 34px;
  letter-spacing: 1px;
  font-weight: 600;
  padding-bottom: 4px;
}
.text {
  font-size: 21px;
  line-height: 38px;
  letter-spacing: 0.7px;
  font-weight: 300;
}
@media (max-width: 1700px) {
}
@media (max-width: 1024px) {
  .title {
    font-size: 40px;
  }

  .titleProd {
    font-size: 34px;
  }

  .subTitle {
    font-size: 26px;
  }
  .text {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 640px) {
  .title {
    font-size: 29.5px;
    line-height: 40px;
    letter-spacing: 0.6px;
  }
  .titleProd {
    font-size: 26px;
    letter-spacing: 0.1px;
  }
  .text {
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 1.2px;
  }
  .titleBody,
  .subTitle {
    font-size: 4.7vw;
    line-height: 7.1vw;
    letter-spacing: unset;
    font-weight: 500;
  }
  .subTitle {
    margin-top: -3vw;
    color: #666 !important;
  }
  .titleBody {
    font-size: 5.3vw;
    font-weight: 500;
  }
  .textBody {
    font-size: 4vw;
    line-height: 6.7vw;
    text-align: justify;
    letter-spacing: unset;
    font-weight: 400;
  }
  .textBodyColor {
    color: #555;
  }
}

.tUpper {
  text-transform: uppercase;
}
.tJustify {
  text-align: justify;
}
.tRegular {
  font-weight: 400;
}
.tMedium {
  font-weight: 500;
}
.tSemiB {
  font-weight: 600;
}

.textWhite {
  color: white;
}
.textGrayE5 {
  color: var(--c-gray-e5);
}
.textGray9 {
  color: var(--c-gray-9);
}
.textGray6 {
  color: var(--c-gray-6);
}
.textGray7 {
  color: var(--c-gray-7);
}
.textGray4 {
  color: var(--c-gray-4);
}
.textGray2 {
  color: var(--c-gray-2);
}
.textBlueLink {
  color: var(--c-blue-link);
}

.text3-1Xl {
  font-family: roboto;
  font-weight: 500;
  font-size: 28px;
  line-height: 41px;
  letter-spacing: 1px;
}
.text3Xl {
  font-family: roboto;
  font-weight: 300;
  font-size: 25.5px;
  line-height: 42px;
  letter-spacing: 1.3px;
}
.text2Xl {
  font-family: roboto;
  font-weight: 300;
  font-size: 22px;
  line-height: 38px;
  letter-spacing: 1px;
}

.textLink {
  font-family: roboto-condensed;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
}
.textLinkSm {
  font-family: roboto-condensed;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1px;
}
.textLinkFooter {
  font-family: roboto;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
}
.textBrands {
  font-family: roboto;
  font-weight: 300;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 1.2px;
}
@media (max-width: 1024px) {
  .text3-2Xl {
    font-size: 2.8vw;
    line-height: 3vw;
    letter-spacing: 0.01vw;
  }
  .textBrands {
    font-weight: 400;
    font-size: 1.9vw;
    line-height: 2.4vw;
    letter-spacing: 0.15vw;
  }
}
@media (max-width: 768px) {
  .textBrands {
    font-size: 22px;
    line-height: 21px;
    letter-spacing: 0.82px;
  }
}
@media (max-width: 540px) {
  .text3-1Xl {
    font-family: roboto;
    font-weight: 500;
    font-size: 5.5vw;
    line-height: 7.5vw;
    letter-spacing: 0.02vw;
  }
  .text3Xl {
    font-size: 4.8vw;
    line-height: 7vw;
    letter-spacing: 0.03vw;
  }
  .text2Xl {
    font-size: 4.4vw;
    line-height: 6.6vw;
    letter-spacing: 0.03vw;
    font-weight: 300;
  }
  .textLink {
    font-size: 3.8vw;
    letter-spacing: 0.2vw;
  }
  .textBrands {
    font-size: 3.8vw;
    line-height: 4.6vw;
    letter-spacing: 0.82px;
  }
  .textLinkFooter {
    font-size: 13px;
  }
}

/*  Buttons  */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 180px;
  height: 48px;
  color: white;
  border-radius: 5px;
  background-color: var(--c-black);
  font-family: roboto-condensed;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
  text-align: center;
  cursor: pointer;
  transition: transform 300ms ease-out;
}
.button:hover {
  transform: scale(1.05);
}
.button > p {
  margin-top: 2px;
}
@media (max-width: 640px) {
  .button:hover {
    transform: scale(1);
  }
}
.commonBt {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 47px;
  min-width: 220px;
  padding: 0 4px;
  text-align: center;
  background-color: #fff;
  border-radius: 15px;
  cursor: pointer;
  transition: transform 300ms;
}
.btInvert {
  background-color: #fff;
  border: 2px solid var(--c-blue-link);
}
.commonBt:hover {
  transform: scale(1.03);
}
.commonBt > p {
  transform: translateY(1px);
}
@media (max-width: 540px) {
  .commonBt {
    min-width: 42vw;
    height: 10vw;
    border-radius: 2.5vw;
  }
}

.buttonLearn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 180px;
  height: 48px;
  color: var(--c-blue);
  border-radius: 12px;
  border: 1px solid var(--c-blue);
  font-family: roboto;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  max-width: max-content;
  text-align: center;
  cursor: pointer;
  transition:
    background 300ms linear,
    color 300ms ease-out;
}
.buttonLearn:hover {
  background-color: var(--c-gblue);
  color: white;
}
.btLearnW {
  color: white !important;
  border: 1px solid white;
  padding: 0 20px;
}
.btLearnW:hover {
  background-color: white;
  color: var(--c-blue) !important;
}
.btLearnColor {
  color: white !important;
  background-color: var(--c-gblue);
  border: 1px solid var(--c-gblue);
}
.btLearnColor:hover {
  background-color: white;
  color: var(--c-blue) !important;
  border: 1px solid var(--c-blue);
}

.link {
  font-family: roboto-condensed;
  font-size: 16px;
  letter-spacing: 1.5px;
  font-weight: 300;
}

/*  Sec   */

.secComm {
  padding: 100px 20px 140px 20px;
  overflow: hidden;
  color: var(--c-gray-2);
  background-color: #fff;
  margin-top: -1px;
}
.secCommLast {
  padding-bottom: 0;
}
.secCommConte {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  max-width: var(--w-body);
}
.secCommConte > h2 {
  margin-bottom: 60px;
}
@media (max-width: 1600px) {
  .secComm {
    padding: 7vw 4vw 8vw 4vw;
  }
  .secCommLast {
    padding-bottom: 0;
  }
  .secCommConte > h2 {
    margin-bottom: 4.5vw;
  }
}
@media (max-width: 1024px) {
  .secComm {
    padding: 12.5vw 4vw;
  }
  .secCommLast {
    padding-bottom: 0;
  }
  .secCommConte > h2 {
    margin-bottom: 6vw;
  }
}
@media (max-width: 540px) {
  .secComm {
    padding: 16vw 2.5vw;
  }
  .secCommLast {
    padding-bottom: 0;
  }
  .secCommFull {
    padding: 1px 0px;
    background-color: #fff !important;
  }

  .secCommConte > h2 {
    margin-bottom: 12vw;
  }
  .mobileTitle > h2,
  .mobileTitle > h3 {
    font-size: 6.5vw;
    line-height: 7.5vw;
    letter-spacing: 0.02vw;
    font-weight: 500;
  }
}

/*   Section color  */

.secColor {
  background-image: url(../img/dragongly_bg_home.svg);
  background-position: top center;
  background-size: cover;
  background-color: #000;
  padding: 240px 20px 110px 20px;
  overflow: hidden;
}
.secColorConte {
  justify-content: space-around;
}
.colorImgConte {
  display: flex;
  justify-content: center;
  width: 50%;
  text-align: center;
}
.colorImgConte img {
  width: 100%;
}
.coin360Conte {
  position: absolute;
  bottom: 13%;
  left: 20.5%;
  border-radius: 999px; /*overflow: hidden;*/
  transform: rotate(4deg);
}
.secColorImgs {
  align-items: baseline;
}
.colorImgL {
  max-width: 580px;
  transform: translateY(-15px) translateX(-5px);
}
.colorImgR {
  max-width: 580px;
  transform: translateY(-12px) translateX(5px);
}

.colorTxL {
  max-width: 500px;
}
.colorTxR {
  max-width: 500px;
}
.colorTxR .item_img {
  display: none;
}
.secColorText {
  color: white;
}
.secColorText .colorImgL,
.secColorText .colorImgR {
  display: none;
}
@media (max-width: 1280px) {
  .secColor {
    padding-top: 200px;
  }
}
@media (max-width: 1024px) {
  .secColor {
    background-position: center;
    padding-top: 80px;
  }
  .secColorConte,
  .colorTxL,
  .colorTxR {
    flex-direction: column;
    align-items: center;
  }
  .secColorImgs {
    display: none !important;
  }
  .secColorText .colorImgL,
  .secColorText .colorImgR {
    display: block;
    width: 100%;
  }

  .colorImgConte {
    width: 100%;
  }

  .colorTxL {
    margin-top: 32px;
    margin-bottom: 100px;
  }
  .homeTxL > img {
    margin-bottom: -8px;
  }
  .colorTxR .item_img {
    display: flex;
  }
  .coin360Conte {
    left: 16%;
    bottom: 13%;
  }
}
@media (max-width: 540px) {
  .secColor {
    background-position: right center;
  }
  .secColor {
    padding: 12vw 5vw 16vw 5vw;
    background-position: center;
  }
  .colorTxL {
    margin-top: 8vw;
    margin-bottom: 10vw;
  }
  .homeTxL > img {
    margin-bottom: -16px;
  }

  .coin360Conte {
    left: 22%;
    bottom: 14%;
  }
  .colorTxR video {
    width: 46vw;
    height: 46vw;
  }
}

.secColorNft {
  background-image: url(../img/dragongly_bg_nft.svg);
}
.secColorCulti {
  background-image: url(../img/dragongly_bg_cultivation.svg);
}
.nftTx {
  flex-direction: column;
  align-items: center;
  max-width: 580px;
}
.nftTx > p {
  margin: 24px 0 44px 0;
}
.nftTx > a {
  width: fit-content;
  min-width: 260px;
  padding: 0 12px;
  margin: 0 auto;
}
.heroNftBts > form {
  display: flex;
}
.heroNftBts input {
  min-width: 400px;
}

.contactNft p {
  max-width: 760px;
  text-align: justify;
  font-weight: 300;
}
.contactNft p,
.contactBox {
  max-width: 860px !important;
}

@media (max-width: 768px) {
  .heroNftBts,
  .heroNftBts > form {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .heroNftBts input {
    width: 100%;
    min-width: 0;
  }
  .heroNftActions {
    margin-top: 2vw;
  }
  .heroNftBts img {
    margin-left: 4px;
  }
  .heroNftLinks .formLinks p {
    display: none;
  }
}
@media (max-width: 540px) {
  .contactNft p {
    padding: 0 2vw;
  }
}
@media (max-height: 740px) {
  /*.heroNftBts{display: none;}*/
}

/*    Brands GREEN   */

.secGreen {
  background-color: white;
}
.brandsGreen {
  background-color: var(--c-green-serius);
  color: #fff;
}
.brandsGray {
  background-color: #333;
}
.brandsGray .downoladsConte p {
  color: var(--c-gray-e5) !important;
}
@media (max-width: 540px) {
  .secGreen {
    padding: 0;
  }
  .brandsGreen {
    border-radius: 0;
  }
}

/*  Map Links */

.secMapLinks {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--c-black);
  padding: 90px 24px 100px 24px;
  background-color: white;
}
.mapLinks {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 720px;
  margin-top: 0px;
  text-align: center;
}
.mapLinksHome {
  background-color: rgba(0, 0, 0, 0.35);
  padding: 8px;
  border-radius: 12px;
}
.mapLinks a {
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mapLinksOld {
  width: 100%;
  margin-top: 48px;
}
.mapLinks img {
  height: auto;
  margin-bottom: 0px;
  cursor: pointer;
}
.mapLinks a {
  color: var(--c-black);
}
.mapLinks p {
  font-weight: 400;
}

.mapLH img {
  width: 180px;
  transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.mapLinksOld img {
  width: 160px;
  margin-bottom: 0px;
}
.mapLH p {
  color: white;
}
.mapLH a:hover img {
  transform: scale(1.05);
}
@media (max-width: 1280px) {
  .mapLinks {
    margin-top: 0px;
  }
  .mapLH img {
    width: 160px;
    height: auto;
  }
  .mapLinksOld {
    width: 100%;
    margin-top: 36px;
  }
}
@media (max-width: 1024px) {
  .mapLinksOld img {
    margin-top: -24px;
    width: 130px;
  }
  .mapLinksHome {
    background-color: transparent;
  }
}

@media (max-width: 768px) {
  .mapLinksOld {
    width: 100%;
    max-width: none;
  }
  .secMapLinks {
    padding: 80px 20px 120px 20px;
  }
  .secMapLinks > img {
    height: auto;
  }
  .mapLinks {
    flex-direction: column;
    align-items: center;
  }

  .bgMapsHome {
    background-image: url(../img/home_bg_0_mob.jpg);
  }
  .mapLH {
    flex-direction: row;
    max-width: 640px;
  }
}
@media (max-width: 640px) {
  .mapLinks {
    flex-direction: column;
  }
  .mapLinks a {
    padding-bottom: 4px;
  }
  .secMapLinks {
    padding: 80px 20px;
  }
  .mapLH {
    max-width: none;
    margin: 0;
  }
  .mapLinks img {
    width: 35vw;
    max-width: 165px;
    margin-top: 24px;
    margin-bottom: 2px;
  }
  .mapLinksOld {
    flex-direction: row;
  }
  .mapLinksOld a {
    margin: 0 8px;
  }
  .mapLinksOld img {
    width: 25vw;
    margin-bottom: 0;
  }
}

/*  NAV  */

.nav {
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  justify-content: right;
  align-items: center;
  color: white;
  padding: 30px;
  padding-right: 24px;
  transform-origin: right top;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.85) 15%,
    rgba(0, 0, 0, 0) 100%
  );
}
.navFade {
  animation: fade-in 350ms linear 250ms;
  animation-fill-mode: forwards;
}
.navConte {
  display: flex;
  align-items: center;
}
.navLink {
  padding: 2px;
  margin-right: 16px;
  text-transform: uppercase;
}
.navLinkIco {
  margin-right: 8px;
}
.navLinkIco > img {
  margin: 2px auto;
}
.navBt {
  padding: 10px 32px;
  border: 1px solid #fff;
  background-color: rgba(0, 0, 0, 0.3);
  transition: background 500ms;
}
.navBt:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
.navBt > p {
  color: #fff;
}
@media (max-width: 1280px) {
  /*.nav{transform: scale(.85)};*/
}
@media (max-width: 1024px) {
  .nav {
    transform: scale(1);
  }
}
@media (max-width: 640px) {
  .navConte {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 25px;
  }
  .nav {
    flex-direction: column;
    padding: 3.5vw 0 0 0;
  }
  .navLink {
    margin-right: 0;
    padding: 4px 3vw;
    margin: 0;
  }
  .navBt {
    padding: 2.2vw 6vw;
  }
  .navConteBts {
    margin-top: 3.2vw;
  }
  .navLinkIco {
    margin-left: 5vw;
  }
}

/* Popup   */

.popup {
  position: fixed;
  opacity: 0;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  padding: 0 16px;
  background-color: #111111;
  animation: legal-Fade 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 10ms;
  animation-fill-mode: forwards;
  z-index: 1000;
}
.popupConte {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 600px;
  height: 460px;
  border-radius: 10px;
  text-align: center;
  color: white;
  padding: 48px 24px;
  background-image: url(../img/img_bg_21_3_pop.jpg);
  background-color: #142501;
  background-position: center;
  background-size: cover;
}
.popClose {
  display: flex;
  align-items: center;
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: var(--c-black);
  border-radius: 999px;
  cursor: pointer;
  transform: scale(0.8);
}
.popLogo {
  width: 120px;
  height: auto;
  /*width: 200px;*/
}
.popTitle {
  font-size: 30px;
  line-height: 46px;
  margin: 0;
  margin-top: -36px;
  font-weight: 500;
}
@media (max-width: 640px) {
  .popupConte {
    height: 420px;
    margin-top: -40px;
  }
  .popLogo {
    width: 100px;
    margin-top: 0;
  }
  .popTitle {
    font-size: 24px;
    line-height: 33px;
  }
}
@keyframes legal-Fade {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/*    Brands GREEN   */

.text5Xl {
  font-family: roboto;
  font-weight: 400;
  font-size: 50px;
  line-height: 60px;
  letter-spacing: 0.7px;
}
@media (max-width: 540px) {
  .text5Xl {
    font-size: 7.6vw;
    line-height: 9.8vw;
    letter-spacing: 0.05vw;
  }
}

/*   Section brands  */

.secBrands {
  flex-direction: column;
}

.brandsItems {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: 100%;
  color: #e7e7e7;
}
.brandItem {
  display: flex;
  align-items: flex-end;
  height: 290px;
  border-radius: 20px;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e9e9e9;
}
.brandsGreen .brandItem {
  cursor: default;
  border: none;
}

.brandItem > a {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}
.brandConte {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 12px;
  transition: opacity 300ms linear 0ms;
}
.brandConte:hover {
  opacity: 1;
}
.ItemVidMob {
  display: none;
}
.item_show {
  display: none;
}
@media (max-width: 1340px) {
  .brandsItems {
    gap: 2.5vw;
  }
  .brandItem {
    height: 20vw;
  }
  .brandItemVid,
  .brandItemVid > video {
    height: 34.5vw;
  }
}
@media (max-width: 1024px) {
  .brandConte {
    height: 36%;
    opacity: 1;
    transition: none;
    padding: 8px;
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.65) 75%,
      rgba(0, 0, 0, 0) 100%
    );
  }
  .brandItem {
    height: 20vw;
  }
}

@media (max-width: 768px) {
  .ItemVidMob {
    display: block;
  }
  .ItemVidDesk {
    display: none;
  }
  .brandsItems {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brandItem {
    height: 30vw;
  }
  .brandConte {
    height: 30%;
  }
  .item_hide {
    display: none;
  }
  .item_show {
    display: block;
  }
}
@media (max-width: 540px) {
  .secBrands > h2 {
    display: none;
  }
  .brandItemVid {
    /*grid-row: span 4 / span 4;*/
    grid-row: span 3 / span 3;
  }
  .brandConte {
    height: 10vw;
    background: #222;
  }

  .brandItem {
    border-radius: 0;
    height: 34vw;
    border: none;
  }
  .brandsItems {
    gap: 1px;
  }
}

.brandBg0 {
  background-image: url(../img/home_pict_5_2.jpg);
}
.brandBg1 {
  background-image: url(../img/home_grid_1.jpg);
}
.brandBg2 {
  background-image: url(../img/home_grid_2.jpg);
}
.brandBg3 {
  background-image: url(../img/home_grid_3.jpg);
}
.brandBg4 {
  background-image: url(../img/home_grid_4.jpg);
}
.brandBg5 {
  background-image: url(../img/home_grid_5.jpg);
}
.brandBg6 {
  background-image: url(../img/home_grid_6.jpg);
}
.brandBg7 {
  background-image: url(../img/home_pict_10.jpg);
}
.brandBg8 {
  background-image: url(../img/home_grid_8.jpg);
}
.brandBg9 {
  background-image: url(../img/home_grid_9.jpg);
}
.brandBg10 {
  background-image: url(../img/home_pict_6.jpg);
}
.brandBg11 {
  background-image: url(../img/home_pict_13.jpg);
}
.brandBg12 {
  background-image: url(../img/dragonfly_services_01.jpg);
}
.brandBg13 {
  background-image: url(../img/home_pict_11.jpg);
}
.brandBg14 {
  background-image: url(../img/home_pict_12.jpg);
}
.brandBg15 {
  background-image: url(../img/home_pict_15.jpg);
}
.brandBg16 {
  background-image: url(../img/home_pict_16.jpg);
}
.brandBg17 {
  background-image: url(../img/home_pict_17.jpg);
}
.brandBg18 {
  background-image: url(../img/home-grid-18.jpg);
}
.brandBg19 {
  background-image: url(../img/home-grid-19.jpg);
}

.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 6;
}
.order-5 {
  order: 5;
}
.order-6 {
  order: 4;
}
.order-7 {
  order: 7;
}
.order-8 {
  order: 8;
}
.order-9 {
  order: 9;
}
@media (max-width: 640px) {
  .order-6 {
    order: 6;
  }
  .order-4 {
    order: 4;
  }
}

/*  GRIS VIDEO  */

.video {
  width: auto;
  height: 100%;
}

/* Cultivatio VIDEO  */
.secGreenCulti {
  background-color: #559070;
}

.video-culti-mob {
  display: none;
}
@media (max-width: 640px) {
  .video-culti-desk {
    display: none;
  }
  .video-culti-mob {
    display: block;
  }
}

.slideVideoContainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  height: 100%;
}
.CultiVideoWraper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50vw;
  height: 35vw;
  max-width: 1200px;
  max-height: 700px;
  border-radius: 35px;
  border: 12px solid #68b25b;
  overflow: hidden;
  background-color: #144911;
}
.CultiVideoWraper > video {
  width: auto;
  height: 100%;
}
@media (max-width: 1280px) {
  .CultiVideoWraper {
    width: 44vw;
    height: 40vw;

    border-width: 13px;
  }
}
@media (max-width: 1024px) {
  .slideVideoContainer {
    width: 100%;
    height: 0;
  }
  .CultiVideoWraper {
    position: absolute;
    bottom: 35px;
    width: 88%;
    height: 540px;
  }
}
@media (max-width: 768px) {
  .CultiVideoWraper {
    bottom: 35px;
    width: 640px;
    height: 410px;
    border-width: 8px;
  }
}
@media (max-width: 640px) {
  .CultiVideoWraper {
    bottom: 0px;
    width: 100%;
    height: 51vh;
    border: none;
    border-radius: 0;
  }
}

/*   section text - Cultivation   */

.itemText {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 32px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.itemText .sealOrganic {
  width: 300px;
  height: auto;
  margin-bottom: 48px;
}
.itemStrains {
  padding-top: 0;
  text-align: center;
  margin-top: -32px;
}

@media (max-width: 768px) {
  .itemStrains {
    margin-top: 0;
  }
}
@media (max-width: 640px) {
  .itemText {
    padding: 60px 20px;
  }
  .itemText .sealOrganic {
    width: 260px;
  }
  .itemText .text {
    padding: 0 12px;
  }
  .itemStrains {
    padding-top: 0;
    padding-bottom: 24px;
  }
  .itemStrains > p {
    text-align: center;
  }
}

/*   Community   */

.secCommunity {
  width: 100%;
  background-color: white;
}
.commuLogo {
  width: 150px;
  height: 150px;
}
.commuLogo > div {
  animation: logo-brillo-big 5000ms linear 0s infinite;
}
.commuConte {
  width: 100%;
  max-width: 1440px;
  display: flex;
  justify-content: space-between;
  padding: 96px 32px;
  margin: 0 auto;
  text-align: center;
}
.commuConte > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
}
.commuGrid {
  width: 100%;
  height: 53vw;
  background-size: 100%;
  background-image: url(../img/community_grid.jpg);
}

@media (max-width: 1280px) {
  .commuConte {
    flex-direction: column;
    align-items: center;
    padding: 40px 16px;
  }
  .commuConte > div:first-of-type {
    margin-bottom: 100px;
  }
}
@media (max-width: 768px) {
  .commuLogo {
    width: 125px;
    height: 125px;
  }
  .logoH2 {
    margin: 28px 0 24px 0;
  }
  .commuConte > div:first-of-type {
    margin-bottom: 80px;
  }
  .commuGrid {
    height: 119vw;
    background-image: url(../img/community_grid_mob.jpg);
  }
}
@media (max-width: 640px) {
  .commuLogo {
    width: 115px;
    height: 115px;
  }
  .logoH2 {
    margin: 28px 0 20px 0;
  }
  .commuConte {
    padding: 40px 32px 56px 32px;
  }
}

/*   Company   */

.companyLogo {
  width: 140px;
  height: 140px;
}
.companyLogo > div {
  animation: logo-brillo-big 5000ms linear 0s infinite;
}
.txComp {
  margin-top: 40px;
  padding-bottom: 16px;
}
.btComp {
  margin-top: 16px;
  margin-bottom: 12px;
  padding: 0 16px 0 12px;
}
.btComp > img {
  margin-right: 10px;
}
@media (max-width: 768px) {
  .companyLogo {
    width: 125px;
    height: 125px;
  }
}
@media (max-width: 640px) {
  .txComp {
    margin-top: 32px;
  }
}

/* Arrow Up  */

.arwUp {
  opacity: 0;
  position: fixed;
  right: 40px;
  bottom: 55px;
  transform: rotate(-90deg);
  animation: fade-in 600ms linear;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  /*0%{opacity: 0;}*/
  100% {
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  .arwUp {
    bottom: 60px;
    right: 30px;
    display: none;
  }
}

/*  FOOTER   */
.discord {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
}
footer {
  position: relative;
  width: 100%;
  background-color: var(--c-gray-2);
  display: flex;
  justify-content: center;
  padding-top: 100px;
}
.footerConte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  padding-bottom: 24px;
  color: var(--c-gray-e5);
}
.footerNav {
  margin: 16px 0;
}
.footerNav p {
  color: var(--c-gray-e5);
}
.footerSub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-top: 16px;
  padding-bottom: 40px;
  border: 0;
  border-bottom: 1px solid var(--c-gray-9);
  margin-bottom: 24px;
}
.footerSub > div > p {
  padding: 4px 0;
}
.footerSub a {
  padding-top: 4px;
}
.footerText {
  font-family: roboto;
  font-size: 15px;
  font-weight: 400;
}
.footTw {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.footTw > img {
  margin-right: 4px;
}
.footerDisc {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -120px;
  right: 36px;
  z-index: 102;
}
.footerDisc img {
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
}
.footerIcons {
  display: flex;
}
.footerIcons > a {
  margin-left: 8px;
  margin-right: 8px;
}
.labelDisc {
  width: fit-content;
  position: fixed;
  bottom: 24px;
  right: 24px;
  white-space: nowrap;
  color: #ffffff;
  mix-blend-mode: difference;
  z-index: 101;
  cursor: default;
}
.legal {
  display: none;
}
.linkLegal {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.linkLegal > div {
  width: 7px;
  height: 7px;
  background-color: var(--c-gray-e5);
  margin-right: 8px;
  border-radius: 100%;
}
@media (max-width: 720px) {
  footer {
    padding: 0;
    padding-top: 80px;
    padding-bottom: 48px;
    margin-top: 0;
    padding-top: 12.5vw;
  }
  .footerText {
    font-size: 13px;
    letter-spacing: 0;
  }
  .footerConte {
    padding: 0;
  }
  .footerSub {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 24px;
    text-align: center;
  }
  .footerDisc {
    right: 20px;
    bottom: 24px;
  }

  .labelDisc {
    bottom: 16px;
    right: 8px;
  }
  .legal {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 40px 0 24px 0;
    align-items: center;
    background-color: var(--c-gray-1);
  }
  .linkLegal {
    margin: 0 0 16px 0;
  }
}
@media (max-width: 540px) {
  footer {
    padding-top: 18vw;
  }
}

/* Nav Arrows */

.slideArrows {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
}
.slideArrows > div:first-of-type {
  transform: scaleX(-1);
}
.slideArrow {
  width: 58px;
  height: 58px;
  margin-top: -29px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  opacity: 0.75;
  transition: opacity 500ms;
  cursor: pointer;
}
.slideArrow:hover {
  opacity: 1;
}
@media (max-width: 1280px) {
  .slideArrow {
    width: 48px;
    height: 48px;
  }
}
@media (max-width: 1024px) {
  .slideArrow {
    margin-top: 16px;
  }
}
@media (max-width: 640px) {
  .slideArrows {
    display: none;
  }
}
.slideBgHome {
  background-image: url(../img/dragonfly_hero_home_4k.jpg);
}
.slideBgDown {
  background-image: url(../img/dragonfly_hero_downloads_4k.jpg);
}
.slideBgComp {
  background-image: url(../img/hero_5_1_4k.jpg);
}
.slideBg0 {
  background-image: url(../img/hero_0_4k.jpg);
}
.slideBg1 {
  background-image: url(../img/hero_1_4k.jpg);
}
.slideBg2 {
  background-image: url(../img/hero_3.jpg);
}
.slideBg3 {
  background-image: url(../img/hero_4.jpg);
}
.slideBg4 {
  background-image: url(../img/hero_2_4k.jpg);
}
.slideBg5 {
  background-image: url(../img/hero_5_1_4k.jpg);
}
@media (max-width: 1920px) {
  .slideBgHome {
    background-image: url(../img/dragonfly_hero_home.jpg);
  }
  .slideBgDown {
    background-image: url(../img/dragonfly_hero_downloads.jpg);
  }
  .slideBgComp {
    background-image: url(../img/hero_5_1.jpg);
  }
  .slideBg0 {
    background-image: url(../img/hero_0.jpg);
  }
  .slideBg1 {
    background-image: url(../img/hero_1.jpg);
  }
  .slideBg2 {
    background-image: url(../img/hero_3.jpg);
  }
  .slideBg3 {
    background-image: url(../img/hero_4.jpg);
  }
  .slideBg4 {
    background-image: url(../img/hero_2.jpg);
  }
  .slideBg5 {
    background-image: url(../img/hero_5_1.jpg);
  }
}
@media (max-width: 1280px) {
  .slideBg0 {
    background-image: url(../img/hero_0_lap.jpg);
  }
  .slideBg1 {
    background-image: url(../img/hero_1_lap.jpg);
  }
  .slideBg2 {
    background-image: url(../img/hero_3_lap.jpg);
  }
  .slideBg3 {
    background-image: url(../img/hero_4_lap.jpg);
  }
  .slideBg4 {
    background-image: url(../img/hero_2_lap.jpg);
  }
  .slideBg5 {
    background-image: url(../img/hero_5_1.jpg);
  }
}
@media (max-width: 1024px) {
  .slideBg0 {
    background-image: url(../img/hero_0_mob.jpg);
  }
  .slideBg1 {
    background-image: url(../img/hero_1_mob.jpg);
  }
  .slideBg2 {
    background-image: url(../img/hero_3_mob.jpg);
  }
  .slideBg3 {
    background-image: url(../img/hero_4_mob.jpg);
  }
  .slideBg4 {
    background-image: url(../img/hero_2_mob.jpg);
  }
  .slideBg5 {
    background-image: url(../img/hero_5_mob.jpg);
  }
  .slideBgHome,
  .slideBgDown {
    background-image: url(../img/dragonfly_hero_home_mob.jpg);
    background-position: bottom center;
    background-size: 120%;
  }
  .slideBgComp {
    background-image: url(../img/hero_5_mob.jpg);
    background-position: bottom center;
    background-size: 120%;
  }
}
@media (max-width: 768px) {
}
@media (max-width: 540px) {
  .slideBgHome,
  .slideBgDown {
    background-image: url(../img/dragonfly_hero_home_mob.jpg);
    background-size: cover;
  }
}

/* Scroll */

body::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  cursor: pointer;
}
body::-webkit-scrollbar-thumb {
  background: #bbb;
}
body::-webkit-scrollbar-track {
  background: var(--c-gray-1);
}

/*  MAP  */

/* Estilo para el icono personalizado */
.leaflet-marker-icon.red-dragonfly-marker {
  /* Este estilo se aplica al contenedor del icono */
  background-color: #c2172e;
  border-color: #a01323; /* Un borde un poco más oscuro para profundidad */
}
/* El AwesomeMarker ya maneja la punta, pero si fuera necesario ajustarla: */
.awesome-marker-icon.red-dragonfly-marker .arrow {
  border-top-color: #c2172e;
}
/* Estilos del Modal */
.modal {
  display: none;
  position: fixed;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}
.modal-header {
  display: flex;
  align-items: center;
  width: 100%;
}
.modal-header-conte {
  width: 100%;
}
.modal-header h2 {
  font-size: Roboto;
  font-weight: 400;
  color: #c7c7c7;
  margin-top: 6px;
  margin-left: 4px;
}
@media (max-width: 1280px) {
  .modal-header img {
    width: 96px;
    height: 96px;
  }
}
@media (max-width: 540px) {
  .modal-header img {
    width: 88px;
    height: 88px;
  }
  .modal-header h2 {
    font-size: 18px;
    margin-left: 6px;
  }
}
.modal-content {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #222222;
  border: 1px solid #000;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
@media (max-width: 1280px) {
  .modal-content {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
  }
}
@media (max-width: 540px) {
  .modal-content {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
  }
}
.close-button {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0px;
  right: 12px;
  color: #aaaaaa;
  font-size: 28px;
  font-weight: 500;
  transition: color 0.2s;
  z-index: 1;
}
.close-button p {
  text-transform: uppercase;
  font-size: 10.5px;
  margin-left: 4px;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding-top: 3px;
}
.close-button:hover,
.close-button:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* Estilos de Leaflet Map */
#map {
  flex-grow: 1;
  width: 100%;
  background-color: black;
}

/* Estilos de botones de estado */
.state-buttons {
  display: flex;
  gap: 4px;

  margin-top: 6px;
}
.state-button {
  padding: 2px 10px;
  cursor: pointer;
  background-color: transparent;
  transition: all 0.3s;
  text-transform: uppercase;
  font-family: roboto-condensed;
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px;
  border: none;
  color: white;
}
.state-button.active {
  background-color: white;
  color: #111;
  font-weight: 499;
}
.state-button:hover:not(.active) {
  background-color: #c2172e;
}

.retail-buttons {
  display: flex;
}
.retail-buttons > * {
  margin: 0 12px;
}
@media (max-width: 768px) {
  .retail-buttons {
    flex-direction: column;
  }
  .retail-buttons > * {
    margin: 12px 0;
  }
}

.secMapButtons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.secMapButtons > img {
  border-radius: 16px;
  margin: 0 auto !important;
  max-width: 100%;
  height: auto;
}
.secMapButtons > h2 {
  margin-top: 40px !important;
  margin-bottom: 0px !important;
}

.secMapButtons > p {
  margin: 24px 0;
}
.secMapButtons > .retail-buttons img {
  transform: scale(0.8);
}
.secMapButtons a {
  padding-left: 16px;
  padding-right: 16px;
}
@media (max-width: 540px) {
  .secMapButtons > h2 {
    margin-top: 32px !important;
    margin-bottom: 0px !important;
  }
  .secMapButtons > p {
    margin: 20px 0 8px 0;
  }
  .secMapButtons > .retail-buttons img {
    transform: scale(0.85);
  }
}
.leaflet-popup-content {
  font-family: Poppins;
  font-weight: 400;
  letter-spacing: 0.3px;
  font-size: 14.5px;
  line-height: 19px;
}
.leaflet-popup-content p {
  margin: 0;
  margin-top: 6px;
}
.leaflet-popup-content span {
  /*font-style: normal !important;*/
  font-weight: 500;
  margin-top: 4px;
}
.leaflet-popup-content h3 {
  padding-bottom: 3px;
  font-size: 15.5px;
  color: #000;
}
.leaflet-popup-content a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Contenedor del buscador */
.search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #2a2a2a;
  padding: 4px 2px 4px 8px;
  border-radius: 8px;
  border: 1px solid #444;
}

/* El input de texto */
#zipInput {
  background: transparent;
  border: none;
  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  outline: none;
  width: 120px;
}

#zipInput::placeholder {
  color: #777;
}

/* Botón de búsqueda (estilo minimalista) */
.search-go-btn {
  background-color: #c2172e;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s;
}

.search-go-btn:hover {
  background-color: #e31b36;
}
.header-tools {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding-right: 16px;
}
@media (max-width: 540px) {
  .header-tools {
    flex-direction: column;
    align-items: flex-start;
  }
  .modal-header-conte h2,
  .close-button p {
    display: none;
  }
  .state-buttons {
    margin-top: 0;
    margin-bottom: 9px;
  }
}