/* =========================================================
   WYWALLET.IN.NET
   PREMIUM NAVY + RED THEME
   LOGO BASED DESIGN
   ========================================================= */


/* =========================================================
   GLOBAL RESET
   ========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:85px;
}

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

}

body{

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size:15px;
    line-height:1.8;

    color:#203028;

    background:
        linear-gradient(
            180deg,
            #F8FCF9 0%,
            #ffffff 32%,
            #FBFDFC 100%
        );

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

}


/* =========================================================
   THEME VARIABLES
   ========================================================= */

:root{

    --primary:#138A3D;

    --primary-dark:#08652C;

    --primary-light:#EEF9F2;

    --primary-soft:#F5FBF7;

    --red:#F07800;

    --red-dark:#C45E00;

    --red-light:#FFF5E8;

    --white:#ffffff;

    --text:#203028;

    --text-light:#66736B;

    --border:#DDE7E0;

    --shadow:
        0 8px 30px rgba(19,138,61,.10);

    --shadow-hover:
        0 14px 38px rgba(19,138,61,.16);

    --radius:16px;

    --radius-small:10px;

}


/* =========================================================
   BASIC ELEMENTS
   ========================================================= */

a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;

}

a:hover{

    color:var(--red);

    text-decoration:none;

}


img{

    max-width:100%;

    height:auto;

    display:block;

}


img[loading="lazy"]{

    content-visibility:auto;

}


strong{

    color:var(--primary-dark);

    font-weight:750;

}


p{

    font-size:15px;

    color:var(--text);

    margin-bottom:15px;

    font-weight:400;

}


ul{

    margin-bottom:15px;

}


li{

    color:var(--text);

}


/* =========================================================
   CONTAINER
   ========================================================= */

.container{

    width:100%;

    max-width:960px;

    margin:0 auto;

    padding:18px 20px;

}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3{

    color:var(--primary);

    font-weight:800;

    line-height:1.35;

    margin-top:28px;

    margin-bottom:12px;

}


h1{

    font-size:30px;

}


h2{

    font-size:24px;

}


h3{

    font-size:20px;

}


h4{

    font-size:16px;

    color:var(--primary);

    font-weight:750;

    margin-top:16px;

    margin-bottom:8px;

}


h1::after,
h2::after,
h3::after{

    content:"";

    display:block;

    width:64px;

    height:3px;

    margin-top:8px;

    border-radius:50px;

    background:

        linear-gradient(
            90deg,
            var(--primary),
            var(--red)
        );

}


h1.hero-title::after{

    display:none;

}


/* =========================================================
   SKIP LINK
   ========================================================= */

.skip-link{

    position:absolute;

    top:-50px;

    left:12px;

    z-index:10000;

    padding:9px 15px;

    border-radius:0 0 8px 8px;

    background:var(--primary);

    color:var(--white);

    font-weight:700;

    box-shadow:var(--shadow);

}


.skip-link:focus{

    top:0;

}


/* =========================================================
   DISCLAIMER BAR
   ========================================================= */

.disclaimer-bar{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

    padding:9px 16px;

    background:

        linear-gradient(
            90deg,
            var(--primary-dark),
            var(--primary)
        );

    color:var(--white);

    font-size:13px;

    font-weight:600;

    border-bottom:2px solid var(--red);

}


.disclaimer-bar .badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:var(--red);

    color:var(--white);

    padding:3px 10px;

    border-radius:6px;

    font-size:11px;

    font-weight:800;

    letter-spacing:.3px;

    white-space:nowrap;

}


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

header{

    position:sticky;

    top:0;

    z-index:999;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:10px 20px;

    background:

        rgba(255,255,255,.97);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border-bottom:2px solid var(--primary);

    box-shadow:
        0 4px 18px rgba(19,138,61,.11);

}


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

.logo{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    min-width:0;

}


.logo img{

    width:46px;

    height:46px;

    object-fit:contain;

    border-radius:10px;

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

    box-shadow:
        0 3px 10px rgba(19,138,61,.11);

}


.logo > span{

    font-size:20px;

    font-weight:900;

    line-height:1;

    letter-spacing:-.4px;

}


.logo .brand-wy{

    color:var(--red);

    font-style:normal;

}


