:root{
--navy:#0B1F4D;
--gold:#D4AF37;
--gray:#6B7280;
--light:#F8F9FA;
--dark:#111827;
}

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Segoe UI',sans-serif;
color:#333;
background:#fff;
line-height:1.6;
}

/* ====================================
CONTAINER
==================================== */

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* ====================================
EMERGENCY BANNER
==================================== */

.banner{
background:var(--gold);
color:var(--navy);
text-align:center;
padding:12px;
font-weight:700;
letter-spacing:1px;
}

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

header{
background:var(--navy);
position:sticky;
top:0;
z-index:999;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

.logo{
color:var(--gold);
font-size:32px;
font-weight:800;
text-decoration: none;
}

.logo span{
color:white;
font-size:18px;
display:block;

}

nav ul{
list-style:none;
display:flex;
gap:25px;
}

nav a{
text-decoration:none;
color:white;
font-weight:600;
transition:.3s;
}

nav a:hover{
color:var(--gold);
}

.section{
    background-image: url('../images/Logo.png');
    background-repeat: no-repeat;
    color: #D4AF37;}


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


.hero{
    background:
        linear-gradient(rgba(11,31,77,.88),
        rgba(11,31,77,.88)),
        url("../images/hero.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    min-height: 70vh;

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

    text-align: center;
    color: #fff;

    padding: 60px 20px;
}

.hero-content{
    max-width: 900px;
    width: 100%;
}

.hero-content h2{
    font-size: 2.2rem;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #D4AF37;
    font-weight: 700;
    font-family: "Segoe UI", sans-serif;
}

.hero-content p{
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.hero-buttons{
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}


@media (min-width:1400px){

.hero{
    min-height:80vh;
}

.hero-content h2{
    font-size:3rem;
}

.hero-content p{
    font-size:1.35rem;
}

}

@media (max-width:1200px){

.hero-content h2{
    font-size:2.5rem;
}

}

@media (max-width:992px){

.hero{
    min-height:65vh;
}

.hero-content h2{
    font-size:2rem;
}

.hero-content p{
    font-size:1.1rem;
}

}

@media (max-width:768px){

.hero{
    min-height:60vh;
    padding:70px 20px;
}

.hero-content h2{
    font-size:1.7rem;
}

.hero-content p{
    font-size:1rem;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.hero-buttons a{
    width:230px;
}

}

@media (max-width:576px){

.hero{
    min-height:55vh;
    padding:60px 15px;
}

.hero-content h2{
    font-size:1.45rem;
    line-height:1.4;
}

.hero-content p{
    font-size:.95rem;
}

.hero-buttons a{
    width:100%;
    max-width:260px;
}

}

@media (max-width:375px){

.hero{
    min-height:50vh;
}

.hero-content h2{
    font-size:1.25rem;
}

.hero-content p{
    font-size:.9rem;
}

}


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

.btn{
display:inline-block;

background:var(--gold);
color:var(--navy);

padding:14px 30px;

text-decoration:none;
border-radius:5px;

font-weight:700;

transition:.3s;

}

.btn:hover{
transform:translateY(-3px);
}

.btn-outline{
background:transparent;
border:2px solid white;
color:white;
border-radius:5px;
font-weight:700;
}
.btn-outline:hover{
    transform:translateY(-3px);
}


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

.section{
padding:80px 0;
background-image: url('../images/Logo.png');
}

.section {
    padding: 80px 0;
    background: url("../images/Logo.png") center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}


.section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/Logo.png") center center no-repeat;
    background-size: 350px;
    opacity: 0.08;
    z-index: 0;
}

.section > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .section::before {
        background-size: 220px;
    }
}

@media (min-width: 1400px) {
    .section::before {
        background-size: 450px;
    }
}


.section-title{
text-align:center;
margin-bottom:50px;
}

.section-title h2{
color:var(--navy);
font-size:40px;
margin-bottom:10px;
}

.section-title p{
color:var(--gray);
}

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

.cards{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));
gap:20px;

}

.card{
background:white;

padding:10px;

border-radius:10px;

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

transition:.3s;

}

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

.card h3{
color:var(--navy);
margin-bottom:10px;
}

.card-img img{
    width: 100%;
    height: 180px;
    border-radius: 10px 10px 0 0;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.checklist li{
font-size: 15px;
}

/* ====================================
INDUSTRIES
==================================== */

.industry-box{
text-align:center;

padding:30px;

background:white;

border-radius:10px;

box-shadow:
0 5px 20px rgba(0,0,0,.06);

}

/* ====================================
PROJECT GALLERY
==================================== */

.gallery{
display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:20px;

}

.gallery img{
width:100%;
height:250px;
object-fit:cover;

border-radius:10px;


}

/* ====================================
CONTACT FORM
==================================== */

.contact-form{
max-width:700px;
margin:auto;
}

.contact-form input,
.contact-form textarea{

width:100%;

padding:15px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:5px;

}

.contact-form button{

background:var(--gold);

color:var(--navy);

border:none;

padding:15px 30px;

font-weight:700;

cursor:pointer;

}

.hero-small{
    background: var(--navy);
    color: white;
    text-align: center;
    padding: 50px 20px;
}

.hero-small h1{
    font-size: 48px;
    margin: 0;
}

/* ====================================
CTA SECTION
==================================== */

.cta{

background:var(--navy);

color:white;

text-align:center;

padding:80px 20px;

}

.cta h2{
font-size:42px;
margin-bottom:20px;
}


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

.site-footer {
    background: #0b1f4d;
    color: #d6dce5;
    padding-top: 60px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.footer-container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
    padding-bottom: 40px;
}

/* Footer Columns */

.footer-col h4 {
    color: #f4b400;
    font-size: 1.2rem;
    margin-bottom: 20px;
    position: relative;
    font-weight: 600;
}

.footer-col h4::after {
    content: "";
    width: 55px;
    height: 3px;
    background: #f4b400;
    position: absolute;
    left: 0;
    bottom: -8px;
    border-radius: 10px;
    display:none;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 14px;
    line-height: 1.7;
    color: #cfd6df;
    font-size: 15px;
}

/* Links */

.footer-col ul li a {
    color: #d6dce5;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-col ul li a:hover {
    color: #f4b400;
    padding-left: 6px;
}

/* Contact Icons */

.footer-col i {
    color: #f4b400;
    width: 24px;
    margin-right: 8px;
    text-align: center;
}

/* Company Description */

.footer-col:first-child li {
    color: #b9c4d2;
}

/* Bottom Footer */

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #b7c0ca;
}

/* Hover Effect */

.footer-col {
    transition: transform 0.3s ease;
}

.footer-col:hover {
    transform: translateY(-5px);
}

/* Responsive */

@media (max-width:768px) {

    .site-footer {
        padding-top: 45px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-col i {
        margin-right: 6px;
    }

    .footer-col ul li a:hover {
        padding-left: 0;
    }
}

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

@media(max-width:768px){
.navbar{
    flex-direction:column;
}

nav ul{
    flex-wrap:wrap;
    justify-content:center;
    margin-top:15px;
}

.hero h1{
    font-size:38px;
}

.hero p{
    font-size:16px;
}

.hero-small h1{
    font-size:34px;
}
}

.card p{
    margin-bottom:15px;
}

.section-title p{
    max-width:700px;
    margin:auto;
}

.cta p{
    max-width:700px;
    margin:auto;
}

.service-card{
position:relative;
overflow:hidden;
border-top:5px solid #D4AF37;
transition:all .3s ease;
}

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

.service-icon{
font-size:20px;
margin-bottom:20px;
}

.service-card a{
    color:#D4AF37;
}

.service-card h3{
color:#0B1F4D;
margin-bottom:15px;
font-size:22px;
}

.service-card p{
color:#555;
min-height:90px;
}

.service-link{
display:inline-block;
margin-top:15px;
color:#0B1F4D;
font-weight:700;
text-decoration:none;
}

.service-link:hover

.service-card::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:0;
background:rgba(212,175,55,.05);
transition:.3s;
}

.service-card:hover::before{
height:100%;
}




:root{
--navy:#0B1F4D;
--gold:#D4AF37;
--light:#F5F7FA;
--dark:#111;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
line-height:1.6;
color:#333;
background:white;
}

/* TOP BAR */
.top-bar{
background:var(--gold);
color:var(--navy);
text-align:center;
padding:10px;
font-weight:700;
}

/* HEADER */
.header{
background:var(--navy);
position:sticky;
top:0;
z-index:999;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo{
color:var(--gold);
font-size:26px;
font-weight:800;
}

.logo span{
color:white;
font-size:14px;
display:block;
}

nav ul{
display:flex;
gap:20px;
list-style:none;
}

nav a{
color:white;
text-decoration:none;
font-weight:500;
}

nav a:hover{
color:var(--gold);
}

/* HERO */
.hero{
background:linear-gradient(rgba(11,31,77,.85),rgba(11,31,77,.85));
background-image: url('../images/Img 1.jpg');
background-size:cover;
background-position:center;
height:50vh;
width:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
padding:20px;
}

.hero h1{
font-size:52px;
margin-bottom:15px;
}

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

.hero-buttons{
margin-top:25px;
}

/* BUTTONS */
.btn{
background:var(--gold);
color:var(--navy);
padding:12px 25px;
text-decoration:none;
font-weight:700;
display:inline-block;
border-radius:6px;
margin-right:10px;
}

.btn-outline{
border:2px solid white;
color:white;
padding:12px 25px;
text-decoration:none;
}

/* SECTIONS */
.section{
padding:80px 20px;
}

.light{
background:#F8F9FA;
}

.section-title{
text-align:center;
margin-bottom:40px;
}

.section-title h2{
font-size:36px;
color:var(--navy);
}

.center-text{
max-width:800px;
margin:auto;
text-align:center;
}

/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

/* CARDS */
.card{
background:white;
padding:25px;
border-radius:12px;
text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,.08);
transition:.3s;
border-top:4px solid var(--gold);
}

.card i{
font-size:30px;
color:var(--navy);
margin-bottom:10px;
}

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

/* INDUSTRY BOX */
.grid-small{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:15px;
}

.box{
background:white;
padding:20px;
text-align:center;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.06);
}

