/* =====================================================
   BIPNET WEBSITE
   PT Broadband Indonesia Pratama
   style.css
====================================================== */

:root{

--primary:#0056ff;
--secondary:#e30613;
--dark:#07111f;
--dark2:#0d1b2f;
--light:#ffffff;
--gray:#f4f6fa;
--text:#555;
--shadow:0 15px 40px rgba(0,0,0,.15);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#fff;
color:#222;
overflow-x:hidden;

}

/* ===========================
LOADER
=========================== */

#loader{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:var(--dark);
display:flex;
justify-content:center;
align-items:center;
z-index:99999;

}

.spinner{

width:70px;
height:70px;

border:6px solid rgba(255,255,255,.15);
border-top:6px solid var(--secondary);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

.navbar{

padding:18px 0;
transition:.4s;

}

.navbar.scrolled{

background:rgba(7,17,31,.97);

backdrop-filter:blur(15px);

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

padding:10px 0;

}

.navbar-brand img{

transition:.3s;

}

.nav-link{

color:#fff !important;
margin-left:18px;
font-weight:500;

}

.nav-link:hover{

color:#5ca9ff !important;

}

.btn-danger{

background:var(--secondary);
border:none;

border-radius:50px;

padding:12px 28px;

font-weight:600;

}

.btn-danger:hover{

background:#c6000d;

transform:translateY(-2px);

}

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

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(rgba(7,17,31,.88),rgba(7,17,31,.88)),

url("../images/hero.jpg");

background-size:cover;
background-position:center;

overflow:hidden;

}

.hero::before{

content:'';

position:absolute;

width:700px;
height:700px;

background:radial-gradient(circle,
rgba(0,86,255,.35),
transparent 70%);

left:-250px;
top:-250px;

animation:float1 8s infinite ease-in-out;

}

.hero::after{

content:'';

position:absolute;

width:600px;
height:600px;

background:radial-gradient(circle,
rgba(227,6,19,.20),
transparent 70%);

right:-200px;
bottom:-200px;

animation:float2 10s infinite ease-in-out;

}

@keyframes float1{

50%{

transform:translateY(40px);

}

}

@keyframes float2{

50%{

transform:translateY(-40px);

}

}

.hero h5{

color:#3ea0ff;
font-weight:600;
letter-spacing:3px;

margin-bottom:20px;

}

.hero h1{

font-size:62px;
font-weight:800;
color:#fff;

line-height:1.2;

margin-bottom:25px;

}

.hero h1 span{

display:block;

color:#4aa6ff;

}

.hero p{

color:#ddd;

font-size:18px;

line-height:32px;

margin-bottom:40px;

}

.hero-image{

max-width:600px;

animation:updown 4s infinite;

filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));

}

@keyframes updown{

50%{

transform:translateY(-18px);

}

}

.hero-button .btn{

margin-right:15px;
margin-bottom:15px;

padding:15px 35px;

border-radius:50px;

}

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

.section{

padding:100px 0;

}

.section-title{

color:var(--primary);

font-weight:700;

letter-spacing:3px;

margin-bottom:15px;

text-transform:uppercase;

}

.section h2{

font-size:42px;
font-weight:700;
margin-bottom:30px;

}

.section p{

color:var(--text);

line-height:30px;

}

/* ===========================
SERVICE
=========================== */

.service-card{

background:#fff;

padding:45px 35px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

height:100%;

}

.service-card:hover{

transform:translateY(-12px);

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

}

.service-card i{

font-size:55px;

color:var(--primary);

margin-bottom:25px;

}

.service-card h4{

font-weight:700;

margin-bottom:20px;

}

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

.counter{

background:linear-gradient(135deg,
var(--primary),
#0b2c88);

padding:80px 0;

color:#fff;

}

.counter h2{

font-size:52px;

font-weight:700;

}

.counter p{

margin-top:10px;

color:#ddd;

}

/* ===========================
TECHNOLOGY
=========================== */

.tech-box{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

transition:.3s;

}

.tech-box:hover{

background:var(--primary);

color:#fff;

transform:translateY(-10px);

}

.tech-box:hover i{

color:#fff;

}

.tech-box i{

font-size:55px;

margin-bottom:20px;

color:var(--primary);

transition:.3s;

}

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

.cta{

padding:90px 0;

background:

linear-gradient(135deg,

var(--dark),

#142d52);

color:#fff;

}

.cta h2{

font-size:48px;

margin-bottom:20px;

font-weight:700;

}

.cta p{

color:#ddd;

margin-bottom:35px;

}

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

footer{

background:#05101d;

color:#bbb;

padding:70px 0 30px;

}

footer h5{

color:#fff;

margin-bottom:20px;

}

footer ul{

padding:0;

list-style:none;

}

footer li{

margin-bottom:10px;

}

footer hr{

margin:40px 0;

border-color:#223;

}

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

.back-top{

position:fixed;

right:25px;
bottom:25px;

width:50px;
height:50px;

background:var(--secondary);

color:#fff;

display:flex;

justify-content:center;
align-items:center;

border-radius:50%;

text-decoration:none;

font-size:20px;

box-shadow:0 10px 25px rgba(0,0,0,.3);

transition:.3s;

z-index:999;

}

.back-top:hover{

background:var(--primary);

transform:translateY(-5px);

color:#fff;

}

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

.btn-primary{

background:var(--primary);

border:none;

border-radius:50px;

}

.btn-primary:hover{

background:#0045d4;

}

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

@media(max-width:991px){

.hero{

padding-top:120px;

text-align:center;

}

.hero h1{

font-size:42px;

}

.hero-image{

margin-top:50px;

max-width:420px;

}

.section h2{

font-size:34px;

}

}

@media(max-width:768px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.section{

padding:70px 0;

}

.counter h2{

font-size:38px;

}

.cta h2{

font-size:32px;

}

.nav-link{

margin-left:0;

padding:12px 0;

}

}

@media(max-width:576px){

.hero-image{

max-width:100%;

}

.hero-button .btn{

width:100%;

margin-right:0;

}

.section h2{

font-size:28px;

}

}

/* ==========================================
   Floating WhatsApp
========================================== */

.wa-premium{

position:fixed;

right:25px;

bottom:30px;

background:#25D366;

color:#fff;

padding:16px 22px;

border-radius:60px;

display:flex;

align-items:center;

gap:15px;

text-decoration:none;

box-shadow:0 18px 40px rgba(0,0,0,.25);

transition:.35s;

z-index:99999;

animation:waPulse 2.5s infinite;

}

.wa-premium:hover{

background:#1EBE5D;

transform:translateY(-5px);

color:#fff;

}

.wa-premium i{

font-size:34px;

}

.wa-premium b{

display:block;

font-size:15px;

}

.wa-premium small{

display:block;

font-size:12px;

opacity:.9;

}