/* canadamining.ai static styles */
 :root{
     --bg:#1a0f0d;
     --fg:#f5f0ee;
     --muted:#cfd5de;
     --card:#241612;
     --border:rgba(63 159 223 / 37%);
     --primary:#419edf;
     --primary-2:#324e6c;
     --accent:#f48a6e;
     --radius:1rem;
}
 *{
    box-sizing:border-box;
    margin:0;
    padding:0;
    border-color:var(--border)
}
 html{
    scroll-behavior:smooth
}
 body{
     font-family:'Inter',system-ui,sans-serif;
     background:var(--bg);
     color: #e5eff6;
     background-image: radial-gradient(ellipse at top, rgb(23 41 59), transparent 60%), radial-gradient(ellipse at bottom right, rgb(20 35 51), transparent 60%);
     background-attachment:fixed;
     line-height:1.55;
     -webkit-font-smoothing:antialiased;
}
 h1,h2,h3,h4{
    font-family:'Sora',sans-serif;
    letter-spacing:-.02em;
    line-height:1.1
}
 a{
    color:inherit;
    text-decoration:none
}
 img{
    display:block;
    max-width:100%
}
 ul{
    list-style:none
}
 .container{
    max-width:1200px;
    margin:0 auto;
    padding:0 1rem
}
 .center{
    text-align:center
}
/* Glass card */
 .glass{
     background: rgb(49 77 107 / 22%);
     backdrop-filter:blur(20px);
     -webkit-backdrop-filter:blur(20px);
     border:1px solid var(--border);
     border-radius:1.5rem;
}
/* Text */
 .text-gradient{
     background: linear-gradient(135deg, #409edf, #314d6b);
     -webkit-background-clip:text;
     background-clip:text;
     color:transparent;
}
 .muted{
    color:var(--muted)
}
 .small{
    font-size:.875rem
}
 .tiny{
    font-size:.75rem
}
/* Buttons */
 .btn-primary,.btn-ghost{
     display:inline-flex;
    align-items:center;
    gap:.5rem;
     padding:.875rem 2rem;
    border-radius:9999px;
    font-weight:600;
     font-size:.95rem;
    transition:all .3s;
    cursor:pointer;
    border:none;
}
 .btn-primary{
     background: linear-gradient(135deg, #41a0df, #324e6c);
     color:#fff;
     box-shadow:0 10px 30px -10px rgb(49 78 107);
}
 .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow: 0 15px 40px -10px rgb(64 152 211);
}
 .btn-ghost{
     border:1px solid var(--border);
     background: rgb(19 35 51);
     color:var(--fg);
}

.btn-ghost:hover {
    background: rgb(49 77 107);
}

 .chip{
     display:inline-flex;
     align-items:center;
     gap:.5rem;
     padding:.5rem 1.25rem;
     border-radius:9999px;
     background: rgb(19 35 51);
     border: 1px solid rgb(63 159 223 / 37%);
     font-size:.875rem;
}
 .chip .dot{
    height:6px;
    width:6px;
    border-radius:50%;
    background: #409edf;
}
 .chip .dot.pulse{
    animation:pulse 2s ease-in-out infinite
}
 @keyframes pulse{
    0%,100%{
        opacity:1
    }
    50%{
        opacity:.4
    }
}
/* Header */
 .site-header{
    position:sticky;
    top:0;
    z-index:50;
    width:100%
}
 .header-inner{
     max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
     justify-content:space-between;
    padding:1rem;
    gap:1rem;
}
 .brand{
    display:flex;
    align-items:center;
    gap:.75rem
}
 
 .brand img {
    width: 140px;
    border-radius: 0px;
    background: #ffffff;
    padding: 10px 20px;
    float: left;
    margin-bottom: -10px;
    margin-top: -10px;
}


 .brand-name{
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:1rem
}
 .brand-name .accent{
    color:var(--primary)
}
 .brand-tag{
    font-size:10px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted)
}
 .nav-pill{
     display:none;
     background: rgb(19 35 51);
     backdrop-filter:blur(20px);
     border: 1px solid rgb(63 159 223 / 37%);
     border-radius:9999px;
     padding:.4rem;
}
 .nav-pill a{
    padding:.5rem 1rem;
    border-radius:9999px;
    font-size:.875rem;
    font-weight:500;
    color:rgb(224 242 255);
    transition:.2s
}
 .nav-pill a:hover{
    background: rgb(29 50 72);
    color:#74bef0;
}
 .menu-btn{
    background:none;
    border:none;
    color:var(--fg);
    cursor:pointer;
    display:inline-flex;
    padding:.5rem
}
 .mobile-nav{
    display:none;
    flex-direction:column;
    gap:.25rem;
    margin:0 1rem;
    padding:1rem;
    border-radius:1rem
}
 .mobile-nav.open{
    display:flex
}
 .mobile-nav a{
    padding:.625rem 1rem;
    border-radius:.5rem;
    font-size:.875rem
}
 .mobile-nav a:hover{
    background:rgb(63 159 222 / 15%);
}
 @media(min-width:1024px){
     .nav-pill{
        display:flex
    }
     .menu-btn{
        display:none
    }
}
 @media(min-width:768px){
     .header-cta{
        display:inline-flex
    }
}
 .header-cta{
    display:none
}
/* Hero */
 .hero{
    padding:3rem 0 5rem
}
 .hero h1{
    font-size:clamp(2.5rem,6vw,4.5rem);
    font-weight:700;
    margin-top:2rem
}
 .hero p.lead{
    margin:2rem auto 0;
    max-width:48rem;
    font-size:1.125rem;
    color: #cdd4dd;
}
 .hero .cta-row{
    margin-top:2.5rem;
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    justify-content:center
}
 .hero .stats{
    margin-top:2.5rem;
    font-size:.875rem;
    color:var(--muted)
}
 .hero .stats strong{
    color:var(--fg)
}
/* Marquee */

