body{
      margin:0;
      font-family: var(--font-sans);
      
    }


    p{
        font-size: 18px;
    }



    :root{
      /* Palette */
      --primary: #00bfff;   /* Suprams Blue */
      --deep-gray: #020041; /* deep text */
      --muted:   #6B7280;   /* placeholders */
      --light-gray: #F3F4F6;/* background blocks */
      --white:   #FFFFFF;
      --energy:  #FFD500;   /* yellow CTA */
      --energy-dark: #E6C200;
      --white-glass: linear-gradient(160deg, #ffffff 40%, #e8f0ff 100%);

      /* status */
      --yellow-opacity: #ffd50021;
      --warning: #F59E0B;
      --error:   #DC2626;
      --info:    #0284C7;

      /* surfaces */
      --glass: #4d7ed917;
      --opacity-blue: #00bfff12;
      --hover-blue: #00bfffd4;
      --glass-pink: #ff00ea14;
      --glass-yellow: 0 2px 8px #ffd50078;
      --glass-blue: 0 2px 8px #00bfffc2;

      /* shadows */
      --shadow-sm: 0 2px 8px #00c2a863;
      --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
      --pink-blue: 0 2px 8px #010b209e,
                   0 0 8px #4d7ed982;


    
        --lg-font:50px;
        --bold-font:700;
        --shadow-choose: 0 8px 25px rgba(0,0,0,0.06);
        --hover-choose: 0 12px 35px rgba(0,0,0,0.12);
    }

    


/* ============================= */
/*        PREMIUM HEADER         */
/* ============================= */

header{
    position: fixed;          /* sticky modern navbar */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    /*background: rgba(255,255,255,0.95);
    background: #ffffff;   /* full solid white */
    background: rgba(255,255,255,0.98);
       
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    padding: 18px 0;
    box-shadow: 0 4px 25px rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* NAVBAR LAYOUT */
.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* LOGO */
.logo{
    background-image: url(../img/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-width: 160px;
    min-height: 50px;
    filter: brightness(1);
}

/* NAV LINKS */
.navbar a{
    color: #111111;   /* deep solid black */
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Smooth hover glow */
.navbar a:hover{
  
    text-shadow: 0 2px 8px rgba(37,99,235,0.25);
    color: #000000;
    text-shadow: none;
}
/* ===== ACTIVE PAGE STYLE ===== */
.navbar a.active{
    color: #2563eb !important;   /* Blue shade */
    font-weight: 700;
}

/* Underline for active */


/* Underline animation */
.navbar a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0%;
    height:2px;
    /*background: linear-gradient(90deg,#1e3a8a,#2563eb);*/
        background: linear-gradient(90deg,#1e3a8a,#2563eb);

    transition:0.3s ease;
    border-radius:3px;
}

.navbar a:hover::after{
    width:100%;
}

/* Active Link */
.navbar a.active{
    color:#000000;
    font-weight:700;
}

.navbar a.active::after{
    width:100%;
}
.navbar ul{
    background: rgba(0,0,0,0.0);
    padding: 8px 20px;
    border-radius: 40px;
}
/* FORCE DARK NAV LINKS */
.navbar ul li a{
    color: #111 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

.navbar ul li a:hover{
    color: #000 !important;
}

/* ===== HEADER MENU SPACING FIX ===== */

/* ===== DROPDOWN FIX ===== */

.menu ul{
    display:flex;
    gap:40px;
    margin:0;
    padding:0;
}

.menu ul li{
    list-style:none;
    position: relative;
}

.menu ul li a{
    color: #cbd5e1;   /* soft grayish blue */
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: 0.3s ease;
}

/* Hover effect */
.menu ul li a:hover{
    color: #38bdf8;   /* softer sky blue */
}

/* Animated underline */
.menu ul li a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 2px;
    background: ##ffffff;
    transition: 0.3s ease;
}

.menu ul li a:hover::after{
    width: 100%;
}



.sub_menu{
    position: absolute;
    top: 100%;   /* 110% ki jagah 100% karo */
    left: 0;
    
     background: #ffffff;
    min-width: 240px;
    padding: 15px 0;
    border-radius: 10px;
    display: none;
    z-index: 2000;
}



.menu ul li:hover > .sub_menu{
    display: block;
}


.sub_menu ul{
    display: block;
}

.sub_menu ul li{
    padding: 10px 20px;
}

.sub_menu ul li a{
    
    display: block;
    color: #ffffff ;
    font-weight: 500;
}
.sub_menu ul li a:hover{
    color: #38bdf8 !important;
}



.query_btn{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.query_btn a{
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(135deg,#38bdf8,#6366f1);
    color: #ffffff;
    transition: all 0.4s ease;
    box-shadow: 0 0 20px rgba(56,189,248,0.6);
}

.query_btn a:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 35px rgba(56,189,248,0.8);
}


.home_intro{
  padding: 140px 0;
  background: linear-gradient(135deg,#eef2f7,#dde7f3);
}

/* FLEX */
.intro_wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}

/* TEXT SIDE */
.intro_text{
  flex: 1;
}

.intro_tag{
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 20px;
  position: relative;
}


.intro_tag::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 60%;
  height: 4px;
  background: linear-gradient(90deg,#2563eb,#60a5fa,#818cf8);
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(37,99,235,0.4);
  animation: lineGlow 2s infinite alternate;
}

@keyframes lineGlow{
  from{ width: 40%; }
  to{ width: 70%; }
}

/* HEADING */
.intro_text h1{
  font-size: 56px;
  font-weight: 900;
  background: linear-gradient(
    90deg,
    #0f172a,
    #2563eb,
    #0f172a
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineMove 4s linear infinite;
}

@keyframes shineMove{
  0%{ background-position: 0% center; }
  100%{ background-position: 200% center; }
}

/* PARAGRAPH */
.intro_text p{
  font-size: 18px;
  color: #334155;
  margin-bottom: 18px;
}

/* VIDEO SIDE */
.intro_media{
  flex: 1;
}

.intro_media video{
  width: 100%;
  border-radius: 25px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.15);
  transition: 0.4s ease;
}

.intro_media video:hover{
  transform: scale(1.03);
}

/* RESPONSIVE */
@media(max-width:992px){
  .intro_wrapper{
    flex-direction: column;
    text-align: center;
  }
}

.intro_tag{
  display: inline-block;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #2563eb;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: 50px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(37,99,235,0.15);
  transition: 0.4s ease;
}

.intro_tag:hover{
  background: linear-gradient(90deg,#2563eb,#60a5fa);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(37,99,235,0.4);
}
.intro_text h1 span{
  background: linear-gradient(90deg,#2563eb,#818cf8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Background Images (Slideshow) */
    #banner .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1s ease-in-out, transform 7s ease-in-out;
    }

    
#banner{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* VIDEO */
.banner-video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* OVERLAY */
.video-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.55);
  z-index: 2;
}

/* TEXT */
.banner_content{
  position: relative;
  z-index: 3;
  color: #fff;
  max-width: 600px;
  text-align: left;
}

.banner_content h1{
  font-size: 55px;
  font-weight: 700;
}

.banner_content p{
  font-size: 20px;
  margin-top: 15px;
}
.banner_content_btn{
  margin-top: 25px;
  display: flex;
  gap: 20px;
}

.banner_content_btn{
  margin-top: 30px;
  display: flex;
  gap: 20px;
}

/* ===== FINAL BUTTON STYLE ===== */

.banner_content_btn{
  margin-top: 30px;
  display: flex;
  gap: 20px;
}

.banner_content_btn a{
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s ease;
  position: relative;
  z-index: 5;
}

/* Explore */
.banner_content_btn a:first-child{
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  color: #fff;
  border: none;
}

/* Contact */
.banner_content_btn a:last-child{
  
   background: linear-gradient(135deg, #312e81, #1e1b4b);
  color: #fff;
  border: 1px solid #ffffff40;
}

/* Hover */
.banner_content_btn a:hover{
  transform: translateY(-4px);
}

/* Explore - Teal */
.banner_content_btn a:first-child{
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  color: #fff;
}

/* Contact - Dark Purple */
.banner_content_btn a:last-child{
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  color: #fff;
}

/* Trusted Text */
#hero-span {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s ease forwards;
}

/* Heading Gradient Glow */
#hero-heading {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6); 
  opacity: 0;
}

#hero-span,
#hero-para {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

#hero-heading,
#hero-para,
#hero-span {
  font-family: Arial, sans-serif !important;
}

/* Paragraph*/ 
#hero-para {
  opacity: 0;
  transform: translateY(20px);
}

/* Buttons */
.banner_content_btn {
  opacity: 0;
  transform: translateY(20px);
}

/* Animations**/
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradientMove {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}


/* SECTION BACKGROUND - CLEAN WHITE */
.key_highlights{
    padding:120px 0;
    background:#ffffff;
}

/* REMOVE UNDERLINE */
.keyh_title h1::after{
    display:none !important;
}

/* HEADING BLACK */
.keyh_title h1{
    color:#000000;
    font-weight:700;
}

.keyh_title h5{
    color:#000000;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:600;
}

/* CARD DESIGN - SOFT BORDER STYLE */
.keyh_cards{
    background:#f9fbff;
    border-radius:18px;
    padding:40px 25px;
    text-align:center;
    transition:0.4s ease;
    height:100%;
    min-height:330px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:2px solid #e0f2fe;
}

/* HOVER EFFECT */
.keyh_cards:hover{
    transform:translateY(-8px);
    border-color:#0ea5e9;
    box-shadow:0 15px 35px rgba(14,165,233,0.15);
}

/* TEXT DARK */
.keyh_cards h4{
    color:#111827;
    font-weight:600;
}

.keyh_cards p{
    color:#4b5563;
}

/* ICON */
.keyh_card_content i{
    font-size:50px;
    margin-bottom:20px;
    color:#0ea5e9;
    transition:0.3s ease;
}

.keyh_cards:hover i{
    transform:scale(1.1);
}

/* BUTTON */
.keyh_card_content button{
    margin-top:20px;
    padding:12px 28px;
    border-radius:30px;
    border:none;
    background:#0ea5e9;
    color:#ffffff;
    font-weight:600;
    font-size:14px;
    letter-spacing:1px;
    cursor:pointer;
    transition:0.3s ease;
}

.keyh_card_content button:hover{
    background:#0284c7;
    transform:translateY(-3px);
}



/* SECTION LIGHT BACKGROUND*/ 
.why_tech{
    background: linear-gradient(
        135deg,
        #0b1c2d,
        #132a45,
        #1a365d
    );
    padding:100px 0;
    position: relative;
    overflow: hidden;
}

.why_tech::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background: radial-gradient(circle, rgba(56,189,248,0.15), transparent 70%);
    top:-200px;
    right:-200px;
    filter: blur(120px);
}*/


/* LIGHT BACKGROUND */
.why_tech{
    background: linear-gradient(135deg,#f8fafc,#e2e8f0);
    padding:100px 0;
}

/* SECTION TITLE */
.client_logo_title h5{
    color:#0ea5e9;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:600;
}

.client_logo_title h1{
    color:#0f172a;
    font-weight:700;
    margin-top:10px;
}



/* LIGHT BACKGROUND */
.why_tech{
    background: linear-gradient(135deg,#f8fafc,#e2e8f0);
    padding:100px 0;
}

/* REMOVE DARK OVERLAY */
.why_tech::before{
    display:none;
}

/* SECTION TITLE - BLACK */
.client_logo_title h5{
    color:#000;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:600;
}

.client_logo_title h1{
    color:#000;
    font-weight:700;
    margin-top:10px;
}

/* LIGHT CARDS */
.why_cards{
    background:#ffffff;
    border-radius:20px;
    padding:35px;
    transition:0.4s ease;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* HOVER */
.why_cards:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(14,165,233,0.2);
}

/* ICON */
.why_cards i{
    font-size:32px;
    width:65px;
    height:65px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#38bdf8,#0ea5e9);
    color:#fff;
    transition:0.3s ease;
}

.why_cards:hover i{
    transform:scale(1.1);
}

/* TEXT DARK */
.why_card_content h3{
    color:#000;
    font-weight:600;
    margin-bottom:8px;
}

.why_card_content p{
    color:#333;
    font-size:15px;
}

.why_tech .client_logo_title h1{
    color:#000 !important;
    background:none !important;
    -webkit-text-fill-color:#000 !important;
    -webkit-background-clip: initial !important;
    text-shadow:none !important;
}







/* LIGHT BACKGROUND */
.industries_serve{
    padding:100px 0;
    background: linear-gradient(135deg,#f8fafc,#e2e8f0);
}

/* TITLE */
.industries_serve .keyh_title h5{
    color:#0ea5e9;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:600;
}

.industries_serve .keyh_title h1{
    color:#0f172a;
    font-weight:700;
    margin-top:10px;
}

/* GRID LAYOUT */
.industries_grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:25px;
    margin-top:50px;
}

/* INDUSTRY BOX */
.industry_box{
    background:#ffffff;
    padding:35px 20px;
    text-align:center;
    border-radius:18px;
    transition:0.4s ease;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

/* HOVER EFFECT */
.industry_box:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(14,165,233,0.25);
}

/* ICON */
.industry_box i{
    font-size:40px;
    color:#0ea5e9;
    margin-bottom:15px;
    transition:0.3s ease;
}

.industry_box:hover i{
    transform:scale(1.1);
}

/* TEXT */
.industry_box h5{
    color:#0f172a;
    font-weight:600;
    font-size:16px;
}

.clientl_card_gap{
    padding:20px;
    display:flex;
    justify-content:center;
}

.clientl_card1{
    filter: grayscale(100%);
    opacity:0.6;
    transition:0.4s ease;
}

.clientl_card1:hover{
    filter:none;
    opacity:1;
}



.client_logo{
    padding:120px 0;
    background: linear-gradient(
        135deg,
        #cfe9ff,
        #b6dcff,
        #e0f2ff
    );
}

.client_logo::after{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(15, 23, 42, 0.08); /* very light */
    z-index:1;
}


.client_logo > *{
    position: relative;
    z-index: 2;
}



/* Soft Glow */
.client_logo::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background: radial-gradient(circle, rgba(56,189,248,0.15), transparent 70%);
    bottom:-200px;
    left:-200px;
    filter: blur(120px);
}


/* Heading */
.client_logo_title h5{
    color:#2563eb;
    letter-spacing:4px;
    font-weight:600;
    text-transform: uppercase;
}

.client_logo_title h1{
    font-size:52px;
    font-weight:800;
    background: linear-gradient(90deg,#1e3a8a,#2563eb,#3b82f6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow: 0 10px 25px rgba(37,99,235,0.25);
    margin-bottom:60px;
}



.client_logo_section{
    background: linear-gradient(135deg, #1b2c44, #254b6b, #31627f);
    padding: 100px 0;
}






.keyh_title h1,
.client_logo_title h1{
    font-size:48px;
    font-weight:800;
    background: linear-gradient(90deg,#000000,#000000);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

@keyframes floatLogo {
    0%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
    100%{ transform: translateY(0); }
}




.clientl_card1{
    filter: grayscale(80%);
    opacity:0.8;
    transition: all 0.4s ease;
}

.clientl_card1:hover{
    filter: grayscale(0%);
    opacity:1;
    transform: scale(1.1);
}





.home_intro {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1, #e2e8f0);
  overflow: hidden;
}

/* Subtle shine like header */
.home_intro::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:50%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.4),
        transparent
    );
    transform:skewX(-25deg);
    animation: shineLight 6s infinite;
    pointer-events:none;
}

@keyframes shineLight{
    0%{ left:-100%; }
    100%{ left:150%; }
}

/* Keep text above */
.home_intro .client_logo_title{
    position:relative;
    z-index:2;
}

/* Heading */
.home_intro h1{
    color:#0f172a;
}

/* Paragraph */
.home_intro p{
    color:#334155;
}


.client_logo_title h1{
    text-transform: capitalize;
    color: var(--deep-gray);
    text-align: center;
    margin-bottom: 80px;
}
.client_logo_card{
    display: grid;
    grid-template-columns: repeat(5, auto); 
    z-index: 1;
    gap: 20px;
}
.ace{
    background-image: url(../img/ace-cloud.png);
}
.ACM{
    background-image: url(../img/ACM.png);
}
.anydesk{
    background-image: url(../img/anydesk-logo.png);
}
.Aruba_Networks{
    background-image: url(../img/Aruba_Networks-Logo.png);
}
.aws{
    background-image: url(../img/aws-logo.webp);
}
.azure{
    background-image: url(../img/azure-logo.png);
    padding: 20px;
}
.BOAT{
    background-image: url(../img/BOAT-logo.png);
}
.carbonite{
    background-image: url(../img/carbonite.png);
}
.Cisco_Meraki{
    background-image: url(../img/Cisco_Meraki-Logo.wine.png);
}
.cloud_speed{
    background-image: url(../img/cloud-speed.jpg);
}
.cohesity{
    background-image: url(../img/cohesity.png);
}
.control{
    background-image: url(../img/control-logo.png);
}
.Commvault_logo{
    background-image: url(../img/Commvault_logo_2019.svg);
}
.Dell{
    background-image: url(../img/Dell-Logo.png);
}
.druva_logo{
    background-image: url(../img/druva_logo.png);
}
.eps_Acronis{
    background-image: url(../img/eps-Acronis-logo.png);
}
.eps_avast{
    background-image: url(../img/eps-avast-logo.png);
}
.eps_Check_Point_logo{
    background-image: url(../img/eps-Check_Point_logo.png);
}
.eps_crowd{
    background-image: url(../img/eps-crowd-logo.png);
}
.eps_ESET{
    background-image: url(../img/eps-ESET-Logo.png);
}
.eps_k7{
    background-image: url(../img/eps-k7-logo.png);
}
.eps_kaspersky{
    background-image: url(../img/eps-kaspersky-logo.svg);
}
.eps_logo_bit{
    background-image: url(../img/eps-logo-bit-defender.png);
}
.eps_Malwarebytes_logo{
    background-image: url(../img/eps-Malwarebytes_logo.png);
}
.eps_Sophos_logo{
    background-image: url(../img/eps-Sophos_logo.png);
}
.eps_Trend{
    background-image: url(../img/eps-Trend-Micro-logo.png);
}
.fortinet{
    background-image: url(../img/fortinet-logo.png);
}
.fw_Cisco_logo{
    background-image: url(../img/fw-Cisco_logo.png);
}
.fw_Palo{
    background-image: url(../img/fw-Palo-Alto-Logo.png);
}
.fw_sonicwall{
    background-image: url(../img/fw-sonicwall-logo.png);
}
.Google_Workspace{
    background-image: url(../img/Google_Workspace.png);
}
.google_logo{
    background-image: url(../img/google-logo.png);
}
.gotoassist{
    background-image: url(../img/rt-gotoassist-logo.jpg);
}
.hp_logo{
    background-image: url(../img/hp-logo.png);
}
.indo_logo{
    background-image: url(../img/indo-logo.png);
}
.Infinidat{
    background-image: url(../img/Infinidat-Logo.png);
}
.iopex{
    background-image: url(../img/iopex-logo.png);
}
.jaipuria{
    background-image: url(../img/jaipuria-logo.png);
}
.jaypee{
    background-image: url(../img/jaypee-logo.png);
}
.juniper{
    background-image: url(../img/juniper-logo.png);
}
.larsen{
    background-image: url(../img/larsen-logo.png);
}
.Lenovo_Global{
    background-image: url(../img/Lenovo_Global_Corporate_Logo.png);
}
.matrix{
    background-image: url(../img/matrix-logo.jpg);
}

.metro{
    background-image: url(../img/metro-logo.png);
}
.Micro_focus{
    background-image: url(../img/Micro_focus.png);
}
.Microsoft{
    background-image: url(../img/Microsoft-CSP-1.png);
}
.Netgear{
    background-image: url(../img/Netgear-Logo.png);
}
.OneDrive{
    background-image: url(../img/OneDrive-Emblem.png);
}
.police{
    background-image: url(../img/police-logo.png);
}
.TeamViewer{
    background-image: url(../img/rt-TeamViewer-logo.png);
}
.sail{
    background-image: url(../img/sail-logo.svg);
}
.Scality_logo{
    background-image: url(../img/Scality_logo.png);
}
.SUPPORTS{
    background-image: url(../img/SUPPORTS-logo.png);
}
.synology{
    background-image: url(../img/synology-logo.png);
}
.tsplus{
    background-image: url(../img/tsplus-logo.png);
}
.unacademy{
    background-image: url(../img/unacademy-logo.png);
}
.uprsa{
    background-image: url(../img/uprsa-logo.png);
}
.Veeam_logo{
    background-image: url(../img/Veeam_logo.png);
}
.vembu{
    background-image: url(../img/vembu.png);
}
.Veritas{
    background-image: url(../img/Veritas.png);
}
.vultr{
    background-image: url(../img/vultr-logo.png);
}
.Wasabi_Logo{
    background-image: url(../img/Wasabi_Logo.png);
}
.windy{
    background-image: url(../img/windy.webp);
}
.zoho{
    background-image: url(../img/ZOHO.png);
}

.clientl_card1{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 100px;
    padding: 20px;
}
.clientl_card_gap{
    padding: 15px;
}


.test_rate{
    background: linear-gradient(to bottom, #ffffff, #FFD500);
    padding: 20px;
    border-radius: 10px;
    min-height: 344px;
    display: grid;
}
.test_rate h1{
    font-size: 70px;
}
.person1_img{
    background-image: url(../img/about-banner.svg);
    margin-right: -15px;
}
.person1_img2{
    background-image: url(../img/data-lose-banner.jpg);
    margin-right: -15px;
}
.person1_img3{
    background-image: url(../img/data-lose-banner.jpg);
    margin-right: -15px;
}
.person1_img4{
    background-image: url(../img/about-banner.svg);
}
.test_person_img{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 40px;
    width: 40px;
    border-radius: 20px;
    border: 2px solid var(--white);
}



.testimonials .col-sm-8{
    background: linear-gradient(135deg,#1e293b,#0f172a);
    border-radius: 20px;
}

.testmonial_slider{
    min-height: 314px;
}

.testimonials{
   
    background: linear-gradient(135deg,#0f172a,#1e293b,#0f172a);
    position:relative;
    overflow:hidden;
    
     padding:70px 0 120px 0;
    
}

/* Soft Glow */
.testimonials::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background: radial-gradient(circle, rgba(56,189,248,0.2), transparent 70%);
    top:-200px;
    right:-200px;
    filter: blur(120px);
}

.testimonial_card{
    background: linear-gradient(135deg,#1e293b,#0f172a);
    border-radius:20px;
    padding:50px;
    color:#ffffff;
    box-shadow:0 25px 60px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    animation: floatCard 6s ease-in-out infinite;
}

.testimonial_card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:6px;
    height:100%;
    background: linear-gradient(180deg,#38bdf8,#818cf8);
    box-shadow: 0 0 20px #38bdf8;
}


.testimonials::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background: radial-gradient(circle, rgba(56,189,248,0.15), transparent 70%);
    bottom:-150px;
    left:-150px;
    filter: blur(120px);
    animation: moveLight 12s linear infinite;
}

@keyframes moveLight{
    0%{ transform: translate(0,0); }
    50%{ transform: translate(200px,150px); }
    100%{ transform: translate(0,0); }
}



.test1_card p{
    font-size:22px;
    line-height:2;
    margin-bottom:30px;
    animation: fadeInUp 1s ease forwards;
}


@keyframes fadeInUp {
    from{
        opacity:0;
        transform: translateY(20px);
    }
    to{
        opacity:1;
        transform: translateY(0);
    }
}


.test1_card h5{
    color:#38bdf8;
    font-weight:600;
    letter-spacing:1px;
}


.test_rate{
    background: linear-gradient(135deg,#1e293b,#0f172a);
    border-radius:20px;
    padding:40px;
    color:#fff;
    box-shadow:0 20px 50px rgba(0,0,0,0.4);
    backdrop-filter: blur(15px);
}

.test_rate h1{
    font-size:80px;
    font-weight:800;
    background: linear-gradient(90deg,#38bdf8,#818cf8);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}



.test1_card{
    padding: 20px;
}
.test1_card p{
    font-size: 22px;
}

@keyframes floatCard {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

.quick_form{
    position: relative;
    padding: 140px 0;
    background-image: linear-gradient(
        to right,
        rgba(0,0,0,0.6),
        rgba(0,0,0,0.2),
        rgba(0,0,0,0)
    ),
    url("../img/about-img1.jpg");  /* path fix */

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff;
    text-align: center;
}


.quick_form_content button{
    padding: 15px 30px;
    background-color: var(--primary);
    border-radius: 10px;
    font-size: 18px;
    border: none;
    margin-top: 20px;
    font-weight: 600;
}
.quick_form_content button:hover{
    background-color: var(--energy-dark);
}
.quick_form_content a{
    color: var(--white);
    text-decoration: none;
}
.quick_form_content button:hover a{
    color: var(--deep-gray);
}

.quick_form_content h5{
    font-size: 20px;
    max-width: 850px;
    margin: 0 auto 20px;
    line-height: 1.8;
    opacity: 0;
    animation: fadeUp 1s ease forwards;
}

.quick_form_content h1{
    font-size: 60px;
    font-weight: 800;
    margin-bottom: 35px;
    background: linear-gradient(90deg,#ffffff,#00bfff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    opacity: 0;
    animation: fadeUp 1s ease forwards 0.3s;
}
.quick_btn{
    display:inline-block;
    padding:16px 40px;
    border-radius:50px;
    font-size:18px;
    font-weight:600;
    text-decoration:none;
    color:#fff;
    background: linear-gradient(135deg,#00bfff,#2563eb);
    box-shadow: 0 0 25px rgba(0,191,255,0.6);
    transition:0.4s ease;
    opacity:0;
    animation: fadeUp 1s ease forwards 0.6s;
}

.quick_btn:hover{
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0,191,255,0.8);
}
.quick_form::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background: radial-gradient(circle, rgba(0,191,255,0.25), transparent 70%);
    top:-200px;
    left:-200px;
    filter: blur(120px);
    animation: moveLight 12s linear infinite;
}

@keyframes moveLight{
    0%{ transform: translate(0,0); }
    50%{ transform: translate(200px,150px); }
    100%{ transform: translate(0,0); }
}

footer{
    position: relative;
    background: linear-gradient(135deg,#0f172a,#1e293b,#0f172a);
    color: #ffffff;
    padding: 100px 0 30px 0;
    overflow: hidden;
}

/* Soft glow effect like header */
footer::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background: radial-gradient(circle, rgba(56,189,248,0.18), transparent 70%);
    bottom:-200px;
    right:-200px;
    filter: blur(120px);
}

/* Shine animation (optional premium look) */
footer::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:50%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.05),
        transparent
    );
    transform:skewX(-25deg);
    animation: shineFooter 8s infinite;
}

@keyframes shineFooter{
    0%{ left:-100%; }
    100%{ left:150%; }
}



.newletter h3,
.quick_links h3,
.social_link h3{
    color: var(--primary);
}
.newletter form{
    border: 1px solid var(--white);
    border-radius: 50px;
    justify-content: space-around;
    width: 80%;
}
.newletter form input,
.newletter form button{
    border: none;
    padding: 20px;
    background-color: transparent;
    color: var(--white);
}
.newletter form button i{
    font-size: 25px;
}

.quick_links ul{
    padding: 0;
}
.quick_links ul li{
    list-style: none;
    margin: 20px 0;
}
.quick_links a{
    text-decoration: none;
    color: var(--white);
}

.social_link ul{
    display: flex;
    gap: 20px;   /* 👈 yahan se spacing control hogi */
    padding: 0;
    margin-top: 15px;
}

.social_link ul li{
    list-style: none;
}

.social_link i{
    font-size: 22px;
    color: #38bdf8;
    transition: 0.3s ease;
}

.social_link i:hover{
    transform: translateY(-4px);
    color: #ffffff;
}

.about-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.about-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55); 
    z-index: 2;
}

.about_us_banner .container{
    z-index: 3;
}

.about_us_banner{
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 0;

    background: linear-gradient(
        135deg,
        #0f172a,
        #1e293b,
        #0f172a
    );
    overflow: hidden;
}
.about_us_banner::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background: radial-gradient(circle, rgba(56,189,248,0.25), transparent 70%);
    top:-200px;
    left:-200px;
    filter: blur(120px);
    animation: moveGlow 10s linear infinite;
}

@keyframes moveGlow{
    0%{ transform: translate(0,0); }
    50%{ transform: translate(250px,200px); }
    100%{ transform: translate(0,0); }
}

.aboutus_content h6{
    animation: slideUp 1s ease forwards;
    opacity: 0;
}

.aboutus_content h1{
    background: linear-gradient(
        90deg,
        #38bdf8,
        #818cf8,
        #38bdf8
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 4s linear infinite;
}

@keyframes gradientMove{
    0%{ background-position: 0% center; }
    100%{ background-position: 200% center; }
}


.aboutus_content h6,
.aboutus_content h1{
    opacity:0;
    animation: slideUp 1s ease forwards, floatText 6s ease-in-out infinite 1.5s;
}


@keyframes floatText{
    0%{ transform: translateY(0px); }
    50%{ transform: translateY(-10px); }
    100%{ transform: translateY(0px); }
}


.aboutus_content p{
    max-width: 800px;
    margin: 0 auto;
    font-size: 18px;
    color: #cbd5e1;
    line-height: 1.8;
}

.about_btn{
    display:inline-block;
    margin-top:40px;
    padding:16px 40px;
    border-radius:50px;
    background: linear-gradient(135deg,#38bdf8,#2563eb);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 0 25px rgba(56,189,248,0.6);
    transition:0.4s;
}

.about_btn:hover{
    transform: translateY(-6px);
}


/* ============================= */
/* ABOUT PREMIUM SECTION - LIGHT */
/* ============================= */

.about_premium_section{
    padding:140px 0;
    background:#f8fafc;   /* light background */
    position:relative;
    overflow:hidden;
}

/* FLEX */
.about_premium_wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
    position:relative;
    z-index:2;
}

/* TEXT CARD */
.about_premium_text{
    flex:1;
    background:#ffffff;   /* white card */
    padding:50px;
    border-radius:25px;
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

/* Small heading */
.about_premium_text h6{
    color:#0ea5e9;
    letter-spacing:3px;
    margin-bottom:20px;
}

/* Main heading */
.about_premium_text h1{
    font-size:52px;
    font-weight:800;
    margin-bottom:25px;
    color:#000;   /* BLACK heading */
}

/* Paragraph */
.about_premium_text p{
    font-size:18px;
    color:#444;
    line-height:1.8;
}

/* VIDEO CARD */
.about_premium_video{
    flex:1;
    position:relative;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 25px 50px rgba(0,0,0,0.12);
    transition:0.4s ease;
}

/* Hover effect */
.about_premium_video:hover{
    transform: scale(1.03);
}

/* Video */
.about_premium_video video{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:30px;
}

/* Responsive */
@media(max-width:992px){
    .about_premium_wrapper{
        flex-direction:column;
    }
}



/* ============================= */
/* TIMELINE - LIGHT THEME */
/* ============================= */

.timeline_alt{
    position:relative;
    margin-top:80px;
}

/* Center vertical line */
.timeline_alt::before{
    content: "";
    position: absolute;
    left: 50%;
    width: 3px;
    height: 100%;
    background: #d1d5db;   /* light gray line */
    transform: translateX(-50%);
}

/* Timeline block */
.timeline-block{
    width:50%;
    padding:40px;
    position:relative;
}

.timeline-block.left{
    left:0;
    text-align:right;
}

.timeline-block.right{
    left:50%;
}

/* Timeline dot */
.timeline-block::before{
    content:"";
    position:absolute;
    top:25px;
    width:16px;
    height:16px;
    background:#0ea5e9;   /* blue dot */
    border-radius:50%;
    z-index:2;
}

.timeline-block.left::before{
    right:-8px;
}

.timeline-block.right::before{
    left:-8px;
}

/* Content card */
.timeline-block .content{
    background:#ffffff;   /* white card */
    padding:35px;
    border-radius:16px;
    color:#000;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transition:0.3s ease;
}

/* Hover */
.timeline-block .content:hover{
    transform: translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* Heading */
.timeline-block h4{
    font-size:28px;
    font-weight:700;
    color:#000;   /* black heading */
    margin-bottom:15px;
}

/* Paragraph */
.timeline-block p{
    color:#444;
    font-size:16px;
    line-height:1.8;
}

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

    .timeline_alt::before{
        left:10px;
    }

    .timeline-block{
        width:100%;
        padding-left:50px;
        text-align:left !important;
    }

    .timeline-block.right{
        left:0;
    }

    .timeline-block::before{
        left:0 !important;
    }
}
/* ============================= */
/* TIMELINE - LIGHT PREMIUM */
/* ============================= */

.timeline-block .content{
    background:#ffffff;
    padding:35px;
    border-radius:16px;
    color:#000;
    
    /* Stronger shadow */
    box-shadow:0 15px 35px rgba(0,0,0,0.12);
    
    transition:all 0.4s ease;
    
    /* Floating animation */
    animation: floatCard 4s ease-in-out infinite;
}

/* Different delay so sab ek saath move na kare */
.timeline-block:nth-child(even) .content{
    animation-delay:1.5s;
}

/* Hover effect */
.timeline-block .content:hover{
    transform: translateY(-12px) scale(1.03);
    box-shadow:0 25px 55px rgba(0,0,0,0.18);
}

/* Floating animation */
@keyframes floatCard{
    0%{ transform: translateY(0px); }
    50%{ transform: translateY(-10px); }
    100%{ transform: translateY(0px); }
}



/* ============================= */
/* COMPANY OVERVIEW - LIGHT */
/* ============================= */

.company_overview{
    padding:120px 0;
    background:#eef6ff;
    position:relative;
    overflow:hidden;
}

.company_overview::before{
    display:none;
}


/* ============================= */
/* OUR PRINCIPLES - LIGHT */
/* ============================= */

.our_principles{
    padding:120px 0;
    background:#f8fafc;
    position:relative;
}

/* Section Heading */
.our_principles .client_logo_title h5{
    color:#0ea5e9;
    letter-spacing:3px;
}

.our_principles .client_logo_title h1{
    color:#000;
    font-weight:700;
}

.our_principles .client_logo_title p{
    color:#555;
    font-size:18px;
}

/* Row */
.princ_row{
    display:flex !important;
    gap:30px;
}

/* Card base */
.princ_card{
    flex:1;
    animation: floatCard 4s ease-in-out infinite;
}

.princ_card:nth-child(2){
    animation-delay:0.5s;
}

.princ_card:nth-child(3){
    animation-delay:1s;
}

/* Individual Light Shades */
.princ_card:nth-child(1) .our_princ_card{
    background:#e0f2fe;  /* light sky */
}

.princ_card:nth-child(2) .our_princ_card{
    background:#ede9fe;  /* light lavender */
}

.princ_card:nth-child(3) .our_princ_card{
    background:#dcfce7;  /* light mint */
}

/* Card Design */
.our_princ_card{
    border-radius:20px;
    padding:40px 30px;
    text-align:center;
    transition:0.4s ease;
    height:100%;
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

/* Hover */
.our_princ_card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,0.12);
}

/* Icon */
.our_princ_card_content i{
    font-size:45px;
    width:80px;
    height:80px;
    line-height:80px;
    border-radius:50%;
    background:#0ea5e9;
    color:#fff;
    margin-bottom:25px;
    transition:0.3s ease;
}

.our_princ_card:hover i{
    transform:scale(1.1);
}

/* Text */
.our_princ_card h4{
    font-size:22px;
    font-weight:700;
    color:#000;
    margin-bottom:12px;
}

.our_princ_card p{
    color:#444;
    font-size:16px;
    line-height:1.8;
}

/* Floating animation */
@keyframes floatCard{
    0%{ transform: translateY(0px); }
    50%{ transform: translateY(-12px); }
    100%{ transform: translateY(0px); }
}






/* ============================= */
/* ABOUT VISION - PREMIUM LIGHT */
/* ============================= */

.about_vision {
    padding: 140px 0;
    background: linear-gradient(135deg,#f0f9ff,#e0f2fe,#f8fafc);
    position: relative;
    overflow: hidden;
}

/* Soft subtle glow */
.about_vision::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(14,165,233,0.15), transparent 70%);
    top: -150px;
    right: -150px;
    filter: blur(100px);
}

/* Small heading */
.about_vision h5 {
    color: #0ea5e9;
    letter-spacing: 4px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Main heading */
.about_vision h1 {
    font-size: 54px;
    font-weight: 800;
    color: #000;
    margin-bottom: 40px;

    /* soft shine effect */
    text-shadow: 0 4px 15px rgba(14,165,233,0.25);
}

/* Paragraph */
.about_vision p {
    max-width: 900px;
    margin: 0 auto 20px;
    font-size: 18px;
    line-height: 1.8;
    color: #444;
}

/* Responsive */
@media(max-width:768px) {
    .about_vision h1 {
        font-size: 36px;
    }

    .about_vision p {
        font-size: 16px;
    }
}



/* ===============================
   LEADERSHIP SECTION
================================ */

.leadership_team{
    padding:140px 0;
    background: linear-gradient(
        135deg,
        #fdfcf9 0%,
        #f5f7ff 35%,
        #eef2ff 70%,
        #faf8f4 100%
    );
    position:relative;
    overflow:hidden;
}


.leadership_team::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 70%);
    top:-150px;
    left:-150px;
    filter: blur(120px);
}

.leadership_team::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background: radial-gradient(circle, rgba(37,99,235,0.15), transparent 70%);
    bottom:-150px;
    right:-150px;
    filter: blur(120px);
}




@keyframes floatGlow{
    0%{ transform:translate(0,0); }
    50%{ transform:translate(60px,40px); }
    100%{ transform:translate(0,0); }
}

/* Heading */
.leadership_team h5{
    color:#2563eb;
    letter-spacing:4px;
    font-weight:600;
    text-transform:uppercase;
    margin-bottom:15px;
}

.leadership_team h1{
    font-size:52px;
    font-weight:800;

    background: linear-gradient(90deg,#1e293b,#1e3a8a,#2563eb);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:60px;
}


.leader_card{
    background: linear-gradient(145deg,#0f172a,#1e293b);
    color:#ffffff;
    backdrop-filter: blur(18px);
    border-radius:25px;
    padding:40px 30px;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,0.35);
    min-height:420px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}




/* Normal floating (no scale) */
@keyframes floatCard{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
    100%{ transform:translateY(0); }
}

.leader_card{
    background: linear-gradient(145deg,#1e293b,#0f172a);
    color:#ffffff;
    backdrop-filter: blur(18px);
    border-radius:25px;
    padding:40px 30px;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,0.25);
    animation: fastFloat 1.2s ease-in-out infinite;
}
@keyframes fastFloat{
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-18px); }
    100% { transform: translateY(0px); }
}