/* PROJECTS */
.project img{
width:100%;
height:230px;
object-fit:cover;
border-radius:10px;
}

/* CTA */
.cta{
background:var(--navy);
color:white;
text-align:center;
padding:70px 20px;
}

.cta h2{
font-size:38px;
margin-bottom:10px;
}

/* FORM */
.form{
max-width:600px;
margin:auto;
}

.form input,
.form textarea{
width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:6px;
}

.form button{
background:var(--gold);
border:none;
padding:12px 25px;
font-weight:700;
cursor:pointer;
}


.phone-number{
    color: #D4AF37;
}

/* FOOTER */
footer{
background:#071530;
color:white;
text-align:center;
padding:20px;
}

/* MOBILE */
@media(max-width:768px){
.hero h1{font-size:32px;}
nav ul{flex-wrap:wrap;justify-content:center;}
}



.card{
    background:#fff;
    padding:35px;
    border-radius:12px;
    border-top:4px solid var(--gold);

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

    transition:.3s;
}

.card:hover{
    transform:translateY(-8px);

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

.btn{
    background:var(--gold);
    color:var(--navy);

    padding:14px 32px;

    border-radius:6px;

    text-decoration:none;

    font-weight:600;
}

.btn:hover{
    transform:translateY(-3px);
}

.btn-outline{
    background:transparent;
    border:2px solid white;
    color:white;
}


.section-title h2{
    color:#D4AF37;
    font-size:40px;
    margin-bottom:10px;
}
.hero-small{
    background: img('../images/Logo.png');
    color: white;
    text-align: center;
    padding: 50px 20px;
}






/* ==============================
   QUOTE FORM STYLING
============================== */

/* Container & heading */
.quote-page h1, .quote-page h2 {
  margin-left: 20px;        /* heading left padding */
  font-size: 24px;          /* smaller font size */
  color: #005fa3;
}

/* Main form container */
.quote-page main {
  max-width: 800px;         /* smaller form width */
  margin: 30px auto;        /* center horizontally */
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* Form fields */
.quote-form .form-group {
  margin-bottom: 15px;
}

.quote-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #0b2e59;
  font-size: 14px;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  transition: border 0.3s ease;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: #38bdf8;
  outline: none;
}

/* Submit button */
.quote-form button.btn-primary {
  background: #0077cc;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.quote-form button.btn-primary:hover {
  background: #005fa3;
}

/* Success message */
.form-success {
  display: none;
  color: green;
  margin-top: 15px;
  font-weight: 500;
  font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .quote-page main {
    margin: 20px;
    padding: 15px;
  }

  .quote-page h1, .quote-page h2 {
    margin-left: 20px;
    font-size: 20px;
  }
}




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

/* Fade + slide form on load */
.quote-form {
  animation: formFadeUp 0.7s ease-out both;
}

@keyframes formFadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Input focus animation */
.form-group input,
.form-group select,
.form-group textarea {
  transition: 
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

/* Lift + glow on focus */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #0b2e59;
  box-shadow: 0 0 0 3px rgba(11, 46, 89, 0.15);
  transform: translateY(-1px);
}

/* Button hover animation */
.btn-primary {
  transition: 
    background-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Button click feedback */
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* Optional: field group stagger effect */
.form-group {
  animation: fieldFade 0.6s ease forwards;
  opacity: 0;
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.15s; }
.form-group:nth-child(3) { animation-delay: 0.2s; }
.form-group:nth-child(4) { animation-delay: 0.25s; }
.form-group:nth-child(5) { animation-delay: 0.3s; }
.form-group:nth-child(6) { animation-delay: 0.35s; }

@keyframes fieldFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}