/* =======================================================
GO NETWORK
Modern Enterprise Theme
======================================================= */

:root {
  --primary: #2563eb;
  --secondary: #0f172a;
  --dark: #020617;
  --light: #f8fafc;
  --text: #334155;
  --success: #22c55e;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;

  background: #fff;

  color: var(--text);

  overflow-x: hidden;
}

/* Navbar */

.navbar {
  background: rgba(2, 6, 23, 0.55);

  backdrop-filter: blur(15px);

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

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-brand {
  font-weight: 800;

  letter-spacing: 0.5px;
}

.nav-link {
  color: #fff !important;

  font-weight: 600;

  transition: 0.3s;
}

.nav-link:hover {
  color: #3b82f6 !important;
}

/* Hero */

.hero {
  background:
    linear-gradient(rgba(2, 6, 23, 0.88), rgba(2, 6, 23, 0.92)),
    url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80");

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  min-height: 100vh;

  display: flex;

  align-items: center;

  position: relative;

  overflow: hidden;
}

.hero::before {
  content: "";

  position: absolute;

  width: 700px;

  height: 700px;

  background: #2563eb22;

  filter: blur(170px);

  right: -200px;

  top: -150px;

  border-radius: 50%;
}

.hero h1 {
  font-size: 58px;

  font-weight: 800;

  line-height: 1.15;

  position: relative;

  z-index: 2;
}

.hero p {
  font-size: 19px;

  color: #cbd5e1;

  position: relative;

  z-index: 2;
}

.btn-primary {
  background: #2563eb;

  border: none;

  padding: 14px 34px;

  font-weight: 700;

  border-radius: 40px;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-outline-light {
  border-radius: 40px;

  padding: 14px 34px;
}

.hero-stat {
  position: relative;

  z-index: 2;

  margin-top: 50px;
}

.hero-stat h2 {
  font-size: 38px;

  font-weight: 800;

  color: #3b82f6;
}

.hero-stat p {
  font-size: 14px;

  color: #94a3b8;

  margin: 0;
}
.hero-image {
  max-width: 520px;

  animation: float 5s ease-in-out infinite;

  position: relative;

  z-index: 3;
}

.floating-card {
  position: absolute;

  background: white;

  padding: 15px;

  border-radius: 16px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);

  width: 180px;

  transition: 0.3s;
}

.floating-card:hover {
  transform: translateY(-8px);
}

.card-one {
  top: 50px;

  left: 10px;
}

.card-two {
  bottom: 80px;

  right: 20px;
}

.card-three {
  top: 220px;

  right: -20px;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}
.hero h1,
.hero p,
.hero .btn,
.hero-stat {
  animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.problem-item {
  display: flex;

  align-items: center;

  gap: 15px;

  padding: 16px;

  margin-bottom: 15px;

  background: #fff;

  border-radius: 15px;

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

  font-weight: 600;

  transition: 0.3s;
}

.problem-item:hover {
  transform: translateX(8px);

  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.15);
}

.problem-card {
  background: #fff;

  padding: 50px;

  border-radius: 25px;

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

  text-align: center;
}

.problem-icon {
  width: 100px;

  height: 100px;

  margin: auto;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #fee2e2;

  font-size: 42px;

  color: #dc2626;
}
.feature-card {
  padding: 40px;

  border-radius: 20px;

  background: #fff;

  text-align: center;

  border: 1px solid #e5e7eb;

  transition: 0.3s;

  height: 100%;
}

.feature-card:hover {
  transform: translateY(-10px);

  border-color: #2563eb;

  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.15);
}

.feature-card i {
  font-size: 45px;

  margin-bottom: 25px;

  color: #2563eb;
}

