/*
 * Theme Name: Cmlute Theme
 * Description: Custom Theme
 * Theme URI: http://cmlute.io/ 
 * Author: Shiv Gulam Singh
 * Version: 1.0
 */

@charset "utf-8";
html{scroll-padding-top:115px}
:root {
--cm-blue:#214665;
--cm-indigo:#6610f2;
--cm-purple:#6f42c1;
--cm-pink:#d63384;
--cm-red:#ef4136;
--cm-orange:#f05929;
--cm-yellow:#ffc107;
--cm-green:#63F79F;
--cm-teal:#20c997;
--cm-cyan:#0dcaf0;
--cm-white:#ffffff;
--cm-black:#000;
--cm-gray:#6c757d;
--cm-gray-dark:#263746;
--cm-primary:#0d6efd;
--cm-secondary:#6c757d;
--cm-success:#198754;
--cm-info:#0dcaf0;
--cm-warning:#ffc107;
--cm-danger:#dc3545;
--cm-light:#f8f9fa;
--cm-dark:#212529;
--cm-font-sans-serif:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--cm-font-monospace:"Montserrat", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--cm-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--cm-transition:.5s linear;
--cm-background:#fff;
--cm-font-size:1.125rem;
--cm-border-radius:15px;
--cm-box-shadow:0 0 10px #ccc;
}

@font-face{font-family:'Cera-Bold';src:url(../fonts/CeraPro-Bold.woff2) format('woff2'), url(../fonts/CeraPro-Bold.woff) format('woff');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Cera-Light';src:url(../fonts/CeraPro-Light.woff2) format('woff2'), url(../fonts/CeraPro-Light.woff) format('woff');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Cera-Regular';src:url(../fonts/CeraPro-Regular.woff2) format('woff2'), url(../fonts/CeraPro-Regular.woff) format('woff');font-weight:400;font-style:normal;font-display:swap;}

