body{
font-family:Poppins, Arial;
margin:0;
background:#f5f7fb;
}

/* ================= HEADER ================= */
header{
background:#0a2c6b;
color:white;
padding:15px 0;
position: sticky;
top: 0;
z-index: 1000;
}

.container{
width:90%;
margin:auto;
}

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

nav a{
color:white;
margin-left:20px;
text-decoration:none;
font-weight:500;
}

/* LOGO */
.logo {
height: 55px;
padding: 5px 12px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
object-fit: contain;
}

/* ================= BUTTON ================= */
.btn{
background:#ffc400;
padding:12px 25px;
color:black;
text-decoration:none;
font-weight:bold;
border-radius:5px;
}

/* ================= SECTIONS ================= */
section{
padding:80px 0;
text-align:center;
}

/* ================= GRID ================= */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
width:90%;
margin-left:auto;
margin-right:auto;
}

/* ================= CARD ================= */
.card{
background:white;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
padding-bottom:20px;
transition:0.3s;
}

.card:hover{
transform:scale(1.05);
}

.card img{
width:100%;
border-radius:10px 10px 0 0;
}

.card a{
display:inline-block;
margin-top:10px;
background:#0a2c6b;
color:white;
padding:10px 20px;
text-decoration:none;
border-radius:5px;
font-weight:500;
}

/* ================= LOGO BOX ================= */
.logo-box {
width: 150px;
height: 100px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 8px;
overflow: hidden;
}

.logo-box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

/* ================= FEATURE ================= */
.feature-card{
background:white;
padding:25px;
border-radius:8px;
font-weight:500;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

/* ================= FOOTER ================= */
footer{
background:#111;
color:white;
padding:30px;
margin-top:40px;
}

/* ================= SCROLL ANIMATION ================= */
.reveal{
opacity:0;
transform:translateY(60px);
transition:all 0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* ================= HERO SLIDER ================= */
.hero-slider {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

.hero-slider::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
z-index: 1;
}

.slides {
width: 100%;
height: 100%;
position: relative;
}

.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.slide.active {
opacity: 1;
}

/* HERO TEXT */
.hero-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 3;
padding: 20px 30px;
border-radius: 10px;
background: rgba(255,255,255,0.75);
}

.hero-overlay h1,
.hero-overlay p {
color:#111;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {

.hero-slider {
height: 70vh;
}

.hero-overlay {
width: 90%;
padding: 20px;
}

.hero-overlay h1 {
font-size: 28px;
}

.hero-overlay p {
font-size: 14px;
}

.btn {
padding: 10px 18px;
font-size: 14px;
}

}

/* ================= HAMBURGER ================= */
.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}

.menu-toggle span {
height: 3px;
width: 25px;
background: white;
margin: 4px 0;
transition: 0.4s;
}

/* ANIMATION */
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}

/* MOBILE NAV */
@media (max-width: 768px) {

.menu-toggle {
display: flex;
}

nav {
position: absolute;
top: 70px;
left: 0;
width: 100%;
background: #0a2c6b;
flex-direction: column;
text-align: center;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}

nav a {
padding: 15px;
display: block;
border-top: 1px solid rgba(255,255,255,0.1);
}

nav.active {
max-height: 300px;
}

}

/* ================= CONTACT PAGE ================= */
.contact-wrapper {
display: flex;
justify-content: center;
padding: 60px 20px;
}

.contact-container {
max-width: 900px;
width: 100%;
padding: 35px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

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

/* CARD FIXED ALIGNMENT */
.contact-card {
background: #f1f3f6;
padding: 25px;
border-radius: 12px;
text-align: center;
transition: 0.3s;

/* 🔥 ALIGNMENT FIX */
display: flex;
flex-direction: column;
height: 100%;
}

.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.contact-card .icon {
font-size: 30px;
margin-bottom: 10px;
}

.contact-card h3 {
margin-bottom: 10px;
}

.contact-card p {
margin-bottom: 10px;
}

/* BUTTON ALIGN FIX */
.contact-card .contact-btn {
margin-top: auto;
}

/* BUTTONS */
.contact-btn {
display: inline-block;
padding: 10px 18px;
border-radius: 6px;
text-decoration: none;
color: white;
font-weight: 500;
}

.call-btn { background: #28a745; }
.whatsapp-btn { background: #25D366; }
.map-btn { background: #007bff; }

/* MAP */
.map-container {
margin-top: 20px;
border-radius: 10px;
overflow: hidden;
}

/* ================= WHATSAPP FLOAT ================= */
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
background: #25D366;
color: white;
font-size: 22px;
padding: 12px 16px;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
z-index: 1000;
transition: 0.3s;
}

.whatsapp-float:hover {
transform: scale(1.1);
}