:root{
    --primary:#1f3a5f;
    --secondary:#c9a24d;
    --dark:#0f172a;
    --light:#64748b;
    --bg1:#eef2f7;
    --bg2:#e6ebf1;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:"Segoe UI",Arial, Helvetica, sans-serif;
    color:var(--dark);
    line-height:1.6;
    background:linear-gradient(180deg,var(--bg1),var(--bg2));
}



/* HEADER */
header{
  position:relative;
  overflow:hidden;
}

.nav{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
  max-width:1200px;
  margin:auto;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO IMAGE */
.logo{
  height:150px;          /* adjust as needed */
  width:auto;
  object-fit:contain;
}

/* NAV LINKS */
.nav a{
  color:#ffffff;
  text-decoration:none;
  margin-left:22px;
  font-weight:500;
}



/* HERO */
.hero-slider{height:92vh;position:relative}
.slide{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
    opacity:0;transition:opacity 1.2s ease
}
.slide.active{opacity:1}
.slide::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(31,58,95,.85),rgba(0,0,0,.45))
}
.hero-content{
    position:relative;z-index:2;
    max-width:1200px;margin:auto;height:100%;
    display:flex;align-items:center;padding:0 20px;color:#fff
}
.hero-content h2{font-size:46px;margin-bottom:12px}
.hero-content p{font-size:19px;max-width:540px}
.hero-content .btn{
    display:inline-block;margin-top:22px;
    background:var(--secondary);color:#111;
    padding:14px 34px;border-radius:30px;
    font-weight:600;text-decoration:none
}




/* CONTENT BACKGROUND */
.content-bg{
    padding:45px 0 65px;
}

/* STATS */
.stats{
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    box-shadow:0 20px 45px rgba(2,6,23,.08);
    max-width:1200px;
    margin:0 auto 70px;
    border-radius:22px;
    padding:40px 26px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:26px;
    position:relative;
}

/* subtle top accent */
.stats::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:6px;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    border-radius:22px 22px 0 0;
}

.stat{
    text-align:center;
    padding:18px 10px;
}

.stat h3{
    margin:0;
    font-size:32px;
    font-weight:700;
    color:var(--primary);
}

.stat p{
    margin-top:8px;
    font-size:15px;
    color:var(--light);
    letter-spacing:.2px;
}








.process{
  background:linear-gradient(135deg,#f8fafc,#eef2ff);
  border-radius:24px;
  padding:60px 30px;
  position:relative;
  overflow:hidden;
}

/* subtle background glow */
.process::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at top left,rgba(99,102,241,.08),transparent 60%);
  z-index:0;
}

.process .section-title{
  position:relative;
  z-index:1;
}

.process-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:32px;
  margin-top:40px;
  position:relative;
  z-index:1;
}

.process-steps div{
  background:#ffffff;
  padding:34px 28px;
  border-radius:22px;
  box-shadow:0 18px 45px rgba(2,6,23,.08);
  text-align:center;
  transition:all .35s ease;
  position:relative;
}

.process-steps div:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 70px rgba(2,6,23,.15);
}

/* step number badge */
.process-steps span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin-bottom:18px;
  border-radius:50%;
  font-size:20px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--secondary),var(--primary));
  box-shadow:0 10px 25px rgba(99,102,241,.35);
}

.process-steps h4{
  font-size:18px;
  font-weight:600;
  margin-bottom:10px;
  color:var(--dark);
}

.process-steps p{
  font-size:15px;
  line-height:1.6;
  color:var(--light);
}


/* LISTINGS */
.listings{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
  padding:40px 0;
}

/* card */
.listing{
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(2,6,23,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}

/* hover */
.listing:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(2,6,23,.14);
}

/* image */
.listing img{
  width:100%;
  height:220px;
  object-fit:cover;
}

/* info */
.listing .info{
  padding:22px 20px 24px;
}

.listing .info h4{
  font-size:17px;
  font-weight:600;
  margin-bottom:6px;
  color:var(--dark);
}

