/*
Theme Name: NK INFRA
Author: NK INFRA
Description: Custom WordPress theme for NK INFRA
Version: 1.0
*/

:root {
  --blue: #1D4ED8;
  --pink: #EC4899;
  --light: #f8f9fa;
  --dark: #1f2937;
}

/* ===== GLOBAL RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
}

body {
  background: var(--light);
  color: var(--dark);
}

/* ===== PRELOADER ===== */
#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at center, #fff, #e0e7ff);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

#preloader img {
  width: 100px; height: 100px;
  animation: rotateLogo 2s linear infinite;
  filter: drop-shadow(0 0 15px var(--pink));
}

@keyframes rotateLogo {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ======================================
   HEADER
======================================== */
header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
}

header img { height: 55px; }

nav {
  display: flex;
  align-items: center;
}

nav a {
  color: var(--dark);
  text-decoration: none;
  margin: 0 15px;
  font-weight: 500;
}

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

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

.menu-toggle span {
  background: var(--blue);
  height: 3px;
  width: 25px;
  margin: 4px 0;
  border-radius: 2px;
}

/* ======================================
   SECTIONS (BODY)
======================================== */
section { padding: 100px 50px; text-align: center; }

/* HOME */
#home {
  background: linear-gradient(135deg, var(--blue), var(--pink));
  color: #fff;
  padding-top: 140px;
}

#home h1 { font-size: 3rem; font-weight: 700; }
#home p { margin-top: 10px; font-size: 1.2rem; }

.btn {
  display: inline-block;
  margin-top: 25px;
  padding: 10px 25px;
  border-radius: 30px;
  background: #fff;
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.btn:hover { background: var(--pink); color: #fff; }

/* ABOUT, SERVICES, BRANCHES, GALLERY, CONTACT */
#about, #services, #branches, #gallery, #contact {
  background: #fff;
  margin-top: 20px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.3s ease-in-out;
}

h2 { color: var(--blue); margin-bottom: 20px; font-size: 2rem; }

/* SERVICES */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-top: 30px;
}

.service-box {
  width: 300px;
  padding: 25px;
  background: var(--light);
  border-radius: 15px;
  border: 2px solid var(--blue);
  transition: 0.3s;
}

.service-box:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-5px);
}

.service-box p.quote {
  font-style: italic;
  margin-top: 10px;
  color: var(--pink);
}

/* BRANCHES */
#branches a {
  color: var(--pink);
  text-decoration: none;
  font-weight: 600;
}
#branches a:hover {
  color: var(--blue);
  text-decoration: underline;
}

/* GALLERY CAROUSEL */
.gallery-container { white-space: nowrap; overflow-x: hidden; position: relative; }
.gallery-track { display: inline-flex; gap: 15px; animation: slide 25s linear infinite; }
.gallery-track img {
  width: 350px; height: 240px;
  object-fit: cover;
  border-radius: 12px;
}
@keyframes slide { 100% { transform: translateX(-50%); } }

/* VIDEO SCROLLER */
.video-scroller { width:100%; overflow:hidden; position:relative; }
.video-track {
  display:flex; gap:16px;
  animation: scrollVideos 28s linear infinite;
}
.video-item video {
  width:320px; height:180px;
  object-fit:cover;
  border-radius:10px;
  cursor:pointer;
  transition: transform .25s;
}
.video-item video:hover { transform: scale(1.06); }
.video-scroller:hover .video-track { animation-play-state: paused; }

@keyframes scrollVideos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* LIGHTBOX & MODAL */
.lightbox, .video-modal, .modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.9);
  justify-content: center; align-items: center;
  z-index: 9999;
}
.lightbox img, .video-modal video, .modal-content { max-width: 95%; border-radius: 10px; }

/* QUOTATION BUTTON */
.quote-btn {
  position: fixed; bottom: 120px; right: 27px;
  background: #e91e63; color: #fff;
  border: none; padding: 14px 18px;
  font-size: 16px; border-radius: 30px;
  cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 999;
}
.quote-btn:hover { background: #c2185b; }

/* QUOTATION MODAL FORM */
.quote-modal {
  display:none; position: fixed; inset:0;
  background: rgba(0,0,0,0.6); z-index:1000;
}
.quote-box {
  background:#fff; max-width:400px; margin:80px auto; padding:25px;
  border-radius:12px; position:relative; animation: popup 0.3s ease;
}
@keyframes popup { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity:1; } }
.quote-box input, .quote-box textarea { width:100%; padding:10px; margin-bottom:10px; border-radius:6px; border:1px solid #ccc; font-size:14px; }
.quote-actions { display:flex; gap:10px; }
.quote-actions button { flex:1; padding:10px; border:none; color:#fff; border-radius:6px; cursor:pointer; }
.quote-actions button:first-child { background: #25d366; }
.quote-actions button:last-child { background: #0072c6; }
.close-quote { position:absolute; top:10px; right:15px; font-size:22px; cursor:pointer; }

/* ======================================
   FOOTER
======================================== */
footer {
  background: var(--blue);
  color: #fff;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
}

/* FLOATING BUTTONS */
.floating-btns { position: fixed; bottom: 25px; right: 25px; display:flex; flex-direction:column; gap:10px; z-index:1500; }
.float-btn { display:flex; align-items:center; gap:10px; padding:10px 15px; border-radius:50px; color:#fff; font-weight:600; text-decoration:none; box-shadow:0 4px 8px rgba(0,0,0,0.3); transition:0.3s; }
.call-btn { background: var(--blue); }
.whatsapp-btn { background: #25D366; }
.float-btn:hover { transform: scale(1.05); }

/* ======================================
   RESPONSIVE
======================================== */
@media (max-width: 768px) {
  header { flex-direction: column; padding: 15px; }
  nav { display: none; flex-direction: column; width: 100%; background: #fff; text-align: center; margin-top: 10px; }
  nav a { display: block; margin: 10px 0; }
  .menu-toggle { display: flex; }

  .services-grid { flex-direction: column; align-items: center; }
  .video-item video { width: 220px; height: 140px; }
  .video-modal video { max-width: 620px; }
}


.gallery-page .gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.gallery-page .gallery img {
  width: 260px;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
}

.gallery-page .gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.gallery-page .gallery img {
  width: 260px;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
}