/*==================================================
 CloudCore Network Enterprise Portal
 style.css
 Version : 1.0
==================================================*/

:root{

--primary:#00d9ff;

--secondary:#5b5cff;

--success:#00d26a;

--warning:#ffb300;

--danger:#ff4b5c;

--dark:#07111f;

--dark2:#0b1728;

--glass:rgba(255,255,255,.06);

--border:rgba(255,255,255,.08);

--white:#ffffff;

--text:#d7e3f5;

--shadow:0 15px 50px rgba(0,0,0,.35);

--radius:22px;

--transition:.35s;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:#07111f;

color:var(--text);

overflow-x:hidden;

position:relative;

}

/*================================*/

body::before{

content:"";

position:fixed;

width:900px;

height:900px;

left:-300px;

top:-300px;

background:radial-gradient(circle,

rgba(0,217,255,.25),

transparent 70%);

filter:blur(80px);

z-index:-2;

animation:aurora1 15s linear infinite;

}

body::after{

content:"";

position:fixed;

width:900px;

height:900px;

right:-300px;

bottom:-300px;

background:radial-gradient(circle,

rgba(91,92,255,.20),

transparent 70%);

filter:blur(90px);

z-index:-2;

animation:aurora2 18s linear infinite;

}

/*================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08131f;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

#00d9ff,

#5b5cff);

border-radius:50px;

}

/*================================*/

a{

text-decoration:none;

transition:.3s;

color:inherit;

}

img{

max-width:100%;

display:block;

}

ul{

list-style:none;

padding:0;

margin:0;

}

/*================================*/

.section{

padding:110px 0;

position:relative;

}

.section-title{

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:8px 18px;

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

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

border-radius:50px;

color:var(--primary);

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:15px;

}

.section-title h2{

font-size:48px;

font-weight:700;

color:#fff;

}

.section-title p{

max-width:700px;

margin:auto;

margin-top:18px;

font-size:17px;

color:#b6c3d5;

}

/*================================*/

.glass{

background:var(--glass);

backdrop-filter:blur(20px);

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

border-radius:var(--radius);

box-shadow:var(--shadow);

}

/*================================*/