/* Hover (NO SCALE for equal size) */
.leader_card:hover{
    transform:translateY(-15px);
    box-shadow:0 35px 80px rgba(37,99,235,0.25);
    animation-play-state: paused;
    transform: translateY(-20px) scale(1.05);
}

/* Gradient bottom line */
.leader_card::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4px;
    background: linear-gradient(90deg,#2563eb,#60a5fa,#818cf8);
}

/* Profile Image */
.leader_img{
    width:140px;
    height:140px;
    border-radius:50%;
    background-position:center;
    background-size:cover;
    margin:0 auto 25px;
   
    border:4px solid rgba(255,255,255,0.2);
    box-shadow:0 10px 30px rgba(37,99,235,0.2);
    transition:0.3s ease;
}
.leader_img1{
    background-image: url("../img/Sujit_Srivastava_1.png");
}
.leader_img2{
    background-image: url("../img/dineshprasad.png");
}


.leader_card:hover .leader_img{
    transform:scale(1.05);
}

/* Name */
.leader_card h4{
    font-size:22px;
    font-weight:700;
     color:#ffffff;
    margin-bottom:6px;
}

/* Role */
.leader_card h6{
    font-size:15px;
     color:#94a3b8;
    margin-bottom:20px;
}

/* Social Icons */
.leader_social{
    display:flex;
    justify-content:center;
    gap:15px;
}

