/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); 
 
 
 
body {
  margin: 0;
  padding: 0;
   font-family: "Montserrat", sans-serif;
   max-width:auto;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
  flex-wrap:wrap;
}

.logo img {
  width: 150px;
  height: auto;
}
.logo:hover{
	 color: #ff9a55;
  transform: scale(1.05);
}



nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  
}

nav ul li a:hover {
  color: #ff9a55;
  transform: scale(1.05);
}

.contact-info {
  display: flex;
  align-items: center;
}

.contact-info p {
  margin-right: 10px;
}

.contact-info a {
  margin-right: 5px;
}
.contact-info:hover{
	 color: #ff9a55;
  transform: scale(1.05);
}

/* Responsive Design */

@media only screen and (max-width: 360px) (max-height:640px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }

  nav ul {
    flex-direction: column;
    align-items: flex-start;
  }

  nav ul li {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
}

/* Animation and Hover Effects */

/* Example: Hover effect for navigation links */
nav ul li a {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

nav ul li a:hover {
  transform: scale(1.5);
}

/* ... existing CSS ... */

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px;
  background-color: white;
  column-count:3;
  flex-wrap:wrap;
}

.hero-content {
  flex: 1;
  text-align:left;
}

.hero-content h1 {
  font-size: 48px;
  margin-bottom: 20px;
  @-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
}

}

.hero-content p {
  font-size: 24px;
  margin-bottom: 30px;
}
.hero-content a{
	text-decoration:none;
	color:black;
}
.visit-now-btn {
  display: inline-block;
  padding: 15px 30px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.visit-now-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
   background-color: #ff9a55;
}


.hero-image img {
  width: 400px;
  height: auto;
  animation: rotate 3s infinite linear;
  
 
  
}
 .hero-image:hover{
	 transform: scale(1.05);
 }
 

/* ... existing animations and hover effects ... */

.hero-content2{
	 display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px;
  background-color: #f5f5f5;
  column-count:3;
  flex-wrap:wrap;
}
.hero-content2 h1 {
  /* ... */
  transition: color 0.3s ease-in-out;
}

.hero-content2 h1:hover {
  color: #007bff;
}

.hero-content2 p {
  /* ... */
  opacity: 0.8;
  transition: opacity 0.3s ease-in-out;
}

.hero-content2 p:hover {
  opacity: 1;
}

.visit-now-btn2 {
  /* ... */
 display: inline-block;
  padding: 15px 30px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
  
}

.visit-now-btn2:hover {
  transform: translateY(-2px);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
   background-color: #ff9a55;
}

.hero-image2 img {
  /* ... */
  transition: transform 0.3s ease-in-out;
}

.hero-image2 img:hover {
  transform: scale(1.05);
}

/* ... existing CSS ... */

.what-we-care {
  text-align: center;
  margin-top: 50px;
}

.care-cards {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.care-card {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.care-card img {
  width: 150px;
  height: 100px;
  margin-bottom: 10px;
}

.care-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.testimonials {
  text-align: center;
  margin-top: 50px;
}

.testimonial-cards {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.testimonial-card {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  position: relative;
  z-index: 1;
}

.testimonial-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.testimonial-details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: -1;
}

.testimonial-card:hover::before {
  opacity: 0.2;
}

footer {
            background-color: #f5f5f5;
            padding: 20px 0;
            text-align: center;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 0 auto;
        }

        .col {
            flex: 1 1 250px;
            text-align: left;
        }

        .col a{
			text-decoration:none;
		}  
		
		.col a:hover{
			transform: translateY(-2px);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
   background-color: #ff9a55;
		}
        h3 {
            margin-bottom: 10px;
            font-size: 1.2em;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            margin-bottom: 5px;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }

        .social-icons a {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #fff;
            color: #222;
            text-align: center;
            line-height: 30px;
            transition: background-color 0.3s ease;
        }

        .social-icons a:hover {
            background-color: #ddd;
        }

        .copyright {
            margin-top: 20px;
            font-size: 0.8em;
        }
		
		/* Animation and Hover Effects */

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scale-in {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Animation on first time viewing */

body {
  animation: fade-in 2s;
}

header {
  animation: slide-in 2s;
}

nav ul li a {
  animation: scale-in 2s;
}

.contact-info p {
  animation: slide-in 2s;
}

.hero-content h1 {
  animation: slide-in 2s;
}

.hero-image img {
  animation: slide-in 2s;
}

.hero-content2 h1 {
  animation: slide-in 2s;
}

.hero-image2 img {
  animation: slide-in 2s;
}

.what-we-care {
  animation: slide-in 2s;
}

.care-cards {
  animation: slide-in 2s;
}

.testimonials {
  animation: slide-in 2s;
}

.testimonial-card {
  animation: slide-in 2s;
}

footer {
  animation: slide-out 2s;
}