/* The custom css for the QuantumDrive.io Site - !important calls to override css from the template css files.
---------------------------------------------------------------------------------------------------------------------------- */
/* *** this is for mobile or desktop - to show one or the other only *** */
#content-desktop {display: block;}
#content-mobile {display: none;}

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

#content-desktop {display: none;}
#content-mobile {display: block;} }

/* this is to make links dk red #980a00 and underline with hover */
/* a:hover { text-decoration: underline !important; } */
/* a { color: #eb4a6e !important; } */

/* ============================================================
   QuantumDrive.io - Custom CSS
   (page break row)
   ============================================================ */

/* QD Mini Image Break Strip */
.qd-mini-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:6px 0;
}

.qd-mini{
  width:116px;    /* was 28 */
  height:116px;    /* was 28 */
  border-radius:18px;    /* was 8 */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  border: 1px solid rgba(255,224,101,.18);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  text-decoration:none;
}

.qd-mini img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  display:block;
  filter: saturate(1.02) contrast(1.02);
  transition: transform .18s ease, filter .18s ease;
}

.qd-mini:hover,
.qd-mini:focus-visible{
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
  border-color: rgba(255,224,101,.55);
  outline: none;
}

.qd-mini:hover img,
.qd-mini:focus-visible img{
  transform: scale(1.04);
  filter: saturate(1.18) contrast(1.12) brightness(1.06);
}

/* Optional: visual divider lines */
.qd-mini-strip::before,
.qd-mini-strip::after{
  content:"";
  flex:1;
  height:1px;
  background: linear-gradient(to right, rgba(255,224,101,0), rgba(255,224,101,.25), rgba(255,224,101,0));
  margin: 0 12px;
}
.qd-mini-strip{
  gap:12px;          /* a touch more spacing */
  padding:10px 0;    /* a bit more breathing room */
}

.qd-mini:hover,
.qd-mini:focus-visible{
  transform: translateY(-3px) scale(1.06); /* slightly less aggressive scale at bigger size */
}


/* ============================================================
   QuantumDrive.io - Custom CSS
   (Watermark overlay for nft.html large view)
   ============================================================ */

/* ============================
   NFT Watermark Overlay
   ============================ */
/* 3 diagonal watermark lines with ~40px clear gap between them */
.wm-wrap{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  color: rgba(255,255,255,0.9); /* ensures watermark is visible regardless of inherited text color */
  --wm-gap: 40px;       /* the visible gap you want */
  --wm-angle: -24deg;
  --wm-opacity: 0.12;
}

.wm-wrap img{
  display: block;
  width: 100%;
  height: auto;
}

.wm-wrap::after{
  content: attr(data-watermark);
  position:absolute;
  inset:-30%;
  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:clamp(20px, 3.8vw, 56px);
  line-height: 1;                 /* important: predictable text height */
  opacity: var(--wm-opacity);

  transform:rotate(var(--wm-angle));
  pointer-events:none;
  user-select:none;
  white-space:nowrap;

  /* offset = (1em text height) + 40px gap => lines will NOT overlap */
  text-shadow:
    0 calc(-1em - var(--wm-gap)) 0 currentColor,
    0 calc( 1em + var(--wm-gap)) 0 currentColor;

  /* Use normal blend for predictable visibility across all images */
  mix-blend-mode: normal;
}



/* *** this makes Read More text float r *** */
div.text_readmore_float_r {
	margin: 0px 46px 10px 0px !important;
	float: right !important; }
	
/* *** this makes an img float r and the text wrap *** */
div.img_margin_copy_float_r {
	margin: 10px 0px 10px 20px !important;
	float: right !important; }
	
div.img_margin_copy_float_l {
	margin: 10px 20px 10px 0px !important;
	float: left !important; }