.logo .brand-wallet{

    color:var(--primary);

    font-style:normal;

}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.menu-btn{

    width:46px;

    height:46px;

    min-width:46px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    border:2px solid var(--primary);

    border-radius:11px;

    background:var(--primary);

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.menu-btn:hover{

    background:var(--red);

    border-color:var(--red);

}


.menu-btn:active{

    transform:scale(.96);

}


.menu-btn span{

    display:block;

    width:23px;

    height:3px;

    background:var(--white);

    border-radius:10px;

}


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

.nav-overlay{

    display:none;

    position:fixed;

    inset:0;

    z-index:1000;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
        rgba(6,69,30,.72);

    backdrop-filter:blur(5px);

    -webkit-backdrop-filter:blur(5px);

}


.nav-overlay.open{

    display:flex;

}


/* =========================================================
   NAV MODAL
   ========================================================= */

.nav-modal{

    position:relative;

    width:330px;

    max-width:92vw;

    padding:32px 20px 20px;

    background:var(--white);

    border-radius:20px;

    border:2px solid var(--primary);

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);

    animation:
        swayMenuIn .22s ease;

}


@keyframes swayMenuIn{

    from{

        opacity:0;

        transform:
            translateY(-15px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   NAV CLOSE
   ========================================================= */

.nav-close{

    position:absolute;

    top:-14px;

    right:-14px;

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:2px solid var(--white);

    background:var(--red);

    color:var(--white);

    font-size:17px;

    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 5px 16px rgba(0,0,0,.18);

}


.nav-close:hover{

    background:var(--primary);

}


/* =========================================================
   NAV LINKS
   ========================================================= */

.nav-modal a{

    display:block;

    margin:8px 0;

    padding:13px 15px;

    border-radius:11px;

    background:var(--primary-soft);

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

    color:var(--primary);

    text-align:center;

    font-size:15px;

    font-weight:750;

}


.nav-modal a:hover{

    background:var(--primary);

    color:var(--white);

    border-color:var(--primary);

    transform:translateY(-1px);

}


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

.hero{

    position:relative;

    margin:20px auto;

    width:calc(100% - 30px);

    max-width:920px;

    padding:32px 22px 28px;

    text-align:center;

    background:

        linear-gradient(
            145deg,
            #ffffff 0%,
            #F8FCF9 100%
        );

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

    border-top:5px solid var(--primary);

    border-bottom:5px solid var(--red);

    border-radius:22px;

    box-shadow:var(--shadow);

    overflow:hidden;

}


.hero::before{

    content:"";

    position:absolute;

    top:-100px;

    left:-100px;

    width:240px;

    height:240px;

    border-radius:50%;

    background:
        rgba(19,138,61,.06);

}


.hero::after{

    content:"";

    position:absolute;

    right:-90px;

    bottom:-110px;

    width:240px;

    height:240px;

    border-radius:50%;

    background:
        rgba(239,16,28,.06);

}


.hero > *{

    position:relative;

    z-index:1;

}


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

.hero-logo{

    width:145px;

    height:145px;

    margin:0 auto 18px;

    object-fit:contain;

    border-radius:24px;

    border:3px solid var(--white);

    outline:2px solid var(--red);

    box-shadow:
        0 10px 28px rgba(19,138,61,.16);

}


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

.hero-title{

    display:block;

    margin:0 auto 16px;

    max-width:760px;

    padding:16px 20px;

    border-radius:14px;

    background:

        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    color:var(--white);

    font-size:24px;

    font-weight:850;

    line-height:1.45;

    box-shadow:
        0 7px 20px rgba(19,138,61,.18);

}


.hero-sub{

    max-width:760px;

    margin:0 auto 18px;

    color:var(--text);

    font-size:15px;

    line-height:1.8;

}


.hero-sub strong{

    color:var(--red);

}


.hero-tagline{

    margin-top:15px;

    margin-bottom:0;

    color:var(--primary);

    font-size:14px;

    font-weight:800;

    letter-spacing:.6px;

}


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

.btn-register,
.btn-download,
.btn-telegram,
.btn-backlink{

    display:block;

    width:100%;

    min-height:48px;

    margin:0 auto 11px;

    padding:13px 18px;

    border-radius:12px;

    text-align:center;

    font-size:15px;

    font-weight:800;

    text-decoration:none;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.btn-register:hover,
.btn-download:hover,
.btn-telegram:hover,
.btn-backlink:hover{

    transform:translateY(-2px);

    text-decoration:none;

}


.btn-register{

    color:var(--white);

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    box-shadow:
        0 6px 15px rgba(19,138,61,.18);

}


.btn-register:hover{

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            #06451E
        );

}


.btn-download{

    color:var(--white);

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--red-dark)
        );

    box-shadow:
        0 6px 15px rgba(240,120,0,.18);

}


.btn-download:hover{

    background:
        linear-gradient(
            135deg,
            var(--red-dark),
            #A64F00
        );

}


.btn-telegram{

    color:var(--white);

    background:#168BD1;

    box-shadow:
        0 6px 15px rgba(22,139,209,.16);

}


.btn-telegram:hover{

    background:#0875B8;

}


.btn-backlink{

    color:var(--primary);

    background:var(--primary-light);

    border:1px solid #C9E3D0;

}


.btn-backlink:hover{

    color:var(--white);

    background:var(--primary);

    border-color:var(--primary);

}


/* =========================================================
   DIVIDER
   ========================================================= */

hr.divider{

    width:100%;

    border:0;

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

    margin:28px 0;

}


/* =========================================================
   UPDATED DATE
   ========================================================= */

.content-updated{

    width:100%;

    margin:18px 0;

    padding:10px 14px;

    border-radius:10px;

    background:var(--primary-light);

    border:1px solid #D4E9DA;

    color:var(--primary);

    text-align:center;

    font-size:13px;

    font-weight:700;

}


/* =========================================================
   INTRO HIGHLIGHT
   ========================================================= */

.intro-highlight{

    position:relative;

    padding:22px;

    margin:18px 0;

    border-radius:16px;

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #f5f6ff
        );

    border:2px solid var(--primary);

    box-shadow:var(--shadow);

}