.marquee-wrap {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgb(19 35 51);
    padding: 1.25rem 0;
}


 .marquee{
    display:flex;
    gap:3rem;
    width:max-content;
    animation:marquee 40s linear infinite;
    white-space:nowrap
}
 .marquee div{
    display:flex;
    align-items:center;
    gap:1.5rem;
    font-family:'Sora',sans-serif;
    font-weight:500;
    font-size:1.25rem
}
 .marquee .sparkle{
    color:var(--primary);
    font-size:1rem
}
 @keyframes marquee{
    from{
        transform:translateX(0)
    }
    to{
        transform:translateX(-50%)
    }
}
/* Sections */
 section.block{
    padding:6rem 0
}
 .section-label{
    display:flex;
    justify-content:center;
    margin-bottom:1.5rem
}
 .section-title{
    text-align:center;
    font-family:'Sora',sans-serif;
    font-size:clamp(2rem,4vw,3rem);
    font-weight:700
}
 .section-sub{
    margin:1.5rem auto 0;
    max-width:48rem;
    text-align:center;
    color: #ced4dd;
}
/* Grids */
 .grid{
    display:grid;
    gap:1.5rem
}
 .grid.cols-2{
    grid-template-columns:1fr
}
 .grid.cols-3{
    grid-template-columns:1fr
}
 .grid.cols-4{
    grid-template-columns:1fr
}
 @media(min-width:768px){
     .grid.cols-2{
        grid-template-columns:repeat(2,1fr)
    }
     .grid.cols-3{
        grid-template-columns:repeat(2,1fr)
    }
     .grid.cols-4{
        grid-template-columns:repeat(2,1fr)
    }
}
 @media(min-width:1024px){
     .grid.cols-3{
        grid-template-columns:repeat(3,1fr)
    }
     .grid.cols-4{
        grid-template-columns:repeat(4,1fr)
    }
}
 .card{
    padding:2rem;
    border-radius:1.5rem
}
 .card .icon-box{
     display:inline-flex;
    align-items:center;
    justify-content:center;
     height:3rem;
    width:3rem;
    border-radius:1rem;
     background:rgb(49 77 107);
    color:var(--primary);
}
 .card .icon-grad{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     height:3rem;
     width:3rem;
     border-radius:1rem;
     flex-shrink:0;
     background: linear-gradient(135deg, var(--primary), #314d6b);
     color:#fff;
}
 .card h3{
    margin-top:1.25rem;
    font-size:1.25rem;
    font-weight:600
}
 .card p{
    margin-top:.75rem;
    font-size:.875rem;
    color: #cdd4dd;
}
 .value-row{
    display:flex;
    gap:1rem;
    align-items:flex-start
}
 .value-row h3{
    margin-top:0
}
/* How we work numbered */
 .step-n{
    font-family:'Sora',sans-serif;
    font-size:3rem;
    font-weight:700;
    color: rgb(49 77 107);
}
/* Outcomes */
 .outcomes{
    margin-top:5rem;
    padding:3rem;
    border-radius:1.5rem
}
 .outcomes h3{
    font-size:1.875rem;
    font-weight:700;
    text-align:center
}
 .outcomes ul{
    margin-top:2.5rem;
    display:grid;
    gap:1rem;
    grid-template-columns:1fr
}
 @media(min-width:768px){
    .outcomes ul{
        grid-template-columns:repeat(2,1fr)
    }
}
 .outcomes li{
    display:flex;
    gap:.75rem;
    align-items:flex-start;
    font-size:.875rem
}
 .check{
    color:var(--primary);
    flex-shrink:0;
    margin-top:.125rem
}
/* About highlight */
 .about-stat{
     padding:2rem;
     border-radius:1.5rem;
     text-align:center;
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     background: linear-gradient(135deg, rgb(50 78 107), rgb(16 37 59));
     border:1px solid var(--border);
}
 .about-stat .big{
    font-family:'Sora',sans-serif;
    font-size:4.5rem;
    font-weight:700
}
 .about-stat .lbl{
    margin-top:.75rem;
    font-size:.75rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted)
}
/* FAQ */
 .faq-wrap{
    max-width:64rem;
    margin:0 auto;
    padding:0 1rem
}
 .faq-list{
    margin-top:3.5rem;
    display:flex;
    flex-direction:column;
    gap:.75rem
}
 .faq-item{
    border-radius:1rem;
    overflow:hidden
}
 .faq-q{
     width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
     gap:1.5rem;
    padding:1.5rem;
    text-align:left;
    background:none;
    border:none;
    color:inherit;
    cursor:pointer;
    font:inherit;
}
 .faq-q span:first-child{
    font-family:'Sora',sans-serif;
    font-weight:600;
    font-size:1rem
}
 .faq-icon{
     flex-shrink:0;
     height:2rem;
     width:2rem;
     border-radius:50%;
     background: rgb(49 77 107);
     color:var(--primary);
     display:flex;
     align-items:center;
     justify-content:center;
     font-size:1.25rem;
     font-weight:300;
}
 .faq-a{
    padding:0 1.5rem 1.5rem;
    font-size:.875rem;
    color:var(--muted);
    display:none
}
 .faq-item.open .faq-a{
    display:block
}
 .faq-item.open .faq-icon::before{
    content:"-"
}
 .faq-item:not(.open) .faq-icon::before{
    content:"+"
}
 .faq-icon{
    font-size:0
}
 .faq-icon::before{
    font-size:1.25rem
}
/* Book */
 .book-card{
     padding:3rem 2rem;
     border-radius:2rem;
     text-align:center;
     background: linear-gradient(135deg, rgb(49 77 107), transparent, rgb(49 78 107));
     border:1px solid var(--border);
}
 @media(min-width:768px){
    .book-card{
        padding:4rem
    }
}
 .book-list{
    margin:2.5rem auto 0;
    display:grid;
    gap:1rem;
    max-width:48rem;
    grid-template-columns:1fr;
    text-align:left
}
 @media(min-width:768px){
    .book-list{
        grid-template-columns:repeat(2,1fr)
    }
}
 .book-list li{
    display:flex;
    gap:.75rem;
    align-items:flex-start;
    padding:1rem;
    border-radius:1rem
}
/* Use cases page */
 .crumbs{
    display:flex;
    justify-content:center;
    gap:.5rem;
    color:var(--muted);
    font-size:.875rem;
    margin-bottom:1.5rem
}
 .crumbs a:hover{
    color:var(--primary)
}
 .usecase-card{
    display:flex;
    flex-direction:column;
    padding:2rem;
    border-radius:1.5rem;
    transition:.3s
}
 .usecase-card:hover{
    border-color: rgb(46 99 137);
}
 .usecase-top{
    display:flex;
    justify-content:space-between;
    align-items:center
}
 .usecase-n{
    font-family:'Sora',sans-serif;
    font-size:1.875rem;
    font-weight:700;
    color: rgb(73 94 130);
}
 .usecase-card h3{
    margin-top:1.5rem;
    font-family:'Sora',sans-serif;
    font-size:1.125rem;
    font-weight:600
}
 .usecase-card p{
    margin-top:.75rem;
    font-size:.875rem;
    color:var(--muted)
}
 .usecase-bullets{
    margin-top:1.25rem;
    display:flex;
    flex-direction:column;
    gap:.5rem
}
 .usecase-bullets li{
    display:flex;
    gap:.5rem;
    align-items:flex-start;
    font-size:.875rem
}
 .usecase-bullets li::before{
    content:"";
    margin-top:.55rem;
    height:6px;
    width:6px;
    border-radius:50%;
    background:var(--primary);
    flex-shrink:0
}
 .usecase-example{
    margin-top:1.5rem;
    padding-top:1.25rem;
    border-top:1px solid var(--border);
    font-size:.75rem;
    color:var(--muted)
}
 .usecase-example b{
    color:var(--primary)
}
/* Footer */
 footer{
    border-top:1px solid var(--border);
    margin-top:8rem
}
 .footer-inner{
    max-width:1200px;
    margin:0 auto;
    padding:4rem 1rem;
    display:grid;
    gap:3rem;
    grid-template-columns:1fr
}
 @media(min-width:768px){
    .footer-inner{
        grid-template-columns:repeat(4,1fr)
    }
}
 .footer-brand{
    grid-column:span 1
}
 @media(min-width:768px){
    .footer-brand{
        grid-column:span 2
    }
}
 .footer h4{
    font-family:'Sora',sans-serif;
    font-size:.875rem;
    font-weight:600;
    margin-bottom:1rem
}
 .footer ul{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    font-size:.875rem;
    color:var(--muted)
}
 .footer a:hover{
    color:var(--primary)
}
 .copyright{
    border-top:1px solid var(--border);
    padding:1.5rem;
    text-align:center;
    font-size:.75rem;
    color:var(--muted)
}
 






 .bok_p_open_btn{
    background:#d49097;
    color:#fff;
    border:none;
    padding:15px 35px;
    border-radius:40px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.bok_p_open_btn:hover{
    transform:translateY(-2px);
}

/* Overlay */
.bok_p_overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    padding:20px;
    z-index:9999;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    overflow-y:auto;

    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
}