.listing .info p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--light);
  margin-bottom:14px;
}

/* price */
.price{
  display:inline-block;
  font-size:14px;
  font-weight:600;
  color:var(--primary);
  background:#f8fafc;
  padding:7px 14px;
  border-radius:10px;
  border:1px solid #e5e7eb;
}



/* SECTION – CARD BACKGROUND */
section{
  max-width:1200px;
  margin:60px auto;
  padding:60px 40px;
  background:#ffffff;
  border-radius:22px;
  box-shadow:0 18px 45px rgba(2,6,23,.08);
}

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

.section-title h3{
  font-size:32px;
  font-weight:600;
  margin-bottom:8px;
  color:var(--dark);
}

.section-title p{
  color:var(--light);
  max-width:600px;
  margin:auto;
  font-size:15.5px;
  line-height:1.6;
}

/* SERVICES GRID */
.services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px;
  margin-top:16px;
}

/* SERVICE CARD */
.service{
  background:#ffffff;
  border-radius:18px;
  padding:32px 26px;
  border:1px solid #e5e7eb;
  box-shadow:0 14px 36px rgba(2,6,23,.10);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* hover */
.service:hover{
  transform:translateY(-6px);
  border-color:var(--primary);
  box-shadow:0 22px 50px rgba(2,6,23,.16);
}

/* title */
.service h4{
  margin-bottom:12px;
  font-size:19px;
  font-weight:600;
  color:var(--primary);
}

/* description */
.service p{
  color:var(--light);
  font-size:14.8px;
  line-height:1.65;
}






/* CONTACT */
/* CONTACT SECTION – NEW DESIGN */
.contact{
    background:linear-gradient(135deg,var(--primary),#0b1f3a);
    padding:55px 20px;
    border-radius:26px;
}

.contact-wrap{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:34px;
    align-items:center;
}

/* LEFT INFO */
.contact-info{
    color:#fff;
}

.contact-info .tag{
    display:inline-block;
    background:rgba(255,255,255,.15);
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    margin-bottom:14px;
}

.contact-info h3{
    font-size:30px;
    margin-bottom:10px;
}

.contact-info p{
    font-size:16px;
    opacity:.9;
    max-width:420px;
}

.contact-points{
    list-style:none;
    padding:0;
    margin:18px 0 10px;
}

.contact-points li{
    margin-bottom:8px;
    font-size:15px;
}

/* WHATSAPP BUTTON */
.whatsapp{
    display:inline-block;
    margin-top:14px;
    background:#25D366;
    color:#fff;
    padding:14px 28px;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 12px 30px rgba(37,211,102,.35);
    transition:.3s;
}

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

/* TESTIMONIALS */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:36px;
  margin-top:36px;
}

/* testimonial card */
.testimonial{
  background:#ffffff;
  padding:34px 32px;
  border-radius:20px;
  border:1px solid #e5e7eb;
  box-shadow:0 16px 38px rgba(2,6,23,.10);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
}

/* hover */
.testimonial:hover{
  transform:translateY(-8px);
  border-color:var(--primary);
  box-shadow:0 26px 60px rgba(2,6,23,.18);
}

/* quote mark (clear but elegant) */
.testimonial::before{
  content:"“";
  position:absolute;
  top:12px;
  right:18px;
  font-size:56px;
  font-weight:700;
  color:rgba(99,102,241,.18);
  line-height:1;
}

/* testimonial text */
.testimonial p{
  margin:0;
  font-style:italic;
  font-size:15.5px;
  line-height:1.7;
  color:var(--dark);
}




/* FORM CARD */
.contact-card{
    background:rgba(255,255,255,.95);
    border-radius:22px;
    padding:28px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.contact-card h4{
    margin:0 0 4px;
    font-size:22px;
    color:var(--primary);
}

.contact-card p{
    margin-bottom:14px;
    font-size:14px;
    color:var(--light);
}

.contact-card input,
.contact-card textarea{
    width:100%;
    padding:12px 14px;
    margin-bottom:10px;
    border-radius:10px;
    border:1px solid #e5e7eb;
    font-size:14px;
}

.contact-card button{
    background:var(--primary);
    color:#fff;
    border:none;
    padding:13px;
    width:100%;
    border-radius:26px;
    font-size:15px;
    cursor:pointer;
    transition:.3s;
}

.contact-card button:hover{
    background:#142c4a;
}



.cta-strip{
  background:linear-gradient(135deg,var(--primary),#0b1f3a);
  color:#fff;
  text-align:center;
  padding:60px 20px;
}


/* RESPONSIVE */
@media(max-width:900px){
    .contact-wrap{
        grid-template-columns:1fr;
        text-align:center;
    }
    .contact-info p{margin:auto}
}


/* ---------- FOOTER ---------- */
.footer {
  background: #0b1c2d;
  color: #fff;
   padding:0;
  font-family: Arial, sans-serif;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: auto;
  padding:50px 20px;
  background: #0b1c2d;
}
.footerlogo {
height:250px; /* adjust as needed */
width:auto;
object-fit:contain;
background: transparent; /* ensure no background color */
display: block;
}

.footer-box h3 {
  margin-bottom: 12px;
  color: #ffcc00;
}

.footer-box p {
  color: #ddd;
  line-height: 1.6;
}

.footer-box img {
  margin: 10px 0;
  background: transparent;
  border-radius: 6px;
}

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

.footer-box ul li {
  margin-bottom: 8px;
}

.footer-box ul li a {
  text-decoration: none;
  color: #ddd;
  transition: 0.3s;
}

.footer-box ul li a:hover {
  color: #ffcc00;
}

.bottom-bar{
  background:#06121f;
  width:100%;
  text-align:center;
 padding:12px 0;
  margin-top:40px;
  font-size:14px;
  border-top:1px solid #1f3a57;
  box-sizing:border-box;
}
.bottom-content{
  max-width:1200px;
  margin:auto;
  padding:0 20px;   /* padding goes here */
}


.social-box {
    text-align: center;  /* Centers everything inside */
    margin-top: 20px;
}

.social-box h3 {
    margin-bottom: 12px; /* Space between heading and icons */
    font-size: 20px;
     color: #ffcc00;
      margin-top: 25px;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    margin-bottom: 25px;   /* 👈 GAP between icons & Office Address */
}


.social-icons a {
    color: #fff;
    font-size: 26px;
    transition: transform 0.3s, color 0.3s;
}

.social-icons a:hover {
    color: #f4b400;
    transform: scale(1.3);
}
.office-address {
    margin-top: 30px;
}

.whatsapp-link{
  color: inherit;        /* same color as text */
  text-decoration: none;
  font-weight: 600;
}

.whatsapp-link:hover{
  text-decoration: underline;
  color: #25D366;        /* WhatsApp green */
}



/* Mobile adjustments */
@media (max-width:600px){
    .social-icons {
        gap: 12px;
    }

    .social-icons a {
        font-size: 22px;
    }
}




@media(max-width:900px){
    .hero-content h2{font-size:34px}
    .contact-wrap{grid-template-columns:1fr}
}


#floatingForm {
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 9999;
}

.floating-card {
    width: 330px;
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    text-align: center;
    animation: slideIn 0.5s ease;
    border-top: 6px solid #28a745; /* Green for guaranteed trust */
}

.offer-title {
    font-size: 18px;
    font-weight: 700;
    color: #28a745;
    margin-bottom: 8px;
}

.offer-sub {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

.floating-card input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.floating-card button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(45deg, #28a745, #1e7e34);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.floating-card button:hover {
    transform: scale(1.03);
}

.terms {
    font-size: 11px;
    color: #888;
    margin-top: 10px;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media(max-width:768px){
    #floatingForm {
        right: 10px;
        left: 10px;
        bottom: 20px;
    }

    .floating-card {
        width: 100%;
    }
}