.intro-highlight h2{

    margin-top:0;

    color:var(--primary);

    font-size:21px;

}


.intro-highlight h2::after{

    background:var(--red);

}


.intro-highlight p{

    color:var(--text);

    font-size:15px;

}


.intro-highlight ul{

    list-style:none;

    margin:12px 0 0;

    padding:0;

}


.intro-highlight li{

    padding:9px 0;

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

    font-size:14px;

    font-weight:600;

}


.intro-highlight li:last-child{

    border-bottom:0;

}


/* =========================================================
   OFFICIAL INFORMATION BOX
   ========================================================= */

.official-box{

    padding:16px 18px;

    margin:18px 0;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    color:var(--white);

    border:2px solid var(--red);

    text-align:center;

    font-size:14px;

    line-height:1.75;

    box-shadow:
        0 7px 22px rgba(19,138,61,.14);

}


.official-box strong{

    color:var(--white);

}


.official-box a{

    color:#FFE3C7;

    text-decoration:underline;

}


/* =========================================================
   WARNING BOX
   ========================================================= */

.warning-box{

    margin:16px 0;

    padding:14px 16px;

    background:var(--red-light);

    border-left:5px solid var(--red);

    border-radius:10px;

    color:#4A351F;

    font-size:14px;

    line-height:1.7;

}


.warning-box strong{

    color:var(--red-dark);

}


/* =========================================================
   NOTE BOX
   ========================================================= */

.note-box{

    margin:16px 0;

    padding:14px 16px;

    background:var(--primary-light);

    border-left:5px solid var(--primary);

    border-radius:10px;

    color:var(--text);

    font-size:14px;

}


.note-box strong{

    color:var(--primary);

}


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

.trust-badge{

    margin:16px 0;

    padding:11px 14px;

    border-radius:10px;

    background:var(--primary-light);

    border:1px solid #CDE5D5;

    color:var(--primary);

    text-align:center;

    font-size:13px;

    font-weight:750;

}


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

.content-box{

    margin:17px 0;

    padding:20px;

    background:var(--white);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


.content-box:hover{

    border-color:#BFDCC8;

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

}


.content-box p{

    margin-bottom:12px;

}


.content-box ul{

    margin:12px 0 15px;

    padding:14px 16px 14px 34px;

    background:var(--primary-soft);

    border:1px solid #DDEEE3;

    border-radius:11px;

}


.content-box li{

    margin-bottom:7px;

    font-size:14px;

    line-height:1.7;

}


.content-box li:last-child{

    margin-bottom:0;

}


/* =========================================================
   HEADING WITH DOT
   ========================================================= */

.heading-with-dot{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:13px;

}


.heading-dot{

    flex:0 0 auto;

    width:12px;

    height:12px;

    border-radius:4px;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--red)
        );

    box-shadow:
        0 2px 6px rgba(19,138,61,.16);

}


