/* =========================

   RESET + GLOBAL

========================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html { scroll-behavior: smooth; }

body {

  font-family: 'Lato', sans-serif;

  line-height: 1.4;

  color: #333;

  background: #f9f9f9;

  padding-top: 60px; /* offset for fixed navbar */

}

a { text-decoration: none; color: inherit; cursor: pointer; }

h1, h2, h3 { font-weight: 700; }

section { padding: 4rem 2rem; text-align: center; scroll-margin-top: 80px; }



/* =========================

   NAVBAR

========================= */

#navbar {

  position: fixed;

  top: 0; left: 0; right: 0;

  height: 60px;

  background: rgba(34,34,34,0.95);

  display: flex; align-items: center; justify-content: space-between;

  padding: 0 1rem;

  color: white;

  z-index: 1000;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

}

#navbar .logo {

  display: flex; align-items: center; gap: 0.5rem;

  font-size: 1.2rem; font-weight: bold;

}

#navbar .logo-img { height: 40px; width: auto; }

#menu-toggle {

  display: none;

  font-size: 2rem;

  cursor: pointer;

  background: none; border: none; color: white;

}

#navbar .nav-links {

  display: flex; gap: 1.2rem; list-style: none;

}

#navbar .nav-links a {

  color: #fff; font-weight: 600; padding: 0.5rem; white-space: nowrap;

}

#navbar .nav-links a.btn {

  background: orange; border-radius: 6px;

}

#navbar .nav-links a.btn:hover { background: darkorange; }



/* Dropdown */

.nav-links .dropdown-menu {

  position: absolute; top: 100%; left: 0;

  background: #fff; border: 1px solid #ddd;

  display: none; min-width: 200px;

  box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}

.nav-links .dropdown:hover .dropdown-menu { display: block; }

.nav-links .dropdown-menu li a { padding: 0.5rem 1rem; display: block; color: #333; }

.nav-links .dropdown-menu li a:hover { background: #f5f5f5; }



/* =========================

   HERO SECTION

========================= */

#hero {

  position: relative;

  min-height: 100vh;

  display: flex; align-items: center; justify-content: center;

  text-align: center;

  color: white;

  overflow: hidden;

}

#hero::before {

  content: ""; position: absolute; inset: 0;

  background-size: cover; background-position: center;

  animation: hero-slideshow 20s infinite;

  z-index: -1;

}

@keyframes hero-slideshow {

  0%   { background-image: url("../images/animations/animation1.png"); }

  25%  { background-image: url("../images/animations/animation2.png"); }

  50%  { background-image: url("../images/animations/animation3.png"); }

  75%  { background-image: url("../images/animations/animation4.png"); }

  100% { background-image: url("../images/animations/animation5.png"); }

}

.hero-content { position: relative; z-index: 1; max-width: 700px; padding: 2rem; }

.hero-content h1 { font-size: 2.5rem; margin-bottom: 1rem; }

.hero-content p { font-size: 1.2rem; margin-bottom: 2rem; font-style: italic; }

.hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.btn {

  background: rgba(255,123,0,0.6); color: #fff;

  padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: bold;

}

.btn:hover { background: darkorange; }

.hero-social { margin-top: 1rem; display: flex; gap: 1rem; justify-content: center; }

.hero-social a { color: orange; font-size: 1.4rem; transition: 0.3s; }

.hero-social a:hover { color: darkorange; transform: scale(1.2); }



/* =========================

   SERVICES

========================= */

.services-grid {

  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 2rem; margin-top: 2rem;

}

.service-card {

  position: relative; height: 200px; border-radius: 8px;

  overflow: hidden; color: white;

  display: flex; flex-direction: column; justify-content: flex-end;

  padding: 1rem;

  background-size: cover; background-position: center;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

}

.service-card::before {

  content: ""; position: absolute; inset: 0;

  background: rgba(0,0,0,0.4);

}

.service-card h3, .service-card p, .service-card a { position: relative; z-index: 1; }

.service-card a {

  background: orange; padding: 0.4rem 0.8rem; border-radius: 6px;

  color: #fff; font-weight: bold; font-size: 0.8rem; font-style: italic;

  transition: background 0.3s ease;

  background-color: rgba(255, 123, 0, 0.322); /* Red with 50% opacity */

}

.service-card a:hover { background: darkorange; }



/* =========================

   PROJECTS

========================= */

.projects-grid {

  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 1.5rem; margin-top: 2rem;

}

