:root{

--primary:#0056b3;
--secondary:#00AEEF;
--dark:#0E1B2C;
--light:#ffffff;
--text:#6c757d;
--bg:#F6F9FC;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:'Manrope',sans-serif;
background:var(--bg);
color:#333;
overflow-x:hidden;

}

/*****************
TOPBAR
******************/

.topbar{

background:linear-gradient(90deg,#0056b3,#0077cc);

padding:10px 0;

font-size:14px;

}

.top-contact{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.top-contact a{

color:white;
text-decoration:none;
transition:.3s;

}

.top-contact a:hover{

opacity:.8;

}

.top-right{

display:flex;
justify-content:flex-end;
align-items:center;
gap:15px;

}

.social-icons a{

width:35px;
height:35px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

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

color:white;

transition:.4s;

text-decoration:none;

}

.social-icons a:hover{

background:white;
color:#0056b3;
transform:translateY(-4px);

}

.consult-btn{

padding:10px 22px;

background:white;

border-radius:40px;

font-weight:700;

color:#0056b3;

text-decoration:none;

transition:.4s;

}

.consult-btn:hover{

background:#FFD54F;

color:#000;

}

/*********************
NAVBAR
*********************/

.navbar{

background:white;

padding:18px 0;

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

}

.navbar-brand{

display:flex;
align-items:center;
gap:15px;

font-size:25px;
font-weight:800;
color:#003366;

}

.navbar-brand span{

line-height:1.2;

}

.nav-link{

font-weight:700;

margin:0 12px;

color:#1d3557;

position:relative;

}

.nav-link:hover{

color:#0056b3;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:#00AEEF;

transition:.4s;

}

.nav-link:hover::after{

width:100%;

}

.dropdown-menu{

border:none;

border-radius:18px;

box-shadow:0 20px 40px rgba(0,0,0,.12);

padding:15px;

}

.dropdown-item{

padding:12px 18px;

border-radius:12px;

font-weight:600;

}

.dropdown-item:hover{

background:#F1F8FF;

color:#0056b3;

}

.proposal-btn{

padding:14px 30px;

border-radius:50px;

background:#0056b3;

color:white;

font-weight:700;

cursor:pointer;

transition:.4s;

text-decoration:none;

}

.proposal-btn:hover{

background:#00AEEF;

transform:translateY(-3px);

}

.navbar-toggler{

border:none;

font-size:32px;

}

.offcanvas{

width:320px;

}

/************************************************
HERO
************************************************/

.hero-section{

position:relative;

height:100vh;

overflow:hidden;

}

.hero-image{

height:100vh;

object-fit:cover;

}

.hero-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:linear-gradient(
90deg,
rgba(2,25,65,.85),
rgba(2,25,65,.55),
rgba(2,25,65,.30)
);

z-index:2;

}

.hero-content{

position:absolute;

top:50%;

left:50%;

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

z-index:3;

color:#fff;

}

.hero-badge{

display:inline-block;

padding:10px 22px;

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

backdrop-filter:blur(12px);

border-radius:40px;

margin-bottom:25px;

font-weight:600;

}

.hero-badge i{

color:#FFD54F;

margin-right:8px;

}

.hero-content h1{

font-size:65px;

font-weight:800;

line-height:1.2;

margin-bottom:25px;

}

.hero-content h1 span{

color:#4FC3F7;

}

.hero-content p{

font-size:20px;

line-height:1.9;

max-width:700px;

color:#f5f5f5;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:45px;

flex-wrap:wrap;

}

.btn-primary-custom{

padding:16px 36px;

border-radius:50px;

background:#0d6efd;

color:#fff;

text-decoration:none;

font-weight:700;

transition:.4s;

}

.btn-primary-custom:hover{

background:#00AEEF;

transform:translateY(-4px);

color:white;

}

.btn-outline-custom{

padding:16px 36px;

border-radius:50px;

border:2px solid white;

color:white;

text-decoration:none;

font-weight:700;

transition:.4s;

}

.btn-outline-custom:hover{

background:white;

color:#003366;

}

.hero-features{

display:flex;

gap:35px;

flex-wrap:wrap;

font-weight:600;

}

.hero-features i{

color:#00E676;

margin-right:8px;

}

.glass-card{

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

backdrop-filter:blur(18px);

padding:35px;

border-radius:25px;

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

box-shadow:0 25px 45px rgba(0,0,0,.25);

}

.glass-card h4{

font-weight:800;

margin-bottom:25px;

}

.glass-card ul{

list-style:none;

padding:0;

}

.glass-card li{

padding:12px 0;

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

}

.glass-card h2{

font-size:36px;

font-weight:800;

color:#4FC3F7;

}

.glass-card small{

color:#f2f2f2;

}

@media(max-width:992px){

.hero-content{

text-align:center;

}

.hero-content h1{

font-size:45px;

}

.hero-content p{

font-size:18px;

}

.glass-card{

margin-top:40px;

}

.hero-features{

justify-content:center;

}

}

@media(max-width:768px){

.hero-content h1{

font-size:36px;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

flex-direction:column;

gap:15px;

}

}


/*========================
ABOUT
=========================*/

.about-section{

padding:110px 0;

background:#fff;

}

.section-tag{

display:inline-block;

padding:8px 20px;

background:#e8f3ff;

color:#0d6efd;

border-radius:40px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.section-title{

font-size:46px;

font-weight:800;

margin-bottom:25px;

color:#0f172a;

}

.section-text{

font-size:18px;

line-height:1.9;

color:#64748b;

}

.about-image{

position:relative;

}

.about-image img{

border-radius:30px;

}

.experience-card{

position:absolute;

bottom:-35px;

right:30px;

background:#0d6efd;

padding:30px;

color:white;

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,.2);

}

.experience-card h2{

font-size:52px;

font-weight:800;

margin:0;

}

.info-box{

padding:25px;

margin-top:25px;

background:white;

border-radius:20px;

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

transition:.4s;

height:100%;

}

.info-box:hover{

transform:translateY(-10px);

}

.info-box .icon{

width:65px;

height:65px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#0d6efd;

color:white;

font-size:28px;

margin-bottom:20px;

}

.learn-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:15px 32px;

background:#0d6efd;

color:white;

text-decoration:none;

border-radius:50px;

font-weight:700;

transition:.4s;

}