.heading-with-dot h2,
.heading-with-dot h3{

    margin:0;

    display:inline;

    font-size:21px;

}


.heading-with-dot h2::after,
.heading-with-dot h3::after{

    display:none;

}


/* =========================================================
   INLINE GUIDE BUTTON
   ========================================================= */

.guide-btn-inline{

    display:block;

    width:100%;

    max-width:320px;

    margin:18px auto 4px;

    padding:13px 18px;

    min-height:46px;

    border-radius:12px;

    background:var(--primary);

    color:var(--white);

    text-align:center;

    font-weight:800;

    box-shadow:
        0 6px 16px rgba(19,138,61,.16);

}


.guide-btn-inline:hover{

    background:var(--red);

    color:var(--white);

    transform:translateY(-2px);

}


/* =========================================================
   GUIDE BUTTON
   ========================================================= */

.guide-btn{

    display:block;

    width:max-content;

    max-width:100%;

    margin:16px auto 4px;

    padding:11px 24px;

    min-height:45px;

    border:2px solid var(--primary);

    border-radius:12px;

    background:var(--white);

    color:var(--primary);

    text-align:center;

    font-weight:800;

}


.guide-btn:hover{

    background:var(--primary);

    color:var(--white);

}


/* =========================================================
   CONCLUSION BOX
   ========================================================= */

.conclusion-box{

    margin:22px 0;

    padding:24px;

    border-radius:17px;

    background:

        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    color:var(--white);

    text-align:center;

    border:3px solid var(--red);

    box-shadow:
        0 10px 28px rgba(19,138,61,.18);

}


.conclusion-box h2{

    margin-top:0;

    color:var(--white)!important;

    font-size:22px;

}


.conclusion-box h2::after{

    background:var(--red);

}


.conclusion-box p{

    color:#ffffff!important;

    font-size:14px;

}


.conclusion-box strong{

    color:#ffffff;

}


.conclusion-btn{

    display:inline-block;

    margin-top:12px;

    padding:13px 28px;

    border-radius:12px;

    background:var(--red);

    color:var(--white);

    border:2px solid var(--white);

    font-weight:800;

}


.conclusion-btn:hover{

    background:var(--white);

    color:var(--red);

}


/* =========================================================
   END PART 1
   ========================================================= */
   
   /* =========================================================
   TABLES
   ========================================================= */

.table-wrap{

    width:100%;

    overflow-x:auto;

    margin:15px 0;

    border-radius:12px;

    -webkit-overflow-scrolling:touch;

}


.info-table,
.ref-table,
.pros-cons-table,
.compare-table{

    width:100%;

    min-width:620px;

    border-collapse:collapse;

    background:var(--white);

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

    border-radius:10px;

    overflow:hidden;

}


.info-table th,
.ref-table th,
.pros-cons-table th,
.compare-table th{

    padding:12px 10px;

    background:var(--primary);

    color:var(--white);

    border:1px solid rgba(255,255,255,.18);

    font-size:14px;

    font-weight:800;

    text-align:left;

}


.info-table td,
.ref-table td,
.pros-cons-table td,
.compare-table td{

    padding:11px 10px;

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

    color:var(--text);

    font-size:14px;

    vertical-align:top;

}


.info-table tbody tr:nth-child(even),
.ref-table tbody tr:nth-child(even),
.compare-table tbody tr:nth-child(even){

    background:var(--primary-soft);

}


.info-table tbody tr:hover,
.ref-table tbody tr:hover,
.compare-table tbody tr:hover{

    background:#EEF9F2;

}


/* =========================================================
   REFERRAL TABLE
   ========================================================= */

.ref-table{

    text-align:center;

}


.ref-table th{

    text-align:center;

}


.ref-table td{

    text-align:center;

}


.ref-table tbody tr:nth-child(even){

    background:var(--red-light);

}


/* =========================================================
   PROS / CONS TABLE
   ========================================================= */

.pros-cons-table{

    min-width:580px;

}


