/* K2Y Solution — contact-focused modern theme (only the critical parts used) */

/* Root */
:root{
  --brand-blue: #004080;
  --accent: #50d8af;
  --bg: #f9f9f9;
  --text: #222;
}

/* Reset base */
* { box-sizing: border-box; }
body {
  font-family: "Poppins", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  margin: 0;
}

/* Topbar */
#topbar { background:#000; color:#fff; font-size:14px; padding:10px 0; }
#topbar .contact-info { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#topbar a { color:#fff; text-decoration:none; }
#topbar a.whatsapp { color:#1ebea5; font-weight:600; }
#topbar .sep { color: rgba(255,255,255,0.25); margin:0 6px; }
#topbar .landline { color:#fff; font-weight:600; }

/* Header */
#header { background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.06); position:sticky; top:0; z-index:2000; }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
#logo img { height:70px; display:block; }
.brand-text { font-size:12px; }
.company-name { font-weight:700; color:var(--brand-blue); }
#logo .slogan {
  font-family: "Playfair Display", "Georgia", serif;
  font-style: italic;
  font-size: 16px;
  color: #004080;
  margin-left: 8px;
  letter-spacing: 0.5px;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.95;
}


/* Nav */
#nav-menu-container .nav-menu { display:flex; gap:8px; list-style:none; margin:0; padding:0; align-items:center; }
.nav-menu a { padding:10px 12px; color:var(--brand-blue); font-weight:700; font-size:13px; text-transform:uppercase; border-radius:6px; }
.nav-menu a:hover, .nav-menu .menu-active > a { color:#fff; background:var(--brand-blue); transform:translateY(-2px); }

/* Intro / Slider */
#intro { background: linear-gradient(180deg, rgba(0,64,128,0.85) 0%, rgba(5,34,86,0.85) 100%); }
#intro .owl-carousel, #intro .owl-stage-outer, #intro .owl-stage { height:100%; }
#intro .item { height:50vh; display:flex; align-items:center; justify-content:center; position:relative; background-size:cover; background-position:center; }

#intro .intro-content { padding: 40px; }
#intro h2 {
  color: #50d8af; /* your theme’s light aqua accent */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

#intro p { margin:0 0 14px; color:rgba(255,255,255,0.95); }

#intro .intro-content p {
  color: Blue !important;  /* solid black text */
}

/* prevent flash: keep container background same as slide area */
#intro { background: linear-gradient(180deg,#004080 0%, #0c2e8a 100%); }
/* Position navigation arrows */
/* Navigation Arrows */
/* Proper placement for navigation arrows */
#intro-carousel .owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 40px;
  pointer-events: none;
  z-index: 10;
}

#intro-carousel .owl-nav button {
  pointer-events: auto;
  background: rgba(0, 64, 128, 0.8); /* K2Y blue, slightly transparent */
  border: 2px solid #ffffff;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#intro-carousel .owl-nav i {
  font-size: 22px;
  color: #ffffff;
}

#intro-carousel .owl-nav button:hover {
  background: #004080; /* solid blue on hover */
  box-shadow: 0 0 12px rgba(0, 64, 128, 0.5);
}

/* Adjust dots at bottom center */
/* Dots (bullets) below the carousel */
#intro-carousel .owl-dots {
  text-align: center;
  position: absolute;
  bottom: 20px;
  width: 100%;
  z-index: 10;
}

#intro-carousel .owl-dot span {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.6);
  display: block;
  margin: 4px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

#intro-carousel .owl-dot.active span {
  background: #ffffff;
  transform: scale(1.3);
}




/* Buttons */
.btn { display:inline-block; padding:10px 22px; border-radius:24px; font-weight:600; color:#fff; text-decoration:none; }
.btn-primary { background:var(--brand-blue); }
.btn-secondary { background:var(--accent); }

/* Sections */
.container {
  max-width: 1380px;
  padding: 0 32px;
}
.section { padding:80px 0; }
.section-alt { background:#f6f8fa; }

/* About */
.about-img img { width:100%; border-radius:8px; }

/* Services grid */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.service-item { background:#fff; padding:18px; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.04); }
.service-item .icon { font-size:22px; width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(135deg,var(--accent),#a3ebd5); color:#fff; margin-bottom:12px; }

h2.section-header { font-size: 32px; }
.service-item h4 { font-size: 20px; margin-bottom:8px; }

.service-item {
  cursor: pointer;
}

.service-item:has(h4:contains('UPS Repairing')) {
  cursor: pointer;
}


/* Contact dark */
.contact-dark { background:#000; color:#fff; padding-bottom:0; }
.contact-dark .section-header h2, .contact-dark .section-header p { color:#fff; }
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px; }
.card { background:#071427; padding:18px; border-radius:8px; color:#eaf4ff; }
.card h4 { margin-top:0; color:#dff6ff; }

/* Form */
.form-wrap .form-control { border-radius:6px; padding:10px 12px; border:1px solid #e6e9ee; }
.form-wrap .btn { padding:10px 22px; }

/* Map wrap */
.map-wrap iframe { border-radius:8px; }

/* Footer */
#footer { background:var(--brand-blue); color:#fff; padding:18px 0; text-align:center; }

/* Back to top */
.back-to-top { position:fixed; right:20px; bottom:20px; display:none; background:var(--brand-blue); color:#fff; padding:10px 12px; border-radius:50%; z-index:9999; }

/* Responsive */
/* Fix SVC brand logo size and alignment */
#brand-logo img {
  height: 70px;       /* increased from 56px */
  width: auto;
  opacity: 0.98;
  margin-top: 4px;    /* slight vertical centering */
}

@media (max-width: 991px) {
  #brand-logo img {
    height: 60px;     /* keep proportional on mobile */
    margin-top: 2px;
  }
}

@media (max-width: 576px) {
  .contact-grid { grid-template-columns:1fr; }
  #topbar { display:none; }
  #nav-menu-container .nav-menu { flex-direction:column; gap:0; }
  #logo img { height:56px; }
  #intro .item { height:40vh; }
}

@media (max-width: 768px) {
  #logo .slogan {
    display: block;
    font-size: 14px;
    margin-left: 0;
    margin-top: 4px;
    text-align: center;
  }
}

#employee-info .col-md-4:nth-child(3n+1) {
  clear: both;
  margin-top: 30px;
}

#employee-info img {
  width: 20%;         /* Shrinks image to 70% of its column width */
  max-width: 220px;   /* Prevents overly large images on big screens */
  height: auto;       /* Keeps proportions correct */
  border-radius: 8px; /* Keeps nice rounded corners */
  margin: 0 auto 10px;
  display: block;
}



/* small focus */
a:focus, button:focus { outline: 3px solid rgba(80,216,175,0.14); outline-offset:2px; }