* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
background: #fafafa;
}
header {  
position: fixed;  
top: 0;  
left: 0;  
width: 100%;  
display: flex;  
align-items: center;  
justify-content: space-between;  
background: #ffffff;  
padding: 15px 15px;  
transition: padding 0.28s ease, box-shadow 0.28s ease;  
backdrop-filter: blur(10px);  
z-index: 1000;  
}  
header.shrink {  
padding: 10px 20px 5px 20px;  
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);  
}
.logo-container {  
display: flex;  
align-items: center;  
gap: 10px;  
transition: transform 0.28s ease;  
}  
.logo {  
width: 55px;  
height: auto;  
border-radius: 0;  
}  
.company-text h1 {  
font-size: 18px;  
text-transform: capitalize;  
}  
.company-text p {  
font-size: 12px;  
color: #555;  
}
.nav-links {  
display: flex;  
gap: 24px;  
}  
.nav-links a {  
position: relative;  
text-decoration: none;  
color: #333;  
font-size: 15px;  
font-weight: 600;  
transition: color 0.18s;  
}  
.nav-links a:hover {  
color: #666;  
}  
.active-link {  
color: #1a73e8 !important;  
}  
.active-link::after {  
content: "";  
position: absolute;  
left: 0;  
right: 0;  
bottom: -6px;  
height: 3px;  
background: #1a73e8;  
border-radius: 3px;  
}
.hamburger {  
width: 30px;  
cursor: pointer;  
display: none;  
flex-direction: column;  
gap: 6px;  
border: none;  
background: transparent;  
}  
.hamburger span {  
display: block;  
height: 4px;  
background: #333;  
border-radius: 3px;  
transition: transform 0.25s, opacity 0.25s;  
}
.sidebar {  
position: fixed;  
top: 0;  
right: -280px;  
width: 260px;  
height: 100vh;  
background: #111;  
padding: 22px;  
transition: right 0.28s ease;  
z-index: 1200;  
overflow: auto;  
}  
.sidebar.open {  
right: 0;  
}  
.close-btn {  
font-size: 28px;  
color: #fff;  
text-align: right;  
cursor: pointer;  
margin-bottom: 20px;  
}  
.sidebar a {  
color: #fff;  
display: block;  
margin: 18px 0;  
font-size: 17px;  
text-decoration: none;  
}  
.sidebar a.active-link {  
color: #1a73e8;  
}
.hero {  
min-height: 72vh;  
background: linear-gradient(135deg, rgb(71, 160, 250), rgb(0, 190, 146));  
margin-top: 20px;  
color: #fff;  
display: flex;  
align-items: center;  
text-align: left;  
padding: 30px;  
}  
.hero h1 {  
font-size: 44px;  
padding-bottom: 30px;  
}  
.hero h2 {  
font-size: 22px;  
font-weight: 300;  
padding-bottom: 10px;  
}  
.hero p {  
font-size: 18px;  
padding-bottom: 10px;  
line-height: 1.4;  
}
.intro-section {  
padding: 40px 0;  
width: 100%;  
margin: auto;  
}  
.intro {  
font-size: 1.1rem;  
background: #fff;  
padding: 50px;  
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  
margin-bottom: 20px;  
}  
.intro h2 {  
color: #000;  
padding-bottom: 40px;  
}  
.intro p {  
text-align: justify;  
line-height: 1.5;  
padding-bottom: 20px;  
}  
.intro img {  
float: right;  
width: 460px;  
max-width: 45%;  
height: auto;  
margin-left: 30px;  
margin-bottom: 20px;  
border-radius: 6px;  
}
.highlight-box {  
background: #fff;  
padding: 25px;  
border-left: 6px solid #257cff;  
border-radius: 8px;  
margin: 40px;  
box-shadow: 0 4px 8px rgba(0,0,0,0.08);  
}  
.highlight-box h2 {  
color: #1d73f4;  
margin: 0;  
}
.products {  
padding: 25px ;  
text-align: center;  
}
.container {  
display: grid;  
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
gap: 20px;  
}  
.ourproducts{  
text-align:center;  
font-size: 1.1rem;  
background: #fff;  
padding: 50px;  
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  
margin-bottom: 20px;  
width: 100%;  
background: #fff;
}  
.ourproducts h1 {  
font-size: 30px;  
margin-bottom: 20px;  
}  
.ourproducts p{  
text-align: justify;  
line-height: 1.5;  
padding-bottom: 20px;  
}  
.card {  
background: #fff;  
border-radius: 15px;  
overflow: hidden;  
box-shadow: 0 4px 10px rgba(0,0,0,0.1);  
transition: transform 0.2s ease;  
}  
.card:hover {  
transform: translateY(-5px);  
}  
.card img {  
width: 100%;  
height: 200px;  
object-fit: cover;  
border-radius: 15px;  
}  
.card-content {  
padding: 12px;  
}  
.card-content h3 {  
margin-bottom: 10px;  
}  
.card-content p {  
color: #555;  
margin-bottom: 0px;  
}  
.btn {  
display: inline-block;  
padding: 10px 15px;  
background: rgb(21, 134, 255);  
color: #fff;  
border-radius: 8px;  
text-decoration: none;  
font-size: 14px;  
}  
.btn:hover {  
background: #0056b3;  
}
.features-section {  
margin-top : 40px;  
padding: 50px;  
text-align: center;  
}  
.features {  
display: grid;  
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
gap: 20px;  
}  
.feature-card {  
background: #fff;  
border-radius: 15px;  
padding: 25px;  
box-shadow: 0 0 12px rgba(0,0,0,0.1);  
text-align: center;  
transition: transform 0.2s ease;  
}  
.feature-card img {  
width: auto;  
height: 130px;  
object-fit: cover;  
margin-bottom: 10px;  
}  
.feature-card h3 {  
margin: 12px 0;  
}  
.feature-card p {  
color: #555;  
line-height: 1.4;  
}
.enquiry-section {  
max-width: 80%;  
margin: 48px auto;  
padding: 36px;  
background: #fff;  
border-radius: 12px;  
box-shadow: 0 8px 26px rgba(0,0,0,0.08);  
}  
.enquiry-section h2 {  
text-align: center;  
margin-bottom: 20px;  
}  
.enquiry-form {  
display: grid;  
grid-template-columns: 1fr 1fr;  
gap: 18px;  
}  
.form-group {  
display: flex;  
flex-direction: column;  
}  
.form-group label {  
font-weight: 600;  
margin-bottom: 8px;  
}  
.form-group input, .form-group textarea {  
padding: 12px;  
border: 1px solid #d0d7df;  
border-radius: 10px;  
font-size: 15px;  
transition: box-shadow 0.18s, border-color 0.18s;  
}  
.form-group input:focus, .form-group textarea:focus {  
outline: none;  
border-color: #1a73e8;  
box-shadow: 0 6px 18px rgba(26,115,232,0.12);  
}  
textarea {  
min-height: 120px;  
resize: vertical;  
}  
.message-box {  
grid-column: 1/3;  
}  
.enquiry-btn {  
padding: 14px;  
border: 0;  
background: #1a73e8;  
color: #fff;  
border-radius: 10px;  
font-size: 16px;  
cursor: pointer;  
font-weight: 700;  
}  
.enquiry-btn:active {  
transform: translateY(1px);  
}
.enquiry-btn-wa {  
padding: 14px;  
border: 0;  
background: #25D366;;  
color: #fff;  
border-radius: 10px;  
font-size: 16px;  
cursor: pointer;  
font-weight: 700;  
}  
.enquiry-btn-wa:active {  
transform: translateY(1px);  
}
.error {
display: none;
color:red;
font-size: 12px;
margin-top: 2px;
margin-bottom: 10px;
}
.invalid {
border: 1px solid red !important;
}
#thankYouPopup,
#whatsappPopup {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
}
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}
.popup-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 360px;
  background: #ffffff;
  padding: 30px 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}