/* Begin Silver NFT Calculator */
    /* General Silver NFT Calculator body styling */
    .container_form {
      font-family: Arial, sans-serif;
      background-color: #fdf8e4;
      margin: 0;
      padding: 50px; /* Add padding to see the shadow effect properly */
    }

    /* Outer Wrapper for the Form (Gold Border + Drop Shadow) */
    .form-wrapper {
      border: 2px solid gold; /* 2px gold stroke */
      border-radius: 8px; /* Rounded corners */
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.7); /* Drop shadow */
      background-color: #fdf8e4; /* Match the background of the form */
      overflow: hidden; /* Prevent content from overflowing the rounded corners */
    }

    /* Container for the form */
    .container_wrap_form {
      font-size: 22px;
      color: #000000;
      padding: 20px; /* Spacing inside the form */
      box-sizing: border-box;
    }

    .form-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }

    /* Left block styling (for inputs) */
    .form-left {
      flex: 1 1 65%; /* 3/4 the width */
	  width: 200px;
      padding: 10px;
      box-sizing: border-box;
    }

    /* Right block styling (for output) */
    .form-right {
      flex: 1 1 35%; /* Half the width */
      border: 2px solid black; /* 2px black stroke */
      border-radius: 10px; /* Rounded corners */
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.7); /* Drop shadow */
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fef3ca;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px 5px 5px 5px; /* Match the bottom corners */
    }

    /* Styling for form inputs */
    .form-left input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    /* Styling for labels */
    .form-left label span {
      display: block;
      margin-bottom: 5px;
      font-size: 14px;
      color: #000000;
    }

    /* Reset Button Styling */
    .reset-button {
      margin-top: 10px;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      background-color: #ffcc00;
      color: #000;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .reset-button:hover {
      background-color: #e6b800; /* Darker gold on hover */
    }

    /* Output styling */
    .output {
      font-size: 48px;
      font-weight: bold;
      color: #0000bb;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .form-left,
      .form-right {
        flex: 1 1 100%; /* Full width on smaller screens */
      }
    }
    /* End Silver NFT Calculator */


