:root {

  --primary-color: #2c3e50;

  --secondary-color: #e74c3c;

  --light-color: #ecf0f1;

  --dark-color: #2c3e50;

  --text-dark: #333;

  --text-light: #fff;

  --transition-speed: 0.3s;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



body {

  line-height: 1.6;

  color: var(--text-dark);

  overflow-x: hidden;

}



/* Header Styles */

header {

  background-color: var(--primary-color);

  color: var(--text-light);

  padding: 1rem 0;

  position: fixed;

  width: 100%;

  z-index: 1000;

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

  transition: all var(--transition-speed) ease;

}



.header-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 2rem;

}



.logo {

  font-size: 1.8rem;

  font-weight: 700;

  color: var(--text-light);

  text-decoration: none;

  display: flex;

  align-items: center;

}



.logo span {

  color: var(--secondary-color);

}



nav ul {

  display: flex;

  list-style: none;

}



nav ul li {

  margin-left: 2rem;

}



nav ul li a {

  color: var(--text-light);

  text-decoration: none;

  font-weight: 500;

  transition: color var(--transition-speed) ease;

  position: relative;

}



nav ul li a:hover {

  color: var(--secondary-color);

}



nav ul li a::after {

  content: '';

  position: absolute;

  width: 0;

  height: 2px;

  background: var(--secondary-color);

  bottom: -5px;

  left: 0;

  transition: width var(--transition-speed) ease;

}



nav ul li a:hover::after {

  width: 100%;

}



.menu-toggle {

  display: none;

  cursor: pointer;

}



/* Hero Section */

.hero {

  height: 100vh;

  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: var(--text-light);

  padding: 0 2rem;

}



.hero-content {

  max-width: 800px;

  animation: fadeIn 1.5s ease;

}



.hero h1 {

  font-size: 3.5rem;

  margin-bottom: 1rem;

  animation: slideUp 1s ease;

}



.hero p {

  font-size: 1.2rem;

  margin-bottom: 2rem;

  animation: slideUp 1.2s ease;

}



.btn {

  display: inline-block;

  background: var(--secondary-color);

  color: var(--text-light);

  padding: 0.8rem 2rem;

  border: none;

  border-radius: 5px;

  font-size: 1rem;

  cursor: pointer;

  transition: all var(--transition-speed) ease;

  text-decoration: none;

  animation: slideUp 1.4s ease;

}



.btn:hover {

  background: #c0392b;

  transform: translateY(-3px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



/* Section Styles */

.section {

  padding: 6rem 2rem;

}



.section-dark {

  background-color: var(--dark-color);

  color: var(--text-light);

}



.section-light {

  background-color: var(--light-color);

  color: var(--text-dark);

}



.section-title {

  text-align: center;

  margin-bottom: 3rem;

  font-size: 2.5rem;

  position: relative;

}



.section-title::after {

  content: '';

  position: absolute;

  width: 80px;

  height: 4px;

  background: var(--secondary-color);

  bottom: -10px;

  left: 50%;

  transform: translateX(-50%);

}



.container {

  max-width: 1200px;

  margin: 0 auto;

}



/* About Section */

.about-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

}



.about-text {

  flex: 1;

  min-width: 300px;

  padding-right: 2rem;

  animation: fadeInLeft 1s ease;

}



.about-image {

  flex: 1;

  min-width: 300px;

  animation: fadeInRight 1s ease;

}



.about-image img {

  width: 100%;

  border-radius: 10px;

  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);

}



/* Services Section */

.services-grid {

  display: grid;

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

  gap: 2rem;

  margin-top: 3rem;

}



.service-card {

  background: var(--text-light);

  padding: 2rem;

  border-radius: 10px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  transition: all var(--transition-speed) ease;

  text-align: center;

  color: var(--text-dark);

}



.service-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);

}



.service-card i {

  font-size: 3rem;

  color: var(--secondary-color);

  margin-bottom: 1rem;

}



/* Gallery Section */

.gallery {

  padding: 6rem 2rem;

}



.gallery-grid {

  display: grid;

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

  gap: 1.5rem;

  margin-top: 2rem;

}



.gallery-item {

  position: relative;

  overflow: hidden;

  border-radius: 10px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  transition: all var(--transition-speed) ease;

  height: 250px;

}



.gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform var(--transition-speed) ease;

}



.gallery-item:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.gallery-item:hover img {

  transform: scale(1.1);

}



/* Image Viewer Modal */

.modal {

  display: none;

  position: fixed;

  z-index: 2000;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.9);

  overflow: auto;

  animation: fadeIn 0.3s ease;

}



.modal-content {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;

  position: relative;

}



.modal-image {

  max-width: 90%;

  max-height: 90%;

  object-fit: contain;

}



.close {

  position: absolute;

  top: 20px;

  right: 30px;

  color: var(--text-light);

  font-size: 2.5rem;

  font-weight: bold;

  cursor: pointer;

  transition: color var(--transition-speed) ease;

}



.close:hover {

  color: var(--secondary-color);

}



.nav-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  color: var(--text-light);

  font-size: 3rem;

  cursor: pointer;

  padding: 1rem;

  transition: color var(--transition-speed) ease;

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

  border: none;

  border-radius: 50%;

}



.nav-btn:hover {

  color: var(--secondary-color);

}



.prev {

  left: 30px;

}



.next {

  right: 30px;

}



/* Contact Section */

.contact-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}



.contact-info {

  flex: 1;

  min-width: 300px;

  padding-right: 2rem;

}



.contact-info h3 {

  margin-bottom: 1.5rem;

  font-size: 1.5rem;

}



