/*==========================================================
 BY PRO SOLUTIONS SDN BHD
 Corporate Website v2.0
 Master Stylesheet

 Author      : OpenAI
 Framework   : Custom CSS Framework
 Version     : 2.0 (2026)

 Color Theme
 -----------------------------------------------------------
 Midnight Slate : #0A0F1D
 Cyan Accent    : #06B6D4
 Cyan Hover     : #0891B2
 White          : #FFFFFF
 Light Gray     : #F5F7FA
 Border         : rgba(255,255,255,.08)

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


/*==========================================================
 GOOGLE FONT
===========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/*==========================================================
 ROOT VARIABLES
===========================================================*/

:root{

--primary:#06B6D4;
--primary-dark:#0891B2;

--secondary:#0A0F1D;
--dark:#08101F;
--dark-light:#111827;

--white:#ffffff;
--light:#F5F7FA;
--gray:#CBD5E1;
--text:#E5E7EB;

--success:#22C55E;
--warning:#F59E0B;
--danger:#EF4444;

--glass:rgba(255,255,255,.05);
--glass2:rgba(255,255,255,.08);

--border:rgba(255,255,255,.08);

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

--shadow-md:
0 15px 35px rgba(0,0,0,.25);

--shadow-sm:
0 8px 18px rgba(0,0,0,.18);

--radius-xs:8px;
--radius-sm:12px;
--radius-md:18px;
--radius-lg:24px;

--transition:.35s ease;

--max-width:1320px;

}


/*==========================================================
 RESET
===========================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--secondary);

color:var(--text);

font-size:16px;

line-height:1.7;

overflow-x:hidden;

}


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

h1,h2,h3,h4,h5{

font-weight:800;

line-height:1.2;

color:white;

}

h1{

font-size:64px;

letter-spacing:-2px;

}

h2{

font-size:42px;

}

h3{

font-size:28px;

}

h4{

font-size:22px;

}

p{

font-size:17px;

color:#cbd5e1;

margin-bottom:20px;

}

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}

img{

width:100%;

display:block;

}

ul{

list-style:none;

}


/*==========================================================
 LAYOUT
===========================================================*/

.container{

width:92%;

max-width:var(--max-width);

margin:auto;

}

section{

padding:110px 0;

position:relative;

}


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

body::before{

content:"";

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

background-size:60px 60px;

opacity:.18;

z-index:-1;

}


/*==========================================================
 UTILITIES
===========================================================*/

.text-center{

text-align:center;

}

.mt-30{

margin-top:30px;

}

.mt-60{

margin-top:60px;

}

.mb-40{

margin-bottom:40px;

}

.flex{

display:flex;

}

.grid{

display:grid;

}

.hidden{

display:none;

}


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

.section-title{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:8px 18px;

border-radius:100px;

background:rgba(6,182,212,.12);

border:1px solid rgba(6,182,212,.3);

color:var(--primary);

font-size:13px;

font-weight:700;

letter-spacing:2px;

margin-bottom:20px;

text-transform:uppercase;

}

.section-title h2{

margin-bottom:18px;

}

.section-title p{

font-size:18px;

}


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

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

background:var(--primary);

color:white;

font-weight:700;

border-radius:100px;

transition:.35s;

box-shadow:

0 0 30px rgba(6,182,212,.35);

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-4px);

box-shadow:

0 18px 45px rgba(6,182,212,.45);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 36px;

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

border-radius:100px;

color:white;

margin-left:16px;

transition:.35s;

}

.btn-secondary:hover{

background:white;

color:#0A0F1D;

}


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

.glass{

background:var(--glass);

backdrop-filter:blur(18px);

border:1px solid var(--border);

border-radius:22px;

box-shadow:var(--shadow-md);

}


/*==========================================================
 IMAGE EFFECTS
===========================================================*/

.image-hover{

overflow:hidden;

border-radius:20px;

}

.image-hover img{

transition:1s;

}