.pros-cons-table th{

    text-align:center;

}


.pros-cons-table td{

    vertical-align:top;

}


.pros-cons-table .pros-cell{

    background:#EEF9F2;

    color:var(--primary);

    font-weight:600;

}


.pros-cons-table .cons-cell{

    background:var(--red-light);

    color:#8A4A00;

    font-weight:600;

}


/* =========================================================
   COMPARISON TABLE
   ========================================================= */

.compare-table{

    text-align:center;

}


.compare-table th{

    text-align:center;

}


.compare-table td{

    text-align:center;

}


.compare-table .best-cell{

    background:var(--primary-light);

    color:var(--primary);

    font-weight:850;

}


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

#faq{

    margin-top:25px;

}


#faq > h2{

    margin-top:0;

}


.faq-item{

    margin:11px 0;

    padding:16px 18px;

    border-radius:13px;

    background:var(--white);

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

    border-left:5px solid var(--primary);

    box-shadow:
        0 5px 18px rgba(19,138,61,.07);

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.faq-item:hover{

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

    transform:translateX(2px);

    box-shadow:
        0 8px 24px rgba(19,138,61,.11);

}


.faq-item h4{

    display:flex;

    align-items:center;

    gap:7px;

    margin:0 0 8px;

    color:var(--primary);

    font-size:15px;

    line-height:1.55;

}


.faq-item p{

    margin:0;

    color:var(--text);

    font-size:14px;

}


.faq-item a{

    color:var(--red);

    text-decoration:underline;

}


.faq-number{

    flex:0 0 auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:27px;

    height:27px;

    border-radius:50%;

    background:var(--primary);

    color:var(--white);

    font-size:11px;

    font-weight:850;

}


.faq-item:hover .faq-number{

    background:var(--red);

}


/* =========================================================
   AUTHOR BOX
   ========================================================= */

.author-box{

    margin:22px 0;

    padding:20px;

    border-radius:15px;

    background:

        linear-gradient(
            135deg,
            #F5FBF7,
            #FFF8F0
        );

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

    text-align:center;

    box-shadow:
        0 6px 20px rgba(19,138,61,.07);

}


.author-box h3{

    margin:0 0 10px;

    font-size:19px;

}


.author-box p{

    max-width:720px;

    margin:7px auto;

    font-size:14px;

}


.author-box strong{

    color:var(--primary);

}


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

footer{

    margin-top:30px;

    padding:28px 18px 18px;

    background:

        linear-gradient(
            145deg,
            var(--primary-dark),
            var(--primary)
        );

    color:var(--white);

    text-align:center;

    border-top:4px solid var(--red);

}


.footer-logo{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    margin-bottom:14px;

}


.footer-logo img{

    width:42px;

    height:42px;

    object-fit:contain;

    border-radius:9px;

    border:1px solid rgba(255,255,255,.25);

}


.footer-logo > span{

    font-size:20px;

    font-weight:900;

}


.footer-logo .brand-wy{

    color:#FF9A2E;

}


.footer-logo .brand-wallet{

    color:#FF9A2E;

}


.footer-links{

    margin:8px auto 14px;

    line-height:2.4;

}


.footer-links a{

    display:inline-block;

    margin:2px 7px;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

}


.footer-links a:hover{

    color:#FFB45A;

    text-decoration:underline;

}


.footer-bottom{

    padding-top:15px;

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

    color:#dce0ff;

    font-size:12px;

    line-height:1.8;

}


.footer-bottom strong{

    color:#ffffff;

}


/* =========================================================
   FOOTER RELATED LINKS
   ========================================================= */

footer a{

    color:#ffffff;

}


footer a:hover{

    color:#FFB45A;

}


/* =========================================================
   KEYWORD GUIDE
   ========================================================= */

#wywallet-keyword-guide{

    border-top:3px solid var(--red);

}


#wywallet-keyword-guide strong{

    color:var(--primary);

}


/* =========================================================
   DOWNLOAD GUIDE
   ========================================================= */

#download-guide{

    border-top:3px solid var(--primary);

}


/* =========================================================
   REGISTER SECTION
   ========================================================= */

#register{

    border-top:3px solid var(--red);

}


/* =========================================================
   LOGIN SECTION
   ========================================================= */

#login{

    border-top:3px solid var(--primary);

}


/* =========================================================
   LIST STYLING
   ========================================================= */