html{}
body{background:#fff;font-family:'Cera-Regular';font-size:var(--cm-font-size);font-weight:400;line-height:1.5;overflow-x:hidden;transition:var(--cm-transition);
color:#000;}
.img-responsive{width:100%;height:auto}
a{color:var(--cm-orange);transition:var(--cm-transition);outline:none;text-decoration:none}
a:hover{color:var(--cm-blue);}
.graph-responsive{width:100%;height:auto}
.align-center{text-align:center}

.br{display:none}

p:empty{display:none}

.clear,.clr{clear:both;height:1px;overflow:auto}
h1,h2,h3,h4,h5,h6{padding:0;margin:0;color:var(--cm-gray-dark);font-family:'Cera-Bold';}
.dark-gray{color:#666;}
ul,ol{list-style:none}
ul,ol,p{margin:0;padding:0;}
ul li,ol li{margin:0;padding:0}
.align-right{text-align:right}
.relative{position:relative}
.dis-none{display:none}

::placeholder{color:#737373;font-weight:400 !important;opacity:1;transition:transform 250ms, opacity 400ms;}
:focus::placeholder,
:hover::placeholder{opacity:0;}

.navigation{position:fixed;width:100%;z-index:999;transition:var(--cm-transition);}
.top-bg{padding:0;width:98%;margin:auto;position:relative;transition:var(--cm-transition);}

.navigation.sticky,
.navigation.inner{background:rgba(0,0,0,1);}

.header-left{float:left;text-align:left;width:100px}
.header-left img{width:auto;height:75px;margin:5px 0 5px -5px;}
.header-right{float:right;text-align:right;margin:0;width:calc(100% - 100px);position:relative}
.header-right ul{margin:0;padding:0;}

.menu-click{position:absolute;top:1.5rem;right:5px;z-index:9999;cursor:pointer}
.menu-click .bar1, 
.menu-click .bar2, 
.menu-click .bar3{width:25px;height:2px;background-color:#fff;margin:6px 0;transition:var(--cm-transition);display:block}
.menu-click.on .bar1{-webkit-transform:rotate(-45deg) translate(-9px, 6px);transform:rotate(-45deg) translate(-4px, 6px);background-color:#ffc107;}
.menu-click.on .bar2{opacity:0;}
.menu-click.on .bar3{-webkit-transform:rotate(45deg) translate(-8px, -8px);transform:rotate(45deg) translate(-6px, -7px);background-color:#ffc107;}

.menu-container{display:none;position:fixed;left:0;top:0;width:100%;height:calc(100vh);background-color:rgba(0,0,0,.95);line-height:normal;animation:fadeIn 1s linear;z-index:999;}
.menu-container ul.menu{list-style:none;text-align:center;position:relative;top:50%;transform:translateY(-50%);}
.menu-container li{display:block;padding:1rem 0}
.menu-container li.right{padding:0;}
.menu-container li a{color:var(--cm-white);font-size:1.5rem;}
.menu-container li a:hover{color:var(--cm-yellow);}


.menu-container li.right ul{margin:0;padding:0;text-align:center;}
.menu-container li.right ul li{display:block;position:relative;cursor:pointer;font-size:1.25rem;color:#fff}
.menu-container li.right ul li img{margin-right:8px}
.menu-container li.right ul li div a{font-size:1.25rem;}
.menu-container li.right ul li div{display:none;transition:var(--cm-transition);text-align:left;width:105px;}
.menu-container li.right ul li:hover div{display:block;position:absolute;top:40px;left:20px;padding-top:15px;margin:auto;right:0}



.banner{height:100vh;width:auto;background:url(../images/banner.jpg) top center;background-size:cover;position:relative}
.banner:before{content:'';position:absolute;height:100%;width:100%;background:rgba(0,0,0,.5);}
.header-text{position:absolute;bottom:1rem;left:1rem;color:#fff}
.header-text h1{font-size:2.5rem;padding-bottom:1rem;color:#fff;line-height:1.25}
.header-text p{font-size:1.25rem}
.header-text a{display:inline-block;padding:10px 15px;background:#fff;border-radius:6px;color:#333;margin:1rem 10px 0 0;transition:var(--cm-transition);}
.header-text a:hover{background:#c59331;color:#fff}

.about-container,
.one-container{padding:5rem 0;text-align:center}
.about-container h2{font-size:2rem;padding-bottom:1.5rem}
.about-container p{font-size:1.25rem}

.one-container h2{text-align:center}

.text{padding:0 5px;}
.text img{border-radius:6px;width:100%;height:auto;margin-bottom:2rem;border:1px solid #3b3b3b}
.text h2{padding-bottom:1rem;font-size:2rem;}

.text p,
.connect-container p,
.lute-container p{font-size:1.25rem;font-weight:600}

.one-container h2,
.connect-container h2,
.connect-container h1,
.lute-container h2{font-size:2rem;padding-bottom:1.5rem}

.connect-container h2 img,
.connect-container h1 img{width:auto;height:50px;float:right}

.connect-container{padding-bottom:3rem;}

.lute-container{padding:3rem 0 3rem 0}

.earn-bg{position:relative;overflow:hidden;border-radius:24px;background:url(../images/earn-bg.jpg) top center;background-size:cover;height:640px;margin-bottom:2rem}
.earn-bg span{color:#fff;border:1px solid #99c4c7;display:inline-block;background:#80b5b9;border-radius:5px;padding:3px 10px;margin:1rem 0 0 1rem;font-size:12px}
.earn-text{position:absolute;bottom:1rem;left:1rem}
.earn-text h2{font-size:2rem;color:#fff;padding-bottom:1rem;font-family:'Cera-Bold';}
.earn-text p{color:#f7f7f7;font-size:1.25rem;padding:.5rem .5rem 1rem 0}
.earn-text a{display:inline-block;padding:12px 10px;border:1px solid #bed7d9;border-radius:6px;color:#fff;margin:1rem 10px 0 0;transition:var(--cm-transition);}
.earn-text a:hover{border-color:#fff;}

.monetize-bg{position:relative;overflow:hidden;border-radius:24px;background:url(../images/monetize-bg.jpg) top center;background-size:cover;height:640px;}
.monetize-bg span{color:#fff;border:1px solid #99c4c7;display:inline-block;background:#80b5b9;border-radius:5px;padding:3px 10px;margin:1rem 0 0 1rem}
.monetize-bg-text{position:absolute;bottom:1rem;left:1rem}
.monetize-bg-text h2{font-size:2rem;color:#fff;font-family:'Cera-Regular';}
.monetize-bg-text p{color:#f7f7f7;font-size:1.25rem;padding:.5rem .5rem 1rem 0}
.monetize-bg-text a{display:inline-block;padding:12px 10px;border:1px solid #bed7d9;border-radius:6px;color:#fff;margin:1rem 10px 0 0;transition:var(--cm-transition);}
.monetize-bg-text a:hover{border-color:#fff;}

.lute-token-bg{position:relative;overflow:hidden;border-radius:24px;background:url(../images/lute-token-bg.jpg) top center;background-size:cover;height:640px;}
.lute-token-bg span{color:#fff;border:1px solid #55526e;display:inline-block;background:#2a2446;border-radius:5px;padding:3px 10px;margin:1rem 0 0 1rem;font-size:12px}
.lute-token-text{position:absolute;bottom:1rem;left:1rem}
.lute-token-text h2{font-size:2rem;color:#fff;font-family:'Cera-Regular';}
.lute-token-text p{color:#f7f7f7;font-size:1.25rem;padding:.5rem .5rem 1rem 0}
.lute-token-text a{display:inline-block;padding:12px 10px;border:1px solid #f7f7f7;border-radius:6px;color:#fff;margin:1rem 10px 0 0;transition:var(--cm-transition);}
.lute-token-text a:hover{border-color:#fff;}

.become-node{margin:3rem 0}

.footer-container{background:#000;padding:15px 0;color:var(--cm-white);margin-top:0}
.footer-container a{color:var(--cm-white);}
.footer-container a:hover{color:var(--cm-orange);}
.footer-container br{display:block}

.footer-left,
.footer-center{text-align:center;}
.footer-right{padding-top:10px}

.icon-BACK{background:url(../images/icon-arrow-orange.png) left center no-repeat;display:inline-block;color:#f05929;padding-left:35px;margin:10px 0;vertical-align:middle;font-weight:600;}
.icon-BACK:hover{padding-left:25px;}

.padding-top{padding-top:8rem}


.future p{font-size:1.25rem;padding:3rem 0}
.future img{width:100%;height:auto}

.margin-bottom{margin:3rem 0}

.all-banner{height:100vh;padding:12rem 1rem 1rem 1rem;color:#fff;background:url(../images/bg-banner.jpg) center center no-repeat;background-size:cover}
.all-banner p{font-size:1.25rem;}
.all-banner h1{font-size:3rem;letter-spacing:1px;font-weight:700;padding:1rem 0;margin:1rem 0;color:#fff;position:relative}
.all-banner h1:after{content:'';width:100px;height:2px;background:#fff;position:absolute;left:0;bottom:0}
.all-banner h2{font-size:2rem;color:#fff;padding-top:2rem}

.all-banner.all-banner2{background:url(../images/bg-banner2.jpg) center center no-repeat;background-size:cover}

.bg-gray,
.bg-green,
.bg-red{background:#E8E8E8;padding:5rem 0}
.bg-green{background:#ebf6ff;}
.bg-red{background:#fef2eb;}
.bg-gray.future p,
.bg-green.future p,
.bg-red.future p{padding:1rem 0}

.bg-gray .div-content,
.bg-red .div-content{padding:0 0 2rem 0}

.bg-green .div-content{padding:2rem 0 0 0}






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

@media only screen and (min-width: 600px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {

}

@media only screen and (max-width: 600px) and (orientation : portrait) {

}

@media only screen and (min-width: 600px) and (orientation : landscape) {

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.social-link{top:1.25rem}
.become-node{margin:0}

.banner-content{position:absolute;left:2rem;bottom:10rem}
.all-banner.all-banner2 .banner-content{bottom:45%}
}

@media only screen and (min-device-width : 601px) and (max-device-width : 962px) and (orientation : landscape) and (min-device-height : 601px){
	
}



@media only screen and (min-width: 768px) and (max-width: 1366px) {
	
}






@media only screen and (min-width: 992px) {
.br{display:block}
.navigation .top-bg{padding:.5rem 0}	

.menu-click{display:none}
.header-left{width:100px}
.header-left img{width:auto;height:75px;margin:10px 0 0 0}
.header-right{width:calc(100% - 200px);text-align:center;padding:1.5rem 0 0 0;margin-left:-200px;}
.header-right ul{margin:5px 0 0 0;padding:0;}
.header-right ul ul{margin:0}

.menu-click,
.menu-close{display:none}

.menu-container{display:inline-block;background:none;position:relative;right:0;top:0;height:auto;z-index:99}
.menu-container ul.menu{top:0;transform:translateY(0);text-align:center}
.menu-container li{padding:0;margin:0;display:inline-block}
.menu-container li a{margin:0 15px}
.menu-container li.right{float:right}

.header-text{bottom:1rem;left:1rem;}
.header-text h1{font-size:5rem;padding-bottom:1rem;}
.header-text p{font-size:1.5rem}
.header-text a{padding:10px 15px;margin:1rem 10px 0 0;}

.menu-container li.right ul{margin:0;padding:0;text-align:left;}
.menu-container li.right ul li:hover div{top:20px;right:auto;left:-15px;}


.text p,
.connect-container p,
.lute-container p{font-size:1.75rem;}

.text h2{padding:0 0 1rem 1rem}
.text p{padding:0 0 0 1rem;}

.about-container,
.one-container{padding:15rem 0;}

.about-container h2,
.connect-container h2,
.connect-container h1,
.lute-container h2{font-size:4rem;}

.about-container h2{padding-bottom:3rem}

.one-container h2{font-size:4rem;}

.about-container p{font-size:2rem}

.become-node{margin:0}
.connect-container{padding-left:3rem}


.earn-bg{height:640px;margin-bottom:0}
.earn-bg span{margin:2rem 0 0 2rem;}
.earn-text{position:absolute;bottom:2rem;left:2rem}
.earn-text h2{font-size:2.5rem;color:#fff;}
.earn-text p{font-size:1.5rem;padding:1rem .5rem 3rem 0}
.earn-text a{padding:12px 20px;margin:1rem 10px 0 0;}

.monetize-bg{height:640px;}
.monetize-bg span{margin:2rem 0 0 2rem}
.monetize-bg-text{position:absolute;bottom:2rem;left:2rem}
.monetize-bg-text h2{font-size:2.5rem;color:#fff}
.monetize-bg-text p{font-size:1.75rem;padding:1rem .5rem 3rem 0}
.monetize-bg-text a{padding:12px 20px;margin:1rem 10px 0 0;}

.lute-token-bg{}
.lute-token-bg span{margin:2rem 0 0 2rem;}
.lute-token-text{bottom:2rem;left:2rem}
.lute-token-text h2{font-size:2.5rem;}
.lute-token-text p{font-size:1.75rem;padding:1rem .5rem 3rem 0}
.lute-token-text a{padding:12px 20px;margin:1rem 10px 0 0;}

.lute-container{padding:3rem 0 3rem 3rem}

.footer-container br{display:none}

.padding-top{padding-top:10rem;}


.connect-container h2 img,
.connect-container h1 img{height:auto;}



.banner-content{position:absolute;left:2rem;bottom:6rem}
.all-banner.all-banner2 .banner-content{bottom:45%}

.bg-gray .div-content,
.bg-red .div-content{padding:0 2rem 0 0}

.bg-green .div-content{padding:0 0 0 2rem}

}

@media only screen and (min-width: 1200px) {
.all-banner{padding:0;}
.all-banner p{max-width:900px}
.all-banner h1{font-size:5rem;padding:1rem 0;margin:1rem 0 3rem 0;}
.all-banner h2{font-size:3rem;padding-top:0rem}
.banner-content{position:absolute;left:5rem;bottom:1.5rem}

.all-banner.all-banner2 .banner-content{bottom:25%}

.margin-bottom .container-fluid{width:90%}
}


/*-- XR iOS 12 --*/
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}

/*-- XS Max iOS 12 --*/
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (min-device-height : 768px){
.br{display:none}
.header-text .br{display:block}	

.earn-bg span{margin:1.5rem 0 0 1.5rem;}
.earn-text{bottom:1.5rem;left:1.5rem}
.earn-text h2{font-size:2.5rem;padding-bottom:0}
.earn-text p{font-size:1.5rem;padding-bottom:1.5rem}

.monetize-bg span{margin:1.5rem 0 0 1.5rem}
.monetize-bg-text{bottom:1.5rem;left:1.5rem}
.monetize-bg-text h2{font-size:2.5rem;}
.monetize-bg-text p{font-size:1.5rem;padding-bottom:1.5rem}

.lute-token-bg span{margin:1.5rem 0 0 1.5rem;}
.lute-token-text{bottom:1.5rem;left:1.5rem}
.lute-token-text h2{font-size:2.5rem;}
.lute-token-text p{font-size:1.5rem;padding-bottom:1.5rem}
}

@media only screen and (min-device-width : 810px) and (max-device-width : 1080px) and (orientation : portrait) {
.header-text .br{display:block}		
}

@media only screen and (min-device-width : 810px) and (max-device-width : 1080px) and (orientation : landscape) and (min-device-height : 810px){
.br{display:none}
.header-text .br{display:block}	
}

@media only screen and (min-device-width : 820px) and (max-device-width : 1180px) and (orientation : portrait) {
.header-text .br{display:block}		
}

@media only screen and (min-device-width : 820px) and (max-device-width : 1180px) and (orientation : landscape) and (min-device-height : 820px){
.br{display:none}
.header-text .br{display:block}

.earn-bg span{margin:1.5rem 0 0 1.5rem;}
.earn-text{bottom:1.5rem;left:1.5rem}
.earn-text h2{font-size:2.5rem;padding-bottom:0}
.earn-text p{font-size:1.5rem;padding-bottom:1.5rem}

.monetize-bg span{margin:1.5rem 0 0 1.5rem}
.monetize-bg-text{bottom:1.5rem;left:1.5rem}
.monetize-bg-text h2{font-size:2.5rem;}
.monetize-bg-text p{font-size:1.5rem;padding-bottom:1.5rem}

.lute-token-bg span{margin:1.5rem 0 0 1.5rem;}
.lute-token-text{bottom:1.5rem;left:1.5rem}
.lute-token-text h2{font-size:2.5rem;}
.lute-token-text p{font-size:1.5rem;padding-bottom:1.5rem}

}

@media only screen and (min-device-width : 834px) and (max-device-width : 1194px) and (orientation : landscape) and (min-device-height : 834px){
.br{display:none}
}

@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : portrait) {
.br{display:none}
.header-text .br{display:block}	
.earn-text h2,
.monetize-bg-text h2,
.lute-token-text h2{font-size:2rem;}	
}

@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : landscape) and (min-device-height : 1024px){
.br{display:none}
.header-text .br{display:block}	
}


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

	
}

/* ── Hero call-to-action buttons (buy-lute) ─────────────────────────
   Two routes to buying Lute: straight to the web shop, or down to the
   app-store QR codes further down this page. Visual language follows the
   existing .header-text a CTA (white pill, gold hover) so nothing new is
   introduced. The secondary is an outline so the pair reads as
   primary/alternative rather than two equal choices.

   Sizes track the hero, which jumps from 3rem to 5rem at 1200px — at the
   base size against an 80px headline the buttons read as an afterthought. */
.banner-cta{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:1rem}
.banner-cta a{display:inline-block;padding:14px 28px;border-radius:6px;
  font-weight:700;font-size:1.05rem;letter-spacing:.3px;text-decoration:none;
  line-height:1.2;transition:var(--cm-transition)}
.banner-cta a sup{font-size:.6em;top:-.5em}
.banner-cta .cta-primary{background:#fff;color:#1d2b3a}
.banner-cta .cta-primary:hover{background:#c59331;color:#fff}
.banner-cta .cta-secondary{border:2px solid rgba(255,255,255,.85);color:#fff}
.banner-cta .cta-secondary:hover{background:#fff;color:#1d2b3a;border-color:#fff}

/* The in-page jump would otherwise land under the sticky header. */
html{scroll-behavior:smooth}
#download-app{scroll-margin-top:90px}

@media only screen and (min-width:1200px){
  /* h1 already carries a 3rem bottom margin at this width — no extra top gap. */
  .banner-cta{margin-top:0;gap:1.25rem}
  .banner-cta a{font-size:1.35rem;padding:18px 40px;border-radius:8px}
  .banner-cta .cta-secondary{border-width:3px}
}

@media only screen and (max-width:767px){
  .banner-cta{gap:.65rem;margin-top:1.25rem}
  .banner-cta a{padding:12px 20px;font-size:.9rem}
}

/* ── Hero heading: vertically centred ───────────────────────────────
   The original pinned .banner-content to the bottom of a 100vh hero, so the
   taller the window the larger the empty gap above the heading — on a big
   monitor the text ended up crammed against the very bottom edge.

   Centring instead keeps the block in the middle of the hero at any height.
   Scoped away from .all-banner2 (buy / sell), which already positions its
   content near the middle via `bottom:45%` and carries the CTA buttons.

   Specificity (0,3,0) deliberately beats the several `.banner-content`
   rules in the width media queries, so this holds at every breakpoint
   without having to restate it inside each one. `left` is left alone so the
   per-breakpoint horizontal insets still apply. */
.all-banner:not(.all-banner2) .banner-content{
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
}

/* Short viewports (landscape phones) — centring a block taller than the hero
   would push its top off-screen, and the hero is 100vh so it gets short fast.
   Fall back to the original bottom anchor there. */
@media only screen and (max-height:600px){
  .all-banner:not(.all-banner2) .banner-content{top:auto;bottom:2rem;transform:none}
}