.leader_social a{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background: linear-gradient(135deg,#2563eb,#60a5fa);
    color:#ffffff;
    transition:0.3s ease;
}

.leader_social a:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 25px rgba(37,99,235,0.4);
}

/* ===============================
   FEATURED CEO CARD
================================ */

.featured_leader{
    background: linear-gradient(135deg,#ffffff,#f0f9ff);
    box-shadow: 0 40px 90px rgba(37,99,235,0.35);
    position:relative;
}

/* Animated glow border */
.featured_leader::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:25px;
    padding:2px;
    background: linear-gradient(90deg,#2563eb,#60a5fa,#818cf8,#2563eb);
    background-size:300% auto;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: borderMove 4s linear infinite;
}

@keyframes borderMove{
    0%{ background-position:0% center; }
    100%{ background-position:300% center; }
}

/* Featured float (NO SCALE) */
@keyframes ceoFloat{
    0%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
    100%{ transform: translateY(0); }
}

.featured_leader{
    animation: ceoFloat 3.5s ease-in-out infinite;
}

/* Responsive */
@media(max-width:768px){
    .leadership_team h1{
        font-size:36px;
    }
}
.leader_card:nth-child(2){
    animation-delay: 0.4s;
}



/* SECTION BACKGROUND */
.why_choose_suprams{
    padding:120px 0;
    background: linear-gradient(135deg,#fdf4ff,#eef2ff); /* soft lavender */
}

/* HEADING */
.why_choose_suprams h5{
    color:#7c3aed;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
}

.why_choose_suprams h1{
    font-size:48px;
    font-weight:800;
    color:#1e293b;
    margin-bottom:70px;
}

/* GRID */
.why_choose_grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:30px;
}

/* CARD */
.choose_card{
    background: #ffffff;
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    transition:0.4s ease;

    /* DARK STRONG SHADOW */
    box-shadow: 
        0 25px 60px rgba(0,0,0,0.25),
        0 10px 25px rgba(0,0,0,0.15);

    animation: floatMove 4s ease-in-out infinite;
}

/* FLOAT ANIMATION */
@keyframes floatMove{
    0%{ transform: translateY(0px); }
    50%{ transform: translateY(-12px); }
    100%{ transform: translateY(0px); }
}

/* HOVER EFFECT – MORE DEPTH */
.choose_card:hover{
    transform: translateY(-18px) scale(1.05);

    box-shadow: 
        0 40px 90px rgba(0,0,0,0.35),
        0 15px 35px rgba(0,0,0,0.25);
}

/* ICON */
.choose_card i{
    width:70px;
    height:70px;
    line-height:70px;
    border-radius:50%;
    font-size:26px;
    background: linear-gradient(135deg,#7c3aed,#6366f1);
    color:white;
    margin-bottom:20px;
}

/* TEXT */
.choose_card h4{
    color:#1e293b;
    font-weight:700;
}

.choose_card p{
    color:#64748b;
}



.company_profile_download{
    background-image: 
        linear-gradient(to right, rgba(15,23,42,0.45), rgba(15,23,42,0.25)),
        url("../img/download_bg.webp");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 450px;
    color: #ffffff;
}

/* Background glow animation */
.company_profile_download::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background: radial-gradient(circle, rgba(59,130,246,0.25), transparent 70%);
    top:-200px;
    left:-200px;
    filter: blur(120px);
    animation: floatGlow 8s ease-in-out infinite;

    z-index: 0;   /* 👈 Important */
}

@keyframes floatGlow{
    0%{ transform:translate(0,0); }
    50%{ transform:translate(80px,60px); }
    100%{ transform:translate(0,0); }
}

/* Small Heading */
.download_content_link h5{
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #60a5fa;
    margin-bottom: 15px;
}

/* Main Heading */
.download_content_link h1{
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 40px;

    color: #ffffff;                 /* Solid white */
    -webkit-text-fill-color: initial;
    background: none;

    text-shadow: 0 4px 15px rgba(0,0,0,0.6);  /* Strong readable shadow */
}


/* Premium Button */
.download_btn{
    display:inline-block;
    padding:16px 45px;
    border-radius:50px;
    font-size:18px;
    font-weight:600;
    text-decoration:none;

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

    box-shadow: 0 0 25px rgba(59,130,246,0.6);
    transition:0.4s ease;
}

.download_btn i{
    margin-right:10px;
}

/* Hover Effect */
.download_btn:hover{
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 15px 45px rgba(96,165,250,0.8);
}


/* ==============================
   SERVICES HERO – PREMIUM PASTEL
============================== */

.services_hero{
    position: relative;
    padding: 120px 0;
    background: linear-gradient(135deg,#fdfbff,#eef2ff,#f8faff);
    overflow: hidden;
}

/* Soft Color Glow */
.services_hero::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    background: radial-gradient(circle, rgba(139,92,246,0.15), transparent 70%);
    top:-200px;
    left:-200px;
    filter: blur(120px);
}

.hero_split{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;
    position:relative;
    z-index:2;
}

/* ==============================
   GLASS CARD (PREMIUM LIGHT)
============================== */

.glass_card,
.video_card{
    flex:1;
    min-width:320px;
    padding:50px;
    border-radius:28px;

    background: linear-gradient(145deg,#ffffff,#f1f5ff);
    border:1px solid rgba(99,102,241,0.15);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08),
        0 10px 20px rgba(99,102,241,0.10);

    position:relative;
    transition:0.4s ease;
    animation: floatCard 5s ease-in-out infinite;
}

/* Floating movement */
@keyframes floatCard{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-15px); }
    100%{ transform:translateY(0); }
}

/* Hover effect */
.glass_card:hover,
.video_card:hover{
    transform:translateY(-18px) scale(1.02);
    box-shadow:
        0 30px 60px rgba(0,0,0,0.12),
        0 20px 40px rgba(99,102,241,0.20);
}

/* Video styling */
.video_card{
    padding:0;
    overflow:hidden;
}

.video_card video{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:28px;
}

/* Soft animated border */
.glass_card::before,
.video_card::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:28px;
    padding:2px;
    background: linear-gradient(90deg,#8b5cf6,#6366f1,#3b82f6,#8b5cf6);
    background-size:300% auto;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: borderMove 6s linear infinite;
}

@keyframes borderMove{
    0%{ background-position:0% center; }
    100%{ background-position:300% center; }
}

/* ==============================
   TEXT STYLING
============================== */

.glass_card h1{
    font-size:48px;
    font-weight:800;
    background: linear-gradient(90deg,#4f46e5,#2563eb);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:20px;
}

.glass_card p{
    color:#475569;
    font-size:17px;
    line-height:1.7;
}







/* ==============================
   VIDEO CARD
============================== */

.video_card{
    flex:1;
    min-width:320px;
    border-radius:25px;
    overflow:hidden;
    position:relative;
    box-shadow: 0 40px 90px rgba(0,0,0,0.6);
    animation: floatCard 4s ease-in-out infinite;
}
.video_card::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:30px;
    background:linear-gradient(90deg,#2563eb,#60a5fa,#2563eb);
    background-size:200% auto;
    animation:borderGlow 4s linear infinite;
    z-index:-1;
}

@keyframes borderGlow{
    0%{background-position:0%;}
    100%{background-position:200%;}
}



/* Video slow zoom effect */
.video_card video{
    width:100%;
    height:100%;
    object-fit:cover;
    animation: slowZoom 18s ease-in-out infinite alternate;
}

@keyframes slowZoom{
    0%{ transform:scale(1); }
    100%{ transform:scale(1.08); }
}

/* Floating animation for both cards */
@keyframes floatCard{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-15px); }
    100%{ transform:translateY(0); }
}

