/* =========================================
   HB GRAPHICS ULTRA PREMIUM FINAL CSS
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
  scroll-behavior:smooth;
}

:root{

  --red:#ff0000;
  --dark-red:#b30000;
  --yellow:#ffd000;
  --white:#ffffff;
  --gray:#cccccc;
  --dark:#050505;
  --glass:rgba(0,0,0,0.45);

}

body{

  overflow-x:hidden;
  color:white;

  background:

  linear-gradient(
    rgba(45,0,0,0.88),
    rgba(0,0,0,0.93)
  ),

  url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=2000&auto=format&fit=crop');

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

}

/* =========================================
   GLOBAL
========================================= */

section{

  width:100%;
  position:relative;

}

img{

  width:100%;
  display:block;

}

a{
  text-decoration:none;
}

ul{
  list-style:none;
}

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

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#111;
}

::-webkit-scrollbar-thumb{

  background:
  linear-gradient(
    var(--red),
    var(--yellow)
  );

  border-radius:20px;

}

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

nav{

  position:fixed;
  top:0;
  left:0;

  width:100%;

  padding:20px 8%;

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

  background:
  rgba(0,0,0,0.55);

  backdrop-filter:blur(14px);

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

  z-index:1000;

}

/* =========================================
   LOGO
========================================= */

.logo{

  display:flex;
  align-items:center;

}

.logo img{

  width:200px;

  height:auto;

  object-fit:contain;

  transition:0.4s;

  filter:
  drop-shadow(
    0 0 10px rgba(255,0,0,0.15)
  );
margin-left:-050px;
margin-right:20px
}

.logo img:hover{

  transform:scale(1.04);

  filter:
  drop-shadow(
    0 0 20px rgba(255,0,0,0.35)
  );

}

nav ul{

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

}

nav ul li a{

  color:white;

  font-size:15px;
  font-weight:500;

  position:relative;

  transition:0.4s;

}

nav ul li a::after{

  content:'';

  position:absolute;

  left:0;
  bottom:-6px;

  width:0%;
  height:2px;

  background:var(--yellow);

  transition:0.4s;

}

nav ul li a:hover{

  color:var(--yellow);

}

nav ul li a:hover::after{

  width:100%;

}

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

.hero,
.page-hero{

  min-height:100vh;

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

  text-align:center;

  padding:180px 8% 120px;

  position:relative;

}

.hero::before,
.page-hero::before{

  content:'';

  position:absolute;

  width:600px;
  height:600px;

  background:
  radial-gradient(
    rgba(255,0,0,0.25),
    transparent 70%
  );

  top:-200px;
  right:-200px;

  filter:blur(40px);

}

.hero-content,
.page-content{

  max-width:1000px;
  width:100%;

  position:relative;
  z-index:2;

}

.hero h1,
.page-content h1{

  font-size:95px;
  line-height:1.05;

  margin-bottom:25px;

  font-weight:900;

}

.hero h1 span,
.page-content h1 span{

  color:var(--yellow);

}

.hero p,
.page-content p{

  max-width:800px;

  margin:auto;
  margin-bottom:45px;

  color:var(--gray);

  font-size:20px;
  line-height:1.9;

}

.hero-buttons{

  display:flex;
  justify-content:center;
  gap:20px;

  flex-wrap:wrap;

}

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

.btn-primary,
.btn-outline,
.submit-btn{

  padding:18px 38px;

  border:none;
  border-radius:16px;

  font-size:16px;
  font-weight:700;

  cursor:pointer;

  transition:0.4s;

  position:relative;
  overflow:hidden;

}

.btn-primary{

  background:
  linear-gradient(
    135deg,
    var(--red),
    var(--dark-red)
  );

  color:white;

  box-shadow:
  0 15px 35px rgba(255,0,0,0.25);

}

.btn-primary:hover{

  transform:
  translateY(-6px);

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

}

.btn-outline{

  background:transparent;
  border:2px solid white;

  color:white;

}

.btn-outline:hover{

  background:white;
  color:black;

  transform:
  translateY(-6px);

}

