/* ==========================================================
   AIR FRYER PRO
   DESKTOP
========================================================== */

/* ==========================================================
   BODY
========================================================== */

body{

    min-width:320px;

    overflow-x:hidden;

}

/* ==========================================================
   BACKGROUND
========================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(244,180,0,.08),
            transparent 40%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(244,180,0,.05),
            transparent 35%
        );

    pointer-events:none;

    z-index:-2;

}

/* ==========================================================
   SECTIONS
========================================================== */

section{

    overflow:hidden;

}

/* ==========================================================
   SECTION ALT
========================================================== */

.trust,
.experience,
.bonus,
.guarantee{

    background:var(--color-surface);

}

.transformation,
.ebook-content,
.offer,
.cta-final{

    background:var(--color-surface-alt);

}


/* ==========================================================
   HEADER
========================================================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

    display:flex;

    align-items:center;

    z-index:var(--z-header);

    transition:var(--transition);

    background:rgba(255,253,248,.80);

    backdrop-filter:blur(18px);

    border-bottom:1px solid transparent;

}

.header.scrolled{

    border-color:var(--color-border);

    box-shadow:var(--shadow-sm);

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:52px;

}

.logo-title{

    display:block;

    font-size:1.1rem;

    font-weight:800;

    color:var(--color-text);

}

.logo-pro{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-left:10px;

    padding:5px 10px;

    background:#F5B400;

    color:#111;

    border-radius:6px;

    font-size:.78rem;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

    line-height:1;

}

/* ==========================================================
   NAVIGATION
========================================================== */

.nav-list{

    display:flex;

    align-items:center;

    gap:42px;

}

.nav-list a{

    position:relative;

    font-weight:600;

    transition:var(--transition);

}

.nav-list a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:var(--transition);

}

.nav-list a:hover::after{

    width:100%;

}


/*==========================================================
HERO
==========================================================*/

.hero{

    position:relative;

    overflow:hidden;

    padding:105px 0 40px;

    background:
    radial-gradient(circle at 80% 15%,
    rgba(245,180,0,.14),
    transparent 45%),
    #FFFDF8;

}

.hero-container{

    width:min(1320px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:48% 52%;

    align-items:center;

    gap:30px;

    min-height:620px;

}

/*==========================================================
HERO SCENE
==========================================================*/

.hero-scene{

    position:relative;

    width:640px;

    height:620px;

    margin:0 auto;
	
	transform:translate(

    var(--mouse-x,0),

    var(--mouse-y,0)

);

}

/*==========================================================
CENA HERO
==========================================================*/

.hero-scene img{

    position:absolute;

    display:block;

    user-select:none;

    pointer-events:none;

    max-width:none;

}

/*==========================================================
GLOW
==========================================================*/

.hero-glow{

    position:absolute;

    width:600px;

    height:600px;

    left:90px;

    top:40px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(245,180,0,.20),

        transparent 70%

    );

    filter:blur(55px);

    z-index:1;

}

/*==========================================================
LIVRO ABERTO
==========================================================*/

.hero-open{

    width:720px;

    left:-80px;
	
	top:20px;

    opacity:.20;

    transform:rotate(-12deg);

    z-index:5;

}

/*==========================================================
EBOOK
==========================================================*/

.hero-book{

    width:520px;

    left:-30px;
	
	top:-80px;

    z-index:30;

    filter:

    drop-shadow(

        0 50px 80px rgba(0,0,0,.20)

    );

}

/*==========================================================
PRATO
==========================================================*/

.hero-plate{

    width:350px;

	left:220px;
   
	top:330px;

    z-index:40;

    filter:

    drop-shadow(

        0 30px 50px rgba(0,0,0,.18)

    );

}

/*==========================================================
TOMATE
==========================================================*/

.tomato{

    width:110px;

    left:30px;
	
	top:170px;

    z-index:45;

}

/*==========================================================
ALHO
==========================================================*/