/* ==============================
   TEXT STYLING
============================== */

.hero_title{
    font-size:54px;
    font-weight:800;
    margin-bottom:20px;
    background: linear-gradient(90deg,#ffffff,#60a5fa);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero_desc{
    font-size:18px;
    color:#cbd5e1;
    margin-bottom:35px;
    line-height:1.7;
}

/* ==============================
   BUTTON
============================== */

.hero_btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 35px;
    border-radius:50px;
    font-size:17px;
    font-weight:600;
    text-decoration:none;
    background: linear-gradient(135deg,#3b82f6,#60a5fa);
    color:#fff;
    box-shadow:0 15px 40px rgba(59,130,246,0.4);
    transition:0.4s ease;
}

.hero_btn:hover{
    transform:translateY(-6px) scale(1.05);
    box-shadow:0 25px 60px rgba(59,130,246,0.6);
}

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

@media(max-width:992px){
    .hero_split{
        flex-direction:column;
        text-align:center;
    }

    .hero_title{
        font-size:38px;
    }
}


/* =========================================
   SERVICES SECTION - ULTRA PREMIUM DESIGN
========================================= */

.services_provided{
    position:relative;
    padding:140px 0;
    overflow:hidden;
    background:linear-gradient(-45deg,#0f172a,#0b1c3d,#071029,#0a1a3a);
    background-size:400% 400%;
    animation:gradientMove 12s ease infinite;
}

/* Moving Gradient */
@keyframes gradientMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* Animated Glow Layer */
.animated_bg{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 20% 30%, rgba(59,130,246,0.25), transparent 50%),
               radial-gradient(circle at 80% 70%, rgba(99,102,241,0.25), transparent 50%);
    z-index:0;
}

/* Particles */
#particles-js{
    position:absolute;
    inset:0;
    z-index:1;
}

/* Keep content above */
.services_provided .container{
    position:relative;
    z-index:2;
}



/* ======================================
   SERVICES SECTION – HIGH CONTRAST LIGHT
====================================== */