.learn-btn:hover{

background:#003b95;

color:white;

transform:translateY(-3px);

}

/*=========================
VALUES
==========================*/

.values-section{

background:#f8fbff;

padding:110px 0;

}

.value-card{

padding:40px 30px;

background:white;

border-radius:25px;

text-align:center;

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

transition:.4s;

height:100%;

}

.value-card:hover{

transform:translateY(-12px);

}

.value-card i{

font-size:50px;

color:#0d6efd;

margin-bottom:20px;

}

.value-card h4{

font-weight:800;

margin-bottom:20px;

}

.value-card p{

color:#64748b;

line-height:1.8;

}

/*=========================
COUNTERS
==========================*/

.counter-section{

padding:90px 0;

background:linear-gradient(135deg,#0d6efd,#0099ff);

color:white;

}

.counter{

font-size:60px;

font-weight:800;

margin-bottom:10px;

}

.counter-section p{

font-size:18px;

}

/****************************************
SERVICES
****************************************/

.services-section{

padding:120px 0;

background:#ffffff;

position:relative;

}

.service-card{

background:#fff;

padding:45px 35px;

border-radius:25px;

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

transition:.45s;

height:100%;

position:relative;

overflow:hidden;

border:1px solid #edf2f7;

}

.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

height:6px;

width:100%;

background:linear-gradient(
90deg,
#0d6efd,
#00b4ff
);

}

.service-card:hover{

transform:translateY(-15px);

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

}

