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

html{
  scroll-behavior:smooth;
}

body{

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

  background:#030712;

  color:white;

  overflow-x:hidden;

  position:relative;

}

body::before{

  content:'';

  position:fixed;

  inset:0;

  background:
  radial-gradient(circle at top left,
  rgba(0,217,255,0.08),
  transparent 30%),

  radial-gradient(circle at bottom right,
  rgba(123,97,255,0.08),
  transparent 30%);

  z-index:-3;

}


/* CANVAS BACKGROUND */


#bg{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  z-index:-2;

}



/* GRID OVERLAY */


.grid-overlay{

  position:fixed;

  inset:0;

  z-index:-1;

  pointer-events:none;

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

  background-size:80px 80px;

}

/* GLOW EFFECTS */


.glow{

  position:fixed;

  border-radius:50%;

  filter:blur(120px);

  z-index:-1;

  pointer-events:none;

}

.glow-1{

  width:450px;
  height:450px;

  background:rgba(0,217,255,0.12);

  top:-150px;
  left:-150px;

}

.glow-2{

  width:500px;
  height:500px;

  background:rgba(123,97,255,0.12);

  right:-150px;
  bottom:-150px;

}



/* WEBSITE CONTENT */


.website-content{

  position:relative;

  z-index:10;

  opacity:1;

}


/* LOADER */


.loader{

  position:fixed;

  inset:0;

  background:#030712;

  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;

  z-index:99999;

  transition:1s;

}

.loader-ring{

  width:70px;
  height:70px;

  border-radius:50%;

  border:3px solid rgba(255,255,255,0.08);

  border-top:3px solid #00D9FF;
  border-right:3px solid #7B61FF;

  animation:spin 1s linear infinite;

}

.loader h1{

  margin-top:30px;

  letter-spacing:10px;

  font-size:14px;

  color:#9ca3af;

}

@keyframes spin{

  100%{
    transform:rotate(360deg);
  }

}



/* NAVBAR */


.navbar{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:90px;

  padding:0 8%;

  display:flex;
  justify-content:space-between;
  align-items:center;

  background:rgba(3,7,18,0.4);

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

   backdrop-filter: blur(20px);

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

  z-index:1000;

}

.logo{

  display:flex;
  align-items:center;
  gap:14px;

}

.logo img{

  width:52px;
  height:52px;

  object-fit:contain;

}

.logo-text{

  position:relative;

  display:flex;
  align-items:center;

}