.popup-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  background: #4CAF50;
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-popup h2 {
  margin-bottom: 10px;
  color: #333333;
}
.popup-popup p {
  margin-bottom: 22px;
  font-size: 14px;
  color: #666666;
}
.popup-ok-btn {
  padding: 10px 32px;
  border: none;
  border-radius: 10px;
  background: #1a73e8;
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.popup-ok-btn:hover {
  background: #0044af;
}
.popup-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.popup-overlay[style*="block"] {
  opacity: 1;
}
.faq-container {  
max-width: 600px;  
margin: 40px auto;  
background: #fff;  
padding: 40px;  
border-left: 6px solid #257cff;  
border-radius: 10px;  
box-shadow: 0 5px 20px rgba(0,0,0,0.1);  
}  
.faq-container h1 {  
text-align: center;  
margin-bottom: 30px;  
}  
.faq-item {  
margin-bottom: 20px;  
border-bottom: 1px solid #ddd;  
padding-bottom: 15px;  
}  
.faq-question {  
font-size: 1.1rem;  
font-weight: bold;  
cursor: pointer;  
position: relative;  
}  
.faq-question::after {  
content: "+";  
position: absolute;  
right: 0;  
font-size: 1.4rem;  
}  
.faq-item.active .faq-question::after {  
content: "-";  
}  
.faq-answer {  
display: none;  
margin-top: 10px;  
line-height: 1.4;  
text-align: justify;  
}  
.site-footer {
  background: #111827;
  color: #d1d5db;
  padding: 50px 20px 20px;
  font-family: "Segoe UI", Arial, sans-serif;
}
.footer-container {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}
.footer-box h4 {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 12px;
}
.footer-box p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #cbd5e1;
}
.footer-links {
  list-style: none;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links a {
  color: #cbd5e1;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer-links a:hover {
  color: #60a5fa;
}
.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  background: #1f2933;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  transition: all 0.25s ease;
}
.footer-social a:hover {
  background: #60a5fa;
  color: #111827;
}
.footer-bottom {
  margin-top: 40px;
  padding-top: 15px;
  border-top: 1px solid #1f2933;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
}
.aboutus {  
margin-top: 84px;  
}
/* Gallery Container */
.photo-gallery {
  padding: 6px;
}