.image-hover:hover img{

transform:scale(1.08);

}


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

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-80px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(80px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes pulseGlow{

0%{

box-shadow:0 0 0 rgba(6,182,212,.25);

}

50%{

box-shadow:0 0 35px rgba(6,182,212,.55);

}

100%{

box-shadow:0 0 0 rgba(6,182,212,.25);

}

}


/*==========================================================
 SCROLL REVEAL
===========================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:22px 0;

background:rgba(10,15,29,.55);

backdrop-filter:blur(14px);

border-bottom:1px solid transparent;

transition:var(--transition);

}

.header .container{

display:flex;

align-items:center;

justify-content:space-between;

}

.header.scrolled{

padding:14px 0;

background:rgba(8,16,31,.92);

border-bottom:1px solid var(--border);

box-shadow:var(--shadow-sm);

}

.logo{

display:flex;

align-items:center;

gap:12px;

background:#F5F4F0;

padding:10px 22px;

border-radius:100px;

box-shadow:0 6px 18px rgba(0,0,0,.18);

transition:var(--transition);

}

.logo:hover{

transform:translateY(-2px);

box-shadow:0 10px 24px rgba(0,0,0,.24);

}

.logo img{

width:auto;

height:66px;

}

.navbar ul{

display:flex;

align-items:center;

gap:42px;

}

.navbar a{

font-size:15px;

font-weight:600;

color:var(--text);

position:relative;

padding:6px 0;

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:2px;

background:var(--primary);

transition:var(--transition);

}

.navbar a:hover,
.navbar li.active a{

color:var(--white);

}

.navbar a:hover::after,
.navbar li.active a::after{

width:100%;

}

.menu-toggle{

display:none;

flex-direction:column;

justify-content:center;

gap:6px;

width:38px;

height:38px;

background:transparent;

border:1px solid var(--border);

border-radius:10px;

cursor:pointer;

}

.menu-toggle span{

display:block;

width:18px;

height:2px;

margin:0 auto;

background:var(--white);

transition:var(--transition);

}

.menu-toggle.active span:nth-child(1){

transform:translateY(8px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

transform:translateY(-8px) rotate(-45deg);

}


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

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:140px;

position:relative;

overflow:hidden;

}

.hero-bg{

position:absolute;

inset:0;

z-index:-2;

}

.hero-bg img{

width:100%;

height:100%;

object-fit:cover;

}

.hero-bg::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(180deg, rgba(8,16,31,.75) 0%, rgba(8,16,31,.88) 55%, var(--secondary) 100%),

linear-gradient(90deg, rgba(8,16,31,.7) 0%, rgba(8,16,31,.35) 60%);

}

.hero-content{

max-width:760px;

}

.hero-eyebrow{

display:inline-flex;

align-items:center;

gap:10px;

padding:8px 18px;

border-radius:100px;

background:rgba(6,182,212,.12);

border:1px solid rgba(6,182,212,.3);

color:var(--primary);

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:26px;

}

.hero-eyebrow::before{

content:"";

width:7px;

height:7px;

border-radius:50%;

background:var(--primary);

box-shadow:0 0 12px var(--primary);

}

.hero h1{

font-size:64px;

margin-bottom:24px;

}

.hero h1 span{

color:var(--primary);

}

.hero p.lead{

font-size:19px;

max-width:600px;

margin-bottom:40px;

}

.hero-actions{

display:flex;

align-items:center;

}

.hero-stats{

display:grid;

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

gap:24px;

margin-top:90px;

padding-top:40px;

border-top:1px solid var(--border);

max-width:1000px;

}

.hero-stats .stat-num{

font-size:38px;

font-weight:800;

color:white;

display:block;

}

.hero-stats .stat-label{

font-size:14px;

color:var(--gray);

margin-top:6px;

}


/*==========================================================
 PAGE HERO (INNER PAGES)
===========================================================*/

.page-hero{

padding:190px 0 90px;

position:relative;

text-align:center;

overflow:hidden;

background:

radial-gradient(circle at 20% 20%, rgba(6,182,212,.12), transparent 55%),

var(--secondary);

border-bottom:1px solid var(--border);

}

.page-hero .breadcrumb{

display:inline-flex;

gap:10px;

align-items:center;

font-size:14px;

color:var(--gray);

margin-bottom:22px;

}

.page-hero .breadcrumb span{

color:var(--primary);

}

.page-hero h1{

font-size:52px;

margin-bottom:16px;

}

.page-hero p{

max-width:620px;

margin:0 auto;

font-size:18px;

}


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

.cards-grid{

display:grid;

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

gap:30px;

}

.cards-grid.cols-3{

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

}

.cards-grid.cols-2{

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

}

.service-card{

padding:0 0 34px;

overflow:hidden;

transition:var(--transition);

}

.service-card:hover{

transform:translateY(-8px);

border-color:rgba(6,182,212,.4);

}

.service-card .service-img{

height:210px;

overflow:hidden;

border-radius:22px 22px 0 0;

margin-bottom:26px;

}

.service-card .service-img img{

height:100%;

object-fit:cover;

transition:1s;

}

.service-card:hover .service-img img{

transform:scale(1.08);

}

.service-card .service-body{

padding:0 30px;

}

.service-card .service-num{

font-size:13px;

font-weight:700;

letter-spacing:2px;

color:var(--primary);

margin-bottom:14px;

display:block;

}

.service-card h3{

margin-bottom:14px;

}

.service-card ul{

margin-top:18px;

}

.service-card ul li{

font-size:15px;

color:var(--gray);

padding-left:26px;

position:relative;

margin-bottom:10px;

}

.service-card ul li::before{

content:"";

position:absolute;

left:0;

top:8px;

width:12px;

height:12px;

border-radius:4px;

background:rgba(6,182,212,.15);

border:1px solid var(--primary);

}

.service-card .link-more{

display:inline-flex;

align-items:center;

gap:8px;

color:var(--primary);

font-weight:700;

font-size:14px;

margin-top:20px;

}

.service-card .link-more svg{

transition:var(--transition);

}

.service-card:hover .link-more svg{

transform:translateX(6px);

}

.feature-card{

padding:36px 30px;

}

.feature-card .icon-box{

width:56px;

height:56px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(6,182,212,.12);

border:1px solid rgba(6,182,212,.3);

margin-bottom:24px;

color:var(--primary);

}

.feature-card h4{

margin-bottom:12px;

}

.feature-card p{

font-size:15px;

margin-bottom:0;

}


/*==========================================================
 SPLIT SECTION (IMAGE + TEXT)
===========================================================*/

.split{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.split-media{

border-radius:24px;

overflow:hidden;

position:relative;

}

.split-media::before{

content:"";

position:absolute;

inset:0;

border:1px solid var(--border);

border-radius:24px;

z-index:2;

pointer-events:none;

}

.split .eyebrow{

display:inline-block;

color:var(--primary);

font-weight:700;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:18px;

}

.split h2{

margin-bottom:22px;

}

.check-list li{

display:flex;

align-items:flex-start;

gap:14px;

margin-bottom:18px;

font-size:16px;

color:var(--text);

}

.check-list li svg{

flex-shrink:0;

margin-top:3px;

color:var(--primary);

}


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

.stats-band{

padding:70px 0;

border-top:1px solid var(--border);

border-bottom:1px solid var(--border);

}

.stats-band .cards-grid{

text-align:center;

}

.stats-band .stat-num{

font-size:46px;

font-weight:800;

color:white;

}

.stats-band .stat-num span{

color:var(--primary);

}

.stats-band .stat-label{

color:var(--gray);

margin-top:10px;

font-size:15px;

}


/*==========================================================
 CREDENTIALS / TIMELINE
===========================================================*/

.credentials{

display:grid;

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

gap:26px;

}

.credential-card{

padding:32px 28px;

}

.credential-card .cred-icon{

width:50px;

height:50px;

border-radius:14px;

background:rgba(34,197,94,.12);

border:1px solid rgba(34,197,94,.3);

color:var(--success);

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;

}

.timeline{

position:relative;

padding-left:40px;

border-left:2px solid var(--border);

}

.timeline-item{

position:relative;

padding-bottom:44px;

}

.timeline-item:last-child{

padding-bottom:0;

}

.timeline-item::before{

content:"";

position:absolute;

left:-49px;

top:2px;

width:16px;

height:16px;

border-radius:50%;

background:var(--secondary);

border:3px solid var(--primary);

}

.timeline-item h4{

margin-bottom:8px;

}

.timeline-item p{

margin-bottom:0;

}


/*==========================================================
 CLIENT LOGOS
===========================================================*/

.clients-grid{

display:grid;

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

gap:22px;

}

.client-logo{

padding:14px 18px;

display:flex;

align-items:center;

justify-content:center;

height:140px;

overflow:hidden;

transition:var(--transition);

}

.client-logo img{

width:100%;

height:100%;

object-fit:contain;

transform:scale(1.6);

transition:var(--transition);

}

.client-logo:hover{

transform:translateY(-6px);

border-color:rgba(6,182,212,.4);

}

/*==========================================================
 CLIENT GROUPS (grouped logo wall with captions)
===========================================================*/

.client-group{

margin-bottom:64px;

}

.client-group:last-child{

margin-bottom:0;

}

.client-group-head{

display:flex;

align-items:baseline;

justify-content:space-between;

gap:20px;

margin-bottom:24px;

padding-bottom:16px;

border-bottom:1px solid var(--border);

}

.client-group-head h3{

font-size:15px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:var(--primary);

}

.client-group-head span{

font-size:13px;

color:var(--gray);

font-weight:600;

}

.client-tiles{

display:grid;

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

gap:16px;

}

.client-tile{

background:var(--glass);

border:1px solid var(--border);

border-radius:var(--radius-sm);

padding:16px 12px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:10px;

height:150px;

text-align:center;

transition:var(--transition);

}

.client-tile:hover{

transform:translateY(-4px);

border-color:rgba(6,182,212,.4);

box-shadow:var(--shadow-sm);

}

.client-tile .logo-wrap{

height:78px;

width:100%;

background:#F5F4F0;

border-radius:10px;

padding:12px 16px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.client-tile .logo-wrap img{

max-width:100%;

max-height:100%;

width:auto;

height:auto;

object-fit:contain;

}

.client-tile .client-name{

font-size:12px;

line-height:1.35;

color:var(--gray);

font-weight:600;

}

.client-slider{

position:relative;

}

.client-slider-track{

display:flex;

overflow-x:auto;

scroll-snap-type:x mandatory;

scroll-behavior:smooth;

-webkit-overflow-scrolling:touch;

border-radius:var(--radius-lg);

background:var(--glass);

border:1px solid var(--border);

backdrop-filter:blur(18px);

box-shadow:var(--shadow-md);

}

.client-slider-track::-webkit-scrollbar{

display:none;

}

.client-slider-track{

scrollbar-width:none;

-ms-overflow-style:none;

}

.client-slide{

flex:0 0 100%;

scroll-snap-align:start;

display:flex;

align-items:stretch;

justify-content:center;

gap:20px;

padding:28px 32px;

}

.client-slide-item{

flex:1;

min-width:0;

display:flex;

align-items:center;

justify-content:center;

}

.client-slide-item .logo-wrap{

height:88px;

max-width:170px;

width:100%;

background:#F5F4F0;

border-radius:12px;

padding:14px 16px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.client-slide-item .logo-wrap img{

max-width:100%;

max-height:100%;

width:auto;

height:auto;

object-fit:contain;

}

.client-slider-dots{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

margin-top:24px;

}

.client-slider-dot{

width:9px;

height:9px;

border-radius:50%;

background:var(--border);

border:none;

padding:0;

cursor:pointer;

transition:var(--transition);

}

.client-slider-dot:hover{

background:rgba(6,182,212,.6);

}

.client-slider-dot.active{

background:var(--primary);

width:26px;

border-radius:5px;

}


/*==========================================================
 TESTIMONIAL
===========================================================*/

.testimonial-card{

padding:44px;

position:relative;

}

.testimonial-card .quote-mark{

font-size:64px;

color:var(--primary);

line-height:1;

font-family:Georgia,serif;

opacity:.5;

margin-bottom:6px;

}

.testimonial-card p.quote{

font-size:19px;

color:white;

margin-bottom:26px;

}

.testimonial-author{

display:flex;

align-items:center;

gap:16px;

}

.testimonial-author .avatar{

width:48px;

height:48px;

border-radius:50%;

background:var(--glass2);

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

color:var(--primary);

}

.testimonial-author .name{

font-weight:700;

color:white;

font-size:15px;

}

.testimonial-author .role{

font-size:13px;

color:var(--gray);

}


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

.cta-band{

padding:80px;

text-align:center;

background:

radial-gradient(circle at 30% 20%, rgba(6,182,212,.18), transparent 60%),

linear-gradient(180deg, var(--dark-light), var(--dark));

border:1px solid var(--border);

border-radius:var(--radius-lg);

}

.cta-band h2{

margin-bottom:18px;

}

.cta-band p{

max-width:560px;

margin:0 auto 34px;

font-size:18px;

}


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

.contact-grid{

display:grid;

grid-template-columns:.85fr 1.15fr;

gap:50px;

align-items:flex-start;

}

.contact-info-card{

display:flex;

gap:18px;

padding:26px;

margin-bottom:20px;

}

.contact-info-card .icon-box{

width:48px;

height:48px;

border-radius:14px;

background:rgba(6,182,212,.12);

border:1px solid rgba(6,182,212,.3);

color:var(--primary);

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

}

.contact-info-card h4{

margin-bottom:6px;

font-size:17px;

}

.contact-info-card p{

margin-bottom:2px;

font-size:15px;

}

.contact-form{

padding:44px;

}

.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:22px;

}

.form-group{

margin-bottom:22px;

}

.hp-field{

position:absolute;

left:-9999px;

top:-9999px;

width:1px;

height:1px;

opacity:0;

pointer-events:none;

}

.form-group label{

display:block;

font-size:14px;

font-weight:600;

color:var(--text);

margin-bottom:10px;

}

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

width:100%;

padding:15px 18px;

background:var(--glass);

border:1px solid var(--border);

border-radius:var(--radius-xs);

color:white;

font-family:inherit;

font-size:15px;

transition:var(--transition);

}

.form-group textarea{

resize:vertical;

min-height:140px;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(6,182,212,.12);

}

.form-note{

font-size:13px;

color:var(--gray);

margin-top:16px;

}

.form-success{

display:none;

align-items:center;

gap:12px;

padding:16px 20px;

border-radius:var(--radius-xs);

background:rgba(34,197,94,.1);

border:1px solid rgba(34,197,94,.35);

color:var(--success);

font-size:14px;

font-weight:600;

margin-top:20px;

}

.form-success.active{

display:flex;

}

.form-success.is-error{

background:rgba(239,68,68,.1);

border-color:rgba(239,68,68,.35);

color:var(--danger);

}

.map-wrap{

border-radius:var(--radius-md);

overflow:hidden;

border:1px solid var(--border);

height:340px;

margin-top:40px;

}

.map-wrap iframe{

width:100%;

height:100%;

border:0;

filter:grayscale(.4) invert(.92) contrast(.9);

}


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

.footer{

padding:90px 0 0;

border-top:1px solid var(--border);

background:var(--dark);

}

.footer-grid{

width:92%;

max-width:var(--max-width);

margin:auto;

display:grid;

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

gap:50px;

padding-bottom:60px;

}

.footer-grid h3{

font-size:18px;

margin-bottom:22px;

}

.footer-grid p{

font-size:15px;

}

.footer-grid ul li{

margin-bottom:12px;

}

.footer-grid ul li a{

font-size:15px;

color:var(--gray);

}

.footer-grid ul li a:hover{

color:var(--primary);

padding-left:4px;

}

.footer-grid p a{

color:var(--gray);

}

.footer-grid p a:hover{

color:var(--primary);

}

.copyright{

text-align:center;

padding:26px 0;

border-top:1px solid var(--border);

font-size:14px;

color:var(--gray);

}


/*==========================================================
 BACK TO TOP
===========================================================*/

.back-to-top{

position:fixed;

right:30px;

bottom:30px;

width:48px;

height:48px;

border-radius:50%;

background:var(--primary);

color:white;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 12px 30px rgba(6,182,212,.4);

opacity:0;

visibility:hidden;

transform:translateY(10px);

transition:var(--transition);

z-index:900;

cursor:pointer;

border:none;

}

.back-to-top.active{

opacity:1;

visibility:visible;

transform:translateY(0);

}