/* --- Variables & Setup --- */
:root {
--primary-color: #0056b3;
--secondary-color: #00a8ff;
--dark-color: #1a1a2e;
--text-color: #333;
--light-bg: #f4f7f6;
--white: #ffffff;
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.4);
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
--transition: all 0.3s ease-in-out;
}

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

html {
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
color: var(--text-color);
}

body {
background-color: var(--light-bg);
overflow-x: hidden;
}

/* --- Typography & Utility --- */
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

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

.section { padding: 5rem 0; }
.bg-light { background-color: var(--white); }
.mt-4 { margin-top: 2rem; }
.w-100 { width: 100%; }

.section-title {
text-align: center;
margin-bottom: 3rem;
}

.section-title h2 {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 0.5rem;
}

/* --- Glassmorphism Components --- */
.glassmorphism {
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
}

.glass-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 15px;
box-shadow: var(--glass-shadow);
padding: 2rem;
}

/* --- Buttons --- */
.btn {
display: inline-block;
padding: 0.8rem 1.8rem;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
border: none;
text-align: center;
}

.btn-primary {
background-color: var(--primary-color);
color: var(--white);
}

.btn-primary:hover {
background-color: var(--dark-color);
transform: translateY(-3px);
}

.btn-secondary {
background-color: transparent;
color: var(--white);
border: 2px solid var(--white);
}

.btn-secondary:hover {
background-color: var(--white);
color: var(--primary-color);
}

/* --- Header & Navigation --- */
header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
transition: var(--transition);
padding: 1rem 0;
}

header.sticky {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 0.5rem 0;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
border-radius: 50px;
}

.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}

.logo span { color: var(--secondary-color); }

.nav-links {
display: flex;
gap: 1.5rem;
}

.nav-links li a {
font-weight: 500;
transition: var(--transition);
}

.nav-links li a:hover {
color: var(--primary-color);
}

.hamburger {
display: none;
font-size: 1.5rem;
cursor: pointer;
}

/* --- Hero Section --- */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

/* Hero Background utilizing a placeholder pattern/gradient */
.hero-bg {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(135deg, rgba(0,86,179,0.8), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') center/cover;
z-index: -1;
}

.hero-text {
text-align: center;
color: var(--dark-color);
max-width: 800px;
margin: 0 auto;
}

.hero-text h1 {
font-size: 3rem;
margin-bottom: 1rem;
line-height: 1.2;
}

.hero-text p {
font-size: 1.2rem;
margin-bottom: 2rem;
}

.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
}
.hero-text .btn-secondary { color: var(--primary-color); border-color: var(--primary-color); }
.hero-text .btn-secondary:hover { background: var(--primary-color); color: var(--white); }

/* --- About Section --- */
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}

.about-text h3 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--primary-color);
}

.about-text p { margin-bottom: 1rem; line-height: 1.6; }

.about-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}

.stat-box {
padding: 2rem;
text-align: center;
border-radius: 15px;
box-shadow: var(--glass-shadow);
}

.stat-box i {
font-size: 2.5rem;
color: var(--secondary-color);
margin-bottom: 1rem;
}

/* --- Grid Systems --- */
.grid {
display: grid;
gap: 2rem;
}

.services-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.why-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.testimonials-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* --- Service Cards --- */
.service-card {
text-align: center;
transition: var(--transition);
}

.service-card:hover {
transform: translateY(-10px);
border-bottom: 4px solid var(--secondary-color);
}

.service-card i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1rem;
}

.service-card h3 { margin-bottom: 1rem; }
.service-card p { font-size: 0.95rem; color: #555; }

/* --- Why Choose Us --- */
.why-item {
padding: 1.5rem;
border-radius: 10px;
text-align: center;
font-weight: 600;
box-shadow: var(--glass-shadow);
}
.why-item i { color: var(--secondary-color); margin-right: 8px; }

/* --- Gallery Section --- */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}

.gallery-item {
position: relative;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
box-shadow: var(--glass-shadow);
}

.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.4s ease;
}

.gallery-item .overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 86, 179, 0.7);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: var(--transition);
}

.gallery-item .overlay i { font-size: 2rem; color: var(--white); }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item:hover .overlay { opacity: 1; }

/* Lightbox Modal */
.lightbox {
display: none;
position: fixed;
z-index: 2000;
padding-top: 50px;
left: 0; top: 0; width: 100%; height: 100%;
background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 80vh;
animation: zoomIn 0.3s;
}

.close-lightbox {
position: absolute;
top: 15px; right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}

/* --- Testimonials --- */
.testimonial-card .stars i { color: #f39c12; margin-bottom: 1rem; }
.testimonial-card p { font-style: italic; margin-bottom: 1rem; color: #555; }
.testimonial-card h4 { color: var(--primary-color); }

/* --- FAQ Accordion --- */
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { margin-bottom: 1rem; overflow: hidden; }

.faq-question {
width: 100%;
text-align: left;
padding: 1rem;
background: transparent;
border: none;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-family: inherit;
color: var(--dark-color);
}

.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
padding: 0 1rem;
}

.faq-answer p { padding-bottom: 1rem; color: #555; }
.faq-item.active .faq-answer { max-height: 300px; }
.faq-item.active .faq-question i { transform: rotate(180deg); transition: transform 0.3s; }

/* --- Contact & Map --- */
.contact-wrapper {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 2rem;
}

.info-list li {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
align-items: flex-start;
}
.info-list i { font-size: 1.5rem; color: var(--primary-color); margin-top: 5px; }

.form-group { margin-bottom: 1.2rem; }
.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 0.8rem;
border: 1px solid #ccc;
border-radius: 8px;
font-family: inherit;
outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
border-color: var(--primary-color);
}

.map-container { border-radius: 15px; overflow: hidden; padding: 0.5rem; }

/* --- Footer --- */
footer {
background-color: var(--dark-color);
color: var(--white);
padding: 4rem 0 0 0;
}

.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}

.footer-col h3 { margin-bottom: 1.5rem; color: var(--secondary-color); }
.footer-col ul li { margin-bottom: 0.8rem; }
.footer-col ul li a:hover { color: var(--secondary-color); padding-left: 5px; transition: var(--transition); }
.footer-col p { margin-bottom: 0.8rem; opacity: 0.8; }

.footer-bottom {
text-align: center;
padding: 1.5rem;
background: #0f0f1b;
border-top: 1px solid rgba(255,255,255,0.1);
}

/* --- Floating Buttons --- */
.floating-buttons {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 15px;
z-index: 1000;
}

.float-btn {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
transition: transform 0.3s;
}

.float-btn:hover { transform: scale(1.1); }
.whatsapp-btn { background-color: #25d366; }
.call-btn { background-color: var(--primary-color); }

/* --- Animations & Utilities --- */
.scroll-animate {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animate.visible {
opacity: 1;
transform: translateY(0);
}

@keyframes zoomIn {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* --- Media Queries --- */
@media (max-width: 992px) {
.about-content { grid-template-columns: 1fr; }
.contact-wrapper { grid-template-columns: 1fr; }
.hero-text h1 { font-size: 2.2rem; }
}

@media (max-width: 768px) {
.nav-links {
position: fixed;
right: -100%;
top: 0;
flex-direction: column;
background: rgba(255, 255, 255, 0.98);
width: 70%;
height: 100vh;
align-items: center;
justify-content: center;
transition: 0.5s;
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}
.nav-links.active { right: 0; }
.hamburger { display: block; z-index: 1001; }

.hero-text h1 { font-size: 1.8rem; }
.cta-buttons { flex-direction: column; }
}