/* ===============================
GLOBAL SETTINGS
=============================== */
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap');
*{
margin:0px;
padding:0;
box-sizing:border-box;
}

:root{
  --c-bg:      #050b1f/*#0A1220*//*#03060e*/; 
    --c-panel:    #0b1428;
       --c-services-bg:   #ffffff;   /* "Our Services" section background — fixed white, not themed */
         --c-cyan:     #4169e1/*#00d4ff*/;
  --c-cyan-bright:   #00f0ff;
  --c-teal:     /*#00ffc8*/#8ab4ff;
    --c-purple:        /*#7b2fff*/#2a3a8f;   /* tertiary accent (gradients only) */
      --c-muted:    /*rgba(160,210,240,0.6);*/rgba(255,255,255,0.65);
  --c-surface:  /*#070d1c*//*#17223d*/#0c1839;
    --c-border:   /*rgba(0,212,255,0.14)*/color-mix(in srgb, var(--c-cyan) 14%, transparent);
  --c-border-h: /*rgba(0,212,255,0.55)*/color-mix(in srgb, var(--c-cyan) 55%, transparent);
  --ff-display: 'Syne', sans-serif;
  --ff-mono:    'Space Mono', monospace;
  --ff-body:    'DM Sans', sans-serif;
  --ease-out:   cubic-bezier(0.16,1,0.3,1);
  --ease-in:    cubic-bezier(0.7,0,0.84,0);
--color-bg:#FFFFFF;
--color-bg-2:#FFE4E6;
--color-surface:#FFFFFF;
--color-surface-soft:#FFF5ED;
--color-text:#2A1B10;
--color-text-invert:#FFFFFF;
--color-muted:#6B4F3B;
/* Buttons / fills (metallic deep maroon) */
--color-primary:#5B0B2E;
--color-primary-hover:#3E071F;
--color-navy:#021945;
--color-accent:#7A1638;
--color-accent-hover:#5D0F2A;
/* Gold accent for warm tech stripes */
--color-gold:#D4AF37;
--color-gold-soft:#F2D36B;
/* Text accent (metallic blue) */
--color-metal-blue:#2B5B9A;
--color-metal-blue-hover:#1F477C;
--shadow-sm:0 8px 18px rgba(2,25,69,0.14);
--shadow-md:0 14px 30px rgba(2,25,69,0.22);
/* Hero slider height (keeps all banner images inside the viewport area) */
--hero-height:clamp(198px, 38.8vh, 328px);
--glass-bg:rgba(255,255,255,0.62);
--glass-border:rgba(255,255,255,0.48);
--glass-blur:14px;
}

