:root{

--bg1:#050505;
--bg2:#0d1117;
--bg3:#141822;

--blue:#2563eb;
--blue-light:#60a5fa;

--white:#fff;
--gray:#94a3b8;

}



      /* Premium Black Navbar */
.premium-navbar {
background:
    linear-gradient(
    180deg,
    rgba(15,17,20,.95),
    rgba(9,10,13,.92));

    backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(255,255,255,.05);
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}

.company-logo { width: 40px; height: 40px; }

.company-name {
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.company-subtitle {
  color: #8a8a8a;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* ===== Desktop nav links ===== */
.navbar-collapse.d-md-flex {
  align-items: center;
  gap: 16px;
}
.navbar-collapse .navbar-nav {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.navbar-collapse .nav-item { position: relative; }

.navbar-collapse .nav-link {
  color: #cfcfcf !important;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  position: relative;
  display: inline-block;
  transition: color 0.25s ease;
}

.navbar-collapse .nav-link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: #2ecc71;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.navbar-collapse .nav-link:hover {
  color: #fff !important;
}
.navbar-collapse .nav-link:hover::after {
  transform: scaleX(1);
}

/* Premium green CTA button  */
.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #1f9d55, #0f6e3b);
  color: #fff !important;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 9px 19px;
  border-radius: 24px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(15, 110, 59, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 110, 59, 0.5);
  filter: brightness(1.08);
  color: #fff !important;
}

/* ===== Hamburger ===== */
.m_button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  position: relative;
  z-index: 1051;
}
.m_button span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.m_button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.m_button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.m_button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Overlay + sliding sidebar ===== */
.sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0);
  opacity: 0; visibility: hidden;
  pointer-events: none; /* FIX: prevents overlay blocking touches when closed */
  transition: opacity 0.3s ease, visibility 0.3s ease, background 0.3s ease;
  z-index: 1040;
}
.sidebar-overlay.open {
  opacity: 1; visibility: visible;
  pointer-events: auto; /* FIX: re-enables touch when sidebar is actually open */
  background: rgba(0, 0, 0, 0.55);
}

.mobile-sidebar {
  position: fixed; top: 0; left: 0; height: 100%;
  width: 78%; max-width: 300px;
  background: #0a0a0a;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 1045;
  box-shadow: 2px 0 24px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}
.mobile-sidebar.open { transform: translateX(0); }

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #1c1c1c;
}
.sidebar-close {
  background: none; border: 0; color: #999;
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px;
}