/* *** back to top scroller - Section Yellow Titles for Back To Top Link *** */
.link_yel_bkgrnd_back_to_top {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
    text-align: center;
	background-color: #FFF6D5; 
	width: 85px;
	margin-bottom: 5px !important;
	border: 1px solid #2f9ad1 !important; }
	
/* *** this makes a div float r inside a div *** */
div.div_float_r_rl {
	width: 32px !important;
	margin-left:auto !important; 
	margin-right:0 !important;
	float: right !important; }
	

/* ***=======@@@@@@@~~~|||||||>>> #### BEGIN #### <<<|||||||~~~@@@@@@@=======*** */
/* *** Steampunk Personal Journey Pages - chatgpt generated *** */

/* General Body Styling with Full-Page Background */
.container_wrap {
  background-image: url('https://quantumdrive.io/images/cnfts/fitmc_01/fitm01_journey_outside_bkgrnd.jpg'); /* Replace with a steampunk background */
  background-size: cover;
  /* background-attachment: fixed; */
  background-attachment: scroll;
  background-position: center;
  /* margin-top: 20px !important; */
  /* margin-bottom: 20px !important; */
  padding: 40px;
  font-family: 'Cormorant Garamond', serif;
  /* color: #4b3621; */
  color: #ffecbc;
  /* line-height: 8; */
  line-height: 1;
}

/* Parchment Paper Container */
.container1 {
  max-width: 900px;
  margin: 50px auto;
  padding: 20px;
  background-image: url('https://quantumdrive.io/images/cnfts/fitmc_01/fitm01_journey_inside_bkgrnd.jpg'); /* Replace with your parchment texture */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #daa520;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

/* Header Styling */
.title1 {
  font-size: 3.2em;
  /* color: #b37333; */
  color: #ffcf53;
  font-family: 'Cinzel Decorative', serif;
  text-align: center;
  text-shadow: 4px 4px 18px rgba(0, 2, 2, 1);
  /* text-shadow: 2px 2px 10px rgba(0, 1, 1, 0.6); */
  letter-spacing: 3px;
  margin-bottom: 20px;
  border-bottom: 3px solid #b37333;
  padding-bottom: 10px;
}

/* Paragraph Styling */
.div_paragraph1 {
  /* font-size: 1.2em; */
  font-size: 1.6em;
  margin-bottom: 20px;
  /* color: #4b3621; */
  color: #ffecbc;
  text-align: justify;
  position: relative;
  padding: 20px;
  z-index: 1;
}

/* First Letter for Fancy Look */
.firstletter::first-letter {
  font-size: 2.0em;
  /* font-weight: bold; */
  font-weight: normal;
  /* color: #b37333; */
  color: #daa520;
  float: left;
  margin-right: 10px;
  line-height: 1;
  font-family: 'Cinzel', serif;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

/* Decorative Horizontal Lines */
.decorative-line {
  /* border-top: 4px solid #b37333; */
  border-top: 4px solid #daa520;
  margin: 5px auto;
  width: 80%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
}

/* Button Styling */
.button1 {
  display: block;
  width: 180px;
  margin: 30px auto;
  padding: 12px 20px;
  background-color: #b37333;
  color: white;
  text-align: center;
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-weight: bold;
  border-radius: 8px;
  border: 2px solid #e0c98b;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease, background-color 0.3s ease;
}
.button1:hover {
  background-color: #8a5a26;
  transform: scale(1.1);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.3);
}

/* *** Steampunk Personal Journey Pages - chatgpt generated *** */
/* ***=======@@@@@@@~~~|||||||>>> #### END #### <<<|||||||~~~@@@@@@@=======*** */



/* ***=======@@@@@@@~~~|||||||>>> ##################### BEGIN #################### <<<|||||||~~~@@@@@@@=======*** */
/* ***=======@@@@@@@~~~|||||||>>> top collection 5 across - 2 rows - Desktop Only BODY ELEMENTS <<<|||||||~~~@@@@@@@=======*** */

.top_pg_collection_5_across {
	width: 100% !important; }
	
.top_pg_collection_5_across_wrap {
	width:100%;
	border:0px red solid;
	clear:both; 
	overflow:hidden; }
	
.top_pg_collection_5_across_single {
	width:20%;
	border:0px blue solid;
	text-align:center;
	float:left; }
	
/* ***=======@@@@@@@~~~|||||||>>> top collection 2 across - 5 rows - Mobile Only BODY ELEMENTS <<<|||||||~~~@@@@@@@=======*** */

.top_pg_collection_2_across_mobile {
	width: 100%; }
	
.top_pg_collection_2_across_wrap_mobile {
	width:100%;
	border:0px red solid;
	clear:both; 
	overflow:hidden; }
	
.top_pg_collection_2_across_single_mobile {
	width:100%;
	border:0px blue solid;
	text-align:center; }
	
/* ***=======@@@@@@@~~~|||||||>>> top collection 5 across - 2 rows - BODY ELEMENTS <<<|||||||~~~@@@@@@@=======*** */
/* ***=======@@@@@@@~~~|||||||>>> ##################### END #################### <<<|||||||~~~@@@@@@@=======*** */ 

#awwwards {
	position: fixed;
	top: 0;
	right: 0;
	width: 90px;
	height: 135px;
	text-indent: -666em;
	overflow: hidden;
	z-index: 999;
	background-repeat: no-repeat;
	background-size: 90px 135px;
	background-image: url(../img/root/awwwards_honorable_white.png);
}

#wpselected {
	position: fixed;
	top: 0;
	left: 0;
	width: 90px;
	height: 90px;
	text-indent: -666em;
	overflow: hidden;
	z-index: 999;
	background-repeat: no-repeat;
	background-size: 90px 90px;
	background-image: url(../img/root/wpselected-badge-left.png);
}

.vlt-custom--9135 .typed-cursor {
	color: #ee3364;
}

.vlt-custom--0531 {
	position: absolute;
	left: 130px;
	bottom: 15%;
	font-size: 35px;
	color: #0b0b0b;
}

.vlt-custom--9503::after {
	content: '';
	position: absolute;
	top: 50%;
	left: calc(100% + 30px);
	height: 1px;
	width: 0;
	max-width: 60px;
	background-color: #1f0e49;
	transition: width .5s 1s ease-in-out;
}

.vlt-is-page-loaded .vlt-custom--9503::after {
	width: 100%;
}

.vlt-custom--5832 {
	position: relative;
	margin-right: 50px;
	z-index: 1;
}