.service-icon{

width:85px;

height:85px;

border-radius:25px;

background:linear-gradient(
135deg,
#0d6efd,
#00b4ff
);

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

color:white;

margin-bottom:30px;

transition:.4s;

}

.service-card:hover .service-icon{

transform:rotate(10deg) scale(1.08);

}

.service-card h3{

font-size:26px;

font-weight:800;

margin-bottom:18px;

color:#0f172a;

}

.service-card p{

line-height:1.9;

color:#64748b;

margin-bottom:30px;

}

.service-card a{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:700;

color:#0d6efd;

text-decoration:none;

}

.service-card a i{

transition:.3s;

}

.service-card:hover a i{

transform:translateX(6px);

}

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

.why-us-section{

padding:120px 0;

background:#f8fbff;

}

.choose-card{

background:white;

padding:40px;

border-radius:25px;

height:100%;

transition:.4s;

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

border:1px solid #edf2f7;

}

.choose-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 50px rgba(0,0,0,.16);

}

.choose-icon{

width:85px;

height:85px;

background:linear-gradient(135deg,#0d6efd,#00b4ff);

border-radius:22px;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

color:white;

margin-bottom:25px;

}

.choose-card h4{

font-weight:800;

margin-bottom:18px;

color:#0f172a;

}

.choose-card p{

line-height:1.9;

color:#64748b;

}

/*****************************************
PROCESS
*****************************************/

.process-section{

padding:120px 0;

background:white;

}

.process-wrapper{

display:flex;

justify-content:space-between;

gap:30px;

flex-wrap:wrap;

text-align:center;

position:relative;

}

.process-item{

flex:1;

min-width:220px;

}

.process-circle{

width:100px;

height:100px;

border-radius:50%;

background:linear-gradient(135deg,#0d6efd,#00b4ff);

display:flex;

justify-content:center;

align-items:center;

margin:auto;

color:white;

font-size:40px;

margin-bottom:25px;

box-shadow:0 15px 40px rgba(13,110,253,.25);

transition:.4s;

}

.process-circle:hover{

transform:scale(1.08) rotate(8deg);

}

.process-item h5{

font-weight:800;

margin-bottom:15px;

}

.process-item p{

color:#64748b;

line-height:1.8;

}
.client-box{

background:white;

padding:40px;

border-radius:20px;

font-weight:700;

font-size:20px;

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

transition:.4s;

}

.client-box:hover{

background:#0d6efd;

color:white;

transform:translateY(-10px);

}

/****************************************
PORTFOLIO
****************************************/

.portfolio-section{

padding:120px 0;

background:#f8fbff;

}

.portfolio-filter{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.portfolio-filter button{

padding:12px 28px;

border:none;

background:white;

border-radius:40px;

font-weight:700;

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

transition:.3s;

}

.portfolio-filter button:hover,

.portfolio-filter .active{

background:#0d6efd;

color:white;

}

.project-card{

position:relative;

overflow:hidden;

border-radius:25px;

height:360px;

cursor:pointer;

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

}

.project-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}

.project-card:hover img{

transform:scale(1.12);

}

.project-overlay{

position:absolute;

left:0;

bottom:0;

width:100%;

padding:35px;

background:linear-gradient(

transparent,

rgba(0,0,0,.88)

);

color:white;

transition:.4s;

}

.project-overlay span{

display:inline-block;

padding:6px 18px;

background:#0d6efd;

border-radius:30px;

font-size:13px;

margin-bottom:15px;

}

.project-overlay h4{

font-weight:800;

margin-bottom:20px;

}

.project-overlay a{

width:55px;

height:55px;

background:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

color:#0d6efd;

font-size:22px;

transition:.4s;

}

.project-overlay a:hover{

transform:rotate(90deg);

}

.portfolio-btn{

padding:16px 34px;

border-radius:40px;

background:#0d6efd;

color:white;

text-decoration:none;

font-weight:700;

transition:.4s;

}

.portfolio-btn:hover{

background:#003b95;

color:white;

}
.project-banner{

padding:80px 0;

background:linear-gradient(

135deg,

#0d6efd,

#0099ff

);

color:white;

text-align:center;

}

.project-banner h2{

font-size:60px;

font-weight:800;

}

.project-banner p{

font-size:18px;

margin-top:10px;

}


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

.page-hero{

position:relative;

height:520px;

display:flex;

align-items:center;

background:url('../images/about-banner.jpg') center center;

background-size:cover;

overflow:hidden;

}

.page-hero::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

90deg,

rgba(5,35,80,.92),

rgba(5,35,80,.72)

);

}