.feature-card h4 {
  font-weight: 700;

  margin-bottom: 15px;
}
.service-card {
  background: rgba(15, 23, 42, 0.75);

  backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.service-card:hover {
  transform: translateY(-12px);

  border-color: #2563eb;

  box-shadow: 0 25px 60px rgba(37, 99, 235, 0.2);
}

.service-icon{

width:70px;

height:70px;

background:linear-gradient(135deg,#2563eb,#3b82f6);

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

color:white;

margin-bottom:25px;

transition:.3s;

}

.service-card{

background:#0f172a;

padding:40px;

border-radius:22px;

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

transition:.35s;

position:relative;

overflow:hidden;

}

.service-card h4 {
  font-weight: 700;

  margin-bottom: 20px;
}

.service-card p {
  color: #cbd5e1;
}

.service-card a {
  color: #3b82f6;

  text-decoration: none;

  font-weight: 700;
}
.brand-card {
  height: 130px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 20px;

  border: 1px solid #e5e7eb;

  font-size: 26px;

  font-weight: 700;

  transition: 0.3s;

  background: white;
}

.brand-card:hover {
  transform: translateY(-8px);

  background: #2563eb;

  color: white;

  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.2);
}
.portfolio-card {
  background: 

  backdrop-filter: blur(12px);

  border: 1px solid 
}

.portfolio-card:hover {
  transform: translateY(-10px);

  box-shadow: 0 25px 60px;
}

.portfolio-card img {
  height: 240px;

  width: 100%;

  object-fit: cover;
}

.portfolio-content {
  padding: 30px;
}

.portfolio-content ul {
  padding-left: 18px;

  margin-top: 20px;
}

.portfolio-content li {
  margin-bottom: 10px;
}
.testimonial-card {
  background: #111827;

  padding: 40px;

  border-radius: 25px;

  height: 100%;

  transition: 0.3s;

  border: 1px solid rgba(233, 197, 197, 0.05);
}

.testimonial-card:hover {
  transform: translateY(-8px);

  border-color: #2563eb;
}

.stars {
  font-size: 26px;

  color: #facc15;

  margin-bottom: 20px;
}
.cta-section {
  padding: 120px 0;

  background:
    linear-gradient(rgba(2, 6, 23, 0.95), rgba(2, 6, 23, 0.95)),
    url("../images/background/network.jpg");

  background-size: cover;

  background-position: center;

  position: relative;

  overflow: hidden;
}

.cta-section::before {
  content: "";

  position: absolute;

  width: 700px;

  height: 700px;

  background: #2563eb22;

  filter: blur(150px);

  top: -250px;

  right: -200px;

  border-radius: 50%;
}
#loader {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #020617;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  z-index: 999999;

  transition: 0.7s;
}

.loader-logo {
  font-size: 38px;

  font-weight: 800;

  color: white;

  letter-spacing: 3px;

  margin-bottom: 30px;
}

.loader-bar {
  width: 250px;

  height: 4px;

  background: #1e293b;

  overflow: hidden;

  border-radius: 20px;
}

.loader-bar span {
  display: block;

  height: 100%;

  background: #2563eb;

  animation: loading 1.3s linear;
}

@keyframes loading {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.scrolled {
  background: #020617 !important;

  padding: 10px 0;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.reveal.active {
  opacity: 1;

  transform: none;
}
.service-card:hover .service-icon {
  transform: scale(1.15);

  transition: 0.3s;
}
.btn {
  transition: 0.3s;
}

.btn:hover {
  transform: translateY(-4px);

  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
}
.btn-wa {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #25d36688;
  }

  70% {
    box-shadow: 0 0 0 18px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
/*=============================
Navbar Scroll
=============================*/

.navbar.scrolled {
  background: #020617 !important;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);

  padding: 12px 0;
}

/*=============================
Reveal
=============================*/

.reveal {
  opacity: 0;

  transform: translateY(60px);

  transition: 1s;
}

.reveal.active {
  opacity: 1;

  transform: none;
}

/*=============================
Back To Top
=============================*/

.back-top {
  position: fixed;

  right: 30px;

  bottom: 30px;

  width: 55px;

  height: 55px;

  background: #2563eb;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50%;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  transition: 0.3s;

  z-index: 999;
}

.back-top.show {
  opacity: 1;

  visibility: visible;
}

.back-top:hover {
  transform: translateY(-5px);

  background: #1d4ed8;
}
/*=====================================
Cursor Glow
======================================*/

.cursor-glow {
  position: fixed;

  width: 500px;

  height: 500px;

  border-radius: 50%;

  pointer-events: none;

  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.18) 0%,
    rgba(37, 99, 235, 0.1) 35%,
    transparent 70%
  );

  transform: translate(-50%, -50%);

  z-index: 0;

  transition: transform 0.08s linear;

  filter: blur(35px);
}
.grid-bg {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);

  background-size: 60px 60px;

  z-index: -2;
}
/*=====================================
Progress Bar
======================================*/