.services_provided{
    padding:140px 0;
    background: linear-gradient(135deg,#ffffff,#f1f5ff);
}

/* HEADING */
.services_provided h5{
    color:#1e40af;
    letter-spacing:4px;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:15px;
}

.services_provided h1{
    font-size:48px;
    font-weight:900;
    color:#0f172a;   /* STRONG DARK */
    margin-bottom:70px;
}

/* GRID */
.services_card{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

/* CARDS – Soft Colored */
.services_card a{
    background: linear-gradient(135deg,#ffffff,#e0ecff);
    padding:45px 30px;
    border-radius:20px;
    text-align:center;
    text-decoration:none;

    border:1px solid #c7d2fe;

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

    transition:0.4s ease;
}

/* Hover */
.services_card a:hover{
    transform:translateY(-12px);
    box-shadow:
        0 25px 50px rgba(30,64,175,0.25);
    background: linear-gradient(135deg,#ffffff,#dbeafe);
}

/* ICON */
.services_card i{
    font-size:45px;
    margin-bottom:20px;
    color:#1e40af;
}

/* TITLE */
.services_card h4{
    font-size:22px;
    font-weight:800;
    margin-bottom:12px;
    color:#000000;   /* PURE BLACK */
}

/* DESCRIPTION */
.services_card p{
    font-size:16px;
    color:#1f2937;   /* DARK GREY */
    line-height:1.7;
}

/* BUTTON */
.learn_more_btn{
    margin-top:20px;
    padding:10px 28px;
    border-radius:30px;
    background:#1e40af;
    color:#ffffff;
    border:none;
    font-weight:600;
}

.learn_more_btn:hover{
    background:#1e3a8a;
}

/* RESPONSIVE */
@media(max-width:992px){
    .services_card{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .services_card{
        grid-template-columns:1fr;
    }
}
/* FORCE DARK H4 FIX */

.services_card h4,
.services_card a h4 {
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000000 !important;
    background: none !important;
}
/* ======================================
   SERVICES SECTION – HIGH CONTRAST LIGHT
====================================== */

.services_provided{
    padding:140px 0;
    background: linear-gradient(135deg,#ffffff,#f1f5ff);
}

/* HEADING */
.services_provided h5{
    color:#1e40af;
    letter-spacing:4px;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:15px;
}

.services_provided h1{
    font-size:48px;
    font-weight:900;
    color:#0f172a;   /* STRONG DARK */
    margin-bottom:70px;
}

/* GRID */
.services_card{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

/* CARDS – Soft Colored */
.services_card a{
    background: linear-gradient(135deg,#ffffff,#e0ecff);
    padding:45px 30px;
    border-radius:20px;
    text-align:center;
    text-decoration:none;

    border:1px solid #c7d2fe;

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

    transition:0.4s ease;
}

/* Hover */
.services_card a:hover{
    transform:translateY(-12px);
    box-shadow:
        0 25px 50px rgba(30,64,175,0.25);
    background: linear-gradient(135deg,#ffffff,#dbeafe);
}

/* ICON */
.services_card i{
    font-size:45px;
    margin-bottom:20px;
    color:#1e40af;
}

/* TITLE */
.services_card h4{
    font-size:22px;
    font-weight:800;
    margin-bottom:12px;
    color:#000000;   /* PURE BLACK */
}

/* DESCRIPTION */
.services_card p{
    font-size:16px;
    color:#1f2937;   /* DARK GREY */
    line-height:1.7;
}

/* BUTTON */
.learn_more_btn{
    margin-top:20px;
    padding:10px 28px;
    border-radius:30px;
    background:#1e40af;
    color:#ffffff;
    border:none;
    font-weight:600;
}

.learn_more_btn:hover{
    background:#1e3a8a;
}

/* RESPONSIVE */
@media(max-width:992px){
    .services_card{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .services_card{
        grid-template-columns:1fr;
    }
}
/* FORCE DARK H4 FIX */

.services_card h4,
.services_card a h4 {
    color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000000 !important;
    background: none !important;
}

/* =======================
   TAB CONTENT STYLE
======================= */

.custom_service_content{
    margin-top:50px;
}

.cservice_tab_content{
    display:none;
    background:#ffffff;
    padding:35px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    font-size:16px;
    color:#334155;
}

.cservice_tab_content.active{
    display:block;
}

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

@media (max-width: 992px){
    .services_card{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px){
    .services_card{
        grid-template-columns: 1fr;
    }
}




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

.custom_service_content{
    margin-top:80px;
    background:rgba(255,255,255,0.03);
    backdrop-filter:blur(30px);
    border-radius:30px;
    padding:50px;
    border:1px solid rgba(212,175,55,0.15);
    color:#f3f4f6;
    display:none;
    box-shadow:0 25px 70px rgba(0,0,0,0.8);
}

.cservice_tab_content{
    display:none;
}

.cservice_tab_content.active.show{
    display:block;
}

.cservice_tab_content h1{
    margin-top:70px;
    text-align:center;
    font-size:30px;
    background:linear-gradient(90deg,#d4af37,#f5d77a);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.cservice_tab_content p{
    font-size:18px;
    line-height:1.9;
    color:#d1d5db;
}

/* Responsive */

@media(max-width:992px){
    .services_card{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .services_card{
        grid-template-columns:1fr;
    }

    .services_provided h1{
        font-size:36px;
    }
}

.services_card{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap:40px;   /* left-right spacing */
    row-gap:60px;      /* upar-niche spacing */
}


.services_card > div{
    animation: cyberMove 1.2s linear infinite alternate;
}

@keyframes cyberMove{
    0%{
        transform: translate(0px,0px);
    }
    50%{
        transform: translate(8px,-10px);
    }
    100%{
        transform: translate(-8px,10px);
    }
}


.services_card > div{
    animation: cyberMove 1.5s ease-in-out infinite alternate;
    transition: 0.3s;
}


.services_card > div:hover{
    box-shadow: 0 0 40px rgba(255,215,0,0.6);
}

/*cloud_solution css*/


.about_us_banner {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}


/* Dark Overlay (text clear dikhega) */
.about_us_banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
   
     z-index: 1;
}
.abouthero_img {
    background: none !important;
}

.aboutus_content h1 {
    font-size: 60px;
    font-weight: 700;
    color: #4da6ff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 
        0 0 10px rgba(77,166,255,0.8),
        0 0 20px rgba(77,166,255,0.6),
        0 0 40px rgba(77,166,255,0.4);
    /*animation: fadeUp 1.2s ease forwards;*/
    animation: slideFast 0.8s ease-out forwards;

}

.aboutus_content p {
    font-size: 20px;
    margin-top: 20px;
    color: #ffffff;
    opacity: 0.9;
    /*animation: fadeUp 1.8s ease forwards;*/
   animation: slideFast 1.2s ease-out forwards;
}
@keyframes slideFast {
    from {
        opacity: 0;
        transform: translateX(-200px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================= */
/* SECTION HEADING STYLING */
/* ============================= */

.keyh_title {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;   
    align-items: center;      
}

.keyh_title h5,
.keyh_title h1 {
    display: block;   
    width: 100%;
}

/* SUBTITLE */
.keyh_title h5 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 15px;
    margin-top: 10px; 
}

/* REMOVE UNDERLINE */
.keyh_title h5::after,
.keyh_title h1::after {
    display: none !important;
    content: none !important;
}

/* MAIN HEADING */
.keyh_title h1 {
    font-size: 52px;
    font-weight: 800;
    color: #000;
    margin-bottom: 25px;
}

.ecosystem_intro{
    color: #000000 !important;   /* Pure Black */
}

/* ============================= */
/* CARD DESIGN - LIGHT VERSION */
/* ============================= */

.service_overview {
    padding: 120px 0;
    background: #f8fafc;
    color: #000;
}

/* CARD BASE */
.keyh_cards {
    position: relative;
    padding: 50px 30px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.4s ease;
}

.keyh_cards a{
    text-decoration: none !important;
}

/* REMOVE ANIMATED BORDER */
.keyh_cards::before {
    display: none;
}

/* HOVER */
.keyh_cards:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* ICON */
.keyh_card_content i {
    font-size: 50px;
    margin-bottom: 20px;
    color: #0ea5e9;
    transition: 0.3s ease;
}

.keyh_cards:hover i {
    transform: scale(1.1);
}

/* TEXT */
.keyh_card_text h4 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #000;
}

.keyh_card_text p {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}


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

@media (max-width: 768px) {
    .keyh_title h1 {
        font-size: 36px;
    }

    .keyh_title h5 {
        font-size: 14px;
        letter-spacing: 2px;
    }
}

/* ============================= */
/* BRAND SECTION – SOFT LIGHT SKY */
/* ============================= */

.brand_logo {
    padding: 110px 0;
    background: linear-gradient(135deg, #f8fbff, #eef4ff);
    text-align: center;
    overflow: hidden;
    position: relative;
}

/* Soft Background Glow */
.brand_logo::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background: radial-gradient(circle, rgba(37,99,235,0.08), transparent 70%);
    top:-200px;
    right:-200px;
}

/* Heading */
.brand_logo h1 {
    font-size: 46px;
    font-weight: 800;
    margin-bottom: 70px;
    color: #0f172a;   /* strong dark */
    text-shadow: none;
    position: relative;
    z-index: 2;
}

/* Scroll Animation */
@keyframes scrollFast {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Logo Slider */
.client_logo_card_slider {
    display: flex;
    gap: 60px;               /* Proper spacing */
    width: max-content;
    animation: scrollFast 20s linear infinite;
    align-items: center;
    white-space: nowrap;     /* Important */
    flex-wrap: nowrap;       /* ❗ wrap hata do */
}

/* Pause on Hover */
.client_logo_card_slider:hover {
    animation-play-state: paused;
}

/* Logo Card */
.clientl_card1 {
    width: 190px;
    height: 110px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffffff;

    border-radius: 20px;
    padding: 18px;

    border: 1px solid #e2e8f0;

    box-shadow: 
        0 10px 25px rgba(0,0,0,0.05);

    transition: 0.35s ease;
}

/* Hover Effect */
.clientl_card1:hover {
    transform: translateY(-12px) scale(1.08);
    box-shadow: 
        0 20px 45px rgba(37,99,235,0.15);
    border-color: #2563eb;
}

/*firewall_solution*/

.service_bg_banner {
    padding: 120px 0;
    background: linear-gradient(135deg, #000814, #001f3f);
}



/* VIDEO WRAPPER */
.hero-video-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 3px;   /* border space */
}

/* Animated Glow Border */
.hero-video-wrapper::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 25px;
    background: linear-gradient(
        45deg,
        #00ffff,
        #4da6ff,
        #00ffff,
        #4da6ff
    );
    background-size: 300% 300%;
    animation: glowMove 4s linear infinite;
    z-index: -1;
    filter: blur(15px);
}

/* Inner video box */
.hero-video-wrapper video {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* Glow animation */
@keyframes glowMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.hero-video-wrapper {
    animation: floatVideo 4s ease-in-out infinite alternate;
}

@keyframes floatVideo {
    from { transform: translateY(-8px); }
    to { transform: translateY(8px); }
}


/* Text styling */
.aboutus_content h1 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
}

.hero_subheading {
    font-size: 20px;
    color: #00ffff;
    margin-bottom: 15px;
}

.aboutus_content p {
    color: #cfcfcf;
    line-height: 1.6;
}

/* Button */
.banner_content_btn a {
    background: linear-gradient(45deg,#00ffff,#4da6ff);
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    color: #000;
    font-weight: 600;
    transition: 0.3s ease;
}

.banner_content_btn a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,255,255,0.4);
}
.firewall_intro {
    padding: 120px 0;
    background: linear-gradient(135deg, #000814, #001f3f);
    color: white;
}

/* Heading Styling */
.section-subtitle {
    color: #00ffff;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.section-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 40px;
}

/* Paragraph */
.firewall_intro_para p {
    color: #cfcfcf;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* Video Wrapper */
.firewall-video-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 3px;
}

/* Glow Border */
.firewall-video-wrapper::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 25px;
    background: linear-gradient(45deg,#ff0033,#ff6600,#ff0033);
    background-size: 300% 300%;
    animation: glowMove 4s linear infinite;
    z-index: -1;
    filter: blur(15px);
}

.firewall-video-wrapper video {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
}

/* Animation */
@keyframes glowMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.firewall_intro {
    padding: 120px 0;
    background: linear-gradient(135deg, #000814, #001f3f);
    color: white;
}

/* Heading Styling */
.section-subtitle {
    color: #00ffff;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.section-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 40px;
}

/* Paragraph */
.firewall_intro_para p {
    color: #cfcfcf;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* Video Wrapper */
.firewall-video-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 3px;
}

/* Glow Border*/ 
.firewall-video-wrapper::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 25px;
    background: linear-gradient(45deg,#ff0033,#ff6600,#ff0033);
    background-size: 300% 300%;
    animation: glowMove 4s linear infinite;
    z-index: -1;
    filter: blur(15px);
}

.firewall-video-wrapper video {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
}
.firewall-video-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.4), transparent);
}

.firewall-video-wrapper video {
    animation: zoomSlow 12s ease-in-out infinite alternate;
}

@keyframes zoomSlow {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}


/* Animation */
@keyframes glowMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}*/

/*SECTION IMG*/
.intro_img{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 300px;
    border-radius: 10px;
}

/*INTRO IMAGES*/
.firewall_intro_img{
    background-image: url(../img/firewall-intro.avif);
}
.firewall_advan_img{
    background-image: url(../img/firewall-advan.png);
}
.remote_intro_img{
    background-image: url(../img/remote-intro.jpg);
}
.itservices_intro_img{
    background-image: url(../img/it-service.jpg);
}
.it_infra_services_image{
    background-image: url(../img/it-service-section.jpg);
}
.network_intro_img{
    background-image: url(../img/network-security-img.webp);
}
.network_services_image{
    background-image: url(../img/network-service-img2.webp);
}
.network_services_image3{
    background-image: url(../img/network-service-img3.jpg);
}
/*FIREWALL PAGE*/

.hero_subheading {
    color: var(--primary);
    font-size: 22px;
    font-weight: 500;
    margin: 20px 0 15px;
}
.firewall_intro_para{
    text-align: left;
}

/* GRID */
.security_flip_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

/* CARD */
.flip_card {
    perspective: 1200px;
    height: 220px;
}

/* INNER WRAPPER */
.flip_card_inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s ease;
    transform-style: preserve-3d;
}

/* HOVER FLIP */
.flip_card:hover .flip_card_inner {
    transform: rotateY(180deg);
}

/* FRONT & BACK */
.flip_card_front,
.flip_card_back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* FRONT SIDE */
.flip_card_front {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0,255,255,0.3);
    text-align: center;
    color: #ffffff;
}

    .flip_card_front i {
    font-size: 28px;
    color: #001f3f;   
    background: linear-gradient(135deg, #00ffff, #4da6ff);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 0 20px rgba(0,255,255,0.6);
}
.flip_card_front h4 {
    color: var(--primary);
    margin-bottom: 10px;
}

/* BACK SIDE */
.flip_card_back {
     background: linear-gradient(135deg, #001f3f, #003366);
    color: #ffffff;
    transform: rotateY(180deg);
    border: 1px solid rgba(0,255,255,0.4);
}

.flip_card_back h4 {
    margin-bottom: 10px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .security_flip_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .security_flip_grid {
        grid-template-columns: 1fr;
    }
}

.firewall_brand_logo p{
    color: var(--white);
}


.elite_partner_ecosystem .keyh_title h1,
.firewall_flow_section_fixed .keyh_title h1,
.firewall_timeline_section .keyh_title h1,
.remote_solution_section .keyh_title h1{
    color: var(--white);
    margin-bottom: 20px;
}

.ecosystem_intro {
    max-width: 850px;
    margin: 0 auto 60px;
    color: var(--white);
    font-size: 18px;
}
.flip_card:hover {
    transform: translateY(-10px);
}

.flip_card_front,
.flip_card_back {
    transition: 0.4s ease;
}

.flip_card:hover .flip_card_front {
    box-shadow: 0 0 25px rgba(0,255,255,0.4);
}


/* SECTION */
.firewall_intro {
    padding: 120px 0;
    background: linear-gradient(135deg, #000814, #001f3f);
    color: white;
}

/* TITLE WRAPPER */
.client_logo_title h5 {
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #000000;
    margin-bottom: 10px;
}

.client_logo_title h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 60px;
    background: linear-gradient(90deg,#00ffff,#4da6ff,#00ffff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 5s linear infinite;
}




/* TEXT CONTAINER */
.firewall_intro_para {
    text-align: left;
    position: relative;
}

/* FIRST PARAGRAPH – Highlight Style */
.firewall_intro_para p:first-child {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    border-left: 4px solid #00ffff;
    padding-left: 15px;
    margin-bottom: 25px;
}

/* OTHER PARAGRAPHS */
.firewall_intro_para p {
    color: #cfcfcf;
    line-height: 1.9;
    font-size: 16px;
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}

/* Subtle hover emphasis */
.firewall_intro_para p:hover {
    color: #ffffff;
    transition: 0.3s ease;
}

/* Slight glow for important words (optional if you wrap span) */
.firewall_intro_para span {
    color: #00ffff;
    font-weight: 600;
}


/* VIDEO WRAPPER */
.advisor-video-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 4px;
    animation: floatVideo 4s ease-in-out infinite alternate;
}

/* SOFT GLOW BORDER */
.advisor-video-wrapper::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 25px;
    background: linear-gradient(45deg,#00ffff,#4da6ff,#00ffff);
    background-size: 300% 300%;
    animation: glowMove 4s linear infinite;
    z-index: -1;
    filter: blur(15px);
}

.advisor-video-wrapper video {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* GRADIENT ANIMATION */
@keyframes gradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* GLOW MOVE */
@keyframes glowMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* FLOAT EFFECT */
@keyframes floatVideo {
    from { transform: translateY(-8px); }
    to { transform: translateY(8px); }
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .advisor-video-wrapper video {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .firewall_intro {
        text-align: center;
    }

    .firewall_intro_para {
        text-align: center;
        margin-bottom: 40px;
    }
}

    /* SECTION BACKGROUND */
.elite_partner_ecosystem {
    padding: 120px 0;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #ffffff;
}

/* GRID */
.partner_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

/* CARD */
.partner_card {
    background: #1f1f1f;
    border-radius: 18px;
    padding: 40px;
    border: 1px solid #2c2c2c;
    transition: all 0.4s ease;
    position: relative;
    animation: floatCard 1s ease-in-out infinite alternate;
}
@keyframes floatCard {
    from { transform: translateY(0px); }
    to   { transform: translateY(-10px); }
}


/* GOLD LEFT ACCENT LINE */
.partner_card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(to bottom, #d4af37, #f5d76e);
    border-radius: 18px 0 0 18px;
}

/* HEADING */
.partner_card h4 {
    color: #f5d76e;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 20px;
}

/* TEXT */
.partner_card p {
    color: #cfcfcf;
    font-size: 15px;
    line-height: 1.7;
}

/* HOVER EFFECT */
.partner_card:hover {
    transform: translateY(-10px);
    background: #262626;
    border-color: #d4af37;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* SPECIAL HIGHLIGHT CARD */
.partner_card.highlight {
    background: linear-gradient(135deg, #d4af37, #f5d76e);
    color: #111;
}

.partner_card.highlight h4,
.partner_card.highlight p {
    color: #111;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .partner_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .partner_grid {
        grid-template-columns: 1fr;
    }
}

/* ============================= */
/* BRANDS SECTION - LIGHT PREMIUM */
/* ============================= */

.firewall_brand_logo {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8fbff, #eef4ff);
    position: relative;
    overflow: hidden;
}

/* Decorative soft blobs */
.firewall_brand_logo::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0,180,255,0.15), transparent);
    top: -100px;
    left: -100px;
    z-index: 0;
}

.firewall_brand_logo::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,180,0,0.15), transparent);
    bottom: -100px;
    right: -100px;
    z-index: 0;
}

/* Title */
.firewall_brand_logo .client_logo_title h5 {
    color: #0077ff;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.firewall_brand_logo .client_logo_title h1 {
    color: #111;
    font-weight: 800;
    margin-bottom: 60px;
}

/* Logo Row */
.client_logo_card_slider {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* Logo Card */
.clientl_card1 {
    width: 200px;
    height: 110px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: 0.4s ease;
}

/* Hover */
.clientl_card1:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* Subtle floating animation */
.clientl_card_gap:nth-child(odd) .clientl_card1 {
    animation: floatUp 4s ease-in-out infinite;
}

.clientl_card_gap:nth-child(even) .clientl_card1 {
    animation: floatDown 4s ease-in-out infinite;
}

@keyframes floatUp {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes floatDown {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* Responsive */
@media(max-width:768px){
    .clientl_card1{
        width: 160px;
        height: 90px;
    }
}





/* =============================== */
/* FIREWALL FLOW SECTION */
/* =============================== */

.firewall_flow_section_fixed {
    padding: 140px 0;
    background: linear-gradient(135deg,#f8fbff,#eef4ff,#f8fbff);
    position: relative;
    overflow: hidden;
}

/* Soft glow background effect */
.firewall_flow_section_fixed::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0,255,255,0.12), transparent);
    top: -150px;
    left: -150px;
    z-index: 0;
}

.firewall_flow_section_fixed::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0,140,255,0.12), transparent);
    bottom: -150px;
    right: -150px;
    z-index: 0;
}

/* Title */
.firewall_flow_section_fixed .keyh_title h5{
    color: #000000;
    letter-spacing: 3px;
}

.firewall_flow_section_fixed .keyh_title h1{
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 20px;
}

.firewall_flow_section_fixed .ecosystem_intro{
    color: #cfd8e3;
}

/* =============================== */
/* ZIGZAG LINE */
/* =============================== */

.flow_zigzag_line {
    width: 100%;
    margin: 70px 0 90px;
}

.flow_zigzag_line polyline {
    fill: none;
    stroke: #000000;
    stroke-width: 3;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: drawLine 6s ease forwards;
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}


/* =============================== */
/* CARDS – PREMIUM DARK THEME */
/* =============================== */

.flow_card_grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* Card */
.flow_card_item {
    background: linear-gradient(145deg,#111827,#0f172a);
    padding: 35px;
    border-radius: 22px;
    border: 1px solid rgba(59,130,246,0.25);
    transition: 0.4s ease;
    
    box-shadow:
        0 15px 40px rgba(0,0,0,0.6),
        0 0 20px rgba(59,130,246,0.15);

    animation: fastFloat 2s ease-in-out infinite alternate;
}

/* Heading */
.flow_card_item h4{
    color: #60a5fa;   /* Soft blue */
    margin-bottom: 12px;
    font-weight: 700;
}

/* Paragraph */
.flow_card_item p{
    color: #cbd5e1;
    line-height: 1.7;
}

/* Hover */
.flow_card_item:hover{
    transform: translateY(-12px) scale(1.03);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.8),
        0 0 35px rgba(59,130,246,0.35);
    border-color: #3b82f6;
}

/* Zigzag offset */
.flow_card_item.up{ margin-top: -30px; }
.flow_card_item.down{ margin-top: 30px; }

/* Responsive */
@media(max-width:992px){
    .flow_card_grid{
        grid-template-columns: repeat(2,1fr);
    }
    .flow_card_item.up,
    .flow_card_item.down{
        margin-top: 0;
    }
}

@media(max-width:576px){
    .flow_card_grid{
        grid-template-columns: 1fr;
    }
}

/* Different timing */
.flow_card_item:nth-child(2){
    animation-duration: 1.6s;
}
.flow_card_item:nth-child(3){
    animation-duration: 2.2s;
}
.flow_card_item:nth-child(4){
    animation-duration: 1.8s;
}

@keyframes fastFloat {
    0% { transform: translateY(-12px); }
    100% { transform: translateY(12px); }
}



/* =============================== */
/* CTA BACKGROUND IMAGE SECTION */
/* =============================== */

.company_profile_download {
    position: relative;
    padding: 140px 0;
    background: url("../img/about-img1.jpg") center/cover no-repeat;
    overflow: hidden;
}

/* DARK OVERLAY */
.company_profile_download::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0, 0, 0, 0.75),
        rgba(0, 10, 25, 0.85)
    );
    z-index: 0;
}

/* CONTENT ABOVE OVERLAY */
.quick_form_content {
    position: relative;
    z-index: 2;
}

.quick_form_content h5 {
    color: #f1f1f1;
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 1.7;
}

.quick_form_content h1 {
    color: #111111;        /* Deep black */
    font-size: 40px;
    font-weight: 800;
    margin: 35px 0;

    text-shadow: none;     /* REMOVE GLOW */
}

/* BUTTON */
.quick_form_content button {
    background: linear-gradient(90deg,#00ffff,#008cff);
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    transition: 0.4s ease;
}

.quick_form_content button a {
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

.quick_form_content button:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(0,255,255,0.6);
}




/* NETWORK SERVICE PAGE */

/* Creative Layered Service Design */
.service_layered_container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.service_layer_box {
    display: flex;
    align-items: center;
    background: var(--white);
    padding: 30px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0, 191, 255, 0.1);
    box-shadow: var(--shadow-md);
}

/* Staircase Offset Effect */
.service_layer_box:nth-child(2) { margin-left: 5%; width: 95%; }
.service_layer_box:nth-child(3) { margin-left: 10%; width: 90%; }

.service_layer_box:hover {
    transform: translateX(15px);
    background: var(--primary);
    border-color: var(--energy);
}

.layer_number {
    font-size: 60px;
    font-weight: 800;
    color: var(--glass);
    margin-right: 30px;
    transition: 0.4s;
    line-height: 1;
}

.service_layer_box:hover .layer_number {
    color: var(--energy);
}

.layer_content h3 {
    color: var(--deep-gray);
    font-weight: 700;
    margin-bottom: 10px;
    transition: 0.4s;
}

.layer_content p {
    color: var(--muted);
    margin: 0;
    transition: 0.4s;
    font-size: 16px;
}

.service_layer_box:hover .layer_content h3,
.service_layer_box:hover .layer_content p {
    color: var(--white);
}

.layer_icon {
    margin-left: auto;
    font-size: 40px;
    color: var(--primary);
    transition: 0.4s;
}

.service_layer_box:hover .layer_icon {
    color: var(--energy);
    transform: rotate(360deg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .service_layer_box:nth-child(2),
    .service_layer_box:nth-child(3) {
        margin-left: 0;
        width: 100%;
    }
}



.service_bg_banner {
  padding: 150px 0;
  background: linear-gradient(135deg, #020041, #000814);
  color: white;
}

/* Text Styling */
.hero_title {
  font-size: 45px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero_subheading {
  font-size: 20px;
  color: #00bfff;
  margin-bottom: 20px;
}

.aboutus_content p {
  font-size: 16px;
  color: #dcdcdc;
  line-height: 1.7;
}

/* Video Box */
.video_box {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,191,255,0.3);
  transition: 0.4s ease;
}

.video_box video {
  width: 100%;
  border-radius: 20px;
}

.video_box:hover {
  transform: scale(1.03);
  box-shadow: 0 25px 60px rgba(0,191,255,0.5);
}

/* Buttons */
.primary_btn {
  background: linear-gradient(45deg, #00bfff, #0072ff);
  padding: 12px 28px;
  border-radius: 30px;
  color: white;
  text-decoration: none;
  transition: 0.3s ease;
}

.primary_btn:hover {
  box-shadow: 0 0 20px rgba(0,191,255,0.6);
}

.secondary_btn {
  border: 2px solid #00bfff;
  padding: 12px 28px;
  border-radius: 30px;
  color: #00bfff;
  text-decoration: none;
  transition: 0.3s ease;
}

.secondary_btn:hover {
  background: #00bfff;
  color: white;
}


/* ===============================
   Section Background
=================================*/
.firewall_intro {
  padding: 120px 0;
  background: linear-gradient(135deg, #020041, #000814);
  color: #ffffff;
}

/* ===============================
   Heading Styling
=================================*/
.section_tag {
  color: #00bfff;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 10px;
}

.section_title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 30px;
  text-shadow: 0 0 20px rgba(0,191,255,0.3);
}

/* ===============================
   Paragraph Styling
=================================*/
.firewall_intro_para {
  background: rgba(255,255,255,0.05);
  padding: 40px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,191,255,0.15);
  transition: 0.4s ease;
}

.firewall_intro_para p {
  color: #dcdcdc;
  line-height: 1.8;
  font-size: 16px;
  margin-bottom: 18px;
}

.firewall_intro_para:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 60px rgba(0,191,255,0.3);
}

/* ===============================
   Image / Video Styling
=================================*/
.challenge_media {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,191,255,0.25);
  transition: 0.4s ease;
}

.challenge_media img,
.challenge_media video {
  width: 100%;
  height: 700%;
  object-fit: cover;
  border-radius: 20px;
}

.challenge_media:hover {
  transform: scale(1.03);
  box-shadow: 0 30px 70px rgba(0,191,255,0.45);
}



/* =====================================
   Timeline Section Background
======================================*/
.firewall_timeline_section {
  padding: 120px 0;
  background: linear-gradient(135deg, #eef5ff, #dbeafe);
  color: #fff;
  position: relative;
  overflow: hidden;
}


/* =====================================
   Timeline Layout
======================================*/
.timeline_wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 60px;
}

/* Horizontal Line */
.timeline_horizontal {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00bfff, #0072ff);
  box-shadow: 0 0 15px rgba(0,191,255,0.6);
}

/* Timeline Item */
.timeline_item {
  position: relative;
  width: 23%;
  text-align: center;
  animation: fadeUp 0.8s ease forwards;
  opacity: 0;
}

/* Animation Delay */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }

/* Vertical Line */
.timeline_vertical {
  display: block;
  width: 3px;
  height: 40px;
  background: #00bfff;
  margin: 0 auto;
  box-shadow: 0 0 10px #00bfff;
}

/* Card */
.timeline_card {
  margin-top: 15px;
  padding: 25px;
  background: rgba(255,255,255,0.05);
  border-radius: 15px;
  backdrop-filter: blur(8px);
  box-shadow: 0 15px 40px rgba(0,191,255,0.15);
  transition: 0.4s ease;
}

.timeline_card h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #00bfff;
}

