/* ==========================================================
   AxisNet.org
   Dark Mode Stylesheet
   assets/css/darkmode.css
========================================================== */

/* ===========================
   DARK MODE
=========================== */

body.dark-mode{

    background:#121212;
    color:#f5f5f5;

}

/* ===========================
   TEXT
=========================== */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{

    color:#ffffff;

}

body.dark-mode p,
body.dark-mode li,
body.dark-mode span{

    color:#d5d5d5;

}

body.dark-mode a{

    color:#ffffff;

}

body.dark-mode a:hover{

    color:#ffc107;

}

/* ===========================
   NAVBAR
=========================== */

body.dark-mode .navbar{

    background:#181818 !important;

    box-shadow:0 5px 20px rgba(0,0,0,.4);

}

body.dark-mode .navbar-brand{

    color:#fff !important;

}

body.dark-mode .nav-link{

    color:#eee !important;

}

body.dark-mode .nav-link:hover{

    color:#ffc107 !important;

}

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

body.dark-mode .hero{

    background:linear-gradient(
        135deg,
        #1b1b1b,
        #34195c
    );

}

body.dark-mode .hero p{

    color:#e5e5e5;

}

/* ===========================
   SERVICES
=========================== */

body.dark-mode .services{

    background:#151515;

}

body.dark-mode .service-box{

    background:#1d1d1d;

    color:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

body.dark-mode .service-box p{

    color:#bdbdbd;

}

body.dark-mode .service-box i{

    color:#b388ff;

}

/* ===========================
   COUNTER
=========================== */

body.dark-mode .counter{

    background:#22103d;

}

/* ===========================
   TESTIMONIAL
=========================== */

body.dark-mode .testimonial{

    background:#161616;

}

body.dark-mode .testimonial .card{

    background:#202020;

    color:#fff;

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

}

body.dark-mode .testimonial strong{

    color:#ffc107;

}

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

body.dark-mode .cta{

    background:linear-gradient(
        135deg,
        #27124a,
        #5b21b6
    );

}

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

body.dark-mode footer{

    background:#0b0b0b;

}

body.dark-mode footer p,
body.dark-mode footer li,
body.dark-mode footer a{

    color:#cfcfcf;

}

body.dark-mode footer a:hover{

    color:#ffc107;

}

/* ===========================
   CARD
=========================== */

body.dark-mode .card{

    background:#1f1f1f;

    color:#ffffff;

}

/* ===========================
   FORM
=========================== */

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{

    background:#1f1f1f;

    color:#ffffff;

    border:1px solid #444;

}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{

    color:#999;

}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus{

    border-color:#8b3dff;

    box-shadow:0 0 10px rgba(139,61,255,.25);

    outline:none;

}

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

body.dark-mode table{

    background:#1b1b1b;

    color:#fff;

}

body.dark-mode table th{

    background:#2a2a2a;

}

body.dark-mode table td{

    border-color:#333;

}

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

body.dark-mode .btn-warning{

    color:#000;

}

body.dark-mode .btn-outline-light{

    border-color:#ffffff;

    color:#ffffff;

}

body.dark-mode .btn-outline-light:hover{

    background:#ffffff;

    color:#000;

}

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

body.dark-mode::-webkit-scrollbar{

    width:10px;

}

body.dark-mode::-webkit-scrollbar-track{

    background:#1a1a1a;

}

body.dark-mode::-webkit-scrollbar-thumb{

    background:#6f2dbd;

    border-radius:30px;

}

body.dark-mode::-webkit-scrollbar-thumb:hover{

    background:#8b3dff;

}

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

body.dark-mode ::selection{

    background:#6f2dbd;

    color:#ffffff;

}

/* ===========================
   TRANSITION
=========================== */

body,
.navbar,
.hero,
.services,
.service-box,
.card,
.counter,
.cta,
footer,
input,
textarea,
select{

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

}