body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  background: #f9f9f9;
  color: #333;
}
.header {
    height:200px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 100px 100px;
  }   
 .main {
    text-align: center;
    padding-top: 20px;
    }
  .left {    
    grid-row: 1 / 2; 
    grid-column: 1 / 2;   
    max-height: 200px;
    max-width: 400px;   
  }
  .left {
  
}
.main {
  grid-column: 2 / 3;
}
.right {
  grid-column: 3 / 4;
}
  .left img {
  width: 100%;  
  height: 200px; 
  object-fit: contain;
  display: block;
  }
  .headerrighttop a {
  text-decoration: none;
  color: inherit;
}
.headerrighttop {
    grid-column: 3;
    grid-row: 1;
    text-align: center;
    padding-top: 40px;
    max-height: 100px;
    }
.headerrightbottom {
  grid-column: 3;
  grid-row: 2;
  text-align: center;
  padding-top: 20px;
  font-size: 20px;
}
.headerrightbottom a {
  text-decoration: none;
  color: inherit;
}

.headerrighttop a i,
.phone-number,
.headerrightbottom a i,
.email {
  display: inline-block;
  color: rgb(73, 107, 245); /* optional: always red */
} 
.letter {
  opacity: 0;
  display: inline-block;
  animation-name: var(--flyin), bounce;
  animation-duration: 2s, 0.8s;
  animation-delay: var(--delay), calc(var(--delay) + 1s);
  animation-fill-mode: forwards;
  animation-timing-function: ease-out, ease-in-out;
}

.letter-wrapper {
  display: inline-block;
  transform: translateY(0); /* baseline alignment */
}



.dir1 { animation-name: from-top; animation-delay: 3.0s; }
.dir2 { animation-name: from-top-right; animation-delay: 1.6s; }
.dir3 { animation-name: from-top; animation-delay: 1.3s; }
.dir4 { animation-name: from-bottom; animation-delay: 4.4s; }
.dir5 { animation-name: from-top-left; animation-delay: 1.5s; }
.dir6 { animation-name: from-bottom-right; animation-delay: 2.6s; }
.dir7 { animation-name: from-bottom-left; animation-delay: 2.7s; }
.dir8 { animation-name: from-top-right; animation-delay: 3.8s; }
.dir9 { animation-name: from-top-left; animation-delay: 9.9s; }
.dir10 { animation-name: from-top-right; animation-delay: 2.0s; }
@keyframes bounce {
  0%   { transform: translateY(0) rotate(0deg); }
  20%  { transform: translateY(-30px) rotate(-35deg); }
  40%  { transform: translateY(15px) rotate(25deg); }
  60%  { transform: translateY(-10px) rotate(-53deg); }
  80%  { transform: translateY(5px) rotate(32deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes from-top {
  0% { transform: translateY(-100vw); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes from-left {
  0% { transform: translateY(-100vw); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes from-right {
  0% { transform: translateX(100vw); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes from-top-vw {
  0% { transform: translateY(-100vh); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes from-top-vh {
  0% { transform: translateY(-100vh); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes from-bottom {
  0% { transform: translateY(100vh); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes from-top-left {
  0% { transform: translate(-100vw, -100vh); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes from-top-right {
  0% { transform: translate(100vw, -100vh); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes from-bottom-left {
  0% { transform: translate(-100vw, 100vh); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes from-bottom-right {
  0% { transform: translate(100vw, 100vh); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}  
nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  background: #005a9e;
  padding: 0.5rem;
}
nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.hero {
  background: url('https://images.unsplash.com/photo-1581091870622-1e7b9c5f7f3b') center/cover;
  color: white;
  padding: 4rem 2rem;
  text-align: center;
}
.cta-button {
  background: #0078D4;
  color: white;
  padding: 1rem 2rem;
  border-radius: 5px;
  text-decoration: none;
}
.services {
  padding: 2rem;
  text-align: center;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.service {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.testimonials {
  padding: 2rem;
  text-align: center;
}
.carousel-container {
  overflow: hidden;
  max-width: 1000px;
  margin: auto;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.testimonial {
  flex: 0 0 25%;
  box-sizing: border-box;
  padding: 1rem;
}
.testimonial-content {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 1rem;
}
.quote-form {
  background: #fff;
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.quote-form h2 {
  text-align: center;
  margin-bottom: 1rem;
}
.quote-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quote-form label {
  display: flex;
  flex-direction: column;
  font-weight: bold;
}
.quote-form input, .quote-form select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.quote-form button {
  background: #0078D4;
  color: white;
  padding: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.animated-title {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 5vw;
  font-weight: bold;
  margin-top: 40px;
}