.vlt-custom--5832::after {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 100%;
	height: 100%;
	border: 10px solid #00bec5;
	z-index: -1;
}

.vlt-custom--5832 {
	position: relative;
	margin-right: 50px;
	z-index: 1;
}

.vlt-custom--5832::after {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 100%;
	height: 100%;
	border: 10px solid #00bec5;
	z-index: -1;
}

.vlt-custom--3103 .vlt-services-box__link {
	background-color: rgba(0,0,0,.25);
}

.vlt-custom--3103 .vlt-highlight {
	background: linear-gradient(to top, transparent 5%, rgba(0,0,0,.25) 5% , rgba(0,0,0,.25) 37%, transparent 37%);
}

.vlt-custom--4111 .vlt-swiper-pagination--style-1 span {
	background-color: #fff;
}

.vlt-custom--4111 .vlt-swiper-button-prev--style-2,
.vlt-custom--4111 .vlt-swiper-button-next--style-2 {
	color: #fff;
}

.vlt-custom--6632 {
	margin-top: -225px;
}

.vlt-custom--9917 .vlt-social-icons a:not(:hover) {
	color: #fff;
}

.vlt-custom--8681 .vlt-countdown h5,
.vlt-custom--8681 .vlt-countdown strong {
	color: #fff;
}

.vlt-custom--9511 .vlt-swiper-pagination--style-1 span {
	background-color: #fff;
}

.vlt-is--homepage-05 .vlt-header--default .vlt-navbar,
.vlt-is--homepage-05 .vlt-header--default .vlt-navbar.vlt-navbar--solid {
	background-color: #191919;
}

.vlt-is--homepage-11 .vlt-navbar {
	padding: 0 35px;
}

.vlt-is--homepage-11 .vlt-navbar .container {
	width: 100%;
}

/* min-width 768px */
@media (min-width: 768px) {
	.vlt-custom--5136 {
		padding-left: 70px;
	}
	.vlt-custom--8620 {
		padding-right: 70px !important;
	}
	.vlt-custom--5317 {
		padding: 0 30px !important;
	}
	.vlt-custom--5171 {
		padding-right: 70px;
	}
	.vlt-custom--7205 {
		margin-top: -100px;
	}
	.vlt-custom--8511 {
		padding-right: 85px;
	}
	.vlt-custom--6525 {
		position: relative;
		z-index: 2;
	}
}

/* max-width 767px */
@media (max-width: 767px) {
	#awwwards,
	#wpselected {
		display: none;
	}
	.vlt-custom--9135 h2 {
		font-size: 28px
	}
	.vlt-custom--1631 {
		font-size: 38px;
	}
}

/* max-width 991px */
@media (max-width: 991px) {
	.vlt-custom--9182 {
		font-size: 48px;
		line-height: 60px;
	}
	.vlt-custom--9182 {
		font-size: 48px;
		line-height: 60px;
	}
}

/* max-width 575px */
@media (max-width: 575px) {
	.vlt-custom-9182 {
		font-size: 38px;
		line-height: 50px;
	}
	.vlt-custom-9182 {
		font-size: 38px;
		line-height: 50px;
	}
	.vlt-custom--0531 {
		bottom: 5%;
	}
}
/* ***=======@@@@@@@~~~|||||||>>> CUSTOM MISC ELEMENTS <<<|||||||~~~@@@@@@@=======*** */

div.center {
	margin: 0 auto !important;
	text-align:center !important; }
	
h1.center {
	margin: 0 auto !important;
	text-align:center !important; }
	
h2.center {
	margin: 0 auto !important;
	text-align:center !important; }
	
h3.center {
	margin: 0 auto !important;
	text-align:center !important; }
	
h4.center {
	margin: 0 auto !important;
	text-align:center !important; }
	
h5.center {
	margin: 0 auto !important;
	text-align:center !important; }

.move_up_01 { 
	margin-top: -25px !important; }
.move_up_02 { 
	margin-top: -35px !important; }
.move_up_03 { 
	margin-top: -45px !important; }
.move_up_04 { 
	margin-top: -55px !important; }