.logo-text span{

  font-size:30px;

  font-weight:800;

  letter-spacing:1px;

  background: linear-gradient(
    90deg,
    #00D9FF,
    #7B61FF
  );

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.logo-text small{

  position:absolute;

  top:-6px;
  right:-18px;

  width:16px;
  height:16px;

  border:1px solid rgba(255,255,255,0.8);

  border-radius:50%;

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

  font-size:7px;

  font-weight:600;

  color:#ffffff;

  background:rgba(255,255,255,0.03);

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

   backdrop-filter: blur(10px);

  box-shadow:
  0 0 10px rgba(123,97,255,0.3);

}
.nav-links{

  list-style:none;

  display:flex;

  gap:45px;

}

.nav-links a{

  position:relative;

  text-decoration:none;

  color:white;

  font-size:16px;

  transition:0.4s;

}

.nav-links a:hover{

  color:#00D9FF;

}

.nav-links a::after{

  content:'';

  position:absolute;

  left:0;
  bottom:-8px;

  width:0%;
  height:2px;

  background:linear-gradient(
    90deg,
    #00D9FF,
    #7B61FF
  );

  transition:0.4s;

}

.nav-links a:hover::after{

  width:100%;

}

.nav-btn{

  padding:16px 35px;

  border-radius:50px;

  text-decoration:none;

  color:white;

  background:linear-gradient(
    90deg,
    #00D9FF,
    #7B61FF
  );

  box-shadow:
  0 0 30px rgba(123,97,255,0.4);

  transition:0.4s;

}

.nav-btn:hover{

  transform:translateY(-5px);

}

/* ========================================= */
/* MOBILE MENU */
/* ========================================= */

.menu-toggle{

  display:none;

  font-size:30px;

  cursor:pointer;

  color:white;

}



/* MOBILE */

@media(max-width:768px){

  .menu-toggle{

    display:block;

    z-index:2000;

  }

  .nav-links{

    position:fixed;

    top:80px;

    right:-100%;

    width:260px;

    height:100vh;

    background:rgba(3,7,18,0.96);

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

   backdrop-filter: blur(20px);

    flex-direction:column;

    padding:40px 30px;

    gap:30px;

    transition:0.4s;

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

    display:flex;

  }

  .nav-links.active{

    right:0;

  }

  .nav-links li{

    width:100%;

  }

  .nav-links a{

    font-size:18px;

    width:100%;

    display:block;

  }

  .nav-btn{

    display:none;

  }

}


/* EXTRA SMALL DEVICES */

@media(max-width:480px){

  .navbar{

    height:70px;

    padding:0 4%;

  }

  .logo img{

    width:34px;
    height:34px;

  }

  .logo-text span{

    font-size:17px;

  }

  .logo-text small{

    width:11px;
    height:11px;

    font-size:4px;

    top:-3px;
    right:-12px;

  }

  .nav-btn{

    padding:10px 16px;

    font-size:12px;

  }

}

/* SECTIONS */


section{

  padding:120px 8%;

  position:relative;

  z-index:2;

}



/* HERO */


.hero{

  width:100%;
  height:100vh;

  display:flex;
  align-items:center;

  position:relative;

  overflow:hidden;

  background:transparent;

}

.hero-content{

  max-width:900px;

}

.hero-tag{

  display:inline-block;

  padding:14px 26px;

  border-radius:50px;

  border:1px solid rgba(255,255,255,0.1);

  background:rgba(255,255,255,0.03);

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

   backdrop-filter: blur(20px);

}

.hero h1{

  margin-top:30px;

  font-size: 70px;

  line-height:1;

  font-weight:800;

}
.hero h1 span{

  background:linear-gradient(
    90deg,
    #00D9FF 0%,
    #4F7CFF 45%,
    #A855F7 100%
  );

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

  background-size:200% auto;

  animation:gradientMove 4s linear infinite;

}



.hero p{

  margin-top:35px;

  max-width:700px;

  line-height:1.8;

  font-size:24px;

  color:#d1d5db;

}

.typing-line{

  margin-top:20px;

  font-size:42px;

  font-weight:600;

  color:white;

}

.typing-line span{

  color:#00D9FF;

  border-right:3px solid #00D9FF;

  padding-right:6px;

  animation:blink 0.7s infinite;

}

@keyframes blink{

  50%{
    border-color:transparent;
  }

}

.hero-buttons{

  display:flex;

  gap:20px;

  margin-top:45px;

}

.primary-btn,
.secondary-btn{

  padding:18px 40px;

  border-radius:50px;

  text-decoration:none;

  transition:0.4s;

}

.primary-btn{

  background:linear-gradient(
    90deg,
    #00D9FF,
    #7B61FF
  );

  color:white;

  box-shadow:
  0 0 40px rgba(123,97,255,0.4);

}

.secondary-btn{

  color:white;

  border:1px solid rgba(255,255,255,0.1);

  background:rgba(255,255,255,0.03);

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

   backdrop-filter: blur(20px);

}

.primary-btn:hover,
.secondary-btn:hover{

  transform:translateY(-5px);

}



/* SECTION TITLES */


.section-title{

  margin-bottom:80px;

}

.section-title span{

  color:#00D9FF;

  letter-spacing:4px;

  font-size:14px;

}

.section-title h2{

  margin-top:20px;

  font-size:70px;

  line-height:1.1;

  max-width:800px;

}

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

@media(max-width:992px){

  .navbar{

    padding:0 5%;

  }

  .nav-links{

    gap:25px;

  }

  .hero{

    min-height:100vh;

    padding-top:120px;

  }

  .hero h1{

    font-size:70px;

    line-height:1.05;

  }

  .hero p{

    font-size:20px;

  }

  .about-grid,
  .services-grid,
  .portfolio-grid,
  .contact{

    grid-template-columns:1fr;

  }

  .section-title h2{

    font-size:52px;

  }

}



@media(max-width:768px){

  section{

    padding:100px 6%;

  }

  .navbar{

    height:80px;

    padding:0 6%;

  }

  .nav-btn{

    padding:14px 24px;

    font-size:14px;

  }

  .logo{

    gap:10px;

  }

  .logo img{

    width:42px;
    height:42px;

  }

  .logo-text span{

    font-size:24px;

  }

  .logo-text small{

    width:14px;
    height:14px;

    font-size:6px;

    top:-5px;
    right:-16px;

  }

  .hero{

    min-height:100vh;

    align-items:center;

    padding-top:100px;

  }

  .hero-content{

    width:100%;

  }

  .hero-tag{

    font-size:12px;

    padding:12px 20px;

  }

  .hero h1{

    margin-top:25px;

    font-size:52px;

    line-height:1.05;

  }

  .hero p{

    margin-top:25px;

    font-size:17px;

    line-height:1.8;

  }

  .hero-buttons{

    flex-direction:column;

    width:100%;

    margin-top:35px;

  }

  .primary-btn,
  .secondary-btn{

    width:100%;

    text-align:center;

    padding:18px;

  }

  .section-title{

    margin-bottom:50px;

  }

  .section-title span{

    font-size:12px;

    letter-spacing:3px;

  }

  .section-title h2{

    margin-top:15px;

    font-size:38px;

    line-height:1.15;

  }

  .about-card,
  .service-card,
  .contact-form{

    padding:30px;

    border-radius:24px;

  }

  .large-card p{

    font-size:20px;

  }

  .stat-card h3{

    font-size:48px;

  }

  .service-card h3{

    font-size:26px;

  }

  .portfolio-card img{

    height:350px;

  }

  .portfolio-content h3{

    font-size:24px;

  }

  .contact{

    gap:40px;

  }

  .contact-left h2{

    font-size:42px;

  }

  .contact-left p{

    font-size:17px;

  }

  .contact-form{

    padding:35px 25px;

  }

  .footer{

    padding:50px 6%;

  }

  .footer-logo{

    font-size:30px;

  }

}



@media(max-width:480px){

  .hero h1{

    font-size:44px;

  }

  .section-title h2{

    font-size:32px;

  }

  .contact-left h2{

    font-size:34px;

  }

  .hero p,
  .contact-left p{

    font-size:16px;

  }

  .primary-btn,
  .secondary-btn{

    font-size:15px;

  }

}


/* ABOUT */

.about{

  padding:190px 8% 150px;

}

.about-header{

  text-align:center;

  max-width:900px;

  margin:auto;

}

.about-header span{

  color:#A855F7;

  letter-spacing:5px;

  font-size:20px;

  font-weight:600;

}

.about-header h2{

  margin-top:25px;

  font-size:65px;

  line-height:1.1;

  font-weight:800;

}



.about-header p{

  margin-top:30px;

  font-size:22px;

  line-height:1.8;

  color:#9ca3af;

}

.about-grid{

  margin-top:80px;

  display:grid;

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

  gap:30px;

}

.about-card{

  padding:50px 40px;

  border-radius:30px;

  background:rgba(255,255,255,0.03);

  border:1px solid rgba(255,255,255,0.06);

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

   backdrop-filter: blur(20px);

  text-align:center;

  transition:0.4s;

}

.about-card:hover{

  transform:translateY(-10px);

  border-color:rgba(123,97,255,0.4);

  box-shadow:
  0 0 40px rgba(123,97,255,0.1);

}

.about-icon{

  width:70px;
  height:70px;

  margin:auto;

  border-radius:20px;

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

  font-size:28px;

  background:linear-gradient(
    135deg,
    #7B61FF,
    #00D9FF
  );

  box-shadow:
  0 0 30px rgba(123,97,255,0.4);

}

.about-card h3{

  margin-top:30px;

  font-size:30px;

}

.about-card p{

  margin-top:18px;

  color:#9ca3af;

  line-height:1.8;

  font-size:17px;

}

/* MOBILE */

@media(max-width:992px){

  .about-grid{

    grid-template-columns:1fr;

  }

}

@media(max-width:768px){

  .about-header h2{

    font-size:48px;

  }

  .about-header p{

    font-size:18px;

  }

}

@media(max-width:480px){

  .about-header h2{

    font-size:38px;

  }

}


/* SERVICES */

.services{

  padding:120px 8%;

}

.services .section-title{

  text-align:center;

  margin-bottom:70px;

}

.services .section-title span{

  color:#7B61FF;

  letter-spacing:6px;

  font-size:20px;

  font-weight:600;

}

.services .section-title h2{

  margin-top:18px;

  font-size:65px;

  font-weight:800;

  line-height:1.05;

  max-width:none;

}

.services .section-title h2 span{

  background:linear-gradient(
    90deg,
    #7B61FF,
    #A855F7
  );

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

}

.services-grid{

  max-width:1300px;

  margin:auto;

  display:grid;

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

  gap:26px;

}

.service-card{

  min-height:280px;

  padding:38px 34px;

  border-radius:24px;

  background:rgba(255,255,255,0.03);

  border:1px solid rgba(255,255,255,0.06);

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

   backdrop-filter: blur(20px);

  transition:0.4s;

}

.service-card:hover{

  transform:translateY(-8px);

  border-color:rgba(123,97,255,0.35);

  box-shadow:
  0 0 35px rgba(123,97,255,0.08);

}

.service-card-icon{

  width:54px;
  height:54px;

  border-radius:16px;

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

  font-size:24px;

  background:linear-gradient(
    135deg,
    #7B61FF,
    #00D9FF
  );

  margin-bottom:28px;

}

.service-card h3{

  font-size:20px;

  line-height:1.35;

  font-weight:700;

}

.service-card p{

  margin-top:18px;

  font-size:15px;

  line-height:1.8;

  color:#9ca3af;

}

/* TABLET */

@media(max-width:1100px){

  .services-grid{

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

  }

}

/* MOBILE */

@media(max-width:768px){

  .services{

    padding:100px 6%;

  }

  .services .section-title h2{

    font-size:46px;

  }

  .services-grid{

    grid-template-columns:1fr;

  }

  .service-card{

    min-height:auto;

  }

}

/* SMALL MOBILE */

@media(max-width:480px){

  .services .section-title h2{

    font-size:38px;

  }

}



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

.portfolio{

  padding:140px 8%;

  background:transparent;

}

/* TITLE */

.portfolio .section-title{

  text-align:center;

  margin-bottom:70px;

}

.portfolio .section-title span{

  color:#A855F7;

  letter-spacing:6px;

  font-size:18px;

  font-weight:600;

}

.portfolio .section-title h2{

  margin-top:18px;

  font-size:72px;

  font-weight:800;

  line-height:1.05;

}

.portfolio .section-title h2 span{

  background:linear-gradient(
    90deg,
    #7B61FF,
    #A855F7
  );

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

}

/* GRID */

.portfolio-grid{

  max-width:1250px;

  margin:auto;

  display:grid;

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

  gap:28px;

}

/* CARD */

.portfolio-card{

  position:relative;

  overflow:hidden;

  border-radius:24px;

  height:260px;

  background:#111827;

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

  cursor:pointer;

}

/* IMAGE */

.portfolio-card img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:0.7s ease;

}