.project-card {

  background: #fff; border-radius: 8px; overflow: hidden;

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);

}

.project-card h3, .service-card p, .service-card a { position: relative; z-index: 1; }

.project-card a {

  display: inline-block;

  background: orange;

  color: white;

  text-decoration: none;

  padding: 0.5rem 1rem;

  border-radius: 6px;

  font-size: 0.85rem;

  font-weight: bold;

  transition: background 0.3s ease;

  cursor: pointer;

  position: relative;

  z-index: 1;  /* ✅ ensures it's clickable */

  background-color: rgba(255, 123, 0, 0.622); /* Red with 50% opacity */

  width: 100%;

  height: 40px;          /* or auto for flexible */

  object-fit: cover;      /* ✅ ensures image fills card without stretching */

  border-radius: 2px;

}

.project-card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.2); transform: translateY(-5px); transition: 0.3s; }

.project-card img {

  width: 100%; height: 250px; object-fit: cover;

}

.project-card .meta { padding: 1rem; text-align: left; }

/* =========================

   ABOUT

========================= */

.about-section {

  padding: 4rem 2rem;

  background: #f9f9f9;;                 /* white background for contrast */

  text-align: center;

  border-top: 1px solid #eee;

  border-bottom: 1px solid #eee;

}



.about-section h2 {

  display: inline-block;

  background: orange;

  color: #fff;

  padding: 0.5rem 1.5rem;

  border-radius: 6px;

  margin-bottom: 2rem;

  font-size: 1.2rem;

}



.about-container {

  max-width: 1000px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  gap: 2rem;

  flex-wrap: wrap;                  /* ✅ stacks nicely on small screens */

}



.about-container img {

  flex: 1 1 300px;

  border-radius: 10px;

  max-width: 400px;

  width: 100%;

  object-fit: cover;

  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}



.about-text {

  flex: 2 1 400px;

  text-align: left;

}



.about-text h3 {

  font-size: 1.5rem;

  margin-bottom: 1rem;

  color: #333;

}



.about-text p {

  line-height: 1.6;

  margin-bottom: 1rem;

  color: #555;

  font-style: italic;

}

.about-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 2rem;

/*   max-width: 1200px;

  margin: 0 auto; */

  justify-items: center;

}



.about-card {

  background: #fafafa;

  border-radius: 12px;

  padding: 2rem 1.5rem;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  overflow: hidden;

  text-align: center;

  opacity: 0;                 /* hidden by default */

  transform: translateY(30px); /* start slightly lower */

  transition: opacity 0.6s ease, transform 0.6s ease;

}

/* When visible */

.about-card.visible {

  opacity: 1;

  transform: translateY(0);

}

.about-card:hover {

   transform: translateY(-10px);

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);

}



.about-card img {

  width: 150px;

  height: 150px;

  border-radius: 50%; /* ✅ circle image */

  object-fit: cover;

  margin-bottom: 1rem;

  border: 4px solid orange; /* subtle highlight */

}



.about-card-content h3 {

  font-size: 1.2rem;

  margin-bottom: 0.3rem;

}



.about-card-content h4 {

  font-size: 1rem;

  color: #777;

  margin-bottom: 1rem;

}



.about-card-content p {

  font-size: 0.9rem;

  line-height: 1.5;

  color: #555;

}



/* Social Icons */

.about-card-content .social-icons {

  margin-top: 1rem;

  display: flex;

  justify-content: center;

  gap: 0.8rem;

}



.about-card-content .social-icons a {

  color: orange;

  font-size: 1.3rem;

  transition: color 0.3s, transform 0.3s;

}



.about-card-content .social-icons a:hover {

  color: darkorange;

  transform: scale(1.2);

}



/* =========================

   CONTACT

========================= */

/* .contact-form {

  max-width: 600px; margin: 0 auto; background: #fff;

  padding: 2rem; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}

.contact-form input, .contact-form select .contact-form textarea, .contact-form button {

  width: 100%; margin-bottom: 1rem; padding: 0.75rem; border-radius: 6px;

  border: 1px solid #ccc;

}

.contact-form button { background: #2f70d8; color: #fff; border: none; }

.contact-form button:hover { background: #08347a; } */

/* Contact form: stacked vertical layout */
.contact-form {
  max-width: 720px;
  margin: 0 auto;
  display: block;
  background: #fff;
  padding: 1.25rem;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  box-sizing: border-box;
}