.mobile-sidebar .navbar-nav {
  list-style: none; margin: 0; padding: 8px;
  display: flex; flex-direction: column; flex: 1;
}
.mobile-sidebar .nav-link {
  display: block;
  color: #e6e6e6 !important;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 14px 12px;
  border-bottom: 1px solid #1c1c1c;
  border-radius: 6px;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.mobile-sidebar .nav-link:active {
  background: #161616;
  padding-left: 18px;
}

.sidebar-btn-wrap { padding: 16px 20px 24px; }

body.sidebar-open { overflow: hidden; }




/* HERO SECTION  */





:root{
--blue:#2563eb;
--blue-light:#60a5fa;
--white:#fff;
--gray:#94a3b8;
}



.hero-section{
    position:relative;
    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(37,99,235,.15),
    transparent 30%),

    linear-gradient(
    180deg,
    #050505,
    #0d1117,
    #141822);

    padding-top:20px;
    padding-bottom:70px;
}


/* CONTENT */

.hero-content{
    text-align:center;
}


/* EYEBROW */

.hero-eyebrow{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    color:#94a3b8;

    letter-spacing:2px;

    font-size:.8rem;

    margin-bottom:10px;
}

.hero-eyebrow span{
    width:8px;
    height:8px;
    background:#3b82f6;
    border-radius:50%;
}


/* TITLE */

.hero-title{

    color:white;

    font-size:clamp(2.5rem,8vw,5rem);

    line-height:1.1;

    font-weight:800;

    margin-bottom:20px;
}

.hero-title span{
    color:#60a5fa;
}


/* PARAGRAPH */

.hero-lead{
    color:rgba(255,255,255,.85);

    line-height:1.9;

    margin-bottom:25px;
}


/* BUTTONS */

.hero-btns{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.hero-btn-primary,
.hero-btn-outline{

    text-decoration:none;

    padding:16px;

    border-radius:18px;

    font-weight:600;
}

.hero-btn-primary{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #60a5fa);

    color:white;
}

.hero-btn-outline{

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

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

    color:white;
}


/* STATS */

.hero-stats{

    display:grid;

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

    gap:20px;

    margin-top:40px;
}

.stat-item h3{

    color:white;

    font-size:2rem;

    font-weight:800;
}

.stat-item span{

    color:#94a3b8;

    font-size:.85rem;
}


/* DESKTOP IMAGE */

.hero-image{

    position:relative;
}

.hero-image img{

    width:100%;

    border-radius:30px;

    box-shadow:
    0 40px 100px rgba(0,0,0,.6);
}


/* BADGE */

.hero-badge{

    position:absolute;

    left:-20px;

    bottom:40px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px;

    border-radius:20px;

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

    backdrop-filter:blur(20px);

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

}

.badge-icon{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#2563eb;

    color:white;
}

.hero-badge h6{
    color:white;
}

.hero-badge small{
    color:#94a3b8;
}


/* MOBII */

@media(max-width:991.98px){

.hero-section{

    position:relative;

    background:
    linear-gradient(
    rgba(5,5,5,.80),
    rgba(13,17,23,.88)),
    url("./images/hero image.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    /* VERY IMPORTANT */
    min-height:auto;

    padding-top:75px;  /* adjust according to navbar height */
    padding-bottom:70px;

}


.hero-content{

    position:relative;

    z-index:2;

    text-align:center;

}

}

/* tablet */

@media(min-width:768px){

.hero-btns{

    flex-direction:row;

    justify-content:center;

}

.hero-btn-primary,
.hero-btn-outline{

    padding:18px 30px;

}

}


/* destop */

@media(min-width:992px){

.hero-section{

    padding-top:10px;

    min-height:auto;

}

.hero-content{

    text-align:left;

}

.hero-eyebrow{

    justify-content:flex-start;

}

.hero-btns{

    flex-direction:row;

    justify-content:flex-start;

}

.hero-title{

    max-width:650px;

}

.hero-lead{

    max-width:560px;

}

}

.stat-item h3{
    color: #fff;
    font-weight: 800;
    font-size: 2rem;
    transition: .3s;
}






/*  PRPJECTS SECTION */


.projects-section{
    padding:100px 0;
     background:
    radial-gradient(circle at top left,
    rgba(37,99,235,.15),
    transparent 30%),

    linear-gradient(
    180deg,
    #050505,
    #0d1117,
    #141822);

    padding-top:20px;
    padding-bottom:70px;
}

/* Section Title */
.section-tag{
    color:#60a5fa;
    letter-spacing:1.5px;
    font-weight:600;
}

.section-subtitle{
    color:#94a3b8;
    max-width:600px;
    margin:auto;
}

/* Carousel */
.project-carousel{
    margin-top:20px;
}

/* Card */
.project-card{
    position:relative;
    overflow:hidden;
    border-radius:30px;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);

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

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

/* Image */
.project-card img{
    width:100%;
    height:550px;
    object-fit:cover;
    transition:.5s;
}

.project-card:hover img{
    transform:scale(1.04);
}

/* Overlay */
.project-overlay{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:3rem;

    background:linear-gradient(
        to top,
        rgba(2,6,23,.95),
        rgba(2,6,23,.4),
        transparent);

    color:white;
}

.project-overlay h2{
    font-size:2.5rem;
    font-weight:700;
}

.project-overlay p{
    color:#cbd5e1;
    max-width:550px;
}

/* Controls */
.carousel-control-prev,
.carousel-control-next{
    width:6%;
}

/* Indicators */
.carousel-indicators button{
    width:12px;
    height:12px;
    border-radius:50%;
}

/* Tablet */
@media(max-width:992px){

    .project-card img{
        height:350px;
    }

    .project-overlay{
        padding:2rem;
    }

    .project-overlay h2{
        font-size:2rem;
    }
}

/* Mobile */
@media(max-width:768px){

    .projects-section{
        padding:70px 0;
    }

    .project-card img{
        height:250px;
    }

    .project-overlay{
        padding:1.5rem;
    }

    .project-overlay h2{
        font-size:1.5rem;
    }

    .project-overlay p{
        font-size:.95rem;
    }
}