.timeline_card p {
  font-size: 14px;
  color: #000000;
}

/* Hover Effect */
.timeline_card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(0,191,255,0.4);
}

/* =====================================
   Animation
======================================*/
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.timeline_icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, #00bfff, #0072ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px auto;
  box-shadow: 0 0 20px rgba(0,191,255,0.6);
  position: relative;
  z-index: 2;
  transition: 0.4s ease;
}

.timeline_icon i {
  color: #fff;
  font-size: 22px;
}

.timeline_icon:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0,191,255,0.9);
}

.timeline_card {
  margin-top: 15px;
  padding: 25px;
  background: rgba(255,255,255,0.05);
  border-radius: 15px;
  backdrop-filter: blur(8px);
  box-shadow: 0 15px 40px rgba(0,191,255,0.15);
  transition: 0.4s ease;
  animation: floatCard 4s ease-in-out infinite;
}

/* Different delay so all move differently */
.timeline_item:nth-child(1) .timeline_card {
  animation-delay: 0s;
}
.timeline_item:nth-child(2) .timeline_card {
  animation-delay: 1s;
}
.timeline_item:nth-child(3) .timeline_card {
  animation-delay: 2s;
}
.timeline_item:nth-child(4) .timeline_card {
  animation-delay: 3s;
}

/*@keyframes floatCard {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}*/
@keyframes moveSide {
  0%   { transform: translateX(0px); }
  50%  { transform: translateX(10px); }
  100% { transform: translateX(0px); }
}

.timeline_item:nth-child(odd) .timeline_card {
  animation: moveSide 3s ease-in-out infinite;
}

.timeline_item:nth-child(even) .timeline_card {
  animation: moveSide 3s ease-in-out infinite reverse;
}

/* ================================
   Unique Orb Benefit Section
================================ */

.remote_benefit_section {
  padding: 120px 0;
  background: radial-gradient(circle at top left, #fdfbff, #e0f2fe, #dbeafe);
  color: white;
  overflow: hidden;
}

.benefit_tag {
  letter-spacing: 3px;
  font-size: 14px;
  color: #00eaff;
}

.benefit_title {
  font-size: 42px;
  margin-bottom: 80px;
}

/* Orb Layout */
.benefit_orb_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}

/* ================================
   Premium Purple + Gold Orb Theme
================================ */

.benefit_orb {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: 0.4s ease;
  position: relative;
  animation: floatOrb 6s ease-in-out infinite;
}

/* GOLD ICON */
.benefit_orb i {
  font-size: 40px;
  margin-bottom: 15px;
  color: #ffd700; /* Gold */
  transition: 0.4s ease;
}

/* TEXT */
.benefit_orb span {
  font-size: 14px;
  padding: 0 15px;
  color: #000000;
}

/* PURPLE GLOW BORDER */
.benefit_orb::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(45deg, #c7f9f1, #a5d8ff);
  z-index: -1;
  filter: blur(10px);
  opacity: 0.8;
  transition: 0.4s ease;
}

/* HOVER EFFECT */
.benefit_orb:hover {
  transform: scale(1.12);
  box-shadow: 0 0 60px rgba(123,47,247,0.6);
}

/* HOVER GOLD SHINE */
.benefit_orb:hover i {
  color: #fff3b0;
  transform: scale(1.2);
}

/* Floating Animation */
@keyframes floatOrb {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}


/* ===============================
   REMOTE SOLUTION PREMIUM DESIGN
=================================*/

.remote_solution_section{
  padding:140px 0;
  background: radial-gradient(circle at top left,#0b1220,#0f172a 60%,#020617);
  position:relative;
  overflow:hidden;
}

/* soft animated glow */
.remote_solution_section::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background: radial-gradient(circle,rgba(0,191,255,0.15),transparent 70%);
  top:-150px;
  left:-150px;
  filter:blur(100px);
  animation: floatGlow 8s ease-in-out infinite alternate;
}

@keyframes floatGlow{
  from{transform:translate(0,0);}
  to{transform:translate(80px,60px);}
}

/* GRID */
.security_flip_grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:40px;
  margin-top:70px;
}

/* CARD */
.flip_card{
  perspective:1500px;
  height:260px;
}

/* INNER */
.flip_card_inner{
  position:relative;
  width:100%;
  height:100%;
  transition: transform 0.9s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}

/* FLIP */
.flip_card:hover .flip_card_inner{
  transform:rotateY(180deg);
}

/* FRONT + BACK */
.flip_card_front,
.flip_card_back{
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:35px;
  backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  transition:0.4s ease;
}

/* FRONT SIDE */
.flip_card_front{
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  border:1px solid rgba(0,191,255,0.3);
  box-shadow:0 20px 60px rgba(0,191,255,0.15);
  color:#ffffff;
}

/* ICON STYLE */
.flip_card_front i{
  font-size:32px;
  width:75px;
  height:75px;
  border-radius:50%;
  background: linear-gradient(135deg,#00bfff,#2563eb);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  box-shadow:0 0 25px rgba(0,191,255,0.6);
  transition:0.4s ease;
}

.flip_card_front h4{
  font-size:20px;
  margin-bottom:10px;
}

.flip_card_front p{
  font-size:14px;
  color:#000000;
}

/* BACK SIDE */
.flip_card_back{
  background: linear-gradient(135deg,#001f3f,#003366);
  transform:rotateY(180deg);
  border:1px solid rgba(0,191,255,0.5);
  color:#ffffff;
  box-shadow:0 25px 70px rgba(0,0,0,0.6);
}

/* Hover Glow Effect */
.flip_card:hover .flip_card_front{
  box-shadow:0 0 40px rgba(0,191,255,0.5);
}

.flip_card:hover .flip_card_front i{
  transform:scale(1.15);
  box-shadow:0 0 40px rgba(0,191,255,0.9);
}

/* RESPONSIVE */
@media(max-width:992px){
  .security_flip_grid{
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width:576px){
  .security_flip_grid{
    grid-template-columns:1fr;
  }
}


/* ===============================
   ERP & CRM VIDEO HERO FIXED
================================ */

.about_us_banner {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* VIDEO */
.hero_bg_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;   /* important */
}

/* OVERLAY */
.hero_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* CONTENT */
.hero_content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}

.hero_content h1 {
  font-size: 55px;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 0 0 30px rgba(0,191,255,0.6);
}

.hero_content p {
  font-size: 18px;
  color: #e2e8f0;
}


/* ===============================
   IT INFRASTRUCTURE SIDE VIDEO
================================ */

.service_bg_banner {
  padding: 180px 0;
  background: linear-gradient(135deg, #020617, #0f172a);
  color: #fff;
}

/* Text Styling */
.aboutus_content h1 {
  font-size: 46px;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 0 0 25px rgba(0,191,255,0.4);
}

.hero_subheading {
  font-size: 20px;
  color: #00bfff;
  margin-bottom: 20px;
}

.aboutus_content p {
  font-size: 16px;
  color: #cbd5e1;
  line-height: 1.6;
}

/* Buttons */
.primary_btn {
  background: linear-gradient(90deg, #00bfff, #2563eb);
  padding: 12px 28px;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s ease;
}

.primary_btn:hover {
  box-shadow: 0 0 25px rgba(0,191,255,0.6);
}

.secondary_btn {
  border: 2px solid #00bfff;
  padding: 12px 28px;
  border-radius: 30px;
  color: #00bfff;
  text-decoration: none;
  transition: 0.3s ease;
}

.secondary_btn:hover {
  background: #00bfff;
  color: #000;
}

/* ===============================
   VIDEO DESIGN
================================ */

.it_video_wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,191,255,0.25);
  transition: 0.4s ease;
}

.it_video_wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Hover Effect */
.it_video_wrapper:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 100px rgba(0,191,255,0.5);
}

/* Responsive */
@media (max-width: 992px) {
  .service_bg_banner {
    text-align: center;
  }

  .it_video_wrapper {
    margin-top: 40px;
  }
}


/* ===============================
   IT INTRO SECTION WITH VIDEO
================================ */

.firewall_intro {
  padding: 120px 0;
  background: linear-gradient(135deg, #0f172a, #020617);
  color: #fff;
}

/* Heading */
.client_logo_title h5 {
  color: #000000;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 14px;
}


.client_logo_title h1{
  color:#000 !important;
  background:none !important;
  -webkit-text-fill-color:#000 !important;
  -webkit-background-clip: initial !important;
  text-shadow:none !important;
}

/* Paragraph Card */
.firewall_intro_para {
  background: rgba(255,255,255,0.05);
  padding: 40px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,191,255,0.15);
}

.firewall_intro_para p {
  color: #cbd5e1;
  line-height: 1.7;
  margin-bottom: 18px;
}

/* Video Styling */
.it_intro_video {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,191,255,0.25);
  transition: 0.4s ease;
}

.it_intro_video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Hover Effect */
.it_intro_video:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 100px rgba(0,191,255,0.5);
}

/* Responsive */
@media (max-width: 992px) {
  .firewall_intro {
    text-align: center;
  }

  .it_intro_video {
    margin-top: 40px;
  }
}


/* ======================================
   IT INFRASTRUCTURE SERVICES SHOWCASE
======================================*/

.infra_services_showcase{
  padding:140px 0;
  /*background: linear-gradient(135deg,#0f172a,#020617);*/
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
  color:#fff;
}

/* Heading */
.infra_services_showcase .client_logo_title h5{
  color:#00bfff;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:14px;
}

.infra_services_showcase .client_logo_title h1{
  font-size:42px;
  font-weight:700;
  margin-top:10px;
  margin-bottom:60px;
  text-shadow:0 0 20px rgba(0,191,255,0.4);
}

/* ================= LEFT IMAGE CARD ================= */

.it_infra_services_image{
  height:420px;
  border-radius:25px;
  background:url("../img/try-banner.jpg") center/cover no-repeat;
  box-shadow:0 30px 80px rgba(0,191,255,0.25);
  transition:0.4s ease;
}

.it_infra_services_image:hover{
  transform:translateY(-10px);
  box-shadow:0 40px 100px rgba(0,191,255,0.5);
}

/* ================= ACCORDION ================= */

.infra_accordion{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Item */
.infra_item{
  background:rgba(255,255,255,0.05);
  border-radius:20px;
  padding:25px 30px;
  backdrop-filter:blur(15px);
  box-shadow:0 15px 50px rgba(0,191,255,0.1);
  cursor:pointer;
  transition:0.4s ease;
  overflow:hidden;
}

.infra_item h4{
  font-size:18px;
  margin-bottom:10px;
  position:relative;
}

.infra_item p{
  font-size:14px;
  color:#cbd5e1;
  line-height:1.6;
  max-height:0;
  opacity:0;
  transition:all 0.5s ease;
}

/* Active Item */
.infra_item.active{
  background:linear-gradient(135deg,#001f3f,#003366);
  box-shadow:0 25px 80px rgba(0,191,255,0.4);
}

.infra_item.active p{
  max-height:500px;
  opacity:1;
  margin-top:10px;
}

/* Hover */
.infra_item:hover{
  transform:translateX(8px);
}

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

@media(max-width:992px){
  .it_infra_services_image{
    margin-bottom:40px;
  }
}

/* =========================================
   RESULT ORIENTED LIGHT SECTION
=========================================*/

.remote_solution_section{
  padding:120px 0;
  background: linear-gradient(135deg,#f4f8ff,#eef3fb);
}

/* Heading */
.remote_solution_section .keyh_title h5{
  color:#6b7280;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:14px;
}

.remote_solution_section .keyh_title h1{
  font-size:42px;
  font-weight:700;
  margin-top:10px;
  margin-bottom:70px;
  color:#1e293b;
}

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

.benefit_grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:30px;
  margin-top:20px;
}

/* ================= CARD ================= */

.benefit_card{
  background:#ffffff;
  padding:45px 20px;
  border-radius:20px;
  text-align:center;
  font-size:18px;
  font-weight:600;
  color:#1e293b;
  position:relative;
  transition:0.4s ease;
  box-shadow:0 15px 40px rgba(0,0,0,0.05);
  cursor:pointer;
  animation: floatCard 4s ease-in-out infinite;
}

/* Top Accent Line */
.benefit_card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:6px;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  background:linear-gradient(90deg,#00bfff,#2563eb);
}

/* Hover Effect */
.benefit_card:hover{
  transform:translateY(-12px);
  box-shadow:0 25px 60px rgba(0,191,255,0.2);
}

/* Subtle Glow on Hover */
.benefit_card:hover::before{
  background:linear-gradient(90deg,#2563eb,#00bfff);
}

/* Responsive */
@media(max-width:768px){
  .remote_solution_section{
    text-align:center;
  }
}
/* Different delay for each card */
.benefit_card:nth-child(2){ animation-delay: 0.5s; }
.benefit_card:nth-child(3){ animation-delay: 1s; }
.benefit_card:nth-child(4){ animation-delay: 1.5s; }
.benefit_card:nth-child(5){ animation-delay: 2s; }

@keyframes floatCard{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-12px); }
  100%{ transform: translateY(0px); }
}




/* ===============================
   NETWORK SECURITY SIDE VIDEO – LIGHT THEME
================================ */

.service_bg_banner{
  padding:120px 0px ;
  background: linear-gradient(135deg,#f8fbff,#eef4ff);
  color:#0f172a;
  position:relative;
  overflow:hidden;
}

/* Soft Decorative Glow */
.service_bg_banner::before{
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  background: radial-gradient(circle,rgba(37,99,235,0.08),transparent 70%);
  top:-120px;
  right:-120px;
  z-index:0;
}

/* ================= TEXT STYLING ================= */

.aboutus_content{
  position:relative;
  z-index:2;
}

.aboutus_content h1{
  font-size:46px;
  font-weight:800;
  margin-bottom:20px;
  color:#0f172a;   /* Strong Dark */
  text-shadow:none;
}

.hero_subheading{
  font-size:20px;
  color:#2563eb;   /* Clean Blue Accent */
  margin-bottom:20px;
  font-weight:600;
}

.aboutus_content p{
  font-size:16px;
  color:#0072ff;   /* Dark readable grey */
  line-height:1.7;
}

/* Hero Paragraph */
.hero_para{
    font-size:26px;
    font-weight:700;
    letter-spacing:1px;
    margin-top:20px;
    color:#0f172a;
    text-shadow:none;
}

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

.primary_btn{
  background:linear-gradient(90deg,#2563eb,#3b82f6);
  padding:12px 30px;
  border-radius:30px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:0.3s ease;
  box-shadow:0 10px 25px rgba(37,99,235,0.25);
}

.primary_btn:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(37,99,235,0.35);
}

.secondary_btn{
  border:2px solid #2563eb;
  padding:12px 30px;
  border-radius:30px;
  color:#2563eb;
  text-decoration:none;
  font-weight:600;
  transition:0.3s ease;
  background:#ffffff;
}

.secondary_btn:hover{
  background:#2563eb;
  color:#ffffff;
}

/* ================= VIDEO DESIGN ================= */

.security_video_wrapper{
  border-radius:25px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
  transition:0.4s ease;
  position:relative;
  z-index:2;
}

.security_video_wrapper video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:25px;
}

/* Hover Lift */
.security_video_wrapper:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 80px rgba(37,99,235,0.2);
}

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

@media(max-width:992px){
  .service_bg_banner{
    text-align:center;
  }

  .security_video_wrapper{
    margin-top:40px;
  }
}

/* ===== RIGHT SIDE TEXT FIX ===== */

.firewall_intro .aboutus_content{
  padding-left:40px;
}

/* MAIN HEADING */
.firewall_intro .aboutus_content h1{
  font-size:48px;
  font-weight:800;
  line-height:1.2;
  color:#0f172a;            /* strong navy */
  letter-spacing:1px;
  margin-bottom:25px;
  background:none;
  -webkit-text-fill-color:initial;
}