.btn{

padding:14px 30px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.btn-primary{

background:linear-gradient(

135deg,

#00d9ff,

#0078ff);

border:none;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 15px 40px rgba(0,217,255,.35);

}

.btn-success{

background:linear-gradient(

135deg,

#00d26a,

#00b85b);

border:none;

}

.btn-warning{

background:linear-gradient(

135deg,

#ffb300,

#ff8a00);

border:none;

color:#111;

}

/*================================*/

.topbar{

background:#040b15;

padding:8px 0;

font-size:14px;

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

}

.topbar .left i,

.topbar .right i{

color:var(--primary);

margin-right:6px;

}

/*================================*/

.navbar{

background:rgba(5,12,22,.65);

backdrop-filter:blur(25px);

padding:15px 0;

transition:.35s;

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

}

.navbar-brand{

display:flex;

align-items:center;

gap:12px;

font-size:28px;

font-weight:700;

color:#fff;

}

.navbar-brand img{

height:55px;

}

.navbar-nav li{

margin-left:18px;

}

.navbar-nav a{

font-weight:500;

color:#fff;

position:relative;

}

.navbar-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.navbar-nav a:hover::after{

width:100%;

}

/*================================*/

.hero{

position:relative;

padding-top:170px;

padding-bottom:140px;

overflow:hidden;

min-height:100vh;

display:flex;

align-items:center;

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.1;

color:#fff;

opacity:0;

transform:translateY(35px) scale(.97);

animation:heroTitleIn 1s cubic-bezier(.16,1,.3,1) forwards;

animation-delay:.15s;

}

.hero h1 span{

background:linear-gradient(

90deg,

#00d9ff,

#5b5cff,

#00d26a,

#00d9ff);

background-size:300% auto;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

display:inline-block;

animation:heroShine 5s linear infinite;

}

@keyframes heroTitleIn{

0%{

opacity:0;

transform:translateY(35px) scale(.97);

}

100%{

opacity:1;

transform:translateY(0) scale(1);

}

}

@keyframes heroShine{

0%{

background-position:0% 50%;

}

100%{

background-position:300% 50%;

}

}

.hero .badge{

opacity:0;

animation:heroTitleIn .8s cubic-bezier(.16,1,.3,1) forwards;

}

.hero p{

opacity:0;

animation:heroTitleIn .9s cubic-bezier(.16,1,.3,1) forwards;

animation-delay:.4s;

}

.hero-buttons{

opacity:0;

animation:heroTitleIn .9s cubic-bezier(.16,1,.3,1) forwards;

animation-delay:.55s;

}

.hero-features{

opacity:0;

animation:heroTitleIn .9s cubic-bezier(.16,1,.3,1) forwards;

animation-delay:.7s;

}

.hero p{

font-size:20px;

margin:30px 0;

line-height:1.8;

color:#bfd2e6;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:30px;

}

.hero-features{

display:grid;

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

gap:15px;

margin-top:40px;

}

.hero-features div{

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

padding:15px;

border-radius:14px;

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

}

.hero-status{

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

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

backdrop-filter:blur(18px);

padding:35px;

border-radius:25px;

box-shadow:0 20px 60px rgba(0,0,0,.30);

}

.status-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:13px 0;

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

}

.online{

color:#00d26a;

font-weight:700;

}

.hero-status .status-item .online{

display:inline-flex;

align-items:center;

gap:8px;

padding:6px 16px;

border-radius:50px;

background:rgba(0,210,106,.12);

border:1px solid rgba(0,210,106,.4);

font-size:12px;

letter-spacing:.4px;

animation:statusPillPulse 2.6s infinite;

}

.hero-status .status-item .online::before{

content:"";

width:7px;

height:7px;

border-radius:50%;

background:#00d26a;

box-shadow:0 0 8px 3px rgba(0,210,106,.85);

flex-shrink:0;

}

@keyframes statusPillPulse{

0%{

box-shadow:0 0 0 0 rgba(0,210,106,.45);

}

70%{

box-shadow:0 0 0 9px rgba(0,210,106,0);

}

100%{

box-shadow:0 0 0 0 rgba(0,210,106,0);

}

}

/*==================================================
 PART-7
 Statistics, Packages, Feature Cards, NOC Dashboard
==================================================*/

/*=========================================
STATISTICS
=========================================*/

.statistics{

margin-top:-80px;

position:relative;

z-index:5;

}

.stat-card{

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

backdrop-filter:blur(25px);

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

border-radius:22px;

padding:35px;

text-align:center;

transition:.35s;

box-shadow:0 20px 60px rgba(0,0,0,.25);

overflow:hidden;

position:relative;

}

.stat-card::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.08),

transparent);

transition:.8s;

}

.stat-card:hover::before{

left:100%;

}

.stat-card:hover{

transform:translateY(-10px);

border-color:#00d9ff;

box-shadow:

0 20px 60px rgba(0,217,255,.18);

}

.stat-card i{

font-size:50px;

color:#00d9ff;

margin-bottom:20px;

}

.stat-card h2{

font-size:46px;

font-weight:700;

color:#fff;

margin-bottom:10px;

}

.stat-card p{

color:#bfd2e6;

font-size:16px;

}

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

.feature-card{

background:#0c1828;

padding:40px;

border-radius:25px;

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

transition:.35s;

height:100%;

text-align:center;

position:relative;

overflow:hidden;

}

.feature-card::after{

content:"";

position:absolute;

width:160px;

height:160px;

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

right:-70px;

top:-70px;

border-radius:50%;

}

.feature-card:hover{

transform:

translateY(-12px)

scale(1.02);

border-color:#00d9ff;

}

.feature-card i{

font-size:58px;

margin-bottom:25px;

color:#00d9ff;

}

.feature-card h3{

color:#fff;

font-size:28px;

margin-bottom:18px;

}

.feature-card p{

line-height:1.8;

color:#bfd2e6;

}

/*=========================================
PACKAGE
=========================================*/

.package-card{

background:#0b1625;

padding:45px;

border-radius:28px;

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

position:relative;

overflow:hidden;

transition:.35s;

height:100%;

}

.package-card:hover{

transform:

translateY(-15px);

border-color:#00d9ff;

box-shadow:

0 30px 80px rgba(0,217,255,.20);

}

.package-top{

font-size:24px;

font-weight:700;

color:#00d9ff;

margin-bottom:25px;

}

.package-card h1{

font-size:64px;

font-weight:800;

color:#fff;

margin-bottom:10px;

}

.package-card h2{

font-size:44px;

font-weight:700;

margin-bottom:25px;

color:#00d9ff;

}

.package-card ul{

margin:25px 0;

}

.package-card li{

padding:14px 0;

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

color:#d9e5f4;

}

.package-card li::before{

content:"✔ ";

color:#00d26a;

font-weight:bold;

}

.package-card .btn{

margin-top:20px;

}

.featured{

transform:scale(1.05);

border:2px solid #00d9ff;

}

.ribbon{

position:absolute;

top:18px;

right:-45px;

background:#00d9ff;

color:#08111d;

padding:10px 50px;

font-size:13px;

font-weight:700;

transform:rotate(45deg);

}

/*=========================================
MINI FEATURE
=========================================*/

.mini-feature{

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

padding:18px;

border-radius:14px;

margin-bottom:15px;

transition:.3s;

}

.mini-feature:hover{

background:#00d9ff20;

}

.mini-feature i{

color:#00d26a;

margin-right:10px;

}

/*=========================================
NOC
=========================================*/

.noc-card{

background:#0b1625;

padding:35px;

border-radius:22px;

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

text-align:center;

transition:.35s;

height:100%;

position:relative;

overflow:hidden;

}

.noc-card:hover{

transform:translateY(-10px);

border-color:#00d9ff;

}

.noc-card .icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:

linear-gradient(

135deg,

#00d9ff,

#0066ff);

font-size:36px;

margin-bottom:25px;

}

.noc-card h4{

color:#fff;

font-size:24px;

margin-bottom:15px;

}

.noc-card h3{

font-size:30px;

color:#00d26a;

margin-bottom:10px;

}

.noc-card p{

color:#bfd2e6;

}

/*=========================================
GRAPH
=========================================*/

.graph-card{

background:#0b1625;

padding:35px;

border-radius:24px;

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

height:100%;

}

.speed-box{

background:#0b1625;

padding:35px;

border-radius:24px;

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

height:100%;

}

.speed-box h2{

color:#00d9ff;

font-size:42px;

font-weight:700;

}

.speed-box hr{

border-color:rgba(255,255,255,.06);

margin:25px 0;

}

/*=========================================
TOOLS
=========================================*/

.tool-card{

background:#0b1625;

border-radius:22px;

padding:40px 20px;

text-align:center;

transition:.35s;

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

height:100%;

cursor:pointer;

display:block;

text-decoration:none;

}

.tool-card:hover{

transform:

translateY(-10px)

rotateX(5deg);

border-color:#00d9ff;

box-shadow:

0 20px 50px rgba(0,217,255,.18);

}

.tool-card i{

font-size:50px;

margin-bottom:20px;

color:#00d9ff;

}

.tool-card h5{

font-size:20px;

color:#fff;

}

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

.download-card{

background:#0b1625;

padding:40px;

border-radius:24px;

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

text-align:center;

transition:.35s;

height:100%;

}

.download-card:hover{

transform:translateY(-10px);

border-color:#00d9ff;

}

.download-card i{

font-size:58px;

margin-bottom:25px;

color:#00d9ff;

}

.download-card h4{

margin-bottom:15px;

color:#fff;

}

.download-card p{

margin-bottom:25px;

color:#bfd2e6;

}

/*==================================================
 PART-8
 Coverage • Testimonials • FAQ • Contact • Footer
==================================================*/

/*=========================================
COVERAGE
=========================================*/

.coverage-card{

background:#0b1625;

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

border-radius:20px;

padding:35px 20px;

text-align:center;

transition:.35s;

height:100%;

cursor:pointer;

position:relative;

overflow:hidden;

}

.coverage-card::before{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:4px;

background:

linear-gradient(

90deg,

#00d9ff,

#5b5cff);

transform:scaleX(0);

transition:.35s;

}

.coverage-card:hover::before{

transform:scaleX(1);

}

.coverage-card:hover{

transform:translateY(-8px);

border-color:#00d9ff;

box-shadow:

0 15px 45px rgba(0,217,255,.18);

}

.coverage-card h5{

margin-top:18px;

color:#fff;

font-size:22px;

font-weight:600;

}

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

.testimonial-card{

background:#0b1625;

border-radius:25px;

padding:40px;

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

transition:.35s;

height:100%;

position:relative;

}

.testimonial-card::after{

content:"★★★★★";

position:absolute;

top:25px;

right:25px;

color:#ffb300;

font-size:18px;

}

.testimonial-card:hover{

transform:translateY(-10px);

border-color:#00d9ff;

}

.testimonial-card p{

margin:30px 0;

line-height:1.9;

color:#bfd2e6;

font-size:17px;

}

.testimonial-card h5{

color:#fff;

font-size:20px;

}

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

.accordion-item{

background:#0b1625;

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

margin-bottom:18px;

border-radius:16px!important;

overflow:hidden;

}

.accordion-button{

background:#0b1625;

color:#fff;

font-weight:600;

padding:22px;

}

.accordion-button:not(.collapsed){

background:#101f34;

color:#00d9ff;

}

.accordion-button:focus{

box-shadow:none;

}

.accordion-body{

background:#0b1625;

color:#bfd2e6;

line-height:1.9;

}

/*=========================================
CONTACT
=========================================*/

.contact-card{

background:#0b1625;

padding:40px;

border-radius:24px;

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

height:100%;

}

.contact-card h3{

font-size:34px;

margin-bottom:20px;

color:#fff;

}

.contact-item{

display:flex;

gap:18px;

margin-bottom:30px;

align-items:flex-start;

}

.contact-item i{

font-size:24px;

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

linear-gradient(

135deg,

#00d9ff,

#006eff);

color:#fff;

flex-shrink:0;

}

.contact-item div{

line-height:1.8;

color:#d6e5f4;

}

.contact-form{

background:#0b1625;

padding:40px;

border-radius:24px;

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

}

.contact-form input,

.contact-form select,

.contact-form textarea{

width:100%;

background:#09131f;

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

padding:18px;

border-radius:14px;

color:#fff;

margin-bottom:20px;

transition:.3s;

}

.contact-form select{

appearance:none;

-webkit-appearance:none;

-moz-appearance:none;

background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='%2300d9ff' d='M1 1l6 6 6-6'/></svg>");

background-repeat:no-repeat;

background-position:right 18px center;

cursor:pointer;

}

.contact-form select option{

background:#09131f;

color:#fff;

}

.contact-form input:focus,

.contact-form select:focus,

.contact-form textarea:focus{

outline:none;

border-color:#00d9ff;

box-shadow:

0 0 0 3px rgba(0,217,255,.15);

}

/*=========================================
MAP
=========================================*/

.map-section iframe{

width:100%;

height:480px;

border:0;

filter:grayscale(100%)

invert(92%)

contrast(110%);

}

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

.footer{

background:#040b15;

padding-top:90px;

padding-bottom:35px;

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

}

.footer h3,

.footer h5{

color:#fff;

margin-bottom:25px;

}

.footer p{

line-height:1.9;

color:#b8c6d8;

}

.footer ul{

padding:0;

}

.footer li{

margin-bottom:14px;

}

.footer li a{

color:#b8c6d8;

transition:.3s;

}

.footer li a:hover{

color:#00d9ff;

padding-left:6px;

}

.footer hr{

margin:45px 0;

border-color:rgba(255,255,255,.06);

}

.footer-bottom{

color:#90a7c1;

font-size:15px;

}

/*=========================================
SOCIAL
=========================================*/

.social-links{

display:flex;

gap:15px;

margin-top:30px;

}

.social-links a{

width:48px;

height:48px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#0d1728;

color:#fff;

transition:.35s;

}

.social-links a:hover{

background:#00d9ff;

transform:translateY(-6px);

}

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

.floating-whatsapp,

.floating-call,

.scroll-top{

position:fixed;

right:25px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

color:#fff;

z-index:999;

box-shadow:

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

transition:.35s;

}

.floating-whatsapp{

bottom:25px;

background:#25D366;

}

.floating-call{

bottom:100px;

background:#0d6efd;

}

.scroll-top{

bottom:175px;

background:#00d9ff;

border:none;

cursor:pointer;

}

.floating-whatsapp:hover,

.floating-call:hover,

.scroll-top:hover{

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

}

/*=========================================
PRELOADER
=========================================*/

#loader{

position:fixed;

inset:0;

background:#07111f;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-circle{

width:90px;

height:90px;

border-radius:50%;

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

border-top-color:#00d9ff;

animation:spin 1s linear infinite;

margin-bottom:30px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*==================================================
 PART-9
 Animation • Responsive • Dark Mode • Effects
==================================================*/

/*=========================================
AURORA ANIMATION
=========================================*/

@keyframes aurora1{

0%{

transform:translate(0,0);

}

25%{

transform:translate(120px,-60px);

}

50%{

transform:translate(240px,80px);

}

75%{

transform:translate(80px,180px);

}

100%{

transform:translate(0,0);

}

}

@keyframes aurora2{

0%{

transform:translate(0,0);

}

25%{

transform:translate(-120px,80px);

}

50%{

transform:translate(-220px,-120px);

}

75%{

transform:translate(-80px,-180px);

}

100%{

transform:translate(0,0);

}

}

/*=========================================
FLOAT ANIMATION
=========================================*/

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

.hero-status{

animation:floating 6s ease-in-out infinite;

}

/*=========================================
PULSE
=========================================*/

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(0,217,255,.6);

}

70%{

box-shadow:0 0 0 20px rgba(0,217,255,0);

}

100%{

box-shadow:0 0 0 0 rgba(0,217,255,0);

}

}

.online{

animation:pulse 2s infinite;

}

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

.gradient-text{

background:

linear-gradient(

90deg,

#00d9ff,

#5b5cff,

#00d26a);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

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

.glow{

box-shadow:

0 0 20px rgba(0,217,255,.35),

0 0 60px rgba(0,217,255,.15);

}

/*=========================================
IMAGE EFFECT
=========================================*/

img{

transition:.4s;

}

img:hover{

transform:scale(1.04);

}

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

.btn{

overflow:hidden;

position:relative;

}

.btn::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.2),

transparent);

transition:.8s;

}