/* DARK OVERLAY */

.portfolio-card::before{

  content:'';

  position:absolute;

  inset:0;

  background:linear-gradient(
    to top,
    rgba(0,0,0,0.92),
    rgba(0,0,0,0.45),
    transparent
  );

  opacity:0;

  transition:0.5s ease;

  z-index:1;

}

/* CONTENT */

.portfolio-content{

  position:absolute;

  left:0;
  bottom:0;

  width:100%;

  padding:26px;

  z-index:2;

  opacity:0;

  transform:translateY(60px);

  transition:0.5s ease;

}

/* TITLE */

.portfolio-content h3{

  font-size:22px;

  font-weight:700;

  line-height:1.3;

  color:white;

}

/* DESCRIPTION */

.portfolio-content p{

  margin-top:10px;

  font-size:15px;

  line-height:1.7;

  color:#d1d5db;

}

/* LINK */

.portfolio-link{

  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-top:18px;

  text-decoration:none;

  color:#A855F7;

  font-size:15px;

  font-weight:600;

  transition:0.3s;

}

.portfolio-link:hover{

  color:#c084fc;

}

/* HOVER EFFECT */

.portfolio-card:hover img{

  transform:scale(1.08);

}

.portfolio-card:hover::before{

  opacity:1;

}

.portfolio-card:hover .portfolio-content{

  opacity:1;

  transform:translateY(0);

}

