/* ---------- Global ---------- */
body { font-family: "Inter", "Segoe UI", sans-serif; line-height: 1.6; background-color: #f8f9fa; }
h1, h2, h3, h4 { font-weight: 700; }
a { text-decoration: none; }

/* ---------- Hero Section ---------- */
section.bg-light { background: linear-gradient(135deg, #f9fafb, #eef2f7); }
section.bg-light h1 { font-size: 2.5rem; }
section.bg-light p { max-width: 700px; margin: auto; color: #555; }

/* ---------- Buttons ---------- */
.btn { padding: 10px 24px; border-radius: 30px; transition: all 0.3s ease; }
.btn-primary { background: linear-gradient(135deg, #0d6efd, #084298); border: none; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13, 110, 253, 0.25); }
.btn-outline-dark:hover { background-color: #000; color: #fff; }

/* COMMON */
.section-title { font-weight: 700; margin-bottom: 10px; }
.section-subtitle { color: #666; margin-bottom: 40px; }

/* SERVICES */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 25px; }
.service-card { background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); transition: all 0.3s ease;}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }
/* ABOUT */
.about-flex { display: flex; gap: 40px; flex-wrap: wrap; }
.about-left, .about-right { flex: 1; }
.why-list li { list-style: none; margin-bottom: 12px; font-weight: 500; }

/* CTA */
.cta-flex { display: flex; gap: 25px; flex-wrap: wrap; }
.cta-card { flex: 1 1 300px; padding: 30px; border-radius: 12px; background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.1);transition: all 0.3s ease; }
.cta-card.highlight { background: #0d6efd; color: #fff; }
.cta-card.highlight a { background: #fff; color: #0d6efd; }
.cta-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }

/* WORK TAGS */
.work-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.work-tags span { background: #e9ecef; padding: 10px 18px; border-radius: 25px; transition: all 0.3s ease; }
.work-tags span:hover { transform: translateY(-5px); background: #0d6efd; color: #fff; cursor: pointer; }

/* HIGHLIGHTS */
.highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.highlight-box { text-align: center; box-shadow: 10px 15px rgba(138,137,137,0.1); padding: 30px 20px; border-radius: 12px; transition: all 0.3s ease; }
.highlight-box:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }

/* CLIENT IMAGE SLIDER */
@media (max-width: 576px) { .carousel-inner .d-flex { gap: 10px !important; } marquee img { max-height: 80px; } }

/* WHY CHOOSE US GRID */
.why-choose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; margin-top: 40px; }

/* CARD */
.container1 { position: relative; height: 420px; border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,0.15); }

/* IMAGE */
.container1 .image { width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; opacity: 1; margin-left: 10px; }
.container1:hover .image { opacity: 0.15; transform: scale(1.05); }

/* TEXT CENTER */
.middle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; }
.container1:hover .middle { opacity: 1; }

/* TEXT BOX */
.text { background: rgba(13,110,253,0.95); color: #fff; padding: 20px 26px; border-radius: 12px; text-align: center; max-width: 85%; font-size: 20px; }
.text p { font-size: 14px; margin-top: 6px; opacity: 0.9; }

/* SLIDER */
.hero-banner { position: relative; width: 98.9vw; height: 750px; overflow: hidden; }
.hero-image { width: 100vw; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.hero-text { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); color: #fff; text-align: left; max-width: 600px; animation: fadeUp 1s ease-in-out; }
.hero-text h1 { font-size: 52px; font-weight: 700; }
.hero-text p { font-size: 18px; margin-top: 10px; opacity: 0.9; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(-50%); } }

.client-slider { overflow: hidden; width: 100%; margin-top: 30px; position: relative; }
.client-track { display: flex; gap: 60px; width: max-content; animation: slide-left 25s linear infinite; }
.client-slider:hover .client-track { animation-play-state: paused; }
.client-track img { height: 140px; object-fit: contain; }

@keyframes slide-left { from { transform: translateX(100%); } to { transform: translateX(-100%); } }