/* =========================================
   MARQUEE
========================================= */

.marquee{

  background:var(--red);

  padding:18px 0;

  overflow:hidden;

}

.marquee-track{

  display:flex;
  width:max-content;

  animation:marquee 30s linear infinite;

}

.marquee-track span{

  font-size:24px;
  font-weight:800;

  margin-right:80px;

  letter-spacing:2px;

}

/* =========================================
   SECTIONS
========================================= */

.stats,
.services,
.pricing,
.content-section,
.contact-section,
.portfolio,
.cta-section,
.why-us,
.process{

  padding:140px 8%;

}

/* =========================================
   TITLES
========================================= */

.section-title{

  max-width:900px;

  margin:auto;
  margin-bottom:80px;

  text-align:center;

}

.section-title h2{

  font-size:68px;
  font-weight:900;

  margin-bottom:20px;

}

.section-title h2 span{
  color:var(--yellow);
}

.section-title p{

  color:var(--gray);

  line-height:1.9;

}

/* =========================================
   GRID FIXES
========================================= */

.services-container,
.pricing-container,
.why-container,
.process-container,
.features-grid,
.contact-container,
.footer-container,
.portfolio-container{

  display:grid;
  gap:40px;

  align-items:stretch;

}

/* =========================================
   GLASS EFFECT
========================================= */

.service-card,
.stat-box,
.pricing-card,
.content-box,
.contact-info,
.contact-form,
.feature-item,
.why-card,
.process-card{

  background:var(--glass);

  backdrop-filter:blur(14px);

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

  box-shadow:
  0 10px 40px rgba(0,0,0,0.25);

}

/* =========================================
   SERVICES PAGE SPACING
========================================= */

.services-container{

  grid-template-columns:
  repeat(auto-fit,minmax(350px,1fr));

}

.service-card{

  padding:55px 45px;

  border-radius:30px;

  transition:0.5s;

  display:flex;
  flex-direction:column;

  min-height:100%;

  position:relative;
  overflow:hidden;

}

.service-card:hover{

  transform:
  translateY(-12px);

  border-color:var(--yellow);

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

}

.service-card::before{

  content:'';

  position:absolute;

  top:0;
  left:-100%;

  width:100%;
  height:100%;

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

  transition:0.8s;

}

.service-card:hover::before{
  left:100%;
}

.service-icon{

  width:90px;
  height:90px;

  border-radius:24px;

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

  margin-bottom:35px;

  background:
  linear-gradient(
    135deg,
    var(--red),
    var(--dark-red)
  );

  font-size:36px;

  color:white;

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

}

.service-card h3{

  font-size:34px;
  line-height:1.3;

  margin-bottom:22px;

  font-weight:800;

}

.service-card p{

  color:var(--gray);

  line-height:1.9;

  margin-bottom:30px;

  font-size:16px;

}

.service-card ul{

  display:flex;
  flex-direction:column;

  gap:14px;

  margin-bottom:35px;

  flex-grow:1;

}

.service-card ul li{

  color:#dddddd;

  line-height:1.8;

  position:relative;

  padding-left:24px;

}

.service-card ul li::before{

  content:'';

  position:absolute;

  left:0;
  top:12px;

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--yellow);

}

.service-card .btn-primary{

  margin-top:auto;

  width:100%;

}

/* =========================================
   STATS
========================================= */

.stats{

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

}

.stat-box{

  padding:45px;

  border-radius:25px;

  text-align:center;

  transition:0.4s;

}

.stat-box:hover{

  transform:
  translateY(-10px);

}

.stat-box i{

  font-size:45px;

  color:var(--yellow);

  margin-bottom:20px;

}

.stat-box h2{

  font-size:55px;

  color:var(--red);

  margin-bottom:12px;

}

/* =========================================
   WHY US
========================================= */

.why-container{

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

}

.why-card{

  padding:50px 40px;

  border-radius:28px;

  text-align:center;

  transition:0.4s;

}

.why-card:hover{

  transform:
  translateY(-10px);

}