/* Show Popup */
.bok_p_overlay.bok_p_show{
    opacity:1;
    visibility:visible;
}
/* Popup Box */


.bok_p_popup{
    width:100%;
    max-width:920px;
    background: #132333;
    color:#fff;
    position:relative;
    margin:40px auto;
    padding:35px 22px 25px;
    opacity:0;
    transform:translateY(30px) scale(.96);
    transition:all .35s ease;
    border-radius:6px;
}

.bok_p_overlay.bok_p_show .bok_p_popup{
    opacity:1;
    transform:translateY(0) scale(1);
}



/* Close Button */
.bok_p_close{
    position:absolute;
    top:-18px;
    right:-18px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background: #9d3324;
    color:#fff;
    font-size:30px;
    font-weight:bold;
    cursor:pointer;
}

/* Title */
.bok_p_title{
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Form Grid */
.bok_p_grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap: 15px 32px;
}

.bok_p_group label{
    display:block;
    margin-bottom: 5px;
    color: #9ebad5;
    font-size: 15px;
    font-weight: 500;
}

.bok_p_input,
.bok_p_textarea{
    width:100%;
    border:none;
    outline:none;
    background: #1d3247;
    color:#fff;
    border-radius: 7px;
    padding:12px 15px;
    font-size: 14px;
}

