:root{
    --primary:#0d6efd;
    --dark:#081b4b;
    --red:#d61f1f;
    --green:#0d5f1b;
    --light:#f7f9fc;
    --bs-primary: #1976D2;
    --bs-primary-rgb: 25,118,210;
}

body{
font-family:'Segoe UI',sans-serif;
overflow-x:hidden;
background:#fff;
}

.bg-primary {
    background: linear-gradient(
        135deg,
        #0A2540,
        #1976D2
    ) !important;
    color: #fff !important;
    transition: all .3s ease;
}

.bg-primary:hover {
    background: linear-gradient(
        135deg,
        #1976D2,
        #0A2540
    ) !important;
}


.main-header{
background:#fff;
box-shadow:0 3px 20px rgba(0,0,0,.05);
padding:10px 0;
position:sticky;
top:0;
z-index:999;
}

.navbar-brand img{
height:80px;
}

.nav-link{
font-weight:600;
margin:0 10px;
color:#333;
}

.nav-link.active,
.nav-link:hover{
color:var(--primary);
}

.btn-quote{
background:var(--primary);
color:#fff;
padding:12px 30px;
border-radius:10px;
font-weight:600;
}

.btn-quote:hover{
background:#004fc7;
color:#fff;
}

.hero-section{
padding:90px 0;
background: linear-gradient(
135deg,
#ffffff 0%,
#f3f8ff 100%
);
}

.hero-tag{
font-size:18px;
font-weight:700;
color:var(--primary);
letter-spacing:1px;
}

.hero-section h1{
font-size:72px;
font-weight:800;
line-height:1.1;
margin:20px 0;
color:var(--dark);
}

.hero-section p{
font-size:20px;
color:#666;
line-height:1.8;
margin-bottom:35px;
}

.hero-buttons{
display:flex;
gap:15px;
}

.btn-primary-custom{
background:var(--primary);
color:#fff;
padding:15px 35px;
border-radius:12px;
font-weight:600;
text-decoration:none;
}

.btn-primary-custom:hover{
background:#004fc7;
color:#fff;
}

.btn-outline-custom{
border:2px solid var(--primary);
color:var(--primary);
padding:15px 35px;
border-radius:12px;
font-weight:600;
text-decoration:none;
}

.btn-outline-custom:hover{
background:var(--primary);
color:#fff;
}

.services-wheel{
position:relative;
width:550px;
height:550px;
margin:auto;
}

.center-logo{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:260px;
height:260px;
background:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 40px rgba(0,0,0,.08);
}

.center-logo img{
width:180px;
}

.service{
position:absolute;
width:130px;
text-align:center;
font-weight:600;
color:#222;
}

.service i{
width:70px;
height:70px;
line-height:70px;
border-radius:50%;
background:#fff;
color:var(--primary);
font-size:28px;
box-shadow:0 5px 20px rgba(0,0,0,.1);
margin-bottom:10px;
}

.service-1{
top:30px;
left:220px;
}

.service-2{
top:120px;
right:0;
}

.service-3{
top:280px;
right:-10px;
}

.service-4{
bottom:60px;
right:80px;
}

.service-5{
bottom:70px;
left:80px;
}

.service-6{
top:250px;
left:-10px;
}

.stats-section{
margin-top:30px;
padding-bottom:80px;
}

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

.stat-box i{
font-size:45px;
color:var(--primary);
margin-bottom:15px;
}

.stat-box h2{
font-weight:800;
color:var(--dark);
}

.stat-box p{
margin:0;
font-weight:600;
color:#666;
}

@media(max-width:991px){

.hero-section h1{
font-size:45px;
}

.services-wheel{
width:100%;
height:auto;
margin-top:50px;
}

.center-logo{
position:relative;
transform:none;
left:auto;
top:auto;
margin:auto;
}

.service{
display:none;
}

.hero-buttons{
flex-direction:column;
}

}

/* ==========================
   TOP HEADER BAR
========================== */

.top-bar{
    background:#081b4b;
    color:#fff;
    font-size:14px;
    padding:10px 0;
}

.top-contact{
    display:flex;
    flex-wrap:wrap;
    gap:25px;
}

.top-contact a,
.top-contact span{
    color:#fff;
    text-decoration:none;
}

.top-contact i{
    color:#0d6efd;
    margin-right:8px;
}

.top-social a{
    color:#fff;
    margin-left:15px;
    font-size:15px;
    transition:.3s;
}

.top-social a:hover{
    color:#0d6efd;
}

/* Main Header */

.main-header{
    background:#fff;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
    position:sticky;
    top:0;
    z-index:999;
}

.navbar-brand img{
    height:90px;
    transition:.3s;
}

.navbar-brand img:hover{
    transform:scale(1.03);
}

/* Mobile */

@media(max-width:768px){

.top-contact{
    justify-content:center;
    gap:10px;
    text-align:center;
}

.top-social{
    margin-top:10px;
    text-align:center;
}

.top-social a{
    margin:0 8px;
}

}

.about-hero{
    background: linear-gradient(
        135deg,
        #0A2540 0%,
        #134074 45%,
        #1976D2 75%,
        #FFC107 100%
    );
    color:#fff;
    padding:90px 60px;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.about-hero h1{
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.about-hero p{
    color: rgba(255,255,255,.95);
    font-size: 1.15rem;
}

.about-hero img{
    max-height: 350px;
    animation: float 4s ease-in-out infinite;
}

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

.service-card{
    transition: all .3s ease;
    border-radius:15px;
}

.service-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,.12)!important;
}

.service-icon{
    height:70px;
    width:70px;
    background:#eef5ff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.portfolio-card{
    transition: all .35s ease;
    overflow: hidden;
    border-radius: 15px;
}

.portfolio-card img{
    height: 240px;
    object-fit: cover;
}

.portfolio-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,.15);
}

.tech-box{
    background:#fff;
    padding:20px;
    border-radius:10px;
    font-weight:600;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.testimonial-card{
    border-radius:15px;
    transition:all .3s ease;
}

.testimonial-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.12)!important;
}

.rating{
    color:#ffc107;
    font-size:1.3rem;
    letter-spacing:3px;
}