/* ================================
   BODY OFFSET (TOPBAR + NAV)
================================ */
body{
    font-family: var(--body-font);
    padding-top: 20px;
    font-family: var(--body-font);
}

/* TOP BAR*/
.topbar{
    background: var(--secondary-color);
    color: var(--white-color);
    font-size: 13px;
    padding: 8px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1050;
}

.topbar i{
    margin-right: 6px;
}

.topbar a{
    color: var(--white-color);
    text-decoration: none;
    transition: 0.3s ease;
}

.topbar a:hover{
    color: var(--primary-color);
}

/* ================================
   SOCIAL ICONS
================================ */
.social-icons a{
    margin-left: 15px;
    font-size: 16px;
    transition: 0.3s ease;
}

.social-icons a:hover{
    transform: translateY(-2px);
}

/* NAVBAR*/
.navbar{
    background: var(--white-color);
    position: fixed;
    top: 40px; /* height of topbar */
    width: 100%;
    z-index: 1049;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 5px 0;
}

.navbar-brand img{
height:80px;
width:auto;
}
.navbar-nav .nav-link{
    font-weight: 500;
    color: var(--text-dark);
    margin-left: 20px;
    transition: 0.3s ease;
}

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

/* CTA BUTTON */
.btn-primary{
    background: var(--primary-color);
    border: none;
    transition: 0.3s ease;
}

.btn-primary:hover{
    background: #e85d00;
}

/*    HAMBURGER CUSTOM STYLE */
.custom-toggler{
    border: none;
}

.navbar-toggler-icon{
    background-image: none;
    width: 25px;
    height: 3px;
    background: var(--secondary-color);
    position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background: var(--secondary-color);
    left: 0;
}

.navbar-toggler-icon::before{
    top: -8px;
}

.navbar-toggler-icon::after{
    top: 8px;
}

/* ================================
   DROPDOWN STYLING
================================ */
.navbar .dropdown{
    position: relative;
}

.navbar-nav .dropdown-menu{
    left: 0;
    right: auto;
}

.dropdown-menu{
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    padding: 5px 0;

}
.dropdown-item{

    transition: 0.3s ease;
    padding:6px 18px;
font-size:14px;
}

.dropdown-item:hover{
    background: var(--primary-color);
    color: #fff;
}


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

.hero-section{
    position: relative;
    margin-top: 110px; /* Adjust based on header height */
}

.hero-slide{
    height: 65vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-overlay{
      position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.45) 40%,
        rgba(0,0,0,0.20) 70%,
        rgba(0,0,0,0) 100%
    );
}
.hero-content{
    position: relative;
    color: #fff;
    z-index: 2;
    max-width: 900px;
    padding: 20px;
}

.hero-logo{
    height: 90px;
}

.hero-content h1{
    font-size: 64px;        /* Bigger */
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}

.hero-content h5{
    font-size: 22px;
    font-weight: 500;
}

.hero-tagline{
    font-size: 20px;
    margin-top: 15px;
}

.carousel-control-prev,
.carousel-control-next{
    width: 60px;
    height: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-size: 70% 70%;
}
.carousel-indicators{
    bottom: 30px;
}

.carousel-indicators [data-bs-target]{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.6);
    border: none;
    margin: 0 6px;
    transition: 0.3s ease;
}

.carousel-indicators .active{
    background-color: var(--primary-color);
    transform: scale(1.3);
}
/* BOOKING MODAL */

#bookingModal .modal-content{
    border-radius:12px;
    border:none;
    box-shadow:0 10px 35px rgba(0,0,0,0.2);
}

#bookingModal .modal-header{
    background:#0d6efd;
    color:#fff;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
}

#bookingModal .modal-title{
    font-weight:600;
    font-size:20px;
}
.btn-primary-custom{
    background:#ffc107;
    border:none;
    color:#000;
    padding:12px;
    font-weight:600;
    border-radius:8px;
    transition:0.3s;
}