.why-card i{

  font-size:55px;

  color:var(--red);

  margin-bottom:25px;

}

.why-card h3{

  font-size:30px;

  margin-bottom:20px;

}

.why-card p{

  color:var(--gray);

  line-height:1.9;

}

/* =========================================
   PROCESS
========================================= */

.process-container{

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

}

.process-card{

  padding:55px 45px;

  border-radius:30px;

  position:relative;

  overflow:hidden;

}

.process-number{

  position:absolute;

  top:20px;
  right:25px;

  font-size:90px;
  font-weight:900;

  color:
  rgba(255,255,255,0.05);

}

.process-card h3{

  font-size:32px;

  margin-bottom:20px;

  position:relative;
  z-index:2;

}

.process-card p{

  color:var(--gray);

  line-height:1.9;

  position:relative;
  z-index:2;

}

/* =========================================
   CONTENT BOX
========================================= */

.content-box{

  max-width:1100px;

  margin:auto;

  padding:70px 60px;

  border-radius:30px;

}

.content-box h2{

  font-size:52px;

  margin-bottom:30px;

}

.content-box p{

  line-height:2;

  margin-bottom:28px;

  color:var(--gray);

}

.content-box ul{

  margin-top:25px;

}

.content-box ul li{

  margin-bottom:18px;

  line-height:1.9;

  color:var(--gray);

}

/* =========================================
   FEATURES
========================================= */

.features-grid{

  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

}

.feature-item{

  padding:40px 30px;

  border-radius:24px;

  text-align:center;

  transition:0.4s;

}

.feature-item:hover{

  transform:
  translateY(-10px);

}

.feature-item i{

  font-size:42px;

  color:var(--red);

  margin-bottom:22px;

}

.feature-item h4{

  font-size:20px;

  line-height:1.6;

}

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

.contact-container{

  grid-template-columns:
  repeat(auto-fit,minmax(350px,1fr));

}

.contact-info,
.contact-form{

  padding:50px;

  border-radius:30px;

}

.contact-box{

  display:flex;
  gap:20px;

  margin-bottom:35px;

}

.contact-box i{

  width:60px;
  height:60px;

  background:
  linear-gradient(
    135deg,
    var(--red),
    var(--dark-red)
  );

  border-radius:16px;

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

  font-size:22px;

}

.input-group{

  margin-bottom:22px;

}

.input-group input,
.input-group textarea,
.input-group select{

  width:100%;

  padding:18px;

  border:none;
  outline:none;

  border-radius:14px;

  background:#111;

  color:white;

  font-size:16px;

}

.input-group textarea{

  resize:none;
  height:160px;

}

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

.cta-section{

  text-align:center;

  padding-top:150px;
  padding-bottom:150px;

}

.cta-section h2{

  font-size:70px;

  margin-bottom:30px;

}

.cta-section p{

  max-width:750px;

  margin:auto;
  margin-bottom:45px;

  color:var(--gray);

  line-height:1.9;

  font-size:20px;

}

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

footer{

  background:#020202;

  padding:100px 8% 30px;

}

.footer-container{

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  margin-bottom:60px;

}

.footer-box h3{

  font-size:28px;

  margin-bottom:25px;

}

.footer-box p,
.footer-box a{

  color:var(--gray);

  line-height:2;

  display:block;

  margin-bottom:10px;

}

.footer-box a:hover{

  color:var(--yellow);

}

.footer-bottom{

  text-align:center;

  padding-top:30px;

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

  color:#777;

}

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

.loader{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100vh;

  background:#000;

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

  z-index:99999;

}

.loader::before{

  content:'HB';

  font-size:80px;
  font-weight:900;

  color:var(--red);

  animation:pulse 1s infinite;

}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes pulse{

  0%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.1);
    opacity:0.7;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }

}

@keyframes marquee{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }

}

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

@media(max-width:991px){

  section{

    padding-left:5% !important;
    padding-right:5% !important;

  }

  nav ul{
    display:none;
  }

  .hero h1,
  .page-content h1{

    font-size:58px;

  }

  .section-title h2{

    font-size:48px;

  }

  .service-card{

    padding:45px 35px;

  }

}