.btn:hover::before{

left:100%;

}

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

.package-card,

.feature-card,

.download-card,

.tool-card,

.stat-card,

.coverage-card,

.contact-card,

.testimonial-card,

.noc-card{

will-change:transform;

}

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

::selection{

background:#00d9ff;

color:#08111f;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.hero h1{

font-size:56px;

}

.section-title h2{

font-size:42px;

}

}

@media(max-width:992px){

.navbar{

padding:10px 0;

}

.hero{

padding-top:140px;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

grid-template-columns:1fr;

}

.hero-status{

margin-top:50px;

}

.section{

padding:80px 0;

}

.package-card{

margin-bottom:25px;

}

}

@media(max-width:768px){

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.section-title h2{

font-size:34px;

}

.stat-card h2{

font-size:36px;

}

.package-card h1{

font-size:50px;

}

.contact-card,

.contact-form{

padding:28px;

}

.map-section iframe{

height:300px;

}

}

@media(max-width:576px){

.topbar{

display:none;

}

.navbar-brand{

font-size:22px;

}

.navbar-brand img{

height:42px;

}

.hero{

min-height:auto;

padding-bottom:80px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.btn{

width:100%;

margin-bottom:12px;

}

.hero-buttons{

display:block;

}

.section{

padding:70px 0;

}

.floating-whatsapp,

.floating-call,

.scroll-top{

width:52px;

height:52px;

font-size:20px;

right:15px;

}

.floating-whatsapp{

bottom:15px;

}

.floating-call{

bottom:80px;

}

.scroll-top{

bottom:145px;

}

.footer{

text-align:center;

}

.social-links{

justify-content:center;

}

}

/*=========================================
LIGHT MODE
=========================================*/

body.light{

background:#f4f8fd;

color:#1f2937;

}

body.light .navbar,

body.light .contact-card,

body.light .package-card,

body.light .feature-card,

body.light .download-card,

body.light .tool-card,

body.light .stat-card,

body.light .noc-card{

background:#ffffff;

color:#1f2937;

border-color:#e5e7eb;

}

body.light h1,

body.light h2,

body.light h3,

body.light h4,

body.light h5{

color:#111827;

}

body.light p,

body.light li,

body.light a{

color:#4b5563;

}

/*=========================================
END OF STYLE.CSS
=========================================*/