:root{
  --primary: #0d91fd;
  --secondary: #0a58ca;
  --icon: #165e8f;
  --icon-background: #d6efff;
}

body{


}
h2 {
  font-size: 40px !important;
}


/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */

.top-bar {
  background: #0a2540;
  font-size: 13px;
  position: relative;
  z-index: 1000;
}

/* DEFAULT (TOP - TRANSPARENT) */
.navbar {
   top: 30px !important; /* height of top bar */
  background: transparent;
  transition: all 0.3s ease;
  padding: 20px 0;
  font-size: 18px;
   z-index: 999;
   
}

.navbar-brand{
  color: #0d6efd !important;
}

/* TEXT COLOR ON TOP */
.navbar .nav-link,
.navbar .navbar-brand {
  color: var(--icon);
  font-weight: 500;
}

/* SCROLLED STATE */
.navbar.scrolled {
    top: 0 !important;
  background: #ffffff;
  box-shadow: 0 2px 15px rgba(0,0,0,0.08);
  padding: 15px 0;
}

/* TEXT COLOR AFTER SCROLL */
.navbar.scrolled .nav-link,
.navbar.scrolled .navbar-brand {
  color: var(--icon);
  font-weight: 500;

}

.navbar.scrolled .nav-link:hover {
  color: #4da3ff;
}

.navbar .navbar-toggler {
  border-color: rgba(255,255,255,0.5);
}

.navbar .navbar-toggler-icon {
  filter: invert(1);
}

/* After scroll */
.navbar.scrolled .navbar-toggler-icon {
  filter: invert(0);
}
/* MEGA MENU FULL WIDTH */
.mega-menu {
  left: 0;
  right: 0;
  border-radius: 0;
  margin-top: 0;
}

/* REMOVE DEFAULT DROPDOWN STYLE */
.mega-menu .dropdown-item {
  padding: 6px 0;
  color: #555;
  font-size: 15px;
}

/* HOVER */
.mega-menu .dropdown-item:hover {
 color: var(--primary);
  background: transparent;
  padding-left: 5px;
}

/* HEADINGS */
.mega-menu h6 {
  font-size: 15px;
  color: var(--icon);
}

/* CTA BOX */
.mega-box {
  background: #eaf4ff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

/* SHOW ON HOVER (optional) */
.nav-item.dropdown:hover .mega-menu {
  display: block;
}
/* =====================
      COMMON SERVICES CARD 
===================== */

/* CARD */
.our-services-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  height: 100%;
  border: 1px solid #e9ecef;
  transition: .3s ease;
}

.our-services-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,.1);
  border-color: var(--icon);
}