.garlic{

    width:95px;

    left:30px;

    top:500px;

    z-index:42;

}

/*==========================================================
ALECRIM
==========================================================*/

.rosemary{

    width:120px;

    right:30px;

    top:170px;

    z-index:41;

}

/*==========================================================
PIMENTA
==========================================================*/

.pepper{

    width:90px;

    right:70px;

    bottom:90px;

    z-index:45;

}




/*==========================================================
LEFT
==========================================================*/

.hero-content{

    position:relative;

    z-index:50;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:999px;

    background:#FFF3CF;

    color:#A46A00;

    font-weight:700;

    margin-bottom:22px;

}

.hero-content h1{

    font-size:clamp(3.2rem,5vw,4.8rem);

    line-height:.92;

    font-weight:900;

    letter-spacing:-3px;

    color:#141414;

    margin-bottom:22px;

}

.hero-content h1 span{

    color:#F5B400;

}

.hero-description{

    font-size:1.08rem;

    line-height:1.65;

    color:#555;

    max-width:640px;

    margin-bottom:24px;
	
}

.hero-features{

    display:grid;

    gap:14px;

    margin-bottom:26px;

}

.hero-features li{

    font-size:1.1rem;

    font-weight:600;

}

.hero-actions{

    display:flex;

    gap:18px;

    margin-bottom:28px;

}

.hero-security{

    color:#666;

    font-size:.96rem;

}




/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes bookFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}



/* ==========================================================
   PREMIUM EFFECT
========================================================== */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at 75% 45%,

            rgba(244,180,0,.16),

            transparent 40%

        );

    pointer-events:none;

}

.hero::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-220px;

    top:-180px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(255,220,110,.10),

            transparent 70%

        );

    pointer-events:none;

}

/* ==========================================================
   TRUST
========================================================== */

.trust{

    position:relative;

}