#progressBar {
  position: fixed;

  top: 0;

  left: 0;

  width: 0%;

  height: 4px;

  background: linear-gradient(90deg, #2563eb, #38bdf8);

  z-index: 999999;

  transition: width 0.1s linear;
}
.section-divider {
  height: 1px;

  background: linear-gradient(to right, transparent, #2563eb, transparent);

  opacity: 0.25;
}
.hero-circle {
  position: absolute;

  right: -250px;

  top: -250px;

  width: 700px;

  height: 700px;

  border-radius: 50%;

  background: #2563eb33;

  filter: blur(140px);

  z-index: 0;
}
.navbar-brand {
  transition: 0.3s;
}

.navbar-brand:hover {
  transform: scale(1.05);
}
.service-card {
  overflow: hidden;

  position: relative;
}

.service-card::before {
  content: "";

  position: absolute;

  left: -100%;

  top: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );

  transition: 0.7s;
}

.service-card:hover::before {
  left: 120%;
}
.btn-primary {
  transition: 0.3s;
}

.btn-primary:hover {
  box-shadow: 0 0 35px rgba(37, 99, 235, 0.45);
}

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

.footer{

background:#020617;

color:#cbd5e1;

padding:90px 0 30px;

}

.footer-top{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr 1.4fr;

gap:60px;

padding-bottom:60px;

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

}

.footer-company h2{

color:#fff;

font-size:34px;

font-weight:800;

margin-bottom:5px;

}

.footer-company span{

color:#2563eb;

font-size:14px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

}

.footer-company p{

margin-top:25px;

line-height:1.9;

color:#94a3b8;

}

.footer-links h4,
.footer-contact h4{

color:#fff;

margin-bottom:25px;

font-size:18px;

}

.footer-links{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-links a{

color:#94a3b8;

text-decoration:none;

transition:.3s;

}

.footer-links a:hover{

color:#3b82f6;

padding-left:8px;

}

.social-links{

display:flex;

gap:15px;

margin-top:30px;

}

.social-links a{

width:45px;

height:45px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#0f172a;

color:white;

transition:.3s;

text-decoration:none;

}

.social-links a:hover{

background:#2563eb;

transform:translateY(-5px);

}

.contact-item{

display:flex;

gap:15px;

margin-bottom:25px;

align-items:flex-start;

}

.contact-item i{

color:#3b82f6;

font-size:20px;

margin-top:3px;

}

.contact-item strong{

display:block;

color:white;

margin-bottom:4px;

}

.contact-item span{

color:#94a3b8;

}

.footer-stat{

display:grid;

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

padding:50px 0;

text-align:center;

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

}

.footer-stat h3{

font-size:38px;

font-weight:800;

color:#3b82f6;

margin-bottom:10px;

}

.footer-stat span{

color:#94a3b8;

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:30px;

flex-wrap:wrap;

gap:20px;

}

.footer-bottom p{

margin:0;

color:#64748b;

}

.footer-bottom div{

display:flex;

gap:25px;

}

.footer-bottom a{

color:#64748b;

text-decoration:none;

transition:.3s;

}

.footer-bottom a:hover{

color:#3b82f6;

}

@media(max-width:992px){

.footer-top{

grid-template-columns:1fr 1fr;

}

.footer-stat{

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

gap:30px;

}

}

@media(max-width:768px){

.footer-top{

grid-template-columns:1fr;

}

.footer-stat{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-bottom div{

flex-direction:column;

gap:10px;

}

}

.map-box{

height:320px;

border-radius:20px;

overflow:hidden;

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

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

}

.map-box iframe{

width:100%;

height:100%;

border:none;

}

.contact-card{

display:flex;

gap:18px;

padding:20px;

border-radius:18px;

background:#0f172a;

margin-bottom:20px;

}

.contact-card i{

font-size:24px;

color:#3b82f6;

margin-top:5px;

}

.contact-card h5{

color:white;

margin-bottom:8px;

}

.contact-card p{

margin:0;

color:#94a3b8;

line-height:1.8;

}

.footer-logo{

font-size:34px;

font-weight:800;

color:white;

letter-spacing:2px;

}
.service-card:hover{

transform:translateY(-10px);

border-color:#2563eb;

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

}
.service-card:hover .service-icon{

transform:scale(1.1);

}
.service-feature{

list-style:none;

padding:20px 0;

margin:25px 0;

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

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

}
.service-feature li{

display:flex;

align-items:center;

gap:10px;

margin-bottom:12px;

color:#cbd5e1;

}
.service-feature i{

color:#22c55e;

}
.service-link{

display:inline-flex;

align-items:center;

gap:10px;

text-decoration:none;

color:#3b82f6;

font-weight:700;

transition:.3s;

}
.service-link:hover{

gap:18px;

color:white;

}
.service-card{
    position: relative;
    overflow: hidden;
}

.service-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,#2563eb,#60a5fa);
    transition: .4s;
}

.service-card:hover::before{
    left: 0;
}