/* ICON BOX */
.our-services-icon-box {
  width: 55px;
  height: 55px;
  border-radius: 16px;
  background: var(--icon-background);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.our-services-icon-box i {
  font-size: 30px;
  color: var(--icon);
}

/* TITLE */
.service-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* TEXT */
.our-services-card p {
  font-size: 16px;
  line-height: 1.6;
}

/* LINK */
.service-link {
  color: #50a4db;
  font-weight: 00;
  font-size: 15px;
  text-decoration: none;
}

.service-link i {
  transition: .3s;
}

.service-link:hover i {
  margin-left: 6px;
}


/* =====================
      COMMON SERVICES CARD 
===================== */

.whyus-icon-box i {
  font-size: 50px;
  color: #0d6efd;
  transition: 0.3s;
}

.whyus-icon-box h6 {
  font-weight: 600;
}

.whyus-icon-box {
  transition: 0.3s;
}

.whyus-icon-box:hover {
  transform: translateY(-8px);
}

.whyus-icon-box:hover i {
  color: #0a58ca;
  transform: scale(1.2);
}



.btn {
  background-color:#50a4db !important ;
  color: #ffffff !important;
  border: 0px solid  !important;
}


.btn-outline{
background-color:#50a4db !important;
}

.custom-badge{
  background: var(--icon-background);
  color: var(--secondary);
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
}

/* =====================
      COMMON SERVICES CARD 
===================== */









/* =====================
      HOME 
===================== */


.hero-section {
  background: linear-gradient(180deg, #f6fbff 50%, #c4e6f7 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-bottom: 120px; /* 👈 IMPORTANT */
}
/* Heading highlight */
.hero-section h1 span {
  color: #ffffff;
}

/* Image */

/* Responsive */
@media (max-width: 768px) {
  .hero-section {
    background: #f5f2ea;
    text-align: center;
  }
}





.h-section{
    min-height: 90vh;   /* same full screen height */
  display: flex;
  align-items: center; /* vertical center */
  padding: 80px 0;
}


.whytrust{
  background-color: #b5d5f7;
}
.feature-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 15px;
   border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon i {
  color: #2983f8;
  font-size: 70px;
}

.counter-number {
  font-weight: 700;
  color: #2f7bc2;
  margin-bottom: 5px;
}

.counter-text {
  color: #6c757d;
  font-size: 14px;
}



/* ----------HOME PROCESS------------ */

.hprocess-section {
 
  
}


/* badge */

/* title */
.hprocess-title {
  color: #0a2540;
  font-size: 34px;
}

/* subtitle */
.hprocess-subtitle {
  color: #6c757d;
  max-width: 600px;
  margin: auto;
}

/* step */
.hprocess-step {
  text-align: center;
  position: relative;
  transition: 0.3s;
}

/* circle */
.hprocess-circle {
  width: 90px;
  height: 90px;
  margin: auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #537ab9, #1973ce);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 35px;
  
  transition: 0.3s;
}

/* hover effect */
.hprocess-step:hover .hprocess-circle {
  transform: translateY(-8px) scale(1.05);
}

/* text */
.hprocess-step h6 {
  margin-top: 15px;
  font-size: 20px;
  font-weight: 600;
  color: #0a2540;
}

.hprocess-step p {
  font-size: 15px;
  color: #6c757d;
}

/* arrow */
.hprocess-arrow {
  position: absolute;
  top: 15px;
  right: -20px;
  font-size: 45px;
  
  color: #2561b9;
}

/* hide last arrow */
.hprocess-step:last-child .hprocess-arrow {
  display: none;
}

/* mobile */
@media (max-width: 768px) {
  .hprocess-arrow {
    display: none;
  }
}

/* ----------HOME PROCESS------------ */

/* hportfolio */

.hportfolio-section {
}

/* heading */
.hportfolio-badge {
  background: #e6f0ff;
  color: #0d6efd;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
}

.hportfolio-title {
  font-size: 34px;
  font-weight: 700;
  color: #204d79;
  margin-top: 10px;
}

.hportfolio-subtitle {
  color: #6c757d;
  max-width: 600px;
  margin: 10px auto 30px;
}

/* card */
.hportfolio-card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  height: 320px;
  cursor: pointer;
}

/* image */
.hportfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

/* overlay */
.hportfolio-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  color: #fff;
  background: linear-gradient(to top, rgba(1, 11, 20, 1.9), transparent);
}

/* text */
.hportfolio-overlay span {
  font-size: 15px;
  color: #fafafa;
  font-weight: 600;
}

.hportfolio-overlay h5 {
  margin-top: 5px;
  font-weight: 600;
}

/* hover effect */
.hportfolio-card:hover img {
  transform: scale(1.08);
}



/* ---------------------------- */

/* HBLOGS */
.h-blogs {
  
}



.hblogs-title {
  color: #0a2540;
  margin-top: 10px;
}

/* card */
.hblogs-card {
  background: #fff;
  border-radius: 20px;
  height: 100%;
  border: 1px solid #e9ecef;
  transition: .3s ease;
}

/* image */
.hblogs-img {
  height: 180px;
  overflow: hidden;
}