/* TABLET */

@media(max-width:1100px){

  .portfolio-grid{

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

  }

}

/* MOBILE */

@media(max-width:768px){

  .portfolio{

    padding:100px 6%;

  }

  .portfolio .section-title h2{

    font-size:46px;

  }

  .portfolio-grid{

    grid-template-columns:1fr;

  }

  .portfolio-card{

    height:240px;

  }

}

/* SMALL MOBILE */

@media(max-width:480px){

  .portfolio .section-title h2{

    font-size:38px;

  }

  .portfolio-card{

    height:220px;

  }

  .portfolio-content{

    padding:22px;

  }

  .portfolio-content h3{

    font-size:20px;

  }

  .portfolio-content p{

    font-size:14px;

  }

}


/* CONTACT */

.contact{

padding:160px 8%;

}

.contact-title{

text-align:center;

margin-bottom:70px;

}

.contact-title span{

color:#8B5CF6;

letter-spacing:6px;

font-size:30px;

}

.contact-title h2{

margin-top:20px;

font-size:74px;

font-weight:800;

}

.contact-title h2 span{

background:linear-gradient(
90deg,
#8B5CF6,
#4F7CFF
);

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

}

.contact-grid{

display:grid;

grid-template-columns:1fr 0.8fr;

gap:60px;

align-items:center;

}

