* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.contact-info {
  background-color: #e6f2ff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-wrap: wrap;
}

.contact-info span,
.contact-info i {
  margin: 5px 10px;
}
/* Reset default styles */

/* Header (Heading bar) styling */
header {
    display: flex;
    justify-content: space-between; /* Space between the logo and the navigation links */
    align-items: center; /* Vertically center the logo and navigation links */
    background-color: white; /* Background color for the header */
    padding: 10px 20px; /* Padding around the header */
}

/* Logo styling */
header .logo h1 {
    font-size: 2em; /* Size of the logo text */
    font-weight: normal;
    color: white; /* White color for the text */
    margin-right: 30px; /* Space between the logo and the navigation links */
    text-decoration: none; /* Remove underline from the logo */
}

/* Navigation links styling */
header nav {
    display: flex; /* Align navigation links in a row */
}

header nav a {
    color:darkblue; /* White color for the navigation links */
    text-decoration: none; /* Remove underline from the links */
    padding: 10px 20px; /* Padding around the links */
    font-size: 1.2em; /* Font size of the links */
    text-transform: uppercase; /* Make the links uppercase */
    margin: 0 10px; /* Add space between the links */
    font-size:larger;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

header nav a:hover {
    background-color: #ff8c00; /* Background color when hovered */
    color: #fff; /* Keep the text white on hover */
}

/* Mobile responsiveness: Stack logo and links vertically on smaller screens */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Stack the logo and links vertically */
        text-align: center; /* Center align the content */
    }

    header nav a {
        margin: 10px 0; /* Add space between the links on small screens */
    }
}

h1 {
    text-align: center;
    margin: 50px 0;
    font-size: 2.5em;
    color: #1e2a47;
}
body{
    background-color: steelblue;
}
/* 3D effect for the paragraph box */
.service-container, .service-container2, .service-container3, .service-container4,.service-container5 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px;
    perspective: 1000px;
}
.service-container:hover .paragraph-box {
    transform: rotateY(15deg);  /* Rotate on the Y-axis */
}

.paragraph-box {
     padding: 20px;
    background-color:#B0C4DE;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    width: 50%;
    transform-style: preserve-3d;
}

.paragraph-box:hover {
    transform: perspective(500px) rotateY(5deg); /* On hover, tilt to create interaction */
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
}

.parah1,.parah2, .parah3, .parah4, .parah5 {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    text-align: justify;
}
.service-container img, .service-container2 img, .service-container3 img, .service-container4 img, .service-container5 img {
    width: 50%;
    height: 220px;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    transform: rotateY(-5deg); /* Slight tilt */
    transition: transform 0.3s ease;
}
.service-container img:hover, .service-container2 img:hover, .service-container3 img:hover, .service-container4 img:hover, .service-container5 img:hover {
    transform: rotateY(0deg); /* Remove tilt when hovered */
}

/* Container for each image box */
.image-box {
    width: 300px; /* Box size */
    height: 300px; /* Box size */
    margin: 20px;
    perspective: 1000px; /* Each box has its own perspective */
    display: inline-block;
    position: relative;
  }

  /* Image styling with 3D effect on hover */
  .image-content {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    transform-style: preserve-3d;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Initial shadow */
    border-radius: 8px;
  }

  /* Add 3D effect when hovered */
  .image-box:hover .image-content {
    transform: rotateY(15deg) rotateX(15deg); /* Rotate the box for the 3D effect */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); /* More intense shadow on hover */
  }

  /* Image itself */
  .image-content img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fits the box */
    border-radius: 8px;
  }

  /* Layout for the gallery */
  .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  h2 {
    text-align: center;
    font-family: Arial, sans-serif;
    color: #333;
  }



footer {
  
    padding: 20px; /* Add padding for better spacing */
    text-align: center; /* Center the text */
    color: #fff; /* White text color */
    position: relative; /* Allow for pseudo-elements if used */
  }
  
  /* Paragraph styling */
  footer p {
    margin: 0; /* Remove default margin */
    font-size: 1.2em; /* Slightly enlarge the text */
  }
  
  /* Link styling */
  footer a {
    color: black; /* Light Coral for link color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the links bold */
    transition: color 0.3s ease; /* Transition for smooth effect */
  }
  
  /* Link hover effect */
  footer a:hover {
    color: brown; /* Gold on hover */
  }

@media (max-width: 768px) {
  /* Header adjustments */
  header {
    flex-direction: column;
    text-align: center;
    padding: 10px;
  }

  header nav {
    flex-direction: column;
  }

  header nav a {
    margin: 8px 0;
    padding: 8px;
    font-size: 1em;
  }

  /* Service container adjustments */
  .service-container,
  .service-container2,
  .service-container3,
  .service-container4,
  .service-container5 {
    flex-direction: column;
    margin: 15px;
  }

  .paragraph-box {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
  }

  .service-container img,
  .service-container2 img,
  .service-container3 img,
  .service-container4 img,
  .service-container5 img {
    width: 100%;
    height: auto;
  }

  /* Gallery image boxes */
  .image-box {
    width: 90%;
    height: auto;
    margin: 10px auto;
  }

  .image-content {
    height: auto;
  }

  .image-content img {
    height: auto;
  }

  /* Contact Info */
  .contact-info {
    flex-direction: column;
    font-size: 14px;
  }

  .contact-info span,
  .contact-info i {
    margin: 5px 0;
  }

  /* Footer */
  footer p {
    font-size: 1em;
  }
}