.hblogs-img img {

   border-radius: 20px 20px 0px 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

/* content */
.hblogs-content {
  padding: 20px;
}

.hblogs-content h5 {
  font-weight: 600;
}

.hblogs-content p {
  font-size: 14px;
  color: #6c757d;
}

.hblogs-content a {
  color: #50a4db;
  font-weight: 600;
  text-decoration: none;
}

/* hover */
.hblogs-card:hover {
  transform: translateY(-6px);
    border-color: #165e8f;
}



/* HBLOGS */
/* testimonial */

.testimonial-section {
  
}

/* heading */
.testimonial-badge {
  background: #e6f0ff;
  color: #0d6efd;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
}

.testimonial-title {
  font-size: 34px;
  font-weight: 700;
  color: #0a2540;
  margin-top: 10px;
}

.testimonial-subtitle {
  color: #6c757d;
  max-width: 600px;
  margin: 10px auto 30px;
}

/* card */
.testimonial-card {
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  text-align: left;
  border: 1px solid #e2e8f0;
  transition: 0.3s;
}

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

/* stars */
.stars {
  color: #f59e0b;
  margin-bottom: 10px;
}

/* text */
.testimonial-text {
  font-size: 14px;
  color: #6c757d;
}

/* user */
.testimonial-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* avatar */
.avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #0d6efd, #0a2540);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}


/* testimonial */



/* =====================
      HOME 
===================== */


.about-hero {
  height: 320px;
  background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
              url('assets/img/about-banner.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
}

/* MISSION & VISION */
.mv-card {
  background: #ffffff;
  padding: 40px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.3s;
}

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

.mv-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #dc3545, #ff6b6b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  margin-bottom: 20px;
}

/* WHY SECTION */
.why-section {
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.why-card {
  background: #ffffff;
  padding: 35px 20px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: 0.4s ease;
}

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

.why-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dc3545, #ff6b6b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
}



/* =====================
      ANTIVIRUS 
===================== */


.antivirus-card {
  background: #fff;
  border-radius: 20px;
  padding: 10px;
  height: 100%;
  border: 1px solid #e9ecef;
  transition: .3s ease;
}

.antivirus-img{

}
.antivirus-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,.1);
  border-color: #165e8f;
}

/* TITLE */
.antivirus-service-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}


/* LINK */
.antivirus-link {
  color: #50a4db;
  font-weight: 400;
  font-size: 18px;
  text-decoration: none;
}



/* =====================
      ANTI VIRUS 
===================== */




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


.brand-slider {
  overflow: hidden;
  background-color:#fceaea;
}

.logo-marquee {
  position: relative;
  overflow: hidden;
}

.logo-track {
  display: flex;
  align-items: center;
  width: auto;
  animation: scrollLogos 25s linear infinite;
}

.logo-track img {
  height: 35px;
  margin: 0 50px;
 
  opacity: 0.85;
  transition: 0.3s ease;
}

.logo-track img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

@keyframes scrollLogos {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}




.softservices-hero {
  position: relative;
  padding: 100px 20px;
background: linear-gradient(135deg, #2a60b0 0%, #208abb 50%, #2a60b0 100%);


  color: #fff;
  overflow: hidden;
}
.services-hero {
  position: relative;
  padding: 100px 20px;
background: linear-gradient(135deg, #2a60b0 0%, #208abb 50%, #2a60b0 100%);
  color: #fff;
  overflow: hidden;
}

.services-hero h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 15px;
}

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


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




.desktop-hero h1{
  font-size: 55px;
  color: #ffffff;
}
.desktop-hero p{
  font-size: 22px;
}
.desktop-hero {
  background: url('/assets/img/deskbanner.jpg') no-repeat center center/cover;
  color: #fff;
  padding: 120px 0;
  position: relative;
  z-index: 1;
}
/* Common Shape Style */
.shape {
  position: absolute;
  opacity: 0.15;
  z-index: 0;
}

/* Circle */
.shape-circle {
  width: 250px;
  height: 250px;
  background: #ffffff;
  border-radius: 50%;
  top: -80px;
  left: -80px;
}

/* Triangle */
.shape-triangle {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 250px solid #ffffff;
  bottom: -100px;
  right: 10%;
}

/* Blob */
.shape-blob {
  width: 300px;
  height: 300px;
  background: #ffffff;
  border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
}

/* Text Styling */
.desktop-hero h1 {
  font-size: 48px;
  font-weight: 700;
}

.hero-subtitle {
  font-size: 18px;
  margin-top: 15px;
  opacity: 0.9;
}


                                                                                                                                                                                                                                                                                       

.reparing-box{
    background:#fff;
    padding:14px 15px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    font-weight:600;
    color:#333;
    box-shadow:0 6px 18px rgba(0,0,0,0.05);
    transition:0.3s ease;
    height:100%;
}

.reparing-box i{
    font-size:22px;
    color:#165e8f;
    min-width:30px;
}

.reparing-box span{
    line-height:1.3;
}

/* Red theme hover */
.reparing-box:hover{
    background:#165e8f;
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(34, 146, 197, 0.3);
}

.reparing-box:hover i{
    color:#fff;
}



.desktop-horizontal{
    background:#f8f9fa;
}



.gallery-img{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: .4s ease;
}

.gallery-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: .4s ease;
}