.contact-form label {
  display: block;
  width: 100%;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: #333;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.25rem;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 1rem;
}

.contact-form button {
  display: inline-block;
  background: #2f70d8;
  color: #fff;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}

.contact-form button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* small screens */
@media (max-width: 480px) {
  .contact-form { padding: 1rem; }
  .contact-form input, .contact-form textarea, .contact-form select { font-size: 0.95rem; }
}

/* =========================

   GALLERY

========================= */

.gallery-grid {

  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 1.5rem;

}

.gallery-item img, .gallery-item video {

  width: 100%; height: 200px; object-fit: cover; border-radius: 8px;

  box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: transform 0.3s;

}

.gallery-item img:hover, .gallery-item video:hover { transform: scale(1.05); }
/* =========================

   SERVICES SECTION

========================= */

/* ------------------------------

   SERVICES GRID WITH IMAGES

------------------------------- */

.service1-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 2rem;

  padding: 2rem;

}

.service1-card {

  /* background: #f9f9f9;

  padding: 1.5rem;

  border-radius: 8px;

  text-align: center;

  box-shadow: 0 4px 10px rgba(0,0,0,0.1); */

   position: relative;

  height: 280px;

  border-radius: 12px;

  overflow: hidden;

  color: black;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 1rem;

  background-size: cover;        /* ✅ ensure background fills card */

  background-position: center;   /* ✅ center the image */

  background-repeat: no-repeat;  /* ✅ no repeat */

  box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}

#service1 {

  text-align: center;

  padding: 2rem 1rem;

}

#service1 h2 {

  font-size: 1rem;

  margin-bottom: .5rem;

}

#service1 h3 {

  font-size: .8rem;

  margin-bottom: .4rem;

}

#service1 p {

  max-width: 600px;

  margin: 0 auto;

  font-size: .7rem;

  margin-bottom: .5rem;

  font-style: italic;

}


/* =========================

   FOOTER

========================= */

footer { background: #222; color: #fff; padding: 2rem 1rem; }

.footer-container {

  display: flex; justify-content: space-between; flex-wrap: wrap;

  max-width: 1200px; margin: auto;

}

.footer-info h3, .footer-social h3 { color: orange; margin-bottom: 0.8rem; }

.footer-info p { font-size: 0.8rem;

  font-style: italic;

  /* line-height: 1; */

  color: #ccc; }

.footer-social { text-align: right; }

.footer-social .social-icons a {

  color: orange; margin-left: 1rem; transition: 0.3s; font-size: 1rem;

}

.footer-social .social-icons a:hover { color: darkorange; }

.footer-bottom { text-align: center; margin-top: 1rem; border-top: 1px solid #444; font-size: 0.8rem; font-style: italic; color: #bbb; }



/* =========================

   MODAL (Subscribe)

========================= */

.modal {

  display: none; position: fixed; inset: 0; z-index: 3000;

  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);

  display: flex; justify-content: center; align-items: center;

}

.modal-content {

  background: #fff; padding: 2rem; border-radius: 10px; max-width: 400px;

  width: 90%; position: relative; animation: slideUp 0.4s ease forwards;

}

@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

.close-btn { position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 1.5rem; }

.shake { animation: shake 0.5s; }

@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }

/* =========================

   FADE-IN ANIMATION (Reusable)

========================= */

.fade-in {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}



.fade-in.visible {

  opacity: 1;

  transform: translateY(0);

}

/* =========================

   RESPONSIVE

========================= */

@media (max-width: 768px) {

  #menu-toggle {

    display: block;

    font-size: 2rem;

    color: #fff;

    cursor: pointer;

    margin-left: auto;

    background: none;

    border: none;

  }



  #navbar .nav-links {

    flex-direction: column;

    background: #222;

    position: absolute;

    top: 60px;

    right: 0;

    width: 220px;

    border-radius: 0 0 8px 8px;



    /* ✅ Animation setup */

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s ease-in-out;

  }



  #navbar .nav-links.active {

    max-height: 500px; /* big enough for all links */

  }



  #navbar .nav-links li {

    margin: 0.5rem 0;

  }



  #navbar .nav-links a {

    color: #fff;

    display: block;

    padding: 0.5rem 1rem;

  }

  .hero-content h1 { font-size: 1.8rem; }

  .hero-buttons .btn { width: 80%; margin: 0.5rem auto; display: block; }

  .footer-container { flex-direction: column; text-align: center; }

  .footer-social { margin-top: 1rem; text-align: center; }

}