.move_up_05 { 
	margin-top: -65px !important; }
.move_up_06 { 
	margin-top: -75px !important; }
	
.move_down_01 { 
	margin-top: 25px !important; }
.move_down_02 { 
	margin-top: 35px !important; }
.move_down_03 { 
	margin-top: 45px !important; }
.move_down_04 { 
	margin-top: 55px !important; }
	
/* ***=======@@@@@@@~~~|||||||>>> Typography Elements <<<|||||||~~~@@@@@@@=======*** */



.important, .important-blue, .important-red, .important-green, .important-orange, .important-brown, .important-grey, .important-black, .important-title-black_mp3 {	
	padding: 15px;
	margin: 15px 0; }
	
/* red line & title with white background */
span.important-title-red {
	position: absolute;
	display: block;
	margin-top: -24px;
	background: #fff;
	padding: 0 8px;
	font-weight: bold;
	font-size: 120%; }
.important-red {
	border: 1px solid #D12E2E; }
span.important-title-red {
	color: #D12E2E; }
	
/* black line & title with light cream fff9e6 background on title & body */
span.important-title-black {
	position: absolute;
	display: block;
	margin-top: -24px;
	background: #fff9e6;
	padding: 0 8px;
	font-weight: bold;
	font-size: 120%; }
	
.important-black {
	border: 1px solid #000000;
	background: #fff9e6; }
	
span.important-title-black {
	color: #000000; }

/* black line & title with light cream fffdf5 background on title & body for mp3 section */
span.important-title-black_mp3 {
	position: absolute;
	display: block;
	margin-top: -24px;
	background: #fffdf5;
	padding: 0 8px;
	font-weight: bold;
	font-size: 60%; }
	
.important-black_mp3 {
	border: 1px solid #000000;
	background: #fffdf5; }
	
span.important-title-black_mp3 {
	color: #000000; }

span.important-title, span.important-title-blue, span.important-title-green, span.important-title-orange, span.important-title-brown, span.important-title-grey {
	position: absolute;
	display: block;
	margin-top: -24px;
	background: #fff;
	padding: 0 8px;
	font-weight: bold;
	font-size: 120%; }
	
.important {border: 1px solid #333;}
.important-blue {border: 1px solid #0033ff;}
.important-green {border: 1px solid #74A824;}
.important-orange {border: 1px solid #CC8300;}
.important-brown {border: 1px solid #8B6846;}
.important-grey {border: 1px solid #666;}

span.important-title {color: #333;}
span.important-title-blue {color: #0033ff;}
span.important-title-green {color: #74A824;}
span.important-title-orange {color: #CC8300;}
span.important-title-brown {color: #8B6846;}
span.important-title-grey {color: #666;}

span.attention, span.notice, span.alert, span.download, span.approved, span.media, span.note, span.cart, span.camera, span.doc {
	display: block;
	padding: 8px 10px 8px 36px;
	margin: 15px 0; }
	
span.attention {
	color: #B79000;
	border: 1px solid #E7BD72;
	background: #FFF3A3 url(images/typo/attention.png) 10px 50% no-repeat; }
	
span.notice {
	color: #648434;
	border: 1px solid #9BCC54;
	background: #CDEFA6 url(images/typo/notice.png) 10px 50% no-repeat; }
	
span.alert {
	color: #CF3738;
	border: 1px solid #FFACAD;
	background: #FFD5D5 url(images/typo/alert.png) 10px 50% no-repeat; }
	
span.download {
	color: #1C6B8B;
	border: 1px solid #6ABCE2;
	background: #A8CDE3 url(images/typo/download.png) 10px 50% no-repeat; }
	
span.approved {
	color: #666;
	border: 1px solid #a8a8a8;
	background: #c2dbfe url(images/typo/approved.png) 10px 50% no-repeat; }
	
span.media {
	color: #C76E34;
	border: 1px solid #FFBB65;
	background: #FFE0B6 url(images/typo/media.png) 10px 50% no-repeat; }
	
span.note {
	color: #B79000;
	border: 1px solid #E7BD72;
	background: #FFF3A3 url(images/typo/note.png) 10px 50% no-repeat; }
	
span.cart {
	color: #666;
	border: 1px solid #C5C5C5;
	background: #E6E6E6 url(images/typo/cart.png) 10px 50% no-repeat; }
	
span.camera {
	color: #666;
	border: 1px solid #C5C5C5;
	background: #E6E6E6 url(images/typo/camera.png) 10px 50% no-repeat; }
	
span.doc {
	color: #C76E34;
	border: 1px solid #FFBB65;
	background: #FFE0B6 url(images/typo/doc.png) 10px 50% no-repeat; }
	
span.number, span.number-blue, span.number-red, span.number-green, span.number-purple, span.number-orange, span.number-brown, span.number-grey {display: block;font-size: 170%;float: left;margin: 2px 10px 0 15px; }

span.number {color: #333;}
span.number-blue {color: #0D507A;}
span.number-red {color: #D12E2E;}
span.number-green {color: #74A824;}
span.number-purple {color: #9E0E87;}
span.number-orange {color: #CC8300;}
span.number-brown {color: #8B6846;}
span.number-grey {color: #666;}

span.highlight {background: #FFFBD5;padding: 1px 2px;}
span.highlight-blue {color: #0D507A;}
span.highlight-red {color: #D12E2E;}
span.highlight-green {color: #74A824;}
span.highlight-purple {color: #9E0E87;}
span.highlight-orange {color: #CC8300;}
span.highlight-brown {color: #8B6846;}
span.highlight-grey {color: #666;}
span.highlight-bold {font-weight: bold;font-size: 120%;}

div.number-block1, div.number-block2, div.number-block3, div.number-block4, div.number-block5, div.number-block5, div.number-block6 {
	padding-left: 50px;
	width:80%;
	margin:0 auto; }
div.number-block1 {background: url(images/typo/number-1.png) 0 0 no-repeat;}
div.number-block2 {background: url(images/typo/number-2.png) 0 0 no-repeat;}
div.number-block3 {background: url(images/typo/number-3.png) 0 0 no-repeat;}
div.number-block4 {background: url(images/typo/number-4.png) 0 0 no-repeat;}
div.number-block5 {background: url(images/typo/number-5.png) 0 0 no-repeat;}
div.number-block6 {background: url(images/typo/number-6.png) 0 0 no-repeat;}

.who-we-are-single img { width:90%;
	margin:0 auto; }

.blockquote_sg {
	display: block;
	/* font-style: italic; */
	font-size: 120%;
	line-height: 150%;
	width: auto;
	padding: 10px 20px 10px 20px;
	margin: 15px 0;
	background: #fff5cc;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000; 
	/* box-shadow: 5px 5px 1px 0px rgba(0,0,0,0.25); */
	-webkit-box-shadow: 5px 5px 2px 0px rgba(0,0,0,0.18); }
	
.blockquote {
	display: block;
	font-style: italic;
	font-size: 120%;
	line-height: 150%;
	width: auto;
	padding: 10px 20px 10px 20px;
	margin: 15px 0;
	background: #f6f6f6;
	border-top: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5; }
	
.blockquote_gold,.blockquote_ltgold, .blockquote_blue, .blockquote_red, .blockquote_green, .blockquote_purple, .blockquote_orange, .blockquote_brown, .blockquote_grey {
	display: block;
	font-style: italic;
	font-size: 120%;
	line-height: 150%;
	width: auto;
	padding: 0px 20px;
	margin: 15px 0;
	border: 0;
	background: 0; }
	
.blockquote_gold{color: #FFD700;}
.blockquote_ltgold{color: #ffe452;}
.blockquote_blue{color: #0D507A;}
.blockquote_red{color: #D12E2E;}
.blockquote_green{color: #74A824;}
.blockquote_purple{color: #9E0E87;}
.blockquote_orange{color: #CC8300;}
.blockquote_brown{color: #8B6846;}
.blockquote_grey {color: #666;}

.blockquote_quotes {
	display: block;
	background: url(images/typo/quote-start.png) 0 5px no-repeat;
	padding: 0px 20px 0 38px;
	margin: 20px 0;
	font-size: 148%;
	line-height: 150%;
	width: auto;
	/* color: #666; */
	border: 0; }
	
.blockquote_quotes p {
	padding: 0 38px 0 0;
	margin-top: 0;
	background: url(images/typo/quote-end.png) 100% 100% no-repeat; }





/* ========================= QD NFT VIEW IMAGE SIZE =========================
   Makes the main NFT view image feel like a gallery piece (not a billboard).
   Targets nft.html (#qd-nft-img) and constrains size on desktop + mobile.
   ======================================================================= */
#qd-nft-img{
  display:block;
  margin: 0 auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 560px;     /* desktop cap */
  max-height: 68vh;     /* prevent screen takeover */
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

/* Mobile tuning */
@media (max-width: 600px){
  #qd-nft-img{
    max-width: 92vw;
    max-height: 55vh;
  }
}

/* =========================================================
   THANKYOU PAGE (Block0 Inventors) — layout + form controls
   ========================================================= */

/* Card/container width */
.panel.pad.qd-card{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Inline button row */
.qd-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top: 14px;
}

/* Help text lists */
.qd-help{
  font-size: .95rem;
  opacity: .85;
}

/* Field group: label + input + tip */
.qd-field{
  display:block;
  width:100%;
  max-width: 100%;
  margin: 14px 0 0;
}

.qd-field label{
  display:block;
  width:100%;
  margin: 0 0 8px;
  line-height: 1.35;
}

/* Your input should fill the card */
.qd-field input{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding: 10px 12px;
  border-radius: 10px;
  margin: 0;
}

/* qd-mini is used on BOTH label and p — style them intentionally */
.qd-field label.qd-mini{
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 0 2px;  /* tiny inset so it doesn’t feel glued left */
  opacity: 1;      /* labels should be readable */
}

.qd-field p.qd-mini,
.panel.pad.qd-card > p.qd-mini{
  display:block;
  width:100%;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 8px 0 0;
  padding: 0 2px;
  opacity: .85;
}

/* =========================================================
   TOPBAR: Prelaunch CTA + Sparks
   (moved from page-local styles)
   ========================================================= */

:root { --qd-prelaunch-gap: 8px; } /* tweak per page */

.topbar .topbar-inner{
  display:flex;
  align-items:center;
  gap: 12px;
}

#qd-primary-nav{
  flex: 1 1 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content: flex-end;
}

.qd-prelaunch-cta{
  margin-left: var(--qd-prelaunch-gap);
  position: relative;
  overflow: visible;
  isolation: isolate;
  border-radius: 999px;
  text-transform: none;
}

.qd-prelaunch-cta::before,
.qd-prelaunch-cta::after{
  content:"";
  position:absolute;
  inset:-18px;
  pointer-events:none;
  opacity:0;
  z-index:-1;
  background:
    radial-gradient(circle at 10% 30%, rgba(255,200,80,.95) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 70%, rgba(255,225,140,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 20%, rgba(255,170,60,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 35%, rgba(255,240,180,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 65%, rgba(255,190,70,.95) 0 3px, transparent 4px),
    radial-gradient(circle at 90% 40%, rgba(255,220,120,.95) 0 2px, transparent 3px);
  filter: drop-shadow(0 0 6px rgba(255,200,80,.65)) drop-shadow(0 0 14px rgba(255,150,40,.35));
  transform: scale(.85);
}

.qd-prelaunch-cta::after{
  background:
    radial-gradient(circle at 20% 40%, rgba(255,240,180,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 80%, rgba(255,180,70,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 55% 25%, rgba(255,210,110,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 55%, rgba(255,160,60,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 75%, rgba(255,230,150,.9) 0 2px, transparent 3px);
  transform: scale(.75);
}

@keyframes qdSparkBurst {
  0%   { opacity:0; transform: scale(.75); }
  15%  { opacity:1; transform: scale(1); }
  55%  { opacity:.9; transform: scale(1.08) translateY(-1px); }
  100% { opacity:0; transform: scale(1.12) translateY(-3px); }
}

.qd-prelaunch-cta:hover::before,
.qd-prelaunch-cta:focus-visible::before{
  animation: qdSparkBurst 650ms ease-out both;
}

.qd-prelaunch-cta:hover::after,
.qd-prelaunch-cta:focus-visible::after{
  animation: qdSparkBurst 750ms ease-out both;
  animation-delay: 60ms;
}

.qd-prelaunch-cta:hover,
.qd-prelaunch-cta:focus-visible{
  transform: translateY(-1px);
}

/* =========================================================
   MOBILE MENU FIX
   (moved from page-local styles)
   ========================================================= */
@media (max-width: 900px){
  .topbar .topbar-inner{ flex-wrap: wrap; }
  .menu-toggle{ order: 3; }
  #qd-primary-nav{ order: 4; width: 100%; justify-content: flex-start; }
  .qd-prelaunch-cta{ order: 2; }

  .menu-toggle[aria-expanded="false"] ~ #qd-primary-nav{ display:none !important; }

  .menu-toggle[aria-expanded="true"] ~ #qd-primary-nav{
    display:flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-top: 10px;
  }

  #qd-primary-nav .dropdown{ width: 100%; }
  #qd-primary-nav .dropbtn{ width: 100%; display:flex; justify-content: space-between; }
  #qd-primary-nav .dropmenu{ width: 100%; }
}




/* =========================================================
   THANKYOU INLINE HERO IMAGE (responsive, inside panels)
   ========================================================= */
.qd-hero-inline{
  width: 100%;
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}

.qd-hero-img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

@media (max-width: 700px){
  .qd-hero-img{ max-height: 280px; }
}

/* =========================================================
   THANKYOU INLINE HERO IMAGE (responsive, inside panels)
   + hover / focus effects (premium, subtle)
   ========================================================= */
.qd-hero-inline{
  width: 100%;
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  position: relative;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  isolation: isolate;
}

.qd-hero-img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  transform: scale(1);
  filter: saturate(1.02) contrast(1.02);
  transition: transform .35s ease, filter .35s ease;
}

/* Subtle "gallery sheen" overlay */
.qd-hero-inline::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0;
  transition: opacity .25s ease;
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.02) 55%,
    rgba(255,255,255,0) 100%
  );
  z-index: 1;
}

.qd-hero-inline:hover,
.qd-hero-inline:focus-within,
.qd-hero-inline:focus{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
}

.qd-hero-inline:hover .qd-hero-img,
.qd-hero-inline:focus-within .qd-hero-img,
.qd-hero-inline:focus .qd-hero-img{
  transform: scale(1.035);
  filter: saturate(1.14) contrast(1.10) brightness(1.03);
}

.qd-hero-inline:hover::after,
.qd-hero-inline:focus-within::after,
.qd-hero-inline:focus::after{
  opacity: 1;
}

.qd-hero-caption{
  width: 100%;
  padding: 0 2px;
}

@media (max-width: 700px){
  .qd-hero-img{ max-height: 280px; }
}

/* --- Full-bleed hero inside padded card, WITHOUT breaking hover zoom --- */
.qd-card .qd-hero-inline.qd-bleed{
  /* cancel the card padding around the hero */
  margin: 16px -30px 0;
  border-radius: 0;
  position: relative;
}

/* make the hero act like a frame */
.qd-card .qd-hero-inline.qd-bleed{
  overflow: hidden;
}

/* ensure the image uses full width and doesn't inherit padding/margins */
.qd-card .qd-hero-inline.qd-bleed .qd-hero-img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;

  /* smooth zoom */
  transform: translateZ(0);
  transition: transform 220ms ease;
  transform-origin: center center;
}

/* mouseover / focus zoom stays INSIDE the frame (no layout shift) */
.qd-card .qd-hero-inline.qd-bleed:hover .qd-hero-img,
.qd-card .qd-hero-inline.qd-bleed:focus .qd-hero-img{
  transform: scale(1.04);
}

/* mobile: your container padding is likely smaller than 30px */
@media (max-width: 640px){
  .qd-card .qd-hero-inline.qd-bleed{
    margin-left: -18px;
    margin-right: -18px;
  }
}