.page-hero .container{

position:relative;

z-index:5;

}

.hero-mini-title{

display:inline-block;

padding:10px 24px;

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

backdrop-filter:blur(14px);

border-radius:50px;

font-weight:700;

color:#fff;

letter-spacing:1px;

margin-bottom:25px;

}

.hero-title{

font-size:64px;

font-weight:800;

line-height:1.2;

color:#fff;

margin-bottom:30px;

}

.hero-description{

font-size:21px;

color:#f4f4f4;

max-width:850px;

margin:auto;

line-height:1.9;

margin-bottom:35px;

}

.hero-breadcrumb{

display:inline-flex;

gap:15px;

padding:15px 35px;

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

backdrop-filter:blur(20px);

border-radius:50px;

}

.hero-breadcrumb a{

text-decoration:none;

color:#fff;

font-weight:700;

}

.hero-breadcrumb span{

color:#fff;

}

.hero-breadcrumb strong{

color:#FFD54F;

}

.company-story{

padding:120px 0;

background:white;

}

.story-image{

position:relative;

}

.story-image img{

border-radius:30px;

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.floating-box{

position:absolute;

bottom:-25px;

right:-20px;

background:#0d6efd;

padding:35px;

border-radius:25px;

color:white;

box-shadow:0 20px 50px rgba(0,0,0,.25);

text-align:center;

}

.floating-box h2{

font-size:52px;

font-weight:800;

}

.feature-box{

display:flex;

align-items:center;

gap:20px;

padding:20px;

margin-bottom:20px;

background:#fff;

border-radius:18px;

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

transition:.35s;

}

.feature-box:hover{

transform:translateY(-8px);

}

.feature-box i{

font-size:32px;

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:linear-gradient(135deg,#0d6efd,#00b4ff);

color:#fff;

}

.feature-box h5{

margin:0;

font-weight:700;

color:#0f172a;

}


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

.timeline-section{
padding:120px 0;
background:#fff;
}

.timeline{
position:relative;
max-width:1100px;
margin:auto;
}

.timeline::before{
content:"";
position:absolute;
left:50%;
top:0;
width:4px;
height:100%;
background:#0d6efd;
transform:translateX(-50%);
}

.timeline-item{
position:relative;
width:50%;
padding:25px 45px;
}

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

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

.timeline-content{
background:#fff;
padding:30px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.timeline-content .year{
display:inline-block;
padding:8px 18px;
background:#0d6efd;
color:#fff;
border-radius:30px;
font-weight:700;
margin-bottom:15px;
}

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

.why-section{
padding:120px 0;
background:#f8fbff;
}

.why-card{
background:#fff;
padding:40px;
border-radius:25px;
text-align:center;
height:100%;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
}

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

.why-card i{
font-size:50px;
color:#0d6efd;
margin-bottom:20px;
}

/*==========================
STATISTICS
===========================*/

.statistics-section{
padding:90px 0;
background:linear-gradient(135deg,#0d6efd,#0099ff);
color:#fff;
}

.stat-box h2{
font-size:60px;
font-weight:800;
}

.stat-box p{
font-size:18px;
}

/*==========================
CERTIFICATIONS
===========================*/

.certifications{
background:#fff;
}

.cert-card{
background:#fff;
padding:35px;
text-align:center;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
height:100%;
}

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

.cert-card i{
font-size:50px;
color:#0d6efd;
margin-bottom:20px;
}