.trust-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.trust-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.trust-card{

    padding:40px 32px;

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:var(--radius-lg);

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.trust-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.trust-icon{

    width:74px;

    height:74px;

    margin:0 auto 24px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#FFF4D5;

    font-size:2rem;

}

.trust-card h3{

    margin-bottom:16px;

}

.trust-card p{

    font-size:.95rem;

}

/* ==========================================================
   TRANSFORMATION
========================================================== */

.transformation-grid{

    display:grid;

    grid-template-columns:1fr 420px 1fr;

    align-items:center;

    gap:50px;

    margin-top:80px;

}

.before-card,
.after-card{

    padding:46px;

    border-radius:var(--radius-xl);

    background:#FFFFFF;

    border:1px solid var(--color-border);

    box-shadow:var(--shadow-sm);

}

.card-label{

    display:inline-flex;

    padding:10px 22px;

    border-radius:999px;

    background:#FFE6E6;

    color:#D63A3A;

    font-weight:700;

    margin-bottom:30px;

}

.card-label.success{

    background:#EAF9EF;

    color:#17A34A;

}

.before-card ul,
.after-card ul{

    display:grid;

    gap:22px;

}

.before-card li,
.after-card li{

    font-size:1.05rem;

}

.transformation-center{

    display:flex;

    justify-content:center;

}

.transformation-center img{

    width:360px;

    filter:

        drop-shadow(0 35px 70px rgba(0,0,0,.18));

}

/* ==========================================================
   BENEFITS
========================================================== */

.benefits-layout{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.benefit-large{

    min-height:320px;

}

.benefit-large,
.benefit-card,
.benefit-wide{

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    padding:44px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.benefit-large:hover,
.benefit-card:hover,
.benefit-wide:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.benefit-wide{

    grid-column:1/-1;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.benefit-icon{

    width:76px;

    height:76px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFF4D5;

    font-size:2rem;

    margin-bottom:28px;

}

.benefit-large h3,
.benefit-card h3{

    margin-bottom:18px;

}

.benefit-wide h3{

    margin-bottom:10px;

}

/* ==========================================================
   EXPERIENCE
========================================================== */

.experience-showcase{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:60px;

    align-items:center;

}

.showcase-main{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.showcase-main::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        rgba(244,180,0,.16),

        transparent 70%

    );

    z-index:1;

}

.showcase-main img{

    position:relative;

    width:520px;

    z-index:2;

    filter:drop-shadow(0 35px 70px rgba(0,0,0,.18));

}

.showcase-pages{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.showcase-pages img{

    border-radius:22px;

    border:1px solid var(--color-border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.showcase-pages img:hover{

    transform:translateY(-8px) scale(1.03);

    box-shadow:var(--shadow-lg);

}

.showcase-highlight{

    grid-column:1/-1;

    margin-top:30px;

    padding:34px;

    background:var(--gradient-primary);

    border-radius:var(--radius-xl);

    text-align:center;

}

.highlight-content span{

    display:block;

    font-size:.9rem;

    letter-spacing:2px;

    font-weight:700;

}

.highlight-content strong{

    display:block;

    font-size:5rem;

    line-height:1;

    margin:12px 0;

}

.highlight-content small{

    font-size:1.1rem;

    font-weight:600;

}

/* ==========================================================
   CONTENT
========================================================== */

.content-layout{

    display:grid;

    grid-template-columns:1fr 430px 1fr;

    gap:60px;

    align-items:center;

}

.content-column{

    display:grid;

    gap:22px;

}

.content-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px 26px;

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:20px;

    box-shadow:var(--shadow-xs);

    transition:var(--transition);

    font-weight:600;

}

.content-item:hover{

    transform:translateX(8px);

    box-shadow:var(--shadow-md);

}

.content-book{

    display:flex;

    justify-content:center;

}

.content-book img{

    width:400px;

    filter:drop-shadow(0 40px 80px rgba(0,0,0,.18));

}

/* ==========================================================
   BONUS
========================================================== */

.bonus-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:34px;

}

.bonus-card{

    display:flex;

    gap:28px;

    padding:30px;

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.bonus-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.bonus-card img{

    width:130px;

    border-radius:16px;

    flex-shrink:0;

}

.bonus-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.bonus-tag{

    display:inline-flex;

    align-self:flex-start;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:999px;

    background:#FFF4D5;

    color:#C28700;

    font-size:.78rem;

    font-weight:700;

}

.bonus-info h3{

    margin-bottom:14px;

}

.bonus-value{

    margin-top:60px;

    display:flex;

    justify-content:center;

    gap:30px;

}

.value-box{

    width:260px;

    padding:28px;

    background:#FFFFFF;

    border-radius:24px;

    text-align:center;

    border:1px solid var(--color-border);

}

.value-box small{

    display:block;

    margin-bottom:10px;

    color:var(--color-text-muted);

}

.value-box strong{

    font-size:2rem;

    font-weight:800;

}

.value-box.highlight{

    background:var(--gradient-primary);

}

/* ==========================================================
   TARGET
========================================================== */

.target-grid{

    display:grid;

    grid-template-columns:520px 1fr;

    align-items:center;

    gap:90px;

}

.target-image{

    position:relative;

}

.target-image::before{

    content:"";

    position:absolute;

    inset:40px;

    border-radius:40px;

    background:radial-gradient(

        rgba(244,180,0,.18),

        transparent 75%

    );

    z-index:1;

}

.target-image img{

    position:relative;

    border-radius:36px;

    box-shadow:var(--shadow-lg);

    z-index:2;

}

.target-content{

    max-width:650px;

}

.target-content h2{

    margin:20px 0 28px;

}

.target-content>p{

    margin-bottom:34px;

}

.target-list{

    display:grid;

    gap:18px;

}

.target-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    font-size:1.05rem;

}

/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    margin-top:70px;

}

.timeline-item{

    position:relative;

    padding:42px 30px;

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:30px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.timeline-item:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.timeline-number{

    width:70px;

    height:70px;

    margin:0 auto 28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gradient-primary);

    font-size:1.4rem;

    font-weight:800;

}

.timeline-item h3{

    margin-bottom:18px;

}

/* ==========================================================
   OFFER
========================================================== */

.offer-wrapper{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:60px;

    align-items:start;

}

.offer-left h2{

    margin:20px 0 26px;

}

.offer-left>p{

    margin-bottom:40px;

}

.offer-products{

    display:grid;

    gap:22px;

}

.offer-product{

    display:flex;

    align-items:center;

    gap:22px;

    padding:22px;

    background:#FFFFFF;

    border-radius:24px;

    border:1px solid var(--color-border);

    box-shadow:var(--shadow-xs);

}

.offer-product img{

    width:90px;

    border-radius:16px;

}

.offer-card{

    position:sticky;

    top:120px;

    padding:42px;

    background:#FFFFFF;

    border-radius:36px;

    border:2px solid rgba(244,180,0,.25);

    box-shadow:var(--shadow-xl);

}

.offer-badge{

    display:inline-flex;

    padding:10px 20px;

    border-radius:999px;

    background:#FFF4D5;

    color:#C28700;

    font-size:.82rem;

    font-weight:700;

}

.offer-prices{

    margin:34px 0;

    display:grid;

    gap:18px;

}

.price-line{

    display:flex;

    justify-content:space-between;

}

.total-value{

    margin:30px 0;

    padding:22px 0;

    border-top:1px solid var(--color-border);

    border-bottom:1px solid var(--color-border);

    display:flex;

    justify-content:space-between;

    font-weight:700;

}

.today-price{

    text-align:center;

    margin:40px 0;

}

.price{

    margin:16px 0;

}

.currency{

    font-size:2rem;

    vertical-align:top;

}

.value{

    font-size:5rem;

    font-weight:800;

    line-height:1;

}

.offer-security{

    display:grid;

    gap:14px;

    margin:34px 0;

}

.payment-methods{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.payment-methods img{

    height:32px;

    width:auto;

}

/* ==========================================================
   GUARANTEE
========================================================== */

.guarantee-grid{

    display:grid;

    grid-template-columns:320px 1fr;

    align-items:center;

    gap:80px;

}

.guarantee-seal{

    display:flex;

    justify-content:center;

}

.guarantee-seal img{

    width:260px;

}

.guarantee-content h2{

    margin:20px 0 26px;

}

.guarantee-content>p{

    margin-bottom:32px;

}

.guarantee-list{

    display:grid;

    gap:18px;

}

/* ==========================================================
   FAQ
========================================================== */

.faq-wrapper{

    max-width:900px;

    margin:70px auto 0;

}

.faq-item{

    margin-bottom:22px;

    background:#FFFFFF;

    border:1px solid var(--color-border);

    border-radius:22px;

    overflow:hidden;

}

.faq-question{

    width:100%;

    padding:28px;

    text-align:left;

    font-size:1.05rem;

    font-weight:700;

}

.faq-answer{

    padding:0 28px 28px;

    color:var(--color-text-light);

}

/* ==========================================================
   CTA FINAL
========================================================== */

.cta-final{

    color:#FFFFFF;

    background:linear-gradient(

        180deg,

        #1B1B1B,

        #0F0F0F

    );

}

.cta-wrapper{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.cta-book{

    width:320px;

    margin:0 auto 50px;

    filter:drop-shadow(0 35px 80px rgba(0,0,0,.40));

}

.cta-final h2{

    color:#FFFFFF;

    margin:20px 0 28px;

}

.cta-final p{

    color:rgba(255,255,255,.75);

    max-width:700px;

    margin:0 auto 42px;

}

.cta-final .section-tag{

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

    color:#FFD86A;

}

/* ==========================================================
   FOOTER
========================================================== */

.footer{

    padding:90px 0 40px;

    background:#111111;

    color:#FFFFFF;

}

.footer-top{

    display:grid;

    grid-template-columns:360px 1fr;

    gap:80px;

    margin-bottom:60px;

}

.footer-brand img{

    width:90px;

    margin-bottom:24px;

}

.footer-brand h3{

    margin-bottom:18px;

}

.footer-brand p{

    color:rgba(255,255,255,.65);

}

.footer-columns{

    display:grid;

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

    gap:40px;

}

.footer-column h4{

    margin-bottom:24px;

}

.footer-column ul{

    display:grid;

    gap:14px;

}

.footer-column a{

    color:rgba(255,255,255,.70);

    transition:var(--transition);

}

.footer-column a:hover{

    color:#FFFFFF;

}

.footer-security li{

    color:rgba(255,255,255,.70);

}

.footer-payments{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    padding:40px 0;

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

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

}

.footer-payments img{

    height:32px;

}

.footer-bottom{

    text-align:center;

    margin-top:40px;

}

.footer-bottom p{

    color:rgba(255,255,255,.50);

}

/* ==========================================================
   HEADER DESKTOP
========================================================== */

.menu-toggle{

    display:none !important;

}

.mobile-menu{

    display:none !important;

}

.mobile-nav{

    display:none !important;

}

.nav-mobile{

    display:none !important;

}

.header{

    height:88px;

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:48px;

    height:100%;

}

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

    flex-shrink:0;

}

.logo-title{

    font-size:2rem;

    font-weight:800;

    letter-spacing:-1px;

    text-transform:uppercase;

    color:#111;

}

.logo-subtitle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-left:8px;

    padding:4px 10px;

    border-radius:8px;

    background:#F5B400;

    color:#111;

    font-size:.78rem;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.nav-list{

    display:flex;

    align-items:center;

    gap:42px;

    list-style:none;

    margin:0;

    padding:0;

}

.nav-list a{

    font-weight:600;

}

.btn-header{

    margin-left:auto;

}

/*==========================================================
HEADER SCROLLED
==========================================================*/

.header{

    transition:
    background .35s ease,
    box-shadow .35s ease,
    padding .35s ease;

}

.header-scrolled{

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

    backdrop-filter:blur(18px);

    box-shadow:

    0 10px 35px rgba(0,0,0,.08);

}


/*==========================================================
ACTIVE MENU
==========================================================*/

.nav a{

    position:relative;

    transition:

    color .25s ease;

}

.nav a.active{

    color:var(--primary);

}

.nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:999px;

    background:var(--primary);

    transition:width .30s ease;

}

.nav a:hover::after,

.nav a.active::after{

    width:100%;

}


/*==========================================================
REVEAL
==========================================================*/

.reveal{

    opacity:0;

    transform:

    translateY(45px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.reveal.revealed{

    opacity:1;

    transform:none;

}


/*==========================================================
BODY LOADED
==========================================================*/

body{

    opacity:0;

    transition:opacity .4s ease;

}

body.loaded{

    opacity:1;

}


/*==========================================================
BACK TO TOP
==========================================================*/

.back-top{

    position:fixed;

    right:28px;

    bottom:28px;

    width:54px;

    height:54px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary);

    color:#111;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:999;

    box-shadow:

    0 12px 35px rgba(0,0,0,.18);

}

.back-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-top:hover{

    transform:

    translateY(-5px);

}


/*==========================================================
FAQ
==========================================================*/

.faq-item{

    overflow:hidden;

    transition:.35s;

}

.faq-question{

    cursor:pointer;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:

    max-height .45s ease,

    padding .35s ease;

}

.faq-item.active .faq-answer{

    max-height:450px;

}


/*==========================================================
BUTTONS
==========================================================*/

.btn{

    transition:

    transform .25s ease,

    box-shadow .25s ease,

    background .25s ease;

}

.btn:hover{

    box-shadow:

    0 18px 35px rgba(0,0,0,.12);

}


/*==========================================================
PERFORMANCE
==========================================================*/

img{

    image-rendering:auto;

    -webkit-user-drag:none;

    user-select:none;

}