.bok_p_input{
    height: 40px;
}

.bok_p_textarea{
    min-height:110px;
    resize:vertical;
}

.bok_p_full{
    grid-column:1/-1;
}

/* Question Box */
.bok_p_question{
    margin-top:25px;
    background:#50383b;
    border-radius:6px;
    padding:20px;
    font-size:17px;
    font-weight:600;
}

/* Checkbox Section */
.bok_p_checkbox_wrap{
    margin-top:24px;
    background: #431d18;
    border-radius:40px;
    padding:16px 22px;
}

.bok_p_checkbox{
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:#ddd;
    font-size:15px;
}

.bok_p_checkbox input{
    width:18px;
    height:18px;
    margin-top:2px;
    cursor:pointer;
}

.bok_p_checkbox a{
    color:#fff;
    font-weight:700;
    text-decoration:none;
}

/* Submit Button */
.bok_p_btn_wrap{
    text-align:right;
    margin-top:40px;
}

.bok_p_submit{
    border:none;
    background: #41a0df;
    color:#fff;
    border-radius:40px;
    padding:16px 40px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
    margin-bottom: 10px;
}

.bok_p_submit:hover{
    transform:translateY(-2px);
}

/* Responsive */
@media(max-width:768px){

    body{
        padding:20px;
    }

    .bok_p_grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .bok_p_title{
        font-size:30px;
    }

    .bok_p_btn_wrap{
        text-align:center;
    }

    .bok_p_submit{
        width:100%;
    }

    .bok_p_checkbox_wrap{
        border-radius:15px;
    }
}