/* BLUE SUB LINE */
.firewall_intro .hero_subheading{
  font-size:20px;
  font-weight:600;
  color:#2563eb;            /* clean corporate blue */
  margin-bottom:20px;
}

/* PARAGRAPH */
.firewall_intro .aboutus_content p{
  font-size:16px;
  color:#475569;            /* readable grey */
  line-height:1.8;
  max-width:620px;
}

/* Responsive spacing */
@media(max-width:992px){
  .firewall_intro .aboutus_content{
    padding-left:0;
    text-align:center;
  }

  .firewall_intro .aboutus_content p{
    margin:auto;
  }
}

.hero_split{
  display:flex;
  align-items:center;
  gap:100px;   /* 👈 Ye gap control karega */
}


.firewall_intro{
  padding:130px 0;
  background: linear-gradient(135deg,#ffffff,#f5f9ff);
  position:relative;
  overflow:hidden;
}

/* Soft decorative glow */
.firewall_intro::before{
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  background: radial-gradient(circle,rgba(59,130,246,0.06),transparent 70%);
  top:-120px;
  right:-120px;
  border-radius:50%;
  z-index:0;
}

/* Sub heading */
.firewall_intro .client_logo_title h5{
  color:#2563eb !important;
  letter-spacing:3px;
  font-size:14px;
  text-transform:uppercase;
  font-weight:600;
}

/* Main heading */
.firewall_intro .client_logo_title h1{
  font-size:42px;
  font-weight:800;
  margin-top:10px;
  margin-bottom:60px;
  color:#0f172a;
  background:none;
  -webkit-text-fill-color:initial;
}

/* ================= TEXT CARD ================= */

.firewall_intro .firewall_intro_para{
  background:#ffffff;
  padding:45px;
  border-radius:25px;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
  position:relative;
  z-index:1;
  transition:0.4s ease;
  border:1px solid #e2e8f0;
}

/* Hover */
.firewall_intro .firewall_intro_para:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 60px rgba(37,99,235,0.15);
}

/* Paragraph */
.firewall_intro .firewall_intro_para p{
  color:#334155 !important;
  line-height:1.8;
  font-size:16px;
  margin-bottom:20px;
}

/* ================= IMAGE CARD ================= */

.firewall_intro .network_intro_img{
  height:380px;
  border-radius:25px;
  background:url("../img/data-lose-banner.jpg") center/cover no-repeat;
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
  transition:0.4s ease;
  position:relative;
  z-index:1;
  border:1px solid #e2e8f0;
}

.firewall_intro .network_intro_img:hover{
  transform:scale(1.03);
  box-shadow:0 30px 80px rgba(37,99,235,0.18);
}

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

@media(max-width:992px){
  .firewall_intro{
    text-align:center;
  }

  .firewall_intro .network_intro_img{
    margin-top:40px;
  }
}


/* =========================================
   NETWORK SECURITY PROMO - UNIQUE DESIGN
=========================================*/

.firewall_intro{
  padding:140px 0;
  background: linear-gradient(135deg,#f9fbff,#e6f2ff);
  position:relative;
  overflow:hidden;
}

/* Decorative floating shape */
.firewall_intro::after{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background: radial-gradient(circle,rgba(37,99,235,0.15),transparent 70%);
  bottom:-150px;
  left:-150px;
  border-radius:50%;
  z-index:0;
}

/* Heading */
.firewall_intro .client_logo_title h5{
  color:#2563eb;
  letter-spacing:2px;
  font-size:14px;
  text-transform:uppercase;
}

.firewall_intro .client_logo_title h1{
  font-size:40px;
  font-weight:700;
  margin-top:10px;
  margin-bottom:70px;
  color:#0f172a;
}

/* ================= LEFT CONTENT CARD ================= */

.firewall_intro_para{
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(10px);
  padding:45px;
  border-radius:30px;
  box-shadow:0 25px 60px rgba(0,0,0,0.05);
  border-left:6px solid #2563eb;
  position:relative;
  z-index:1;
  transition:0.4s ease;
}

.firewall_intro_para:hover{
  transform:translateY(-10px);
  box-shadow:0 35px 80px rgba(37,99,235,0.15);
}

/* Paragraph styling */
.firewall_intro_para p{
  color:#334155;
  line-height:1.9;
  font-size:15px;
  margin-bottom:22px;
}

/* First paragraph highlight */
.firewall_intro_para p:first-child{
  font-weight:600;
  color:#0f172a;
}

/* ================= RIGHT IMAGE DESIGN ================= */

.network_services_image3{
  height:400px;
  border-radius:30px;
  background:url("../img/download_bg.jpg") center/cover no-repeat;
  position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,0.1);
  transition:0.4s ease;
  z-index:1;
}

/* Floating layered effect */
.network_services_image3::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  border-radius:30px;
  background:linear-gradient(135deg,rgba(37,99,235,0.15),transparent);
  top:15px;
  left:15px;
  z-index:-1;
}

.network_services_image3:hover{
  transform:scale(1.04);
  box-shadow:0 40px 100px rgba(37,99,235,0.2);
}

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

@media(max-width:992px){
  .firewall_intro{
    text-align:center;
  }

  .network_services_image3{
    margin-top:40px;
  }
}

/* =========================================
   NETWORK SOLUTIONS - BOLD PREMIUM DESIGN
=========================================*/

.infra_services_showcase{
  padding:140px 0;
  background: radial-gradient(circle at top left, #fffaf0, #fef3c7, #e0f2fe);
  color:#ffffff;
  position:relative;
  overflow:hidden;
}

/* Heading Styling */
.infra_services_showcase .client_logo_title h5{
  color:#c084fc;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:14px;
}

.infra_services_showcase .client_logo_title h1{
  font-size:42px;
  font-weight:700;
  margin-top:10px;
  margin-bottom:80px;
  background:linear-gradient(90deg,#c084fc,#38bdf8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ================= IMAGE SIDE ================= */

.network_services_image{
  height:450px;
  border-radius:30px;
  background:url("../img/about-img1.jpg") center/cover no-repeat;
  position:relative;
  box-shadow:0 30px 100px rgba(192,132,252,0.3);
  transition:0.4s ease;
}

/* Neon glow border */
.network_services_image::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:35px;
  background:linear-gradient(135deg,#c084fc,#38bdf8);
  z-index:-1;
  filter:blur(25px);
  opacity:0.6;
}

.network_services_image:hover{
  transform:scale(1.04);
}

/* ================= ACCORDION STYLE ================= */

.infra_accordion{
  position:relative;
  padding-left:40px;
}

/* Vertical neon line */
.infra_accordion::before{
  content:"";
  position:absolute;
  left:10px;
  top:0;
  width:3px;
  height:100%;
  background:linear-gradient(to bottom,#c084fc,#38bdf8);
}

/* Individual items */
.infra_item{
  background:rgba(255,255,255,0.05);
  padding:25px 30px;
  border-radius:20px;
  margin-bottom:25px;
  backdrop-filter:blur(8px);
  transition:0.4s ease;
  position:relative;
}

/* Dot indicator */
.infra_item::before{
  content:"";
  position:absolute;
  left:-31px;
  top:30px;
  width:14px;
  height:14px;
  background:#c084fc;
  border-radius:50%;
  box-shadow:0 0 15px #c084fc;
}

/* Active item highlight */
.infra_item.active{
  background:linear-gradient(135deg,rgba(192,132,252,0.2),rgba(56,189,248,0.15));
  box-shadow:0 15px 40px rgba(192,132,252,0.2);
}

/* Hover effect */
.infra_item:hover{
  transform:translateX(10px);
  background:rgba(37,99,235,0.18);
}

/* Text */
.infra_item h4{
  color:#0f172a;
  font-weight:600;
  margin-bottom:12px;
}

.infra_item p{
    color:#334155;
  font-size:14px;
  line-height:1.7;
}

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

@media(max-width:992px){
  .network_services_image{
    margin-bottom:50px;
  }

  .infra_accordion{
    padding-left:20px;
  }
}

/* =========================================
   CYBER SECURITY LAYERED SERVICES - PREMIUM
=========================================*/

.remote_solution_section{
  padding:150px 0;
  background: radial-gradient(circle at top left, #f0fdfa, #e0f7fa, #e6f0ff);
  color:#fff;
  position:relative;
  overflow:hidden;
}

/* Background Glow */
.remote_solution_section::before{
  content:"";
  position:absolute;
  width:600px;
  height:600px;
  background:radial-gradient(circle,rgba(0,191,255,0.15),transparent 70%);
  top:-200px;
  left:-200px;
  filter:blur(80px);
  z-index:0;
}

/* Heading */
.remote_solution_section .keyh_title h5{
  color:#38bdf8;
  letter-spacing:3px;
  font-size:14px;
  text-transform:uppercase;
}

.remote_solution_section .keyh_title h1{
  font-size:42px;
  font-weight:700;
  margin-top:10px;
  margin-bottom:80px;
  background:linear-gradient(90deg,#38bdf8,#a78bfa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Container */
.service_layered_container{
  display:flex;
  flex-direction:column;
  gap:40px;
  position:relative;
  z-index:1;
}

/* Individual Layer */
.service_layer_box{
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(20px);
  padding:40px 50px;
  border-radius:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  transition:0.4s ease;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  overflow:hidden;
}

/* Hover Effect */
.service_layer_box:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 30px 100px rgba(0,191,255,0.3);
}

/* Big Step Number (Watermark Style) */
.layer_number{
  position:absolute;
  top:15px;
  left:30px;
  font-size:80px;
  font-weight:800;
  color:rgba(255,255,255,0.05);
  z-index:0;
}

/* Content */
.layer_content{
  max-width:70%;
  position:relative;
  z-index:2;
}

.layer_content h3{
  font-size:22px;
  margin-bottom:12px;
  color:#000000;
}

.layer_content p{
  font-size:15px;
  color:#000000;
  line-height:1.7;
}

/* Icon Badge */
.layer_icon{
  width:70px;
  height:70px;
  border-radius:50%;
  background:linear-gradient(135deg,#38bdf8,#a78bfa);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:#fff;
  box-shadow:0 0 25px rgba(56,189,248,0.6);
  transition:0.4s ease;
}

.service_layer_box:hover .layer_icon{
  transform:rotate(10deg) scale(1.1);
  box-shadow:0 0 40px rgba(167,139,250,0.8);
}

/* Responsive */
@media(max-width:992px){
  .service_layer_box{
    flex-direction:column;
    text-align:center;
    gap:20px;
  }

  .layer_content{
    max-width:100%;
  }

  .layer_number{
    font-size:60px;
    top:10px;
    left:20px;
  }
}




/* =========================
   HERO VIDEO SECTION FIX
=========================*/

.about_us_banner{
  position:relative;
  height:100vh;
  min-height:100vh;
  width:100%;
  overflow:hidden;
}

/* VIDEO */
.about_us_banner video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

/* OVERLAY */
.hero_overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(240,248,255,0.1); 
  z-index:2;
}

/* CONTENT */
.about_us_banner .container{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#ffffff;
}

/* TEXT */
.service_content h1{
  font-size:52px;
  font-weight:700;
}

.service_content h6{
  font-size:18px;
  max-width:700px;
  margin:auto;
  opacity:0.9;
}

/* Responsive */
@media(max-width:768px){
  .service_content h1{
    font-size:34px;
  }
}
/* =========================================
   INDUSTRIES – SOFT DARK ENTERPRISE THEME
=========================================*/

.services_provided{
  padding:120px 0;
  background:linear-gradient(135deg,#f8fbff,#eaf1ff);
  position:relative;
  overflow:hidden;
}

/* Soft Light Glow */
.services_provided::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(circle,rgba(37,99,235,0.12),transparent 70%);
  top:-150px;
  right:-150px;
  z-index:0;
}
/* Heading */
.services_provided .client_logo_title{
  position:relative;
  z-index:1;
}

.services_provided .client_logo_title h5{
  color:#000000;
  letter-spacing:3px;
  font-size:14px;
  text-transform:uppercase;
}

.services_provided .client_logo_title h1{
  font-size:42px;
  font-weight:700;
  color:#f1f5f9;
  margin:15px 0 70px;
}

/* Cards */
.services_card{
  display:flex;
  flex-direction:column;
  gap:22px;
  position:relative;
  z-index:1;
}

.service_tab{
  display:flex;
  align-items:center;
  gap:20px;
  padding:22px 28px;
  border-radius:18px;
  background:#1e293b;
  border:1px solid rgba(255,255,255,0.05);
  transition:0.4s ease;
  text-decoration:none;
  cursor:pointer;
}

/* Icon */
.service_tab i{
  font-size:20px;
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(56,189,248,0.15);
  color:#38bdf8;
  transition:0.3s;
}

.service_tab h4{
  font-size:17px;
  font-weight:600;
  color:#e2e8f0;
  margin:0;
}

/* Hover */
.service_tab:hover{
  transform:translateX(8px);
  border:1px solid #38bdf8;
  box-shadow:0 0 25px rgba(56,189,248,0.25);
}

.service_tab:hover i{
  background:#38bdf8;
  color:#0f172a;
}

/* Active */
.service_tab.active{
  background:linear-gradient(135deg,#2563eb,#38bdf8);
}

.service_tab.active h4{
  color:#ffffff;
}

.service_tab.active i{
  background:#ffffff;
  color:#2563eb;
}

/* Case Study Panel */
.custom_service_content{
  margin-top:70px;
  position:relative;
  z-index:1;
}

.cservice_tab_content{
  display:none;
  padding:45px;
  background:#1e293b;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  animation:fadeUp 0.6s ease forwards;
}

.cservice_tab_content.active{
  display:block;
}

.cservice_tab_content p{
  font-weight:600;
  color:#38bdf8;
  margin-bottom:15px;
}

.cservice_tab_content li{
  color:#cbd5e1;
  font-size:14px;
  line-height:1.7;
  margin-bottom:10px;
}

/* Animation */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}



/* ======================================
   SERVICE OVERVIEW – MINT PREMIUM LIGHT
====================================== */

.service_overview{
  padding:120px 0;
  background:linear-gradient(135deg,#f6fffb,#e6fff7);
  position:relative;
  overflow:hidden;
}

/* Soft Mint Glow */
.service_overview::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(circle,rgba(16,185,129,0.10),transparent 70%);
  top:-200px;
  right:-200px;
  z-index:0;
}

/* Heading */
.service_overview .keyh_title{
  position:relative;
  z-index:1;
}

.service_overview .keyh_title h5{
  color:#059669;
  letter-spacing:3px;
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
}

.service_overview .keyh_title h1{
  font-size:42px;
  font-weight:900;
  color:#064e3b;
  margin:15px 0 60px;
}

/* Challenge Cards – Elegant Emerald */
.solution_challenges{
  background:linear-gradient(135deg,#065f46,#064e3b);
  padding:40px 25px;
  border-radius:22px;
  text-align:center;
  position:relative;
  z-index:1;

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

  box-shadow:
      0 20px 50px rgba(6,78,59,0.4),
      0 0 30px rgba(16,185,129,0.25);

  transition:0.4s ease;
  overflow:hidden;
}

/* Soft Shine Effect */
.solution_challenges::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.08),
      transparent
  );
  transform:rotate(25deg);
  transition:0.6s;
  opacity:0;
}

.solution_challenges:hover::before{
  opacity:1;
  left:100%;
}

/* Icon */
.solution_challenges i{
  font-size:24px;
  width:65px;
  height:65px;
  margin:auto;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;

  background:linear-gradient(135deg,#10b981,#34d399);
  color:#ffffff;

  box-shadow:0 0 25px rgba(16,185,129,0.6);
  transition:0.4s ease;
}

/* Title */
.solution_challenges h5{
  color:#ecfdf5;
  font-size:15px;
  font-weight:600;
  line-height:1.6;
}

/* Hover */
.solution_challenges:hover{
  transform:translateY(-14px) scale(1.04);
  box-shadow:
      0 30px 80px rgba(6,78,59,0.6),
      0 0 45px rgba(16,185,129,0.5);
}

.solution_challenges:hover i{
  transform:scale(1.15);
}



/* =========================================
   OUR SOLUTIONS – MIDNIGHT PURPLE THEME
=========================================*/

.our_solutions{
  padding:120px 0;
  background:linear-gradient(135deg,#1e1b4b,#312e81);
  position:relative;
  overflow:hidden;
  color:#fff;
}

/* Soft glow background */
.our_solutions::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(circle,rgba(236,72,153,0.2),transparent 70%);
  bottom:-200px;
  right:-150px;
  z-index:0;
}

/* Heading */
.our_solutions .client_logo_title{
  position:relative;
  z-index:1;
}

.our_solutions .client_logo_title h5{
  letter-spacing:3px;
  font-size:14px;
  text-transform:uppercase;
  color:#f472b6;
}

.our_solutions .client_logo_title h1{
  font-size:44px;
  font-weight:700;
  margin-bottom:20px;
  background:linear-gradient(90deg,#f472b6,#a78bfa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.our_solutions .client_logo_title p{
  font-size:16px;
  color:#e5e7eb;
  max-width:700px;
  margin:auto;
  line-height:1.7;
}

/* Case Study Section */
.case-study{
  margin-top:40px;
  padding:50px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(15px);
  border-radius:25px;
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  transition:0.4s ease;
  position:relative;
  z-index:1;
}

/* Hover effect */
.case-study:hover{
  transform:translateY(-12px);
  box-shadow:0 30px 80px rgba(236,72,153,0.4);
}

/* Case Study Title */
.case-study h3{
  font-size:24px;
  font-weight:600;
  margin-bottom:15px;
  color:#ffffff;
}

/* Case Study Text */
.case-study p{
  font-size:15px;
  color:#f3f4f6;
  line-height:1.8;
}

/* Case Study Heading */
.our_solutions h2{
  margin-top:40px;
  font-size:28px;
  font-weight:600;
  color:#f9a8d4;
}

/* Animation */
.case-study{
  animation:fadeUp 1s ease forwards;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


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

.about_us_banner{
  height:55vh;
  background:linear-gradient(135deg,#f8fafc,#eef2ff);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.service_content h1{
  font-size:46px;
  font-weight:700;
  color:#111827;
}

.service_content h6{
  font-size:18px;
  color:#6b7280;
  margin-top:10px;
}


/* =========================================
   CONTACT PAGE – LUXURY BLACK & GOLD
=========================================*/

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

.about_us_banner{
  height:65vh;
  background:#0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  color:#fff;
  padding: 100px;
  margin-top: 40px;
}

/* Golden spotlight */
.about_us_banner::before{
  content:"";
  position:absolute;
  width:600px;
  height:600px;
  background:radial-gradient(circle,rgba(212,175,55,0.15),transparent 70%);
  top:-150px;
  right:-150px;
}

.service_content h1{
  font-size:52px;
  font-weight:700;
  color:#d4af37;   /* Gold */
  letter-spacing:1px;
}

.service_content h6{
  color:#f0fdfa;
  margin-top:15px;
  font-size:18px;
}


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

.contact_details_section{
  padding:120px 0;
  background: #ffffff;
}

.contact_details{
  background: #f8fbff;
  padding:50px;
  border-radius:20px;
  border:1px solid rgba(212,175,55,0.2);
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
  transition:0.4s ease;
}

.contact_details:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 80px rgba(212,175,55,0.25);
}

.contact_details h4{
  color:#000000;
  margin-bottom:10px;
  font-weight:600;
}

.contact_details p{
  color:#000000;
  font-size:14px;
}

.contact_details i{
  color:#000000;
  margin-right:8px;
}

/* Map */
.contact_details_section iframe{
  border-radius:20px;
  min-height:450px;
  box-shadow:0 25px 80px rgba(0,0,0,0.7);
  border:2px solid rgba(212,175,55,0.2);
}


/* ================= FORM SECTION ================= */

.form_section{
  padding:130px 0;
  background: #f5f5f5;
}

.form_section .client_logo_title h5{
  color:#000000;
  letter-spacing:3px;
  font-size:14px;
}

.form_section .client_logo_title h1{
  color:#ffffff;
  margin-bottom:60px;
}
.form-text{
  color: #000000;   /* soft gold */
  font-size: 13px;
  margin-top: 8px;
  opacity: 0.9;
}
/* Form Card */
#contactForm{
  background: #f5f5f5;
  padding:60px;
  border-radius:25px;
  border:1px solid rgba(212,175,55,0.25);
  box-shadow:0 30px 100px rgba(0,0,0,0.8);
}

/* Inputs */
#contactForm .form-control{
  background: #f5f5f5;
  border:1px solid rgba(212,175,55,0.15);
  color:#fffaf0;
  padding:14px;
  border-radius:12px;
  transition:0.3s ease;
}

#contactForm .form-control:focus{
  border-color:#d4af37;
  box-shadow:0 0 15px rgba(212,175,55,0.4);
}

/* GOLD BUTTON */
/* ================= BUTTON BASE ================= */

#contactForm .btn-primary,
#contactForm .btn-outline-secondary {
  background: transparent;
  color: #facc15;
  border: 2px solid #facc15;
  padding: 14px 40px;
  border-radius: 40px;
  font-weight: 600;
  transition: 0.4s ease;
}

/* Hover Effect */

/* Send Button Default (Outline Style) */
#contactForm .btn-primary{
  background:transparent;
  color:#facc15;
  border:2px solid #facc15;
  padding:14px 45px;
  border-radius:50px;
  font-weight:600;
  transition:0.4s ease;
}

/* Send Hover */
#contactForm .btn-primary:hover{
  background:#facc15;
  color:#000;
  box-shadow:0 0 25px rgba(250,204,21,0.6);
  transform:translateY(-4px);
}

/* Reset Button Default */
#contactForm .btn-outline-secondary{
  background:transparent;
  color:#facc15;
  border:2px solid #facc15;
  padding:14px 45px;
  border-radius:50px;
  font-weight:600;
  transition:0.4s ease;
}

