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

.hero-section{

 
position:relative;
overflow:hidden;

min-height:100vh;

display:flex;
align-items:center;

padding-top:120px;
padding-bottom:100px;

background:
radial-gradient(circle at top right,
rgba(247,198,0,.12),
transparent 25%),

radial-gradient(circle at bottom left,
rgba(37,99,235,.15),
transparent 30%),

linear-gradient(
135deg,
#163B67 0%,
#102c4b 40%,
#081625 100%);
 

}

/* ==========================
BADGE
========================== */

.hero-badge{

 
display:inline-flex;
align-items:center;
gap:10px;

padding:14px 24px;

border-radius:999px;

color:#F7C600;

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

backdrop-filter:blur(20px);

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

font-size:14px;
font-weight:600;
 

}

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

.hero-title{

 
font-size:clamp(2.2rem,4vw,4.8rem);

line-height:1.05;

font-weight:800;

color:white;

margin-top:30px;

letter-spacing:-2px;
 

}

.hero-title span{

 
background:
linear-gradient(
90deg,
#F7C600,
#FFD700,
#ffef9a);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
 

}

/* ==========================
DESCRIPTION
========================== */

.hero-desc{

 
margin-top:30px;

color:#cbd5e1;

font-size:1.15rem;

line-height:1.9;

max-width:650px;
 

}

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

.hero-buttons{

 
display:flex;
flex-wrap:wrap;

gap:20px;

margin-top:40px;
 

}

.primary-btn{

 
background:#F7C600;

color:#000;

padding:18px 34px;

border-radius:999px;

font-weight:700;

transition:.35s;

box-shadow:
0 15px 35px rgba(247,198,0,.25);
 

}

.primary-btn:hover{

 
transform:translateY(-4px);

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

}

.secondary-btn{

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

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

backdrop-filter:blur(15px);

color:white;

padding:18px 34px;

border-radius:999px;

transition:.35s;
 

}

.secondary-btn:hover{

 
background:white;
color:#163B67;
 

}

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

.hero-stats{

 
display:flex;

flex-wrap:wrap;

gap:50px;

margin-top:60px;
 

}

.hero-stats h3{

 
font-size:3rem;

color:#F7C600;

font-weight:800;
 

}

.hero-stats p{

 
color:#cbd5e1;

margin-top:5px;
 

}

/* ==========================
RIGHT CIRCLE
========================== */

.hero-circle{

 
width:560px;
height:560px;

position:relative;

margin:auto;

border-radius:50%;

border:
2px solid rgba(247,198,0,.15);

animation:
rotate 30s linear infinite;
 

}

.hero-circle::before{

 
content:'';

position:absolute;

inset:50px;

border-radius:50%;

border:
1px dashed rgba(255,255,255,.15);
 

}

/* ==========================
CENTER LOGO
========================== */

.center-logo{

 
width:190px;
height:190px;

border-radius:50%;

background:
linear-gradient(
135deg,
#F7C600,
#FFD700);

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

font-size:65px;
font-weight:800;

color:#163B67;

position:absolute;

top:50%;
left:50%;

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

box-shadow:
0 25px 60px rgba(247,198,0,.3);
 

}

/* ==========================
FLOATING CARDS
========================== */

.float-card{

 
position:absolute;

padding:15px 22px;

border-radius:18px;

color:white;

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

backdrop-filter:blur(20px);

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

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

animation:
float 4s ease-in-out infinite;
 

}

.card-1{top:20px;left:30px;}
.card-2{top:120px;right:0;}
.card-3{bottom:120px;left:-20px;}
.card-4{bottom:10px;right:20px;}
.card-5{top:50%;left:-50px;}
.card-6{top:50%;right:-50px;}

/* ==========================
BLUR SHAPES
========================== */

.shape{

 
position:absolute;

border-radius:50%;

filter:blur(120px);

pointer-events:none;
 

}

.shape-1{

 
width:350px;
height:350px;

background:#F7C600;

opacity:.12;

top:-120px;
right:-120px;
 

}

.shape-2{

 
width:300px;
height:300px;

background:#2563eb;

opacity:.15;

bottom:-120px;
left:-120px;
 

}

.shape-3{

 
width:250px;
height:250px;

background:#7c3aed;

opacity:.10;

top:40%;
left:40%;
 

}

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

@keyframes float{

 
0%,100%{
    transform:translateY(0);
}

50%{
    transform:translateY(-18px);
}
 

}

@keyframes rotate{

 
from{
    transform:rotate(0deg);
}

to{
    transform:rotate(360deg);
}
 

}

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

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

@media (max-width:1200px){

.hero-circle{

width:460px;
height:460px;

}

.float-card{

font-size:14px;

}

.hero-title{

font-size:4rem;

}

}


@media (max-width:1024px){

.hero-section{

padding-top:120px;
padding-bottom:80px;

}

.hero-section .grid{

grid-template-columns:1fr;
gap:70px;

}

.hero-section .grid>div:first-child{

text-align:center;
order:1;

}

.hero-section .grid>div:last-child{

order:2;

}

.hero-desc{

margin-inline:auto;
max-width:700px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;
gap:35px;

}

.hero-circle{

width:380px;
height:380px;

}

.hero-circle::before{

inset:35px;

}

.center-logo{

width:140px;
height:140px;
font-size:48px;

}

.float-card{

font-size:13px;
padding:12px 18px;

}

.card-1{

top:15px;
left:0;

}

.card-2{

top:70px;
right:0;

}

.card-3{

bottom:70px;
left:0;

}

.card-4{

bottom:10px;
right:10px;

}

.card-5{

left:-10px;

}

.card-6{

right:-10px;

}

}



@media (max-width:768px){

.hero-section{

padding-top:110px;
padding-bottom:70px;
text-align:center;

}

.hero-title{

font-size:3rem;
line-height:1.15;

}

.hero-desc{

font-size:16px;
line-height:1.8;

}

.hero-buttons{

flex-direction:column;
align-items:center;

}

.primary-btn,
.secondary-btn{

width:100%;
max-width:320px;

}

.hero-stats{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:45px;

}

.hero-stats h3{

font-size:2rem;

}

.hero-circle{

width:300px;
height:300px;
margin-top:20px;

}

.hero-circle::before{

inset:25px;

}

.center-logo{

width:110px;
height:110px;
font-size:38px;

}

.float-card{

display:none;

}

.shape{

opacity:.08;

}

}



@media (max-width:576px){

.hero-section{

padding-top:95px;
padding-bottom:60px;

}

.hero-badge{

padding:10px 18px;
font-size:12px;

}

.hero-title{

font-size:2.3rem;
letter-spacing:-1px;

}

.hero-desc{

font-size:15px;

}

.hero-buttons{

margin-top:30px;

}

.hero-stats{

grid-template-columns:1fr;
gap:20px;

}

.hero-circle{

width:240px;
height:240px;

}

.hero-circle::before{

inset:18px;

}

.center-logo{

width:90px;
height:90px;
font-size:30px;

}

}



@media (max-width:380px){

.hero-title{

font-size:2rem;

}

.hero-desc{

font-size:14px;

}

.primary-btn,
.secondary-btn{

padding:15px 20px;
font-size:14px;

}

.hero-circle{

width:210px;
height:210px;

}

.center-logo{

width:75px;
height:75px;
font-size:24px;

}

}


/* services */

.service-card{

 
position:relative;

background:#fff;

padding:35px;

border-radius:24px;

border:1px solid #e5e7eb;

transition:.4s;

overflow:hidden;
 

}

.service-card::before{

 
content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
#163B67,
#F7C600);

transform:scaleX(0);

transform-origin:left;

transition:.4s;
 

}

.service-card:hover{

 
transform:translateY(-10px);

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

}

.service-card:hover::before{

 
transform:scaleX(1);
 

}

.service-icon{

 
width:70px;
height:70px;

display:flex;

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

font-size:30px;

border-radius:18px;

background:
linear-gradient(
135deg,
#163B67,
#204d82);

color:white;

margin-bottom:25px;
 

}

.service-card h3{

 
font-size:26px;

font-weight:700;

color:#163B67;

margin-bottom:15px;
 

}

.service-card p{

 
color:#64748b;

line-height:1.8;
 

}

.service-card a{

 
display:inline-block;

margin-top:20px;

color:#F7C600;

font-weight:700;
 

}



/* why choose us */
.feature-card{

 
background:#fff;

padding:35px;

border-radius:24px;

text-align:center;

transition:.4s;

border:1px solid #e5e7eb;
 

}

.feature-card:hover{

 
transform:translateY(-10px);

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

}

.feature-icon{

 
width:80px;
height:80px;

margin:auto;

display:flex;

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

border-radius:20px;

background:
linear-gradient(
135deg,
#163B67,
#204d82);

color:white;

font-size:35px;

margin-bottom:20px;
 

}

.feature-card h3{

 
font-size:24px;

font-weight:700;

color:#163B67;

margin-bottom:10px;
 

}

.feature-card p{

 
color:#64748b;

line-height:1.8;
 

}


/* stats */
.stat-card{

 
text-align:center;

padding:40px 25px;

border-radius:24px;

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

backdrop-filter:blur(15px);

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

transition:.4s;
 

}

.stat-card:hover{

 
transform:translateY(-8px);

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

}

.stat-card h3{

 
font-size:60px;

font-weight:800;

color:#F7C600;

margin-bottom:12px;

line-height:1;
 

}

.stat-card p{

 
color:#cbd5e1;

font-size:18px;
 

}

@media(max-width:768px){

.stat-card{

 
padding:25px 15px;
 

}

.stat-card h3{

 
font-size:40px;
 

}

.stat-card p{

 
font-size:15px;
 

}

}



/* portfolio */
.portfolio-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #e5e7eb;

    transition:.4s;

}

.portfolio-card:hover{

    transform:translateY(-10px);

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

}

.portfolio-image{

    overflow:hidden;

    height:260px;

}

.portfolio-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s;

}

.portfolio-card:hover img{

    transform:scale(1.08);

}

.project-tag{

    display:inline-block;

    background:#fff7d6;

    color:#c58a00;

    padding:8px 16px;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    margin-bottom:15px;

}

.portfolio-card h3{

    font-size:28px;

    font-weight:700;

    color:#163B67;

    margin-bottom:15px;

}

.portfolio-card p{

    color:#64748b;

    line-height:1.8;

}

.portfolio-card a{

    display:inline-block;

    margin-top:20px;

    color:#F7C600;

    font-weight:700;

}

/* process */
.process-card{

    position:relative;

    background:#fff;

    padding:40px 30px;

    border-radius:24px;

    border:1px solid #e5e7eb;

    transition:.4s;

    overflow:hidden;

}

.process-card:hover{

    transform:translateY(-10px);

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

}

.process-number{

    position:absolute;

    top:20px;
    right:20px;

    font-size:70px;

    font-weight:800;

    color:#f8fafc;

    line-height:1;

}

.process-icon{

    width:80px;
    height:80px;

    display:flex;

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

    font-size:34px;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    #163B67,
    #204d82);

    color:white;

    margin-bottom:25px;

}

.process-card h3{

    font-size:28px;

    font-weight:700;

    color:#163B67;

    margin-bottom:15px;

}

.process-card p{

    color:#64748b;

    line-height:1.8;

}

/* we serve */
.industry-card{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:24px;

    padding:40px 20px;

    text-align:center;

    font-size:45px;

    transition:.4s;

}

.industry-card:hover{

    transform:translateY(-10px);

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

    border-color:#F7C600;

}

.industry-card h3{

    margin-top:20px;

    font-size:22px;

    font-weight:700;

    color:#163B67;

}



/* testimonials */
.testimonial-card{

    background:#fff;

    padding:35px;

    border-radius:24px;

    border:1px solid #e5e7eb;

    transition:.4s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

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

}

.stars{

    font-size:20px;

    margin-bottom:20px;

}

.testimonial-card p{

    color:#64748b;

    line-height:1.9;

    margin-bottom:25px;

}

.client-info{

    display:flex;

    align-items:center;

    gap:15px;

}

.client-avatar{

    width:55px;
    height:55px;

    border-radius:50%;

    background:#163B67;

    color:#fff;

    display:flex;

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

    font-weight:700;

}

.client-info h4{

    font-weight:700;

    color:#163B67;

}

.client-info span{

    color:#64748b;

}

/* faq   */
.faq-item{

    background:#f8fafc;

    padding:25px;

    border-radius:18px;

    border:1px solid #e5e7eb;

}

.faq-item summary{

    cursor:pointer;

    font-weight:700;

    color:#163B67;

    font-size:18px;

}

.faq-item p{

    margin-top:15px;

    color:#64748b;

    line-height:1.8;

}



/* about page start  */



/* mission & vision */
.mission-card,
.vision-card{

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

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    padding:45px;

    transition:.4s;

}

.mission-card:hover,
.vision-card:hover{

    transform:translateY(-10px);

    border-color:#F7C600;

}

.mission-icon{

    width:90px;
    height:90px;

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

    border-radius:24px;

    font-size:40px;

    background:
    linear-gradient(
    135deg,
    #F7C600,
    #FFD700);

    margin-bottom:25px;

}

.mission-card h3,
.vision-card h3{

    color:white;

    font-size:38px;

    font-weight:800;

    margin-bottom:20px;

}

.mission-card p,
.vision-card p{

    color:#cbd5e1;

    line-height:1.9;

    margin-bottom:25px;

}

.mission-card ul,
.vision-card ul{

    list-style:none;

}

.mission-card li,
.vision-card li{

    color:white;

    margin-bottom:12px;

}

.goal-box{

    text-align:center;

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

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

    padding:35px;

    border-radius:24px;

    transition:.4s;

}

.goal-box:hover{

    transform:translateY(-8px);

}

.goal-box h3{

    font-size:52px;

    font-weight:800;

    color:#F7C600;

}

.goal-box p{

    color:#cbd5e1;

}