:root{
    --bg:#ffffff;
    --bg-soft:#f8fcff;
    --bg-alt:#ddf1ff;

    --fg:#000000;
    --muted:#314d6b;

    --card:#ffffff;

    --border:rgba(64,158,223,.18);

    --primary:#409edf;
    --primary-2:#314d6b;

    --radius:1rem;
}

body{
     

    background:
        radial-gradient(circle at top left, #ddf1ff 0%, #ffffff 45%),
        radial-gradient(circle at bottom right, #e8f7ff 0%, #ffffff 40%),
        linear-gradient(180deg,#ffffff 0%,#f8fcff 100%);

    color:#000000;

    background-attachment:fixed;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}

/* Cards */
.glass,
.card,
.usecase-card,
.faq-item,
.outcomes{
    background:#ffffff;
    border:1px solid rgba(64,158,223,.20);
    box-shadow:0 4px 20px rgba(0,0,0,.05);
}


.glass{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(64,158,223,.15);

    box-shadow:
        0 10px 30px rgba(64,158,223,.08),
        0 2px 10px rgba(0,0,0,.03);

    border-radius:1.5rem;
}

.card,
.usecase-card,
.faq-item,
.outcomes{
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fcff 100%
    );

    border:1px solid rgba(64,158,223,.15);

    box-shadow:
        0 10px 30px rgba(64,158,223,.08),
        0 2px 10px rgba(0,0,0,.03);
}



/* Text */
h1,h2,h3,h4{
    color:#314d6b;
}

p,
.card p,
.section-sub,
.hero p.lead{
    color:#000000;
}

.muted{
    color:#314d6b;
}

/* Buttons */
.btn-primary{
    background:#409edf;
    color:#fff;
}

.btn-primary:hover{
    background:#314d6b;
}

.btn-ghost{
    background:#fff;
    color:#314d6b;
    border:1px solid rgba(64,158,223,.25);
}

.btn-ghost:hover{
    background:#f5faff;
}

/* Header */
.nav-pill{
    background:#ffffff;
    border:1px solid rgba(64,158,223,.20);
}

.nav-pill a{
    color:#314d6b;
}

.nav-pill a:hover{
    background:#f0f8ff;
    color:#409edf;
}

.menu-btn{
    color:#314d6b;
}

/* Logo */
.brand img{
    background:none;
    padding:0;
}

/* Chips */
.chip{
    background:#f8fbff;
    border:1px solid rgba(64,158,223,.20);
    color:#314d6b;
}

/* Marquee */
.marquee-wrap{
    background:#f8fbff;
}

/* Icons */
.card .icon-box{
    background:#eef7ff;
    color:#409edf;
}

.card .icon-grad{
    background:linear-gradient(135deg,#409edf,#314d6b);
}

/* Steps */
.step-n,
.usecase-n{
    color:#409edf;
}

/* About Stat */
.about-stat{
    background:#f8fbff;
    color:#314d6b;
}

/* FAQ */
.faq-icon{
    background:#eef7ff;
    color:#409edf;
}

/* Book Section */
.book-card{
    background:#f8fbff;
}

/* Footer */
footer{
    background:#ffffff;
}

.footer ul,
.copyright{
    color:#314d6b;
}

/* Popup */
.bok_p_popup{
    background:#ffffff;
    color:#000000;
}

.bok_p_group label{
    color:#314d6b;
}

.bok_p_input,
.bok_p_textarea{
    background:#f8fbff;
    color:#000000;
    border:1px solid rgba(64,158,223,.20);
}

.bok_p_question{
    background:#eef7ff;
    color:#314d6b;
}

.bok_p_checkbox_wrap{
    background:#f8fbff;
}

.bok_p_checkbox{
    color:#000000;
}

.bok_p_checkbox a{
    color:#409edf;
}

.bok_p_submit{
    background:#409edf;
}




.marquee-wrap{
    background:linear-gradient(
        90deg,
        #f8fcff,
        #ddf1ff,
        #f8fcff
    );
}

.book-card{
    background:linear-gradient(
        135deg,
        #ffffff,
        #eef8ff,
        #ddf1ff
    );
}

.about-stat{
    background:linear-gradient(
        135deg,
        #ffffff,
        #eef8ff
    );
}



.btn-primary{
    background:linear-gradient(
        135deg,
        #409edf,
        #314d6b
    );

    color:#fff;
}

.btn-ghost{
    background:#ffffff;

    border:1px solid rgba(64,158,223,.2);

    color:#314d6b;
}

.btn-ghost:hover{
    background:#eef8ff;
}



h1,h2,h3,h4{
    color:#314d6b;
}

p{
    color:#000;
}

.muted{
    color:#314d6b;
}

.text-gradient{
    background:linear-gradient(
        135deg,
        #409edf,
        #314d6b
    );

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}



.card .icon-box, .card .icon-grad{
   height: 60px;
   width: 60px;

}

.card .icon-box svg, .card .icon-grad svg{
    width: 35px;
    height: 35px;
    stroke-width: 2;
}
 



.site-header.nav_scrolled{
    
    background: #fffffff5;
    box-shadow: 0px 0px 7px #33333321;
}

/*.site-header.nav_scrolled .brand img {
    width: 160px;
    border-radius: 0px; 
    padding: 10px 20px;
    float: left;
    margin-bottom: -19px;
    margin-top: -23px;
}*/

.icon-grad {
    font-size: 50px;
    color: #409edf36;
    float: left;
    margin-bottom: -20px;
    margin-top: -25px;
}



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

   .header-inner{
      padding-bottom: 0px;
   }

 .brand img {
        width: 130px;
        border-radius: 0px;
        padding: 10px 20px;
        float: left;
        margin-bottom: -00px;
        margin-top: -20px;
    }

   .menu-btn {
        float: right;
        margin-top: -20px;
        background: #3f9fde;
        border-radius: 8px;
        color: #fff;
        width: 40px;
        height: 40px;
    }
    body {
        padding: 00px;
    }


}