@media(max-width:768px){

  .services-container,
  .why-container,
  .process-container{

    grid-template-columns:1fr;

  }

  .hero h1,
  .page-content h1{

    font-size:48px;

  }

  .service-card{

    padding:40px 30px;

  }

  .content-box{

    padding:45px 30px;

  }

}

@media(max-width:600px){

  .hero,
  .page-hero{

    padding-top:150px;
    padding-bottom:100px;

  }

  .hero h1,
  .page-content h1{

    font-size:38px;
    line-height:1.2;

  }

  .section-title h2{

    font-size:38px;

  }

  .cta-section h2{

    font-size:42px;

  }

  .hero-buttons{

    flex-direction:column;

  }

  .hero-buttons a{

    width:100%;

  }

  .btn-primary,
  .btn-outline,
  .submit-btn{

    width:100%;

  }

  .service-card{

    padding:35px 25px;

  }

}
/* =========================================
   EXTRA MOBILE RESPONSIVE FIX
   (DO NOT REMOVE EXISTING CSS)
========================================= */

@media screen and (max-width:768px){

  /* BODY */

  body{

    overflow-x:hidden;

  }

  /* NAVBAR */

  nav{

    padding:15px 4%;

    flex-wrap:wrap;

    gap:12px;

  }

  nav ul{

    display:flex !important;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

    width:100%;

  }

  nav ul li a{

    font-size:13px;

  }

  /* LOGO */

  .logo img{

    width:120px !important;

    margin-left:0 !important;

    margin-right:0 !important;

  }

  /* HERO */

  .hero,
  .page-hero{

    min-height:auto;

    padding-top:140px;

    padding-bottom:90px;

  }

  .hero h1,
  .page-content h1{

    font-size:42px;

    line-height:1.2;

  }

  .hero p,
  .page-content p{

    font-size:16px;

    line-height:1.8;

  }

  /* BUTTONS */

  .hero-buttons{

    width:100%;

    flex-direction:column;

    align-items:center;

  }

  .hero-buttons a{

    width:100%;

  }

  .btn-primary,
  .btn-outline,
  .submit-btn{

    width:100%;

    padding:15px 20px;

    font-size:15px;

  }

  /* SECTION TITLES */

  .section-title{

    margin-bottom:50px;

  }

  .section-title h2{

    font-size:40px;

    line-height:1.2;

  }

  /* ALL GRIDS */

  .services-container,
  .pricing-container,
  .why-container,
  .process-container,
  .features-grid,
  .contact-container,
  .footer-container,
  .portfolio-container{

    grid-template-columns:1fr !important;

    gap:25px;

  }

  /* CARDS */

  .service-card,
  .pricing-card,
  .why-card,
  .process-card,
  .feature-item,
  .content-box,
  .contact-form,
  .contact-info,
  .stat-box{

    padding:30px 22px;

  }

  /* SERVICE */

  .service-card h3{

    font-size:26px;

  }

  .service-card p{

    font-size:15px;

  }

  .service-icon{

    width:75px;

    height:75px;

    font-size:28px;

  }

  /* CONTENT BOX */

  .content-box{

    padding:35px 22px;

  }

  .content-box h2{

    font-size:34px;

    line-height:1.3;

  }

  /* CTA */

  .cta-section{

    padding-top:90px;

    padding-bottom:90px;

  }

  .cta-section h2{

    font-size:38px;

    line-height:1.2;

  }

  .cta-section p{

    font-size:16px;

  }

  /* FOOTER */

  footer{

    padding:70px 5% 30px;

  }

}

/* SMALL PHONES */

@media screen and (max-width:480px){

  .hero h1,
  .page-content h1{

    font-size:34px;

  }

  .section-title h2{

    font-size:32px;

  }

  .cta-section h2{

    font-size:32px;

  }

  .service-card h3{

    font-size:23px;

  }

  .logo img{

    width:100px !important;

  }

}