.btn-primary-custom:hover{
    background:#e0a800;
}
.modal.fade .modal-dialog{
    transform:translateY(-50px);
    transition:all 0.3s ease;
}

.modal.show .modal-dialog{
    transform:translateY(0);
}
/* FOOTER */

.footer-cta{
    background:#ffc107;
    padding:25px 0;
}

.footer-cta h4{
    font-weight:600;
    color:#000;
}

.footer-cta .btn{
    background:#0f172a;   /* dark navy */
    color:#fff;
    border:none;
    padding:10px 24px;
    font-weight:500;
    border-radius:6px;
    transition:0.3s;
}

.footer-cta .btn:hover{
    background:#1e293b;
}
.main-footer{
    background: #0f172a;
    color: #cbd5e1;
    padding: 70px 0 0;
}

.footer-logo{
    height: 60px;
}

.footer-title{
    color: #fff;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-links{
    list-style: none;
    padding: 0;
}

.footer-links li{
    margin-bottom: 10px;
}

.footer-links a{
    text-decoration: none;
    color: #cbd5e1;
    transition: 0.3s ease;
}

.footer-links a:hover{
    color: var(--primary-color);
    padding-left: 5px;
}

.footer-about p{
    line-height: 1.7;
}

.footer-social a{
    color: #fff;
    font-size: 18px;
    margin-right: 12px;
    transition: 0.3s ease;
}

.footer-social a:hover{
    color: var(--primary-color);
}
.footer-contact{
display:flex;
align-items:center;
gap:10px;
margin-bottom:8px;
font-size:15px;
}

.footer-contact i{
color:#ff6a00;
font-size:16px;
}
.footer-contact a{
color:#ffffff;
text-decoration:none;
}

.footer-contact a:hover{
color:#ff6a00;   /* optional hover color */
}
/* Bottom Bar */
.footer-bottom{
    background: #0b1220;
    padding: 15px 0;
    margin-top: 40px;
}

.footer-bottom p{
    margin: 0;
    font-size: 14px;
}
.consultation-btn{
    padding:12px 25px;
    font-weight:600;
    border-radius:8px;
}
/* ABOUT SECTION */
.about-section{
padding:80px 0;
background:#f9f9f9;
}

.about-img{
width:100%;
}

.about-img img{
width:100%;
height:auto;
border-radius:8px;
}

.about-content h2{
font-size:36px;
font-weight:700;
margin-bottom:20px;
}

.about-content p{
font-size:16px;
line-height:1.7;
margin-bottom:15px;
color:#555;
}

.about-btn{
display:inline-block;
margin-top:15px;
padding:12px 28px;
background:#ff7a00;
color:#fff;
text-decoration:none;
border-radius:5px;
font-weight:600;
transition:0.3s;
}

.about-btn:hover{
background:#000;
}
/* SERVICES */

.services-section{
padding:30px 0;
background:#f4f6f9;
text-align:center;
}

.section-title{
font-size:36px;
font-weight:700;
margin-bottom:50px;
}

/* SERVICE CARD */

.service-box{
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.4s;
}

.service-box img{
width:100%;
height:200px;
object-fit:cover;
transition:0.4s;
}

.service-box h5{
padding:18px;
font-size:18px;
font-weight:600;
}

/* HOVER */

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

.service-box:hover img{
transform:scale(1.08);
}
.services-btn{
margin-top:30px;
text-align:center;
}
.btn-view-services{
display:inline-block;
background:#ff6a00;
color:#fff;
padding:12px 30px;
border-radius:6px;
font-size:16px;
font-weight:600;
text-decoration:none;
transition:0.3s ease;
}

.btn-view-services:hover{
background:#0b1c39;
color:#fff;
}
/*In House Team*/
.team-section{
padding:20px 0;
background:#f8f9fa;
}

.section-title{
font-weight:700;
margin-bottom:20px;
}

.team-box{
padding:30px;
margin-bottom:25px;
background:#fff;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
transition:0.3s;
}