.content-box ul li::marker{

    color:var(--red);

}


.intro-highlight ul li::first-letter{

    color:var(--primary);

}


/* =========================================================
   BUTTON ACCESSIBILITY
   ========================================================= */

button,
a{

    -webkit-tap-highlight-color:transparent;

}


button:focus-visible,
a:focus-visible{

    outline:3px solid rgba(240,120,0,.35);

    outline-offset:3px;

}


/* =========================================================
   SELECTION
   ========================================================= */

::selection{

    background:var(--primary);

    color:var(--white);

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{

    width:9px;

    height:9px;

}


::-webkit-scrollbar-track{

    background:#eef0f7;

}


::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

    background:var(--red);

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    body{

        font-size:14px;

        line-height:1.75;

    }


    .container{

        padding:12px 13px;

    }


    h1{

        font-size:23px;

    }


    h2{

        font-size:20px;

    }


    h3{

        font-size:17px;

    }


    h4{

        font-size:15px;

    }


    header{

        padding:9px 13px;

    }


    .logo img{

        width:40px;

        height:40px;

    }


    .logo > span{

        font-size:18px;

    }


    .hero{

        width:calc(100% - 20px);

        margin:12px auto;

        padding:25px 15px 22px;

        border-radius:18px;

    }


    .hero-logo{

        width:105px;

        height:105px;

        border-radius:20px;

    }


    .hero-title{

        padding:13px 13px;

        font-size:18px;

        line-height:1.45;

    }


    .hero-sub{

        font-size:14px;

    }


    .btn-register,
    .btn-download,
    .btn-telegram,
    .btn-backlink{

        min-height:48px;

        padding:13px 12px;

        font-size:14px;

    }


    .content-box{

        padding:16px 14px;

        border-radius:13px;

    }


    .intro-highlight{

        padding:17px 15px;

    }


    .heading-with-dot h2,
    .heading-with-dot h3{

        font-size:18px;

    }


    .content-box p{

        font-size:14px;

    }


    .content-box li{

        font-size:13.5px;

    }


    .official-box,
    .warning-box,
    .note-box{

        font-size:13.5px;

    }


    .table-wrap{

        margin-left:-2px;

        margin-right:-2px;

    }


    .info-table,
    .ref-table,
    .pros-cons-table,
    .compare-table{

        min-width:600px;

    }


    .info-table th,
    .info-table td,
    .ref-table th,
    .ref-table td,
    .pros-cons-table th,
    .pros-cons-table td,
    .compare-table th,
    .compare-table td{

        padding:8px 7px;

        font-size:12px;

    }


    .faq-item{

        padding:14px 12px;

    }


    .faq-item h4{

        align-items:flex-start;

        font-size:14px;

    }


    .faq-number{

        width:24px;

        height:24px;

        min-width:24px;

        font-size:10px;

    }


    .faq-item p{

        font-size:13.5px;

    }


    .author-box{

        padding:17px 13px;

    }


    .footer-links a{

        margin:2px 5px;

        font-size:12px;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

    .logo > span{

        font-size:16px;

    }


    .menu-btn{

        width:43px;

        height:43px;

        min-width:43px;

    }


    .hero{

        padding:22px 12px;

    }


    .hero-logo{

        width:92px;

        height:92px;

    }


    .hero-title{

        font-size:16px;

    }


    .hero-sub{

        font-size:13px;

    }


    .content-box{

        padding:14px 12px;

    }


    .content-box ul{

        padding-left:28px;

    }


    .heading-with-dot h2,
    .heading-with-dot h3{

        font-size:17px;

    }


    .conclusion-box{

        padding:19px 14px;

    }


    .conclusion-box h2{

        font-size:19px;

    }


    .nav-modal{

        width:290px;

        padding-left:15px;

        padding-right:15px;

    }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print{

    body{

        background:#fff;

        color:#000;

    }


    header,
    .menu-btn,
    .nav-overlay,
    .btn-register,
    .btn-download,
    .btn-telegram,
    .btn-backlink{

        display:none!important;

    }


    .hero,
    .content-box,
    .intro-highlight,
    .author-box{

        box-shadow:none;

        border:1px solid #ccc;

    }


    a{

        color:#000;

    }

}



/* =========================================================
   END WYWALLET CSS
   ========================================================= */