.contact-info p {

  margin-bottom: 1rem;

  display: flex;

  align-items: center;

}



.contact-info i {

  margin-right: 1rem;

  color: var(--secondary-color);

}



.contact-form {

  flex: 1;

  min-width: 300px;

}



.form-group {

  margin-bottom: 1.5rem;

}



.form-group label {

  display: block;

  margin-bottom: 0.5rem;

  font-weight: 500;

}



.form-group input,

.form-group textarea {

  width: 100%;

  padding: 0.8rem;

  border: 1px solid #ddd;

  border-radius: 5px;

  font-size: 1rem;

  transition: border-color var(--transition-speed) ease;

}



.form-group input:focus,

.form-group textarea:focus {

  border-color: var(--secondary-color);

  outline: none;

}



.form-group textarea {

  height: 150px;

  resize: vertical;

}



/* Footer */

footer {

  background-color: var(--dark-color);

  color: var(--text-light);

  padding: 3rem 0;

  text-align: center;

}



.footer-content {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 2rem;

}



.social-links {

  margin: 2rem 0;

}



.social-links a {

  display: inline-block;

  margin: 0 1rem;

  color: var(--text-light);

  font-size: 1.5rem;

  transition: color var(--transition-speed) ease;

}



.social-links a:hover {

  color: var(--secondary-color);

}



.footer-bottom {

  margin-top: 2rem;

  padding-top: 1rem;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}






/* Animations */

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



@keyframes slideUp {

  from { 

    opacity: 0;

    transform: translateY(50px);

  }

  to { 

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInLeft {

  from {

    opacity: 0;

    transform: translateX(-50px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes fadeInRight {

  from {

    opacity: 0;

    transform: translateX(50px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



/* Responsive Styles */

@media (max-width: 768px) {

  .header-container {

    padding: 0 1rem;

  }



  .menu-toggle {

    display: block;

    font-size: 1.5rem;

  }



  nav {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background: var(--primary-color);

    padding: 1rem;

    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

    transition: clip-path 0.4s ease;

  }



  nav.active {

    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

  }



  nav ul {

    flex-direction: column;

  }



  nav ul li {

    margin: 1rem 0;

  }



  .hero h1 {

    font-size: 2.5rem;

  }



  .hero p {

    font-size: 1rem;

  }



  .about-content {

    flex-direction: column;

  }



  .about-text {

    padding-right: 0;

    margin-bottom: 2rem;

  }



  .section {

    padding: 4rem 1rem;

  }



  .contact-info {

    padding-right: 0;

    margin-bottom: 2rem;

  }

}



@media (max-width: 480px) {

  .hero h1 {

    font-size: 2rem;

  }



  .section-title {

    font-size: 2rem;

  }

}











/* Add these to your existing styles.css */



/* Enhanced Hero Animations */

.hero h1 {

  animation: fadeInDown 1s ease both, pulse 2s 1s ease infinite;

}



.hero p {

  animation: fadeInUp 1s 0.3s ease both;

}



.btn {

  animation: fadeInUp 1s 0.6s ease both, bounce 2s 2s ease infinite;

}



/* Enhanced Section Entry Animations */

.section-title {

  animation: fadeIn 0.8s ease both;

}



.about-text {

  animation: fadeInLeft 1s 0.3s ease both;

}



.about-image {

  animation: fadeInRight 1s 0.3s ease both;

}



.service-card {

  animation: fadeInUp 1s ease both;

}



/* Add delay to each service card */

.service-card:nth-child(1) { animation-delay: 0.1s; }

.service-card:nth-child(2) { animation-delay: 0.2s; }

.service-card:nth-child(3) { animation-delay: 0.3s; }

.service-card:nth-child(4) { animation-delay: 0.4s; }



/* Gallery item animations */

.gallery-item {

  animation: fadeIn 0.5s ease both;

}



/* Add staggered delay to gallery items */

.gallery-item:nth-child(1) { animation-delay: 0.1s; }

.gallery-item:nth-child(2) { animation-delay: 0.2s; }

.gallery-item:nth-child(3) { animation-delay: 0.3s; }

.gallery-item:nth-child(4) { animation-delay: 0.4s; }

.gallery-item:nth-child(5) { animation-delay: 0.5s; }

.gallery-item:nth-child(6) { animation-delay: 0.6s; }

.gallery-item:nth-child(7) { animation-delay: 0.7s; }

.gallery-item:nth-child(8) { animation-delay: 0.8s; }

.gallery-item:nth-child(9) { animation-delay: 0.9s; }

.gallery-item:nth-child(10) { animation-delay: 1s; }



/* Contact form animations */

.contact-info {

  animation: fadeInLeft 1s 0.2s ease both;

}



.contact-form {

  animation: fadeInRight 1s 0.2s ease both;

}



/* New Animation Keyframes */

@keyframes fadeInDown {

  from {

    opacity: 0;

    transform: translateY(-50px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(50px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes pulse {

  0% { transform: scale(1); }

  50% { transform: scale(1.05); }

  100% { transform: scale(1); }

}



@keyframes bounce {

  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }

  40% { transform: translateY(-15px); }

  60% { transform: translateY(-7px); }

}



@keyframes fadeInLeft {

  from {

    opacity: 0;

    transform: translateX(-50px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes fadeInRight {

  from {

    opacity: 0;

    transform: translateX(50px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



/* Hover Animations */

.btn:hover {

  animation: pulse 0.5s ease;

}



.service-card:hover {

  animation: pulse 0.5s ease;

}



.gallery-item:hover {

  animation: pulse 0.5s ease;

}