.team-box:hover{
transform:translateY(-5px);
border: 2px solid #ff7a00;
}

.team-icon{
font-size:40px;
margin-bottom:15px;
color:#ff7a00;
}
/*Projects*/
.projects-home{
padding:90px 0;
background:#ffffff;
}

.project-card{
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
transition:0.3s;
text-align:center;
}

.project-card:hover{
transform:translateY(-5px);
}

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

.project-card h5{
margin-top:15px;
font-weight:600;
}
/*Client Section*/

.clients-section{
padding:80px 0;
background:#f8f9fa;
text-align:center;
}

.client-slider{
overflow:hidden;
position:relative;
width:100%;
}

.slide-track{
display:flex;
align-items:center;
animation:scroll 30s linear infinite;
}

.client-logo{
width:160px;
margin:0 40px;
transition:transform .3s ease;
}

.client-logo:hover{
transform:scale(1.1);
}

/* animation */

@keyframes scroll{

0%{
transform:translateX(0);
}

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

}

/*about.html*/
/* HERO SECTION */
.about-hero{
height:420px;
background:url("../images/about-banner2.jpg") center/cover no-repeat;
position:relative;
display:flex;
align-items:center;
}

/* LEFT DARK OVERLAY */

.hero-overlay{
width:100%;
height:100%;
background:linear-gradient(
to right,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0.45) 35%,
rgba(0,0,0,0.1) 60%,
rgba(0,0,0,0) 100%
);
display:flex;
align-items:center;
padding-top: 80px;
}

/* TEXT */

.hero-text{
color:#fff;
max-width:600px;
}

.hero-text h1{
font-size:34px;
font-weight:700;
margin-bottom:5px;
}

.hero-text h2{
font-size:34px;
font-weight:700;
margin-top:20px;
}

.hero-text p{
font-size:18px;
margin:0;
opacity:0.95;
}
.hero-brands{
position:absolute;
bottom:60px;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:row;     /* force horizontal row */
align-items:center;
justify-content:center;
gap:20px;
flex-wrap:nowrap;       /* prevent vertical stacking */
background:none;
border-radius:10px;
}

.associate-title{
color:#fff;
font-weight:600;
margin-bottom:10px;
font-size: 10px;
}

.brand-row{
display:flex;
align-items:center;
gap:20px;
}

.brand-item{
padding:1px 10px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
border-radius:8px;
}
.brand-item img{
height:28px;
width:auto;
object-fit:contain;
}
.small-text{
font-size:18px;
margin-bottom:15px;
}
.about-company{
padding:80px 0;
}

.about-img{
width:100%;
border-radius:8px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
height: 300px;
}

.leadership-section{
padding:80px 0;
background:#f8f9fb;
}

.leadership-section .row{
display:flex;
align-items:center;
}