/* Grid like phone gallery */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}

/* Image Tile */
.photo-item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

/* Image */
.photo-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1; /* square tiles */
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Tap / Hover Effect */
.photo-item:hover img {
  transform: scale(1.06);
}

#fullscreenView {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    z-index: 9999;
}

#fullscreenView.active {
    opacity: 1;
    pointer-events: auto;
}

#fullscreenView img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
}

#previewcloseBtn {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 36px;
    color: white;
    cursor: pointer;
}

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

/* =================== 920px =================== */
@media (max-width: 920px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .enquiry-section { max-width: 85%; }
}

/* =================== 780px =================== */
@media (max-width: 780px) {
  .hero h1 { font-size: 34px; }
  .hero p { font-size: 16px; }
  .enquiry-section { max-width: 90%; }
}

/* =================== 768px =================== */
@media (max-width: 768px) {
   .footer-container {
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* =================== 700px =================== */
@media (max-width: 700px) {
  .enquiry-form { grid-template-columns: 1fr; }
  .message-box, .enquiry-btn { grid-column: 1/2; }
  .enquiry-section { max-width: 95%; }

  .intro img {
    float: none;
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
  }
}

/* =================== 600px =================== */
@media (max-width: 600px) {
  .faq-container { padding: 20px; border-radius: 11px; }
  .faq-question { font-size: 1rem; }
  .faq-answer { font-size: 0.95rem; }
}

/* =================== 420px =================== */
@media (max-width: 420px) {
  header { padding: 10px 14px; }
  .logo { width: 36px; height: 36px; }

  .hero {
    margin-top: 72px;
    padding: 18px;
  }

  .hero h1 { font-size: 26px; }

  .enquiry-section {
    max-width: 100%;
    border-radius: 0;
  }

  .features-section { padding: 25px; }
  .products { padding: 11px; }
}
.no-scroll { overflow: hidden; }