.gallery-img:hover img{
  transform: scale(1.08);
}

.gallery-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.1));
  display:flex;
  align-items:flex-end;
  padding:15px;
  color:#fff;
  opacity:0;
  transition:.4s ease;
}

.gallery-img:hover .gallery-overlay{
  opacity:1;
}

.gallery-overlay h6{
  margin:0;
  font-weight:600;
}


/* ---------------------------------- */
/* ---------------------------------- */
/*          DEKSTOP SERVICE */
/* ---------------------------------- */
/* ---------------------------------- */


/* ---------------------------------- */
/* ---------------------------------- */
/*          WEB HOSTING SERVICE */
/* ---------------------------------- */
/* ---------------------------------- */

.card h5{
  color:#50a4db ;
}






/* ---------------------------------- */
/* ---------------------------------- */
/*          WEB HOSTING SERVICE */
/* ---------------------------------- */
/* ---------------------------------- */



/* ---------------------------------- */
/* ---------------------------------- */
/*          LAB SETUP */
/* ---------------------------------- */
/* ---------------------------------- */


.lab-setup{
   transition: 0.3s;
   border: 1px solid rgb(78, 169, 255);
   border-radius:10px ;
}


.lab-setup:hover{
    transform: translateY(-6px);
}
/* Icon circle */
.lab-setup-icon {
  width: 70px;
  height: 70px;
  background-color: #6cbdff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
     transition: 0.3s;
}

.lab-setup-icon  i{
   color: #0b4f86;
}

.lab-setup-icon:hover{
   transform: translateY(-6px);
}

.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: 0.3s ease;
}

.gallery-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: 0.4s ease;
}

.gallery-card:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
}


 


/* ---------------------------------- */
/* ---------------------------------- */
/*          LAB SETUP */
/* ---------------------------------- */
/* ---------------------------------- */



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

.faq-section {
  position: relative;
}

.custom-accordion .accordion-item {
  border: none;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.custom-accordion .accordion-button {
  font-weight: 600;
  background: #fff;
}

.custom-accordion .accordion-button:not(.collapsed) {
  background: #fff;
 
}

.custom-accordion .accordion-button:focus {
  box-shadow: none;
}

.custom-accordion .accordion-body {
  color: #6c757d;
}

/* subtle background shape */
.faq-shape {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(250, 96, 96, 0.05);
  border-radius: 50%;
  top: -120px;
  left: -120px;
}

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

.contact-cta {
  background: #fff;
}

.contact-cta h2 {
  font-size: 2rem;
}

.cta-line {
  position: absolute;
  width: 120px;
  height: 4px;
  background: #dc3545;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  border-radius: 5px;
}


footer{
  background-color: #eeeeee;
/* background: linear-gradient(180deg, #d7d8da, #727272); */
color: #000000;
}

footer a{
  text-decoration: none !important;
  color: #000000 ;
}