/* Reset Hover = Yellow */
#contactForm .btn-outline-secondary:hover{
  background:#facc15;
  color:#000;
  border-color:#facc15;
  box-shadow:0 0 25px rgba(250,204,21,0.6);
  transform:translateY(-4px);
}

/* Responsive */
@media(max-width:768px){
  .service_content h1{
    font-size:34px;
  }

  #contactForm{
    padding:30px;
  }
}
#contactForm .form-label{
  color:#d4af37;   /* gold */
  font-weight:500;
  margin-bottom:8px;
  letter-spacing:0.5px;
}
/* Input text color fix */
#contactForm input,
#contactForm textarea {
  color: #ffffff !important;   /* typed text white */
  font-weight: 500;
}

/* Placeholder color */
#contactForm input::placeholder,
#contactForm textarea::placeholder {
  color: #9ca3af !important;   /* soft grey */
  opacity: 1;
}

/* Label visibility */
#contactForm .form-label {
  color: #000000 !important;   /* gold labels */
  font-weight: 500;
  margin-bottom: 6px;
}



/* ===============================
   FIREWALL INTRO SECTION
================================= */

.firewall_intro {
    padding: 140px 0;
    background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 50%, #e6f0ff 100%);
    position: relative;
    overflow: hidden;
}

/* Soft Background Glow */
.firewall_intro::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15), transparent 70%);
    top: -150px;
    left: -150px;
    filter: blur(100px);
}

/* Section Heading */
.section-subtitle {
    color: #2563eb;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 14px;
}

.section-title {
    font-size: 46px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 10px;
    margin-bottom: 50px;
    line-height: 1.2;
}



/* =========================================
   FIREWALL INTRO SECTION - MODERN CORPORATE
========================================= */

.firewall_intro {
    padding: 140px 0;
    background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 50%, #e6f0ff 100%);
    position: relative;
    overflow: hidden;
}

/* Soft Glow Background Effect */
.firewall_intro::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15), transparent 70%);
    top: -200px;
    left: -200px;
    filter: blur(120px);
    z-index: 0;
}

.firewall_intro .container {
    position: relative;
    z-index: 2;
}

/* =======================
   HEADING STYLE
======================= */

.section-subtitle {
    color: #2563eb;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 10px;
}

.section-title {
    font-size: 46px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 50px;
}

/* =======================
   PARAGRAPH CARD
======================= */

.firewall_intro_para {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    padding: 55px;
    border-radius: 28px;
    position: relative;
    box-shadow: 
        0 20px 60px rgba(15, 23, 42, 0.08),
        0 8px 25px rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.15);
    transition: 0.4s ease;
}

/* Accent Line */
.firewall_intro_para::before {
    content: "";
    position: absolute;
    top: 45px;
    left: 30px;
    width: 5px;
    height: 70px;
    background: linear-gradient(180deg, #2563eb, #60a5fa);
    border-radius: 5px;
}

/* Paragraph Styling */
.firewall_intro_para p {
    font-size: 18px;
    line-height: 1.9;
    color: #0f172a;
    font-weight: 500;
    margin-bottom: 22px;
    padding-left: 25px;
}

/* First Paragraph Highlight */
.firewall_intro_para p:first-child {
    font-weight: 600;
    font-size: 19px;
    color: #1e293b;
}

/* Hover Effect */
.firewall_intro_para:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 35px 80px rgba(37, 99, 235, 0.18),
        0 15px 40px rgba(15, 23, 42, 0.1);
}

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

@media (max-width: 992px) {
    .section-title {
        font-size: 36px;
    }

    .firewall_intro_para {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .firewall_intro {
        padding: 90px 0;
    }

    .section-title {
        font-size: 30px;
    }

    .firewall_intro_para p {
        font-size: 16px;
    }
}



/* ===============================
   CAREER HERO SECTION
================================ */

.career-hero {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.bg-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: -2;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0.5));
    z-index: -1;
}

.hero-content h1 {
    font-size: 55px;
    font-weight: 700;
    color: #fff;
    animation: fadeUp 1s ease;
}

.hero-content p {
    font-size: 20px;
    margin-top: 15px;
    color: #f1f1f1;
    animation: fadeUp 1.4s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   JOB SECTION
================================ */

.job-section {
    padding: 80px 5%;
    background: #f4f8ff;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

/* Job Card */

.job-card {
    width: 420px;
    padding: 40px;
    border-radius: 25px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    transition: 0.4s ease;
}

.job-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0,123,255,0.2);
}

.job-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: linear-gradient(135deg,#007bff,#00d4ff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.job-icon i {
    color: #fff;
    font-size: 24px;
}

.job-card h2 {
    color: #007bff;
    font-weight: 700;
    margin-bottom: 15px;
}

.job-subtitle {
    margin-top: 18px;
    font-weight: 600;
    font-size: 15px;
}

.job-card ul {
    padding-left: 20px;
    margin-top: 10px;
}

.job-card ul li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #444;
}

/* Apply Button */

.apply-btn {
    margin-top: 20px;
    padding: 12px 28px;
    border-radius: 30px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg,#38bdf8,#0ea5e9);
    color: #fff;
    transition: 0.3s ease;
}

.apply-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(14,165,233,0.4);
}

/* ===============================
   MODAL STYLING
================================ */

.apply-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.apply-modal-content {
    background: linear-gradient(145deg,#ffffff,#eef2ff);
    width: 100%;
    max-width: 520px;
    padding: 45px;
    border-radius: 25px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    position: relative;
    animation: modalFade 0.4s ease;
}

@keyframes modalFade {
    from { opacity: 0; transform: scale(0.9);}
    to { opacity: 1; transform: scale(1);}
}

.apply-modal h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(90deg,#4f46e5,#06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.close-modal {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 26px;
    cursor: pointer;
    color: #666;
    transition: 0.3s;
}

.close-modal:hover {
    color: #000;
}

/* Form Inputs */

.apply-modal input {
    width: 100%;
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid #dbeafe;
    background: #f8fafc;
    transition: 0.3s;
    font-size: 14px;
}

.apply-modal input:focus {
    border-color: #4f46e5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(79,70,229,0.15);
    outline: none;
}

.apply-modal button {
    width: 100%;
    padding: 14px;
    border-radius: 30px;
    border: none;
    background: linear-gradient(90deg,#4f46e5,#06b6d4);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.apply-modal button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(79,70,229,0.3);
}

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

@media(max-width: 768px){

    .hero-content h1 {
        font-size: 36px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .job-card {
        width: 100%;
        padding: 30px;
    }

    .apply-modal-content {
        padding: 30px;
    }
}





/*
TOGGLE CSS
*/

.menu-toggle{
    display:none;
    font-size:28px;
    cursor:pointer;
    color:#111;
}

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

    .navbar{
        position:relative;
    }

    .menu-toggle{
        display:block;
    }

    .menu{
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#fff;
        display:none;
        padding:20px;
        box-shadow:0 10px 20px rgba(0,0,0,.1);
    }

    .menu.active{
        display:block;
    }

    .menu ul{
        flex-direction:column;
        gap:15px;
    }

    .query_btn{
        display:none;
    }

    .sub_menu{
        position:static;
        display:block;
        box-shadow:none;
        background:#f8fafc;
        margin-top:10px;
    }
}

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

    .logo{
        min-width:120px;
        min-height:40px;
    }

    .menu ul li a{
        font-size:15px;
    }
}


@media(max-width:768px){

    .banner_content{
        text-align:center;
        padding:0 15px;
    }

    .banner_content h1{
        font-size:32px;
        line-height:1.3;
    }

    .banner_content p{
        font-size:16px;
    }

    .banner_content_btn{
        flex-direction:column;
    }

    .banner_content_btn a{
        width:100%;
    }
}

.menu-toggle{
    display:none;
    font-size:30px;
    cursor:pointer;
    color:#000;
}

@media(max-width:992px){

    .menu-toggle{
        display:block;
    }

    .menu{
        display:none;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#fff;
        padding:20px;
        z-index:9999;
        box-shadow:0 10px 20px rgba(0,0,0,.1);
    }

    .menu.active{
        display:block;
    }

    .menu ul{
        flex-direction:column;
        gap:15px;
    }

    .query_btn{
        display:none;
    }
}







/* =========================
   TABLET RESPONSIVE
========================= */
@media (max-width: 992px){

  .navbar{
    flex-wrap: wrap;
  }

  .menu ul{
    gap: 20px;
  }

  .banner_content h1{
    font-size: 42px;
  }

  .banner_content p{
    font-size: 18px;
  }

  .client_logo_card{
    grid-template-columns: repeat(3,1fr);
  }

  .intro_wrapper,
  .about_premium_wrapper{
    flex-direction: column;
    text-align: center;
  }

  .intro_text h1,
  .about_premium_text h1{
    font-size: 40px;
  }
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width: 768px){

  header{
    padding: 12px 0;
  }

  .logo{
    min-width: 120px;
    min-height: 40px;
  }

  .banner_content{
    text-align: center;
    max-width: 100%;
    padding: 0 15px;
  }

  .banner_content h1{
    font-size: 32px;
    line-height: 1.3;
  }

  .banner_content p{
    font-size: 16px;
  }

  .banner_content_btn{
    flex-direction: column;
    gap: 12px;
  }

  .banner_content_btn a{
    width: 100%;
    text-align: center;
  }

  .intro_text h1,
  .client_logo_title h1,
  .keyh_title h1{
    font-size: 32px;
  }

  .about_premium_text{
    padding: 25px;
  }

  .about_premium_text h1{
    font-size: 32px;
  }

  .quick_form_content h1{
    font-size: 36px;
  }

  .client_logo_card{
    grid-template-columns: repeat(2,1fr);
  }

  .timeline-block{
    width:100%;
    left:0 !important;
  }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width: 480px){

  .banner_content h1{
    font-size: 26px;
  }

  .intro_text h1{
    font-size: 28px;
  }

  .quick_form_content h1{
    font-size: 28px;
  }

  .client_logo_card{
    grid-template-columns: 1fr;
  }

  .keyh_cards,
  .why_cards,
  .industry_box{
    padding: 25px 15px;
  }
}