.md-image{
border-radius:12px;
box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

.leadership-section img{
height:400px;
width:100%;
object-fit:cover;
}

.leadership-subtitle{
color:#ff7a00;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:5px;
}

.md-name{
font-size:34px;
font-weight:700;
margin-bottom:5px;
}

.md-role{
color:#ff7a00;
font-weight:600;
margin-bottom:15px;
}

.md-description{
color:#555;
line-height:1.7;
font-size:16px;
}

.leadership-section .col-lg-7{
border-left:4px solid #ff7a00;
padding-left:30px;
}
.company-stats{
background:#0d1b2a;
color:white;
padding:70px 0;
}

.stat-box h2{
color:#ff6b00;
font-size:40px;
}

.services-overview{
padding:80px 0;
}

.service-box{
padding:30px;
}

.service-box i{
font-size:40px;
color:#ff6b00;
margin-bottom:10px;
}

.team-section{
background:#f7f7f7;
padding:80px 0;
}

.team-card{
padding:25px;
}

.team-card i{
font-size:35px;
color:#ff6b00;
margin-bottom:10px;
}
.cta{
background:#ff6b00;
padding:70px 0;
}

.cta h3{
color:#fff;
font-size:32px;
font-weight:600;
margin-bottom:20px;
}

.cta-btn{
background:#fff;
color:#ff6b00;
padding:12px 28px;
border-radius:5px;
text-decoration:none;
font-weight:600;
display:inline-block;
}

.cta-btn:hover{
background:#000;
color:#fff;
}
/* WHY CHOOSE US */

.why-choose{
padding:80px 0;
background:#f8f9fb;
}
.why-card h5{
display:flex;
align-items:center;
gap:10px;
}

.why-card h5 i{
color:#ff7a00;
font-size:20px;
}
/* TEAM SECTION */

.team-section{
padding:90px 0;
background:#f8f9fb;
}

.section-title h2{
font-size:36px;
font-weight:700;
margin-bottom:10px;
}

.section-title p{
color:#666;
margin-bottom:50px;
}

.team-card{
background:#fff;
padding:35px 25px;
border-radius:10px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
height:100%;
}

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

.team-icon{
font-size:40px;
color:#ff6b00;
margin-bottom:15px;
}

.team-card h4{
font-size:20px;
font-weight:600;
margin-bottom:5px;
}

.team-card span{
display:block;
font-size:14px;
color:#ff6b00;
margin-bottom:10px;
}

.team-card p{
font-size:15px;
color:#666;
line-height:1.6;
}
.section-title h2{
font-size:36px;
font-weight:700;
margin-bottom:10px;
}

.section-title p{
color:#666;
margin-bottom:50px;
}

/* solutions.html*/

.solutions-section{
padding:90px 0;
background:#f8f9fb;
}

.solutions-image img{
width:100%;
border-radius:10px;
box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.solution-card{
background:#fff;
padding:25px;
border-radius:10px;
display:flex;
align-items:center;
gap:15px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
}

.solution-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 30px rgba(0,0,0,0.15);
}

.solution-card i{
font-size:28px;
color:#ff6b00;
}

.solution-card h5{
margin:0;
font-size:18px;
font-weight:600;
}
.service-row img{
width:100%;
height:320px;
object-fit:cover;
border-radius:12px;
box-shadow:0 15px 30px rgba(0,0,0,0.15);
}
/*solutions.html*/
section h3 {
    color: #ff7a00;
}

ul {
    list-style-type: square;
}

.services-hero{
background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
url("../images/solutions.jpg") center/cover no-repeat;
min-height:350px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
margin-top: 120px;
}

.services-hero h1{
font-size:48px;
font-weight:700;
letter-spacing:1px;
}

.services-hero p{
font-size:20px;
opacity:.9;
margin-top:10px;
}
.services-intro-section{
background:#f8f9fb;
padding:100px 0;
}

.section-subtitle{
display:inline-block;
font-size:14px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
color:#ff7a00;
margin-bottom:10px;
}

.section-title{
font-size:38px;
font-weight:700;
color:#0d1b2a;
margin-bottom:15px;
}

.title-divider{
width:70px;
height:3px;
background:#ff7a00;
margin:15px auto 25px;
}

.section-description{
max-width:820px;
margin:auto;
font-size:17px;
color:#666;
line-height:1.7;
}
.service-row{
padding:60px 0;
border-bottom:1px solid #eee;
}

.service-row:last-child{
border-bottom:none;
}

.service-row img{
width:100%;
max-width:100%;
height:420px;
object-fit:cover;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
transition:0.3s;
display:block;
}
.service-row img:hover{
transform:scale(1.03);
}

.service-row h3{
font-size:28px;
font-weight:700;
margin-bottom:15px;
color:#0d1b2a;
}

.service-row p{
color:#666;
line-height:1.6;
}
.service-row ul{
padding-left:18px;
margin-top:10px;
}

.service-row ul li{
margin-bottom:6px;
color:#444;
}
/*projects.html*/
/* PROJECT HERO */

.projects-hero{
background:
linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
url("../images/projects3.jpg") center/cover no-repeat;

height:450px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
text-align:center;
}

.projects-hero h1{
font-size:46px;
font-weight:700;
margin-bottom:10px;
}

.projects-hero p{
font-size:18px;
max-width:700px;
margin:auto;
opacity:0.9;
}

.project-item{
margin-bottom:60px;
text-align:center;
}
.project-item h3{
font-weight:700;
margin-bottom:5px;
}

.project-item p{
color:#666;
margin-bottom:25px;
}

/* IMAGE GRID */

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

.project-gallery img{
width:100%;
height:220px;
object-fit:cover;
border-radius:6px;
transition:0.3s;
}

/* HOVER EFFECT */

.project-gallery img:hover{
transform:scale(1.05);
}
/*clients.html*/
.clients-hero{
    padding:120px 0 80px;
position:relative;
height:500px;
background:url('../images/about6.jpg') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

.hero-content{
position:relative;
color:#fff;
}

.hero-content h1{
font-size:48px;
font-weight:700;
}

.hero-content p{
font-size:18px;
opacity:0.9;
}
.client-category-section{
padding:80px 0;
background:#f4f6f9;
}

.client-card{
background:#fff;
padding:35px;
border-radius:12px;
box-shadow:0 5px 25px rgba(0,0,0,0.08);
transition:0.3s;
}

.client-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.client-card h3{
color:#ff7a00;
margin-bottom:25px;
font-weight:700;
}

.client-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1px 40px;
list-style:none;
padding:0;
}

.client-list li{
position:relative;
padding-left:18px;
margin-bottom:8px;
}

.client-list li::before{
content:"▪";
color:#ff7a00;
position:absolute;
left:0;
top:0;
}
/*contact.html*/
/* CONTACT HERO */

.contact-hero{
position:relative;
height:500px;
background-image:url("../images/contact2.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
}

/* DARK OVERLAY */

.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

/* TEXT CONTENT */

.hero-content{
position: relative;
z-index: 2;
color: #ffffff;
text-align: center;
max-width: 800px;
margin: auto;
padding: 20px;
}

.hero-content h1{
font-size: 54px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 15px;
text-transform: capitalize;
}

.hero-content p{
font-size: 20px;
line-height: 1.6;
opacity: 0.95;
max-width: 650px;
margin: auto;
}
.hero-content{
animation: fadeUp 1.2s ease;
}
.contact-info-section{
padding:80px 0;
background:#f4f6f9;
}

.contact-box{
background:#fff;
padding:35px 25px;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
transition:all .3s ease;
border-top:4px solid #ff7a00;
}

.contact-box:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.contact-icon{
width:60px;
height:60px;
margin:0 auto 15px;
background:#ff7a00;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:24px;
}

.contact-box h5{
font-weight:600;
margin-bottom:10px;
}

.contact-box p{
margin:0;
color:#555;
line-height:1.6;
}


/* CONTACT FORM */

.contact-form-section h2{
margin-bottom:20px;
font-weight:700;
}
.footer-contact{
display:flex;
align-items:center;
gap:10px;
margin-bottom:8px;
font-size:15px;
}

.footer-contact i{
color:#ff6a00;
font-size:16px;
}
.footer-contact a{
color:#ffffff;
text-decoration:none;
}

.footer-contact a:hover{
color:#ff6a00;   /* optional hover color */
}
.contact-form-section{
padding:80px 0;
background:#f4f6f9;
}

.office-address{
line-height:1.8;
font-size:16px;
color:#444;
}
/* ADDRESS BOX */

.address-box{
background:#fff;
padding:35px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
border-left:5px solid #ff7a00;
height:100%;
}

/* TITLE */

.address-title{
margin-bottom:25px;
font-weight:700;
}

/* ADDRESS ITEMS */

.address-item{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:18px;
}

/* ICON */

.address-item i{
color:#fff;
background:#ff7a00;
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:14px;
flex-shrink:0;
}

/* TEXT */

.address-item p{
margin:0;
color:#444;
line-height:1.6;
font-size:15px;
}