.my-services .section-title span,
.company-intro .intro-tag span,
.advantage-section .adv-title span,
.company-highlights .section-title span,
.expertise-section .section-title span,
.solutions-section .section-title span,
.industries-section .section-title span,
.timeline-section .section-title span 
{
  background: /*linear-gradient(90deg, #00ffc8, #00aaff, #7b2fff) !important*/linear-gradient(90deg, var(--c-teal), var(--c-cyan), var(--c-purple)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

body{
font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
font-size:16px;
line-height:1.65;
letter-spacing:0.1px;
color:var(--color-text);
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;

/* GLOBAL LIGHT BACKGROUND */
background:
/*linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-2) 70%, #FFF1F2 100%),
radial-gradient(900px 520px at 15% 10%, rgba(91,11,46,0.20), transparent 60%),
radial-gradient(720px 520px at 85% 15%, rgba(91,11,46,0.14), transparent 62%)*/#fff;

background-attachment:fixed;
}

/*-----------custom navbar-------*/

.nav-tabs-custom{
    display:flex;
    border-bottom:1px solid #dee2e6;
    margin-bottom:20px;
}

.tab-link{
    padding:10px 18px;
    cursor:pointer;
    font-size:16px;
    color:#495057;
    background:#fff;
    border:1px solid transparent;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    margin-bottom:-1px;
    transition:.2s;
}

.tab-link:hover{
    color:#0d6efd;
    border-color:#e9ecef #e9ecef #dee2e6;
}

.tab-link.active{
    color:#0d6efd;
    background:#fff;
    border-color:#dee2e6 #dee2e6 #fff;
    font-weight:600;
}

.tab-pane-custom{
    display:none;
}

.tab-pane-custom.active{
    display:block;
}    

/* Home palette (keeps slider images unchanged) */
body.page-home{
/* Clear background image + less frosty glass on Home */
/*--glass-bg:rgba(255,255,255,0.42);
--glass-border:rgba(255,255,255,0.28);
--glass-blur:10px;*/
background:
/*linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,228,230,0.26) 55%, rgba(255,241,242,0.30) 100%),
url('../../images/hero-bg.jpg')*/var(--c-bg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
color:rgba(255,255,255,0.92);
}

/* Reduce section height on Home (except banner) */
body.page-home .services,
body.page-home .why-us,
body.page-home .projects,
body.page-home .clients{
padding:54px 0;
}

body.page-home .cta-band{
padding:24px 0;
}

body.page-home .section-title{
margin-bottom:26px;
}

/* Home headings on photo background: ensure readability */
body.page-home .section-title{
/*color:#fff;
text-shadow:0 10px 28px rgba(0,0,0,0.35);
background:rgba(2,25,69,0.42);
border:1px solid rgba(255,255,255,0.22);
backdrop-filter:blur(10px);
padding:10px 18px;
border-radius:16px;*/
}

body.page-home .section-title::after{
display:none;
}

body.page-home .page-title{
color:#fff;
text-shadow:0 10px 28px rgba(0,0,0,0.35);
}

body.page-home .service-grid,
body.page-home .why-grid,
body.page-home .project-grid{
gap:22px;
}

/* Home: boost card readability over photo background */
body.page-home .service-card,
body.page-home .why-card{
background:rgba(255,255,255,0.72);
border:1px solid rgba(255,255,255,0.46);
backdrop-filter:blur(12px);
}

body.page-home .service-card h3,
body.page-home .why-card h3{
color:var(--color-navy);
}

/* Home: show 4 project cards in one row (desktop) */
body.page-home .project-grid{
grid-template-columns:repeat(4,1fr);
}

/* Home: show 4 service cards in one row (desktop) */
body.page-home .service-grid{
grid-template-columns:repeat(4,1fr);
}

@media(max-width:1100px){
body.page-home .service-grid{
grid-template-columns:repeat(2,1fr);
}
body.page-home .project-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:560px){
body.page-home .service-grid{
grid-template-columns:1fr;
}
body.page-home .project-grid{
grid-template-columns:1fr;
}
}

/* Home: reduce clients section height, add space before footer */
body.page-home .clients{
padding:18px 0 10px 0;
margin-bottom:0px;
}

body.page-home .logo-track img{
height:52px;
}

body.page-home .logo-slider{
margin-top:14px;
}

body.page-home .clients .section-title{
margin-bottom:14px;
}

/* Contact page: different background image */
body.page-contact{
background:/*
linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,228,230,0.04) 55%, rgba(255,241,242,0.06) 100%),*/
 url('../../images/banners/CONTAC.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

/* Make page backgrounds more visible (Services / Projects / About) */
body.page-services,
body.page-projects,
body.page-about{
--glass-bg:rgba(255,255,255,0.46);
--glass-border:rgba(255,255,255,0.26);
--glass-blur:8px;
}

body.page-services{
background:
/*linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,228,230,0.04) 55%, rgba(255,241,242,0.06) 100%),
  url('../../images/services.jpg');*/
  var(--c-bg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}



body.page-about .page-hero{
background:
/*linear-gradient(180deg, rgba(2,25,69,0.18) 0%, rgba(2,25,69,0.38) 100%),*/
url('../../images/banners/about.jpg');

}
body.page-services .hero{
background:
linear-gradient(180deg, rgba(2,25,69,0.18) 0%, rgba(2,25,69,0.38) 100%),
url('../../images/banners/SERVICES.jpg');

}
body.page-projects .hero{
background:
/*linear-gradient(180deg, rgba(2,25,69,0.18) 0%, rgba(2,25,69,0.38) 100%),*/
url('../../images/banners/PROJECT.jpg');

}
/* About page: top banner */
body.page-about .page-hero,
body.page-services .hero,
body.page-projects .hero
{
color:#fff !important;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
height:320px;
padding:0;
/*box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);*/
}
@media(max-width:768px)
{
body.page-about .page-hero {
  background-size:cover;
  max-height: 160px;
  max-width: 98.99%;
  padding-left: 10px;
}
}

/* About page heading placed below banner */
body.page-about .about-heading{
padding:28px 0 10px;
text-align:center;
background:transparent;
}

body.page-about .about-heading .page-title{
display:table;
margin:0 auto 8px;
color:#fff;
font-size:clamp(30px, 3.2vw, 40px);
font-weight:900;
letter-spacing:-0.4px;
text-shadow:0 14px 34px rgba(0,0,0,0.45);
}

body.page-about .about-heading .page-subtitle{
margin:0 auto;
max-width:820px;
color:rgba(255,255,255,0.92);
font-size:17px;
line-height:1.6;
text-shadow:0 12px 30px rgba(0,0,0,0.40);
}

body.page-about .about-intro,
body.page-about .company-highlights,
body.page-about .expertise-section,
body.page-about .solutions-section,
body.page-about .timeline-section,
body.page-about .industries-section
{
background:var(--c-services-bg)/*#031212*//*transparent*/;
}

body.page-about .about-text,
body.page-about .about-text *{
/*color:var(--color-text) !important;*/
color: #fff;
}

body.page-about .highlight-card,
body.page-about .expert-card,.solution-card{
/*background:var(--glass-bg);*/
background:linear-gradient(145deg, #111111, #0c0c0c);
color:var(--color-text);
border:1px solid var(--glass-border);
backdrop-filter:blur(var(--glass-blur));
}
/*
body.page-about .expert-card{
background: linear-gradient(145deg, #0d0d0d, #000000);
}
*/
body.page-about .section-title{
/*color:#fff;
text-shadow:0 12px 30px rgba(0,0,0,0.35);*/
}

body.page-projects{
background:/*
linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,228,230,0.04) 55%, rgba(255,241,242,0.06) 100%),
  url('../../images/projects.jpg');*/
  var(--c-bg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

body.page-about{
background:
 linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,228,230,0.04) 55%, rgba(255,241,242,0.06) 100%),
 url('../../images/aboutus.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

/* ===============================
PAGE THEME (Blue-based backgrounds)
=============================== */

body.page-services,
body.page-projects,
body.page-contact,
body.page-about{
--title-pill-bg:linear-gradient(100deg, rgba(2,25,69,0.68), rgba(91,11,46,0.40));
--title-pill-border:rgba(255,255,255,0.26);
}

body.page-services .page-title,
body.page-projects .page-title{
 /* Blue first then White (same feel as header/footer split) */
 --title-white:clamp(168px, 32vw, 420px);
 display:block;
 width:100%;
 text-align:center;
 margin:34px auto 22px;
 padding:12px 22px;
 border-radius:14px;
 position:relative;
 overflow:hidden;
 background:linear-gradient(110deg,
   var(--color-navy) 0%,
   var(--color-navy) calc(100% - var(--title-white)),
   #ffffff calc(100% - var(--title-white) + 1px),
   #ffffff 100%
 );
 border:1px solid rgba(255,255,255,0.16);
 box-shadow:0 18px 40px rgba(2,25,69,0.22);
 color:#fff;
 font-size:clamp(28px, 3.1vw, 36px);
 font-weight:800;
 letter-spacing:-0.3px;
 text-shadow:0 14px 34px rgba(0,0,0,0.45);
}

body.page-services .page-title::before,
body.page-projects .page-title::before{
 /* Tech-like diagonal separator near the split */
 content:"";
 position:absolute;
 top:0;
 bottom:0;
 left:calc(100% - var(--title-white) - 44px);
 width:140px;
 transform:none;
 background:
   linear-gradient(115deg, rgba(2,25,69,0.0) 0%, rgba(2,25,69,0.22) 60%, rgba(2,25,69,0.0) 100%),
   repeating-linear-gradient(
   115deg,
   transparent 0 12px,
   rgba(255,255,255,0.75) 12px 13px,
   rgba(91,11,46,0.55) 13px 14px,
   transparent 14px 26px
   ),
   radial-gradient(circle, rgba(255,255,255,0.45) 1.3px, transparent 1.6px),
   radial-gradient(circle, rgba(91,11,46,0.35) 1.2px, transparent 1.5px);
 background-size:auto, auto, 18px 18px, 26px 26px;
 background-position:0 0, 0 0, 8px 10px, 14px 6px;
 opacity:0.95;
 pointer-events:none;
}

body.page-services .section-title,
body.page-projects .section-title,
body.page-contact .section-title,
body.page-about .section-title{
 color:/*#fff*/ linear-gradient(90deg, var(--c-teal), var(--c-cyan), var(--c-purple)) !important;
 /*background:transparent !important;*/
 border:0;
 padding:0 0 10px 0;
 border-radius:0;
 text-shadow:0 14px 34px rgba(0,0,0,0.45);
}

/* Contact: "Get In Touch" heading in maroon */

body.page-contact .contact-section .section-title{
/* color:var(--color-accent);
 text-shadow:0 14px 34px rgba(255,255,255,0.18), 0 14px 34px rgba(0,0,0,0.30);*/
 /* Move up ~2 lines + add frosty readability panel */
 /*display:table;
 position:relative;
 z-index:5;
 margin:-72px auto 90px;
 padding:10px 16px 12px;
 background:rgba(255,255,255,0.34);
 border:1px solid rgba(255,255,255,0.28);
 border-radius:14px;
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);*/
}

@media(max-width:900px){
body.page-contact .contact-section .section-title{
margin:-1px auto 12px;
}
}

body.page-contact .contact-section .section-title::after{
}

body.page-services .section-title::after,
body.page-projects .section-title::after,
body.page-contact .section-title::after,
body.page-about .section-title::after{
 width:86px;
 height:4px;
 opacity:0.95;
}

body.page-contact .hero.small-hero{
 height:320px;
 background:/*linear-gradient(
  180deg,
  rgba(143, 188, 143, 0.35) 0%,
  rgba(143, 188, 143, 0.55) 100%
)*/
 /*linear-gradient(180deg, rgba(2,25,69,0.35) 0%, rgba(2,25,69,0.55) 100%)*//*linear-gradient(180deg, rgba(2,25,69,0.18) 0%, rgba(2,25,69,0.38) 100%)*/
 url('../../images/banners/contac.png');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 background-attachment:scroll;*/
}

body.page-contact .hero.small-hero .caption{
  top: 50% !important;
  left: auto !important;
  right: 6% !important;
  transform: translateY(-50%) !important;
  text-align: right !important;
  animation: slideInRight 1s var(--ease-out, ease-out) forwards !important;
}
@keyframes slideInRight{
  0%{
    opacity: 0;
    transform: translate(120px, -50%);
  }
  100%{
    opacity: 1;
    transform: translate(0, -50%);
  }
}
.contact-hero .caption .contact-us-title{
  color: #ff8a00;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-shadow:
    1px 1px 0 #c96500,
    2px 2px 0 #c96500,
    3px 3px 0 #c96500,
    4px 4px 2px #c96500,
    5px 5px 10px rgba(0,0,0,0.55);
}

.contact-hero .caption .contact-subtitle{
  font-size: clamp(18px, 2.2vw, 28px);
  color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}

/* Mobile: keep it centered/readable, drop the 3D depth a bit */
@media(max-width: 900px){
  body.page-contact .hero.small-hero .caption{
    right: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
  }
  @keyframes slideInRight{
    0%{ opacity:0; transform: translate(-50%, -20%); }
    100%{ opacity:1; transform: translate(-50%, -50%); }
  }
  .contact-hero .caption .contact-us-title{
    text-shadow:
      1px 1px 0 #c96500,
      2px 2px 0 #c96500,
      3px 3px 6px rgba(0,0,0,0.5);
  }
}
@media(max-width: 768px){
  body.page-contact .hero.small-hero .caption{
    left:50%;
  }
  /*  body.page-contact .hero.small-hero .caption h1{
      top:20%;
    }*/
}
body.page-services .hero .caption,body.page-projects .hero .caption{
  position:absolute;
    left:40%;
    top:50%;
}
@media(max-width: 768px){
  body.page-services .hero .caption,body.page-projects .hero .caption{
    left:12%;
    top:30%;

  }
}

body.page-about .page-hero h1,
body.page-about .page-hero p{
display:inline-block;
background:rgba(2,25,69,0.38);
border:1px solid rgba(255,255,255,0.20);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
padding:10px 16px;
border-radius:14px;
color:#fff !important;
text-shadow:0 12px 30px rgba(0,0,0,0.35);
}

body.page-about .page-hero p{
margin-top:10px;
padding:8px 14px;
}

/* About: make long text readable on photo background */
body.page-about .about-text{
/*background:rgba(255,255,255,0.50);*/
background:/*linear-gradient(145deg, #111111, #0c0c0c)*/ linear-gradient(145deg, #1c1f26, #15181e);
border:1px solid rgba(255,255,255,0.26);
border-radius:14px;
padding:22px 22px;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 14px 34px rgba(2,25,69,0.14);
width: 100%;
}

/* Contact: lift form panel as glass */
body.page-contact .contact-form{
background:rgba(255,255,255,0.60);
border:1px solid rgba(255,255,255,0.26);
border-radius:14px;
padding:22px;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 14px 34px rgba(2,25,69,0.14);
}

/* ===============================
TYPOGRAPHY
=============================== */

h1,h2,h3,h4,h5,h6{
font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
font-weight:700;
line-height:1.2;
letter-spacing:-0.2px;
color: inherit;
}



.advantage-card h2{
    color:rgba(255,255,255,0.6);
}

h1{font-size:clamp(25px, 3vw, 35px);}
h2{font-size:clamp(26px, 3.2vw, 36px);}
h3{font-size:22px;}
h4{font-size:18px;}

p{
font-size:16px;
line-height:1.75;
/*color: white;*/
}

small{
font-size:13px;
}

a{
color:/*inherit*/#fff;
text-underline-offset:3px;
}

/* ===============================
CONTAINER
=============================== */

.container{
width:90%;
max-width:1200px;
margin:auto;
}

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


.header{
/* White should cover only the brand area (logo + name) */
--split-header:clamp(340px, 42vw, 560px);
/*background:linear-gradient(110deg, #ffffff 0%, #ffffff var(--split-header), var(--color-navy) calc(var(--split-header) + 1px), var(--color-navy) 100%);*/
background: linear-gradient(
  110deg,
  #ffffff 0%,
  #ffffff var(--split-header),
  /*#006064*/var(--c-panel) calc(var(--split-header) + 1px),
  /*#006064*/var(--c-panel) 100%
);
color:white;
/*padding:15px 0;*/
position:sticky;
top:0;
z-index:1500;
overflow:hidden;

 height: 60px;          /* 👈 FIXED height */
    padding: 0;            /* ❗ remove vertical padding */
    display: flex;
/*    align-items: center;*/
}

.header .container{
display:flex;
/*justify-content:space-between;
align-items:left;*/
position:relative;
z-index:1;
height: 100%;
}

/* Diagonal // separator between white and navy */
.header::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:calc(var(--split-header) - 44px);
width:140px;
pointer-events:none;
/*background:
linear-gradient(115deg, rgba(2,25,69,0.0) 0%, rgba(2,25,69,0.22) 60%, rgba(2,25,69,0.0) 100%),
repeating-linear-gradient(
115deg,
transparent 0 12px,
rgba(255,255,255,0.75) 12px 13px,
rgba(91,11,46,0.55) 13px 14px,
transparent 14px 26px
),
radial-gradient(circle, rgba(255,255,255,0.45) 1.3px, transparent 1.6px),
radial-gradient(circle, rgba(91,11,46,0.35) 1.2px, transparent 1.5px);*/
background-size:auto, auto, 18px 18px, 26px 26px;
background-position:0 0, 0 0, 8px 10px, 14px 6px;
opacity:0.95;
}

.logo{
font-size:22px;
font-weight:bold;
margin:0;
}
.logo-area{
display:flex;
align-items:center;
gap:10px; /* controls space between image and text */
position:relative;
padding:8px 18px 8px 12px;
border-radius:18px;
}

/* White + navy mixed brand backdrop (behind logo area) */
.logo-area::before{
content:"";
position:absolute;
top:-6px;
bottom:-6px;
left:-12px;
right:-44px;
border-radius:20px;
background:
linear-gradient(
105deg,
rgba(255,255,255,0.98) 0%,
rgba(255,255,255,0.98) 52%,
rgba(255,255,255,0.65) 60%,
rgba(255,255,255,0.0) 76%
),
radial-gradient(420px 120px at 18% 50%, rgba(2,25,69,0.10), rgba(2,25,69,0.0) 70%);
border:1px solid rgba(2,25,69,0.10);
box-shadow:0 12px 26px rgba(0,0,0,0.16);
}
.logo-area > *{
position:relative;
z-index:1;
}

.header .logo-area h2.logo{
color:var(--color-navy);
margin:0;
font-size:22px;
line-height:1.1;
white-space:nowrap;
}

.header .logo-area img{
display:block;
border-radius:10px;
height: 100%;      /* fill header */
    max-height: 90px;  /* safety limit */
    width: auto;
    object-fit: cover;
}

/* Header already has a white region; keep logo clean */
.header .logo-area{
padding-top:20px;
border-radius:0;
flex-direction:row;
align-items:center;
gap:12px;
max-width:calc(var(--split-header) - 72px);
}

.header .logo-area::before{
display:none;
}

/* Keep the slogan/name readable on both white + near separator */
.header .logo-area h2.logo{
text-shadow:0 1px 0 rgba(255,255,255,0.55);
}
.header ul{
display:flex;
list-style:none;
}

.header ul li{
margin-left:20px;
}

.header ul li a{
/*color:white;
text-decoration:none;
font-weight:500;
font-size: 17px;*/
font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.header ul li a{
position:relative;
}

.header ul li a::after
{
content:"";
position:absolute;
left:0;
bottom:-5px;

width:0%;
height:2px;

background:/*var(--color-primary)*/;

transition:0.3s;

}

.header ul li a:hover::after
{

width:100%;

}

.site-nav{
display:flex;
}

.nav-toggle{
display:none;
background:transparent;
border:1px solid rgba(255,255,255,0.22);
border-radius:10px;
padding:0px;
cursor:pointer;
}

.nav-toggle-bar{
display:block;
width:22px;
height:2px;
background:#fff;
margin:4px 0;
border-radius:2px;
}

.nav-list{
display:flex;
list-style:none;
}

.nav-list li{
margin-left:20px;
}

.main{
display:block;
}

/*@media(max-width:900px){
.nav-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
}

.site-nav{
display:none;
position:absolute;
left:50%;
right:0;
top:100%;
background:rgba(2,25,69,0.98);
backdrop-filter:blur(8px);
border-top:1px solid rgba(255,255,255,0.12);
padding:12px 0;
}

.header.is-open .site-nav{
display:block;
}

.site-nav .nav-list{
flex-direction:column;
gap:10px;
padding:0 18px;
}

.site-nav .nav-list li{
margin-left:0;
}

.site-nav .nav-list a{
display:block;
padding:10px 10px;
border-radius:10px;
}

.site-nav .nav-list a:hover{
background:rgba(255,255,255,0.08);
}

.site-nav .nav-list a::after{
display:none;
}

.header{
position:sticky;
}

.header .container{
position:relative;
}


}
*/
.header ul li a.active::after{
width:100%;
}



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

.hero{
position:relative;
height:var(--hero-height);
overflow:hidden;
}

/*new addition to hero */

.hero::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:/*linear-gradient(
rgba(0,0,0,0.55),
rgba(0,0,0,0.25),
rgba(0,0,0,0.55)
);*/

z-index:1;

}

/*================================= */


.slider{
position:relative;
//height:100%;
 height:100%;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:1.2s ease-in-out;
}

.slide.active{
opacity:1;
}

.slide img{
width:100%;
 height:100%;
 display:block;
object-fit:contain;
 object-position:center;
transform:scale(1);

transition:transform 6s ease;
}

.slide.active img{

transform:scale(1.08);

}



/*.caption{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:white;
text-align:center;
background:rgba(0,0,0,0.45);
padding:30px;
border-radius:10px;
}

.caption h1{
font-size:40px;
margin-bottom:10px;
}

.caption{

position:absolute;
top:50%;
left:50%;

transform:translate(-50%,-50%);

color:white;

text-align:center;

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

padding:30px;

border-radius:10px;

animation:fadeUp 1.2s ease;

}*/


.caption{

position:absolute;

top:46px;
right:28px;
left:auto;
white-space:normal;
transform:none;

color:#fff;

text-align:right;

padding:18px 18px;

border-radius:10px;

z-index:2;

animation:fadeUp 1.2s ease;

background:rgba(0,0,0,0.18);
backdrop-filter:blur(8px);
max-width:250px;
width:auto;

  position: absolute;
  z-index: 10;
  left: clamp(280px, 150vw, 845px);
  bottom: 18%;
  max-width: 250px;
  height: 175px;
}


.caption h1{
font-size:clamp(20px, 2.2vw, 32px);
margin-bottom:10px;
//font-family: Helvetica, Arial, sans-serif !important;
font-family: inherit;
}
.caption p{
font-size:clamp(14px, 1.8vw, 16px);
}
.caption h1,
.caption p{

text-shadow:0 3px 10px rgba(0,0,0,0.6);

}
.caption h1 em {
  font-style: normal;
  color: var(--c-cyan);
}

@keyframes fadeUp{

0%{
opacity:0;
transform:translate(-50%, -30%);
}

100%{
opacity:1;
transform:translate(-50%, -50%);
}

}

body.page-contact .hero.small-hero .caption{
 background:transparent/*rgba(0,0,0,0.35)*/;
 border:none/*1px solid rgba(255,255,255,0.18)*/;
 backdrop-filter:blur(0px);
}
@media(max-width: 768px)
{
  body.page-contact .hero.small-hero .caption
  {
    margin-top: 0;
  }
}


/* ===============================
SECTION TITLE
=============================== */

.section-title{
 text-align:center;
 font-size:32px;
 margin:0 auto 40px;
/* color:var(--color-navy);*/
 position:relative;
 display:table;
 padding-bottom:10px;
}

.section-title::after{
content:"";
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
width:64px;
height:4px;
border-radius:999px;
background:linear-gradient(90deg, var(--color-primary), var(--color-accent));
opacity:0.95;
}

/* ===============================
SERVICES SECTION
=============================== */

.services{
padding:80px 0;
background:transparent;
/* backdrop-filter:blur(2px); */
}



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

.service-card{

background:var(--glass-bg);
color:var(--color-text);
padding:30px;
border-radius:10px;

box-shadow:var(--shadow-sm);
border:1px solid var(--glass-border);
backdrop-filter:blur(var(--glass-blur));

transition:0.3s;
}

/*.service-card:hover{
transform:translateY(-8px);
}*/

.service-card:hover{

transform:translateY(-10px) scale(1.02);

box-shadow:0 15px 30px rgba(0,0,0,0.2);

}

.service-card h3{
margin-bottom:15px;
color:var(--color-metal-blue);
}

.service-card p{
color:rgba(17,24,39,0.88);
}


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

.why-us{
padding:80px 0;
background:transparent;
backdrop-filter:blur(6px);
}

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.why-card{

background:var(--glass-bg);
color:var(--color-text);

padding:30px;
border-radius:10px;

box-shadow:var(--shadow-sm);
border:1px solid var(--glass-border);
backdrop-filter:blur(var(--glass-blur));

text-align:center;

transition:0.3s;
}

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

.why-card h3{
margin-bottom:15px;
color:var(--color-metal-blue);
}

.why-card p{
color:rgba(17,24,39,0.88);
}

/* ===============================
PROJECTS
=============================== */

.projects{
padding:80px 0;
background:transparent;
/* backdrop-filter:blur(2px); */
}

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

.project-card{

background:var(--glass-bg);
color:var(--color-text);

border-radius:10px;

overflow:hidden;

box-shadow:var(--shadow-sm);
border:1px solid var(--glass-border);
backdrop-filter:blur(var(--glass-blur));
}

.project-card img{
width:100%;
height:200px;
object-fit:cover;
}

.project-card h3{
padding:15px;
}

.project-card img{

width:100%;
height:200px;
object-fit:contain;

transition:0.4s;
aspect-ratio:16 / 10;

}

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

/* ===============================
GLASS CARD PATTERN (Tech overlay)
Covers the full card (no blue/white split)
=============================== */

:root{
--card-tech-opacity:0.30;
--card-stripe-gap:14px;
}

.service-card,
.why-card,
.project-card,
.contact-right,
.contact-form,
.highlight-card,
.expert-card,
.solution-card,
.industry,
.timeline-item,
body.page-services .service-row,
body.page-projects .project{
position:relative;
overflow:hidden;
}

.service-card > *,
.why-card > *,
.project-card > *,
.contact-right > *,
.contact-form > *,
.highlight-card > *,
.expert-card > *,
.solution-card > *,
.industry > *,
.timeline-item > *,
body.page-services .service-row > *,
body.page-projects .project > *{
position:relative;
z-index:2;
}

.service-card::before,
.why-card::before,
.project-card::before,
.contact-right::before,
.contact-form::before,
.highlight-card::before,
.expert-card::before,
.solution-card::before,
.industry::before,
.timeline-item::before,
body.page-services .service-row::before,
body.page-projects .project::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:/*
repeating-linear-gradient(
115deg,
transparent 0 calc(var(--card-stripe-gap) - 2px),
rgba(212,175,55,0.72) calc(var(--card-stripe-gap) - 2px) calc(var(--card-stripe-gap) - 1px),
rgba(91,11,46,0.52) calc(var(--card-stripe-gap) - 1px) var(--card-stripe-gap),
transparent var(--card-stripe-gap) calc(var(--card-stripe-gap) * 2)
),*/
linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(2,25,69,0.00) 45%, rgba(2,25,69,0.08) 100%);
background-size:auto, auto;
background-position:0 0, 0 0;
opacity:var(--card-tech-opacity);
z-index:1;
pointer-events:none;
}


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

 .btn{
display:inline-block;
margin-top:25px;
padding:12px 28px;
background:var(--color-primary);
color:white;
text-decoration:none;
border-radius:6px;
}

.center{
text-align:center;
}*/


.btn,
button.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:25px;
padding:12px 20px;
background:linear-gradient(135deg, var(--color-primary), var(--color-accent));
color:white;
text-decoration:none;
border-radius:10px;
border:1px solid rgba(255,255,255,0.22);
cursor:pointer;
transition:0.25s ease;
box-shadow:0 10px 24px rgba(2,25,69,0.18);
font-weight:700;
}

@media(max-width:900px){
.caption{
top:50%;
left:50%;
right:auto;
transform:translate(-50%,-50%);
text-align:center;
background:rgba(0,0,0,0.35);
max-width:720px;
width:calc(100% - 36px);
padding:22px 20px;
}
}

.btn:hover,
button.btn:hover{
background:linear-gradient(135deg, var(--color-primary-hover), var(--color-accent-hover));
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(2,25,69,0.25);
}

.btn:active,
button.btn:active{
transform:translateY(0);
}

.btn.btn-outline:hover,
button.btn.btn-outline:hover{
background:rgba(43,91,154,0.10);
border-color:rgba(43,91,154,0.70);
}

.btn.btn-sm,
button.btn.btn-sm{
padding:10px 14px;
border-radius:9px;
margin-top:10px;
font-size:14px;
box-shadow:0 8px 18px rgba(2,25,69,0.16);
}

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

.cta-band{
padding:64px 0;
background:rgba(2,25,69,0.86);
backdrop-filter:blur(6px);
color:#fff;
}

.cta-band-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
}

.cta-band h2{
margin:0 0 8px 0;
color:#fff;
}

.cta-band p{
margin:0;
color:rgba(255,255,255,0.86);
}

.cta-band-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:flex-end;
}

.cta-band-actions .btn{
margin-top:0;
}

/*.cta-band .btn.btn-outline,
.cta-band button.btn.btn-outline{
border-color:rgba(255,255,255,0.7);
color:#fff;
}*/

.cta-band .btn.btn-outline:hover,
.cta-band button.btn.btn-outline:hover{
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.85);
}

@media(max-width:768px){
.cta-band-inner{
flex-direction:column;
text-align:center;
}
.cta-band-actions{
justify-content:center;
}
}

/* ===============================
CLIENT LOGO SLIDER
=============================== */

.clients{
padding:80px 0;
background:transparent;
backdrop-filter:none;
text-align:center;
}

.logo-slider{
overflow:hidden;
margin-top:30px;
}

.logo-track{
display:flex;
gap:60px;
animation:scroll 18s linear infinite;
}

.logo-track img{
height:60px;
}

@keyframes scroll{

0%{
transform:translateX(0);
}

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

}

.logo-track img{

height:60px;

opacity:0.7;

transition:0.3s;

}

.logo-track img:hover{

opacity:1;

transform:scale(1.1);

}


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

.footer{
/*background:#111;
background:var(--color-navy);*/
color:white;
text-align:center;
padding:20px;
margin-top:60px;
}

/* ===============================
Smooth Page Scroll
=============================== */

html{
scroll-behavior:smooth;
}

/* CONTACT PAGE */
/*
.contact-section{

padding:80px 0;

background:transparent;
backdrop-filter:none;

}
*/
/*.contact-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:50px;

}

.contact-left{

display:flex;
flex-direction:column;
gap:30px;

}

.contact-right{

background:var(--glass-bg);
color:var(--color-text);

padding:30px;

border-radius:10px;

box-shadow:var(--shadow-sm);
border:1px solid var(--glass-border);
backdrop-filter:blur(var(--glass-blur));

}

.contact-right h3{

margin-top:20px;

color:var(--color-metal-blue);

}

.contact-form form{

display:flex;
flex-direction:column;
gap:15px;

}

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

padding:12px;

border-radius:6px;

border:1px solid rgba(15,23,42,0.12);
background:var(--color-surface);
color:var(--color-text);

}

.contact-form textarea{

height:140px;

resize:none;

}
*/
/* FOOTER */

.footer-grid{

display:grid;

grid-template-columns:1fr 1fr 1fr;

gap:40px;

margin-bottom:20px;
}

.footer-links{

display:flex;
flex-wrap:wrap;
gap:10px 16px;
justify-content:center;/*flex-start*/;
list-style:none;

padding:0;

}

.footer-links li{

margin:0;

}

.footer-links a{

color:white;

text-decoration:none;

}

.footer-links a:hover{

text-decoration:underline;

}

.footer{

/*background:#111;
background:var(--color-navy);*/
color:white;

padding:28px 0 14px 0;

}

/* Footer two-tone base (white -> navy) with // separator */
.footer{
/* Keep the separator just after logo + slogan */
--split-footer:clamp(300px, 28vw, 400px);
/*position:relative;*/
overflow:hidden;
/*background:linear-gradient(110deg, #ffffff 0%, #ffffff var(--split-footer), var(--color-navy) calc(var(--split-footer) + 1px), var(--color-navy) 100%);*/
background: linear-gradient(
  110deg,
  #ffffff 0%,
  #ffffff var(--split-footer),
  /*#006064*/var(--c-panel) calc(var(--split-footer) + 1px),
  /*#006064*/ var(--c-panel) 100%
);

margin-top: 0;

 height:85px;          /* 👈 FIXED height */
    padding: 2px 4px;            /* ❗ remove vertical padding */
   /* display: flex;
    flex-direction: column;
    align-items: center;*/
 /*   margin-bottom: 0;*/
    position:relative;
z-index:9999;
}

.footer::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:calc(var(--split-footer) - 44px);
width:140px;
pointer-events:none;
/*background:
linear-gradient(115deg, rgba(2,25,69,0.0) 0%, rgba(2,25,69,0.22) 60%, rgba(2,25,69,0.0) 100%),
repeating-linear-gradient(
115deg,
transparent 0 12px,
rgba(255,255,255,0.75) 12px 13px,
rgba(91,11,46,0.55) 13px 14px,
transparent 14px 26px
),
radial-gradient(circle, rgba(255,255,255,0.45) 1.3px, transparent 1.6px),
radial-gradient(circle, rgba(91,11,46,0.35) 1.2px, transparent 1.5px);*/
background-size:auto, auto, 18px 18px, 26px 26px;
background-position:0 0, 0 0, 8px 10px, 14px 6px;
opacity:0.95;
}

.footer .footer-grid,
.footer .copyright{
position:relative;
/*z-index:1;*/
}

/* Make the first (logo) column readable on the white region */
.footer .footer-grid > div:first-child{
color:var(--color-navy);
max-width:calc(var(--split-footer) - 56px);
}

.footer .footer-grid > div:first-child p{
color:rgba(2,25,69,0.82);
}

/* Make footer logo + slogan sit comfortably inside the white region */
.footer .footer-grid{
grid-template-columns:minmax(240px, calc(var(--split-footer) - 48px)) 1.35fr 1fr;
align-items:start;
}

/* Nudge the brand block left and give Quick Links more room */
.footer .footer-grid > div:first-child{
margin-left:-10px;
padding-right:18px;
}
@media(max-width:1100px){
.footer .footer-grid > div:first-child{
margin-left:39px;
}
}
/* Quick links: keep in a single row on desktop */
.footer .footer-links{
flex-wrap:nowrap;
gap:10px 14px;
}

@media(max-width:1100px){
.footer .footer-links{
flex-wrap:wrap;
}
}

/* Footer logo: same mixed two-color backdrop */
.footer .logo{
position:relative;
display:inline-block;
padding:10px 16px;
border-radius:18px;
line-height:0;
}

.footer .logo::before{
content:"";
position:absolute;
top:-6px;
bottom:-6px;
left:-12px;
right:-44px;
border-radius:20px;
background:
linear-gradient(
105deg,
rgba(255,255,255,0.98) 0%,
rgba(255,255,255,0.98) 52%,
rgba(255,255,255,0.65) 60%,
rgba(255,255,255,0.0) 76%
),
radial-gradient(420px 120px at 18% 50%, rgba(2,25,69,0.10), rgba(2,25,69,0.0) 70%);
border:1px solid rgba(2,25,69,0.10);
box-shadow:0 12px 26px rgba(0,0,0,0.16);
}

.footer .logo img{
position:relative;
z-index:1;
display:block;
/*border-radius:10px;*/

  height: 20%;      /* fill header */
    max-height: 60px;  /* safety limit */
    width: 140px;
    object-fit:cover;
}

/* Footer already has a white region; keep logo clean */
.footer .logo{
padding:0;
border-radius:0;
}

.footer .logo::before{
display:none;
}
.footer .logo p{
font-size: 12px;
}
.copyright{

text-align:center;

/*margin-top:0px;*/

}

.footer h3{
font-size:14px;
margin:0 0 10px 0;
}

.footer p,
.footer a{
font-size:12px;
}

@media(max-width:768px){
.footer-grid{
grid-template-columns:1fr;
gap:18px;
}
.footer-links{
justify-content:center;
}
}

/*style 1 Css*/
.page-hero{
padding:120px 20px 80px;
text-align:center;
color:#fff;
}

.about-intro{
padding:80px 20px;
background:rgba(0,0,0,0.55);
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.about-image img{
width:10%;
border-radius:10px;
}
.about-text p{
font-size:17px;
}

@media(max-width: 768px){
   /*.about-image img{
    width:180px;
    height: 100px;
   }*/

   .industry-grid {
    display: grid;
   /* flex-wrap: wrap;*/
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

    .about-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about-text.futuristic {
        order: 1;
        width: 100%;
    }

    .about-image {
        order: 2;
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }

    .about-image img {
        max-width: 250px;
        width: 100%;
        height: auto;
    }
}

.section-title{
text-align:center;
margin-bottom:40px;
/*color:#fff;*/
}

.company-highlights{
padding:70px 20px;
/*background:rgba(0,0,0,0.5);*/
}

.highlight-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.highlight-card{
background:rgba(255,255,255,0.08);
padding:30px;
text-align:center;
border-radius:8px;
color:#fff;
white-space:nowrap;
}

.highlight-card h3{
font-size:32px;
margin-bottom:10px;
}
.highlight-card p{
font-size:17px;
}
.expertise-section{
padding:80px 20px;
background:rgba(0,0,0,0.55);
}

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

.expert-card{
background:rgba(255,255,255,0.08);
padding:25px;
border-radius:8px;
color:#fff;
}
.expert-card p{
font-size:17px;
}

.solutions-section{
padding:80px 20px;
background:rgba(0,0,0,0.6);
}

.solutions-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.solution-card{
background:rgba(255,255,255,0.08);
padding:20px;
border-radius:6px;
text-align:center;
color:#fff;
}

.industries-section{
padding:80px 20px;
/*background:rgba(0,0,0,0.55);*/
}

.industry-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.industry{
background:rgba(255,255,255,0.08);
padding:15px;
text-align:center;
border-radius:6px;
color:#fff;
}
/*
.timeline-section{
padding:80px 20px;
background:rgba(0,0,0,0.6);
}
*/
.timeline{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.timeline-item{
background:rgba(255,255,255,0.08);
padding:20px;
border-radius:8px;
color:#fff;
}

.timeline-item p{
font-size:13px;
}
/* ===============================
NAV HELPERS
=============================== */

.nav-flex{
display:flex;
justify-content:space-between;
align-items:center;
}

.header ul li a.active::after{
width:100%;
}

.btn-red{
background:transparent/*var(--color-accent)*/;
color:white;
padding:10px 16px;
text-decoration:none;
border-radius:8px;
}

.btn-red:hover{
background:/*var(--color-accent-hover)*/;
}

.main{
display:block;
}

.hero.small-hero{
height:240px;
}

.hero.small-hero .caption{
top:50%;
left:50%;
transform:translate(-50%,-50%);
white-space:normal;
color:#fff;
background:rgba(0,0,0,0.35);
max-width:820px;
}

.hero.small-hero .caption h1,
.hero.small-hero .caption p{
color:#fff;
}


@media(max-width:768px){

/* Fix hero height */
.hero{
    height: 260px;   /* adjust if needed */
    margin: 0;
    padding:0;
}

/* Ensure slider fills properly */
.slider,
.slide{
    height: 100%;
}

/* Fix image scaling */
.slide img{
    width: 100%;
    height:100%;
    object-fit: cover;
    margin: 0;        /* ❌ remove spacing */
    padding: 0;       /* ❌ remove spacing */
}

/* Improve caption positioning */
.caption{
    top: 35%;
    left: 12%;
    transform: translate(-10%, -10%);
    text-align: center;
    width: calc(100% - 20px);
    max-width: 95%;
    padding: 15px;
}

/* Better text size */
.caption h1 em{
    font-size: 27px;
}

.caption p{
    font-size: 5px;
}

}

@media(max-width:768px){

body.page-about .page-hero, 
body.page-services .hero,
 body.page-projects .hero
{
    height: 105px; /* let height grow naturally */
}

.slider,
.slide{
   /* height: 100px;*/
}

.hero img{
    width: 100%;
    height: 100%;   /* maintain original ratio */
    object-fit: contain;
}

}

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

/* Hide toggle on desktop */
.nav-toggle {
    display: none;
}
   .close-menu{
    display: none;
}
/* MOBILE ONLY */
@media(max-width:900px){

.nav-toggle{
    display:block;
    position:absolute;
    right:20px;
    top:35px;
    /*z-index:3000;*/
    font-size:26px;
   /* background:none;*/
    border:none;
    color:white;
    cursor:pointer;
}

/* SLIDE MENU */
.site-nav{
    display:block !important;
    position:fixed;
    top:0;
    right:-100%;
    width:260px;
    height:100vh;
    background:#021945;
    transition:right 0.3s ease;
    z-index:2001;
    padding-top:90px;
}

/* SHOW */
.site-nav.active{
    right:0 !important;
}

/* MENU ITEMS */
.nav-list{
    display:flex;
    flex-direction:column !important;
}

.nav-list li{
    margin:0;
}

.nav-list a{
    display:block;
    padding:15px;
    color:white;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

/* OVERLAY */
.header::after{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    opacity:0;
    visibility:hidden;
    transition:0.3s;
    /*z-index:2000;*/
}

.header.menu-open::after{
    opacity:1;
    visibility:visible;
}

.header{
--split-header:clamp(280px, 60vw, 420px);
}

.header .logo-area img{

height: 100%;      /* fill header */
    max-height: 80px;  /* safety limit */
   
   }

   .close-menu{
    display: block;
    position:absolute;
    top:20px;
    right:20px;
    font-size:22px;
    background:none;
    border:none;
    color:white;
    cursor:pointer;
}
}



@media(max-width:768px){

/* ===== FOOTER BASE ===== */
.footer{
    height:auto;
    padding:20px 15px;

    /* 👇 keep split like desktop */
    --split-footer:100%;

    background: linear-gradient(
        180deg,
        #ffffff 20%,
        #ffffff 40%,      /* 👈 white logo section */
        /*#006064*/var(--c-panel) 40%,      /* 👈 rest colored */
        /*#006064*/var(--c-panel) 100%
    );
    position:relative;
}

/* remove desktop decorative line */
.footer::before{
    display:none;
}

/* ===== GRID ===== */
.footer .footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
  }

/* ===== LOGO SECTION (WHITE AREA) ===== */
.footer .footer-grid > div:first-child{
    color:#002f34;              /* dark text on white */
}

.footer .footer-grid > div:first-child p{
    color:rgba(0,0,0,0.7);
}

/* ===== OTHER SECTIONS (CYAN AREA) ===== */
.footer .footer-grid > div:not(:first-child){
    color:#ffffff;
}

.footer .footer-grid > div:not(:first-child) a{
    color:#ffffff;
}

/* ===== LOGO FIX ===== */
.footer .logo img{
    width:100%;
    max-width:220px;
    height:auto;
    object-fit:contain;
   /* margin:0 auto;
   margin-left: 43px;*/
   margin: 0;
}

/* ===== LINKS ===== */
/*.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
    padding:0;
    list-style:none;
}*/

/* ===== TEXT ===== */
.footer h3{
    font-size:16px;
    margin:10px 0;
}

.footer p,
.footer a{
    font-size:8px;
}
.footer logo{
padding-left: 0;
}
/* ===== COPYRIGHT ===== */
.footer copyright{
    margin-top:15px;
    font-size:13px;
    color:#ffffff;
}

}


/*----- for grid style -----*/
 .my-services {
  background: var(--c-services-bg)/*#013f4f*/;
  /*padding: 100px 40px;
  position: relative;
  overflow: hidden;*/
  margin-bottom: 0px !important;
}

.my-services {
  padding: 60px 24px !important;
  font-family: 'Rajdhani', sans-serif !important;
  position: relative !important;
  overflow: hidden !important;
}
.my-services .container {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
/* animated grid */
/*.my-services .grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridDrift 30s linear infinite;
  z-index: 0;
}*/
.my-services .grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,200,0.12) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(0,255,200,0.12) 1.5px, transparent 1.5px);
  background-size: 50px 50px;
  pointer-events: none;
  animation: svcGridPulse 6s ease-in-out infinite;
  z-index: 0;
  filter: brightness(0.8);
}

@keyframes svcGridPulse {
  0%,100% { opacity: 0.8; }
  50% { opacity: 1; }
}
/* glow orb */
.my-services::after {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(0,212,255,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}


@media(max-width:480px){
  .my-services .service-grid { grid-template-columns: 1fr !important; }
  .my-services .service-card .svc-left { width: 110px !important; min-width: 100px !important; }
}

/* ===========================
   BUTTON CONTAINER
=========================== */
.my-services .service-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    gap: 24px !important;

   /* margin:0px 0 !important;*/
    padding: 0 !important;

    width: 100% !important;
    height: auto !important;
    min-height: auto !important;

    border: none !important;
    position: relative !important;
}

/* ===========================
   PREMIUM BUTTONS
=========================== */
.action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;

    min-width: 240px;
    height: 64px;

    padding: 0 32px;
    text-decoration: none !important;

    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;

   /* border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.15);*/

    position: relative;
    overflow: hidden;

    backdrop-filter: blur(12px);

    transition: all .35s ease;

    /*box-shadow:
        0 10px 30px rgba(0,0,0,.25),
        inset 0 1px 1px rgba(255,255,255,.15);*/

    flex: 0 0 auto !important;
}

/* Download Button */
.action-btn.download {
   /* background: linear-gradient(90deg, var(--c-teal), var(--c-cyan), var(--c-purple))*//*linear-gradient(
        135deg,
        #00c6ff 0%,
        #0072ff 100%
    )*/;
}

/* Upload Button */
.action-btn.upload {
   /* background:linear-gradient(90deg, var(--c-teal), var(--c-cyan), var(--c-purple))*/ /*linear-gradient(
        135deg,
        #00d084 0%,
        #00a86b 100%
    )*/;
}

/* Icons */
.action-btn .icon {
    font-size: 20px;
    transition: transform .3s ease;
}

/* Shine Effect */
.action-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;

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

    transition: .7s;
}

.action-btn:hover::before {
    left: 130%;
}

/* Hover */
.action-btn:hover {
    transform: translateY(-5px);
    box-shadow:
        0 18px 40px rgba(0,198,255,.25),
        0 0 25px rgba(255,255,255,.08);
}

.action-btn:hover .icon {
    transform: scale(1.15);
}

/* Mobile */
@media (max-width: 576px) {
    .my-services .service-grid {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .action-btn {
        width: 100% !important;
        max-width: 320px !important;
    }
}

/* Login Card */
.login-card {
    width: 100%;
    height: 340px;
    max-width: 320px;
    padding: 40px;
   /* background: rgba(0, 20, 25, 0.9);*/
     background: /*rgba(255, 255, 255, 0.15)*/  /*linear-gradient(
        135deg,
        #0F172A,
        #1E293B,
        #334155
    );*/
#112154;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /*border: 1px solid rgba(0,255,200,0.25);*/
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 15%;
    backdrop-filter: blur(10px);
    /*box-shadow:
        0 0 25px rgba(0,255,200,0.08),
        inset 0 0 20px rgba(0,255,200,0.03);*/
        box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(0, 255, 200, 0.12);

    position: relative;
    z-index: 2;
}

.login-card h3 {
    color: #fff/*#00ffc8*/;
    text-align: center;
    margin-bottom: 9px;
    margin-top: 0;
    font-size: 28px;
    letter-spacing: 1px;
   /* text-transform: uppercase;*/
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    color: #d8fdf6;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(0,255,200,0.25);
    background: rgba(255,255,255,0.04);
    color: #fff;
    border-radius: 24px;
    outline: none;
    transition: all .3s ease;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: #00ffc8;
    box-shadow: 0 0 12px rgba(0,255,200,0.25);
}

/* Button */
.advantage-card button {
    width: 50%;
    height: 25px;
    border: none;
    background: linear-gradient(90deg, #00c8ff, #00ffc8);
    color: #002933;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    border-radius: 18px;
    transition: transform .25s ease;
    margin-left: 25%;
}

.advantage-card button:hover {
    transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 480px) {
    .advantage-card {
        padding: 25px;
    }
}


.my-services.service-grid .btn-outline{
  color: blue;
}

/* Table  */

@media(max-width: 768px)
  {

.table-scroll{
    width:100%;
    max-width:93vw;
    overflow-x:auto;
    overflow-y:hidden;
    margin:12px;
}
  }

  .svc-icon-box{
    display:flex;
    justify-content:center;
    align-items:center;
}

.service-badge{
    width:60px;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:14px;
    border:1px solid rgba(70,230,255,.3);

    background:rgba(10,35,55,.45);
    backdrop-filter:blur(8px);

    transition:.35s;
}

.service-badge svg{
    width:30px;
    height:30px;

    stroke:#42e8ff;
    stroke-width:2;

    filter:
        drop-shadow(0 0 6px #42e8ff)
        drop-shadow(0 0 12px rgba(66,232,255,.6));

    transition:.35s;
}

.service-card:hover .service-badge{
    transform:translateY(-5px);
    border-color:#42e8ff;
    box-shadow:0 0 18px rgba(66,232,255,.35);
}

.service-card:hover .service-badge svg{
    transform:scale(1.15) rotate(5deg);
    stroke:#8ef9ff;
}

.responsive-table {
    width: 100%;
    max-width: 500px;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0 12px;
    font-family: Arial, sans-serif;
    background: /*linear-gradient(135deg,#ffffff,#f4f9ff)*/var(--c-panel);
    color: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}


/* Table labels */
.responsive-table td:first-child {
    width: 40%;
    font-weight: bold;
    color:/*#333*/#fff;
    padding:10px;
}


/* Input design */
.responsive-table input,
.responsive-table textarea,
.responsive-table select {

    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:14px;
    box-sizing:border-box;
    transition:.3s;
}


.responsive-table input:focus,
.responsive-table textarea:focus,
.responsive-table select:focus {

    border-color:#008080;
    outline:none;
    box-shadow:0 0 5px rgba(0,128,128,.4);
}


/* Title */
.responsive-table td[colspan] {
    text-align:center;
}


/* Buttons */
input[type="submit"],
input[type="reset"] {

    padding:10px 25px;
    border:none;
    border-radius:25px;
    color:white;
    font-weight:bold;
    cursor:pointer;
    margin:5px;
}

/*
input[type="submit"] {
    background:#009879;
}


input[type="reset"] {
    background:#e74c3c;
}
*/

input[type="submit"]:hover {
    background:/*#007c63*/#0b1480;
}


input[type="reset"]:hover {
    background:#c0392b;
}


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

    .responsive-table {
        width:90%;
        padding:15px;
    }


    .responsive-table tr {
        display:block;
        margin-bottom:10px;
    }


    .responsive-table td {
        display:block;
        width:100% !important;
    }


    .responsive-table td:first-child {
        padding-bottom:5px;
    }


    .responsive-table input,
.responsive-table textarea,
.responsive-table select {
   width:100% !important;
        max-width:100% !important;
        box-sizing:border-box;
}



    input[type="submit"],
    input[type="reset"] {
      /*width:58%;
        margin:8px 0;*/
    }

}


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

.hero-about{

height:470px;

position:relative;

background:

linear-gradient(rgba(5,15,35,.72),rgba(5,15,35,.72))
/*url(images/about-banner.jpg)*/;

background-size:cover;

background-position:center;

overflow:hidden;

display:flex;

align-items:center;

}

.hero-overlay{

position:absolute;

width:100%;

height:100%;

background:

radial-gradient(circle at right,
rgba(0,212,255,.20),
transparent 55%);

}

.hero-flex{

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

z-index:2;

gap:80px;

}

.hero-left{

width:55%;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

background:#00d4ff;

color:#fff;

border-radius:40px;

font-size:14px;

letter-spacing:2px;

margin-bottom:25px;
font-weight: bold;
}

.hero-left h1{

font-size:66px;

line-height:1.15;

color:#fff;

margin-bottom:30px;

}

.hero-left p{

font-size:15px;

line-height:1.9;

color:#d7dbe8;

max-width:700px;

}

.hero-btn{

display:inline-block;

margin-top:40px;

padding:10px 28px;

background:#00b8ff;

color:#fff;

border-radius:45px;

font-size:18px;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.hero-btn:hover{

background:#fff;

color:#003366;

}

.hero-right{

width:40%;

text-align:center;

}

.hero-right img{

width:100%;

max-width:450px;

filter:drop-shadow(0 25px 50px rgba(0,0,0,.35));

animation:floatLogo 5s ease infinite;

}

@keyframes floatLogo{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}


/*================ COMPANY =================*/

.section-tabs,.company-section{

padding:60px 0;

background:#fff;

}

.company-grid{

display:grid;

grid-template-columns:45% 55%;

gap:80px;

align-items:center;

}

.company-image{

text-align:center;

}

.company-image img{

width:100%;

max-width:430px;

}

.small-title{

display:inline-block;

font-size:14px;

font-weight:600;

letter-spacing:3px;

color:#0099ff;

margin-bottom:20px;

}

.company-content h2{

font-size:34px;

line-height:1.2;

margin-bottom:30px;

color:#142742;

}

.company-content p{

font-size:18px;

line-height:2;

color:#5c6677;

margin-bottom:20px;

}

.company-stats{

display:flex;

gap:50px;

margin-top:40px;

}

.company-stats h3{

font-size:42px;

color:#0099ff;

margin-bottom:8px;

}

.company-stats span{

font-size:15px;

color:#555;

}


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

.why-us{

padding:60px 0;

background:#f7f9fc;

}

.why-grid{

display:grid;

grid-template-columns:55% 45%;

gap:90px;

align-items:center;

}

.why-left h6{

color:#0099ff;

letter-spacing:4px;

margin-bottom:20px;

font-size:14px;

}

.why-left h2{

font-size:30px;

margin-bottom:35px;

color:#12233c;

}

.why-left>p{

font-size:18px;

line-height:2;

margin-bottom:40px;

}

.feature{

display:flex;

gap:25px;

margin-bottom:35px;

}

.icon{

width:60px;

height:60px;

background:/*#00c4ff*/transparent;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

font-weight:bold;

flex-shrink:0;

}

.feature h4{

font-size:20px;

margin-bottom:12px;

color:#183252;

}

.feature p{

line-height:1.9;

color:#666;

}

.why-right img{

width:100%;

max-width:470px;

display:block;

margin:auto;

}


/*================ EXPERIENCE =================*/

.experience-section{

padding:25px 0;

background:/*#081321*/#ffffff;

}

.experience-grid{

display:grid;

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

gap:35px;

}

.exp-box{

padding:15px 10px;

text-align:center;

background:#122441;

border-radius:20px;

transition:.4s;

}

.exp-box:hover{

transform:translateY(-12px);

}

.exp-box h1{

font-size:18px;

color:#00d4ff;

margin-bottom:15px;

}

.exp-box p{

font-size:15px;

color:#fff;

}


/*================ CORE EXPERTISE =================*/

.core-expertise{

padding:120px 0;

background:#fff;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading h2{

font-size:34px;

margin-bottom:20px;

color:#142742;

}

.section-heading p{

font-size:18px;

color:#666;

}

.expert-grid{

display:grid;

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

gap:35px;

}

.expert-item{

padding:40px;

background:#fff;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

border-top:5px solid #00bfff;

}

.expert-item:hover{

transform:translateY(-12px);

}

.expert-item h3{

font-size:18px;

margin-bottom:20px;

color:#17304f;

}

.expert-item p{

line-height:1.9;

color:#666;

}
/*================ SOLUTIONS =================*/

.solutions-premium{

padding:75px 0;

background:#081321;

color:#fff;

}

.solution-top{

display:grid;

grid-template-columns:42% 58%;

gap:70px;

align-items:center;

}

.solution-left span{

color:#00d4ff;

letter-spacing:4px;

font-size:14px;

font-weight:600;

}

.solution-left h2{

font-size:34px;

margin:25px 0;

line-height:1.25;

}

.solution-left p{

font-size:18px;

line-height:2;

color:#d8dfec;

margin-bottom:40px;

}

.solution-btn{

display:inline-block;

padding:10px 20px;

background:#00bfff;

color:#fff;

border-radius:40px;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.solution-btn:hover{

background:#fff;

color:#0b2345;

}

.solution-right{

display:grid;

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

gap:25px;

}

.solution-box{

padding:35px;

background:#132644;

border-radius:18px;

font-size:16px;
transition:.35s;

border-left:5px solid #00d4ff;

}
.solution-box p{
  color: #d2d9e5;
}
.solution-box li{
  font-weight:600;
}
.img-box{

height: 380px;
background:#132644;

border-radius:18px;

font-size:20px;

font-weight:600;

transition:.35s;

border-left:5px solid #00d4ff;

}

.solution-box:hover{

transform:translateY(-10px);

background:#1d3761;

}



/*================ INDUSTRIES =================*/

.industry-premium{

padding:120px 0;

background:#ffffff;

}

.industry-heading{

text-align:center;

margin-bottom:70px;

}

.industry-heading span{

color:#00a9ff;

letter-spacing:4px;

font-weight:600;

font-size:14px;

}

.industry-heading h2{

font-size:34px;

margin-top:20px;

color:#15263f;

}

.industry-grid-new{

display:grid;

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

gap:35px;

}

.industry-card{

padding:40px 30px;

background:#fff;

border-radius:18px;

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

transition:.35s;

border-top:5px solid #00c4ff;

}

.industry-card:hover{

transform:translateY(-12px);

}

.industry-card h3{

font-size:18px;

margin-bottom:18px;

color:#17324f;

}

.industry-card p{

line-height:1.9;

color:#666;

}



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

.about-cta{

padding:5px 0;

background:

linear-gradient(135deg,#0b2140,#0f4e7d);

text-align:center;

color:#fff;

}

.about-cta h2{

font-size:32px;

margin-bottom:5px;

}

.about-cta p{

font-size:15px;

max-width:800px;

margin:auto;

line-height:2;

margin-bottom:5px;

}

.about-cta a{

display:inline-block;

padding:4px 14px;

background:#fff;

color:#0b2140;

text-decoration:none;

border-radius:45px;

font-size:15px;

font-weight:600;

transition:.35s;

}

.about-cta a:hover{

background:#00d4ff;

color:#fff;

}

/*====================================================
        ABOUT PAGE RESPONSIVE
(Does NOT modify .timeline-section or .about-cta)
=====================================================*/

@media (max-width:1200px){

.hero-left h1{
    font-size:56px;
}

.company-content h2,
.why-left h2,
.section-heading h2,
.solution-left h2,
.industry-heading h2{
    font-size:40px;
}

.experience-grid{
    grid-template-columns:repeat(2,1fr);
}

.expert-grid{
    grid-template-columns:repeat(2,1fr);
}

.industry-grid-new{
    grid-template-columns:repeat(2,1fr);
}

}


/*-------------------- Tablet --------------------*/

@media (max-width:991px){

.hero-about{
    height:auto;
    padding:110px 0 80px;
}

.hero-flex{
    flex-direction:column-reverse;
    text-align:center;
    gap:50px;
}

.hero-left,
.hero-right{
    width:100%;
}

.hero-right img{
    max-width:340px;
}

.hero-left h1{
    font-size:46px;
}

.hero-left p{
    max-width:100%;
    font-size:18px;
}

.company-grid,
.why-grid,
.solution-top{
    grid-template-columns:1fr;
    gap:55px;
}

.company-image,
.why-right{
    order:-1;
    text-align:center;
}

.company-image img,
.why-right img{
    max-width:340px;
}

.company-content,
.why-left,
.solution-left{
    text-align:center;
}

.company-stats{
    justify-content:center;
    flex-wrap:wrap;
    gap:35px;
}

.feature{
    text-align:left;
}

.solution-right{
    grid-template-columns:repeat(2,1fr);
}

.expert-grid{
    grid-template-columns:repeat(2,1fr);
}

.industry-grid-new{
    grid-template-columns:repeat(2,1fr);
}

}


/*-------------------- Mobile --------------------*/

@media (max-width:767px){

.hero-about{
    padding:90px 0 60px;
}

.hero-flex{
    gap:35px;
}

.hero-tag{
    font-size:12px;
    letter-spacing:1px;
    padding:8px 18px;
}

.hero-left h1{
    font-size:34px;
    line-height:1.25;
}

.hero-left p{
    font-size:16px;
    line-height:1.8;
}

.hero-btn{
    padding:14px 30px;
    font-size:16px;
    margin-top:28px;
}

.hero-right img{
    max-width:260px;
}

/* Sections */

.section-tabs,.company-section,
.why-us,
.core-expertise,
.solutions-premium,
.industry-premium{
    padding:70px 0;
}

.company-content h2,
.why-left h2,
.section-heading h2,
.solution-left h2,
.industry-heading h2{
    font-size:32px;
    line-height:1.3;
}

.company-content p,
.why-left>p,
.solution-left p,
.section-heading p{
    font-size:16px;
    line-height:1.8;
}

.small-title,
.solution-left span,
.industry-heading span,
.why-left h6{
    letter-spacing:2px;
    font-size:12px;
}

/* Company Stats */

.company-stats{
    flex-direction:column;
    gap:25px;
    text-align:center;
}

.company-stats h3{
    font-size:36px;
}

/* Features */

.feature{
    gap:16px;
    margin-bottom:28px;
}

.icon{
    width:48px;
    height:48px;
    font-size:20px;
}

.feature h4{
    font-size:20px;
}

.feature p{
    font-size:15px;
    line-height:1.7;
}

/* Experience */

.experience-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.exp-box{
    padding:35px 20px;
}

.exp-box h1{
    font-size:22px;
}

.exp-box p{
    font-size:16px;
}

/* Expertise */

.expert-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.expert-item{
    padding:30px 22px;
}

.expert-item h3{
    font-size:15px;
}

/* Solutions */

.solution-right{
    grid-template-columns:1fr;
    gap:18px;
}

.solution-box{
    padding:24px;
    font-size:18px;
}

/* Industry */

.industry-grid-new{
    grid-template-columns:1fr;
    gap:20px;
}

.industry-card{
    padding:28px 22px;
}

.industry-card h3{
    font-size:22px;
}

.industry-card p{
    font-size:15px;
    line-height:1.7;
}

}

/* ================= TESTIMONIALS ================= */

.testimonials-section {
    padding: 60px 0;
    background: #ffffff;
}

.testimonials-container {
    width: 90%;
    max-width: 900px;
    margin: auto;
}


/* ---------- HEADER ---------- */

.testimonials-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 30px;
}

.testimonials-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #1769aa;
    margin-bottom: 8px;
}

.testimonials-title {
    margin: 0;
    color: #172033;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.testimonials-title span {
    color: #1769aa;
}

.testimonials-description {
    margin: 12px auto 0;
    color: #687386;
    font-size: 14px;
    line-height: 1.6;
}


/* ---------- GRID ---------- */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
/* ================= BACK BUTTONS(in all pages of case study and testimonials) ================= */

.testimonials-back {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.testimonials-back.top {
    margin-bottom: 28px;
}

.testimonials-back.bottom {
    margin-top: 35px;
    padding-bottom: 25px;
}

.testimonials-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 22px;

    background: transparent;
    color: #1769aa;

    border: 1px solid #d9e1ea;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;

    text-decoration: none;
    cursor: pointer;

    transition: all 0.25s ease;
}

/* Arrow */
.testimonials-back-btn span {
    font-size: 18px;
    line-height: 1;
}

/* Hover */
.testimonials-back-btn:hover {
    background: #1769aa;
    color: #fff;
    border-color: #1769aa;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(23, 105, 170, 0.15);
}

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

    .testimonials-back.top {
        margin-bottom: 22px;
    }

    .testimonials-back.bottom {
        margin-top: 28px;
        padding-bottom: 20px;
    }

    .testimonials-back-btn {
        padding: 9px 18px;
        font-size: 12px;
    }
}

/* ---------- CARD ---------- */

.testimonial-card {
    position: relative;

    background: #f7f9fc;
    border: 1px solid #e5eaf1;
    border-radius: 12px;

    padding: 18px;

    transition: all 0.35s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    background: #ffffff;
    border-color: #1769aa;
    box-shadow: 0 12px 25px rgba(23, 105, 170, 0.12);
}


/* ---------- CLIENT LOGO ---------- */

.client-logo {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    background: #ffffff;
    border: 1px solid #e4e8ee;
    border-radius: 8px;

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

    padding: 5px;

    margin-bottom: 8px;
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* ---------- CLIENT ---------- */

.testimonial-client {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}

.testimonial-client h3 {
    margin: 0;

    color: #172033;

    font-size: 14px;
    line-height: 1.3;
}


/* ---------- TEXT ---------- */

.testimonial-text {
    margin: 0;

    color: #566174;

    font-size: 13px;
    line-height: 1.65;
}


/* ---------- FOOTER ---------- */

.testimonial-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-top: 15px;
    padding-top: 12px;

    border-top: 1px solid #e2e7ee;
}

.testimonial-footer strong {
    display: block;

    color: #172033;

    font-size: 11px;
}

.testimonial-footer span {
    display: block;

    margin-top: 3px;

    color: #7a8494;

    font-size: 11px;
}


/* ---------- LINK ---------- */

.testimonial-link {
    display: inline-block;

    margin-top: 10px;

    color: #1769aa;

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

    text-decoration: none;
}

.testimonial-link span {
    margin-left: 4px;
}


/* ---------- VIEW ALL ---------- */

.testimonials-view-all {
    text-align: center;
    margin-top: 25px;
}

.testimonials-view-all a {
    color: #1769aa;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.testimonials-view-all a span {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.testimonials-view-all a:hover span {
    transform: translateX(5px);
}


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

@media (max-width: 850px) {

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-title {
        font-size: 36px;
    }
}


@media (max-width: 600px) {

    .testimonials-section {
        padding: 65px 0;
    }

    .testimonials-container {
        width: 92%;
    }

    .testimonials-title {
        font-size: 30px;
    }

    .testimonials-description {
        font-size: 14px;
    }

    .testimonial-card {
        padding: 25px;
    }

    .testimonial-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}
/*---------------- Small Phones ----------------*/

@media (max-width:480px){

.hero-left h1{
    font-size:30px;
}

.company-content h2,
.why-left h2,
.section-heading h2,
.solution-left h2,
.industry-heading h2{
    font-size:28px;
}

.hero-right img,
.company-image img,
.why-right img{
    max-width:220px;
}

.hero-btn,
.solution-btn{
    width:100%;
    text-align:center;
}

}