.contact-form{

display:flex;

flex-direction:column;

gap:18px;

color: white;

}

.contact-form input,
.contact-form textarea{

background:#080d1a;

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

height:64px;

padding:0 20px;

border-radius:16px;

color:white;

}

.contact-form textarea{

height:180px;

padding-top:20px;

}

.contact-form button{

height:66px;

border:none;

border-radius:18px;

background:
linear-gradient(
90deg,
#8B5CF6,
#4F7CFF
);

color:white;

font-weight:700;

cursor:pointer;

}

.contact-right p{

color:#a3a8bb;

font-size:18px;

line-height:1.8;

}

.contact-info{

margin-top:40px;

display:flex;

flex-direction:column;

gap:20px;

}

.info-box{

display:flex;

gap:14px;

align-items:center;

}

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

.contact-title h2{

font-size:50px;

}

}

/* FOOTER */

/* FOOTER */

.footer{

padding:60px 8%;

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

display:flex;

flex-direction:column;

align-items:center;

gap:22px;

}

.footer-brand{

display:flex;

align-items:center;

gap:16px;

}

.footer-brand img{

width:60px;

height:60px;

object-fit:contain;

filter:
drop-shadow(
0 0 20px rgba(0,217,255,.4)
);

}

.footer-logo{

font-size:42px;

font-weight:800;

background:
linear-gradient(
90deg,
#00D9FF,
#7B61FF
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.footer p{

color:#9ca3af;

font-size:15px;

text-align:center;

}

/* MOBILE */

@media(max-width:768px){

.footer-brand{

gap:10px;

}

.footer-brand img{

width:42px;

height:42px;

}

.footer-logo{

font-size:28px;

}

}

/* FOOTER TM */

.footer-logo{

display:flex;

align-items:flex-start;

gap:8px;

}

.footer-logo span{

font-size:42px;

font-weight:800;

background:
linear-gradient(
90deg,
#00D9FF,
#7B61FF
);

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

}

.footer-logo small{

font-size:18px;

margin-top:8px;

color:#a855f7;

-webkit-text-fill-color:#a855f7;

}

/* SOCIAL ICONS */

.footer-social{

display:flex;

gap:18px;

align-items:center;

justify-content:center;

}

.footer-social a{

width:52px;

height:52px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

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

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

color:#ffffff;

font-size:26px;

transition:.4s;

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

   backdrop-filter: blur(20px);

}

.footer-social a:hover{

transform:
translateY(-6px);

background:
linear-gradient(
135deg,
#00D9FF,
#7B61FF
);

box-shadow:
0 0 40px rgba(123,97,255,.4);

}

/* MOBILE */

@media(max-width:768px){

.footer-logo span{

font-size:28px;

}

.footer-logo small{

font-size:12px;

}

.footer-social a{

width:44px;

height:44px;

font-size:22px;

}

}

/* RESPONSIVE */


@media(max-width:1200px){

  .hero h1{
    font-size:80px;
  }

}

@media(max-width:992px){

.about-grid,
.services-grid,
.portfolio-grid{

grid-template-columns:1fr;

}

.hero h1{
font-size:65px;
}

.section-title h2{
font-size:50px;
}

}