/*
  Theme Name: Master kraft
  Description:Master kraft emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts.
  Author::Webtree
  Author uri:
  Version:1.0.0
*/

.home .overlay-content.position-absolute {
    position: absolute !important;
}
.overlay-content.position-absolute {
    position: relative !important;
}
/* General Reset */
#body {
    padding: 0;
    margin: 0;
    font-family: 'Proxima Nova';
}
/* Hero Section */
.hero-section {
  position: relative;
  height: 680px;
  overflow: hidden;
}
.hero-section .carousel-item {
  width: 100%;
  height: 700px; /* Set full height for consistency */
}
.carousel-indicators {
  width: 6px;
  height: 6px;
  padding: 0;
}
.carousel-indicators button {
  width: 1px;
  height: 1px;
  border-radius: 50%; /* Makes them circular */
  background-color: rgb(255, 255, 255); /* Semi-transparent white */
  border: none;
  transition: background-color 0.3s ease;
}

.carousel-indicators .active {
  background-color: white; /* Fully white for the active indicator */
}

.carousel-inner {
/*   height: 700px; */
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
}
.carousel-control-prev span,
.carousel-control-next span {
    display: none; /* Hides the text (visually-hidden) */
}
.menu-master-kraft-container {
    margin-left: 23%;
}
/* Navbar */
.navbar-collapse {
  font-size: 12px;
  padding-right: 8%;
  align-items: center;
}

.overlay-content .navbar {
  background: transparent !important;
  padding: 0;
}

.overlay-content .navbar-brand {
  display: flex;
  align-items: center;
  margin-left: -7%;
}

.overlay-content .navbar-brand img {
  max-height: 70px;
  width: 80%;
  margin: 10px;
}

.navbar-nav {
  padding-left: 18%;
}
.nav-item a{
   font-size: 13px;
}
.overlay-content .nav-link {
  color: white;
  margin: 0 10px;
  font-weight: 500;
  transition: color 0.3s;
}

.overlay-content .nav-link:hover {
  color: #f59103; /* Highlight color */
}

.overlay-content-text .hero-content {
/*   left: 17%; */
  transform: translateX(-50%);
  text-align: center;
  margin-top: 30%;
  font-weight: 600;
  opacity: 0;
  z-index:1;
  animation: fadeIn 1s forwards; /* Added fade-in animation */
}

.overlay-content-text .hero-content h1 {
  font-size: 2.6rem;
  font-weight: 500;
  color: #f59103;
  white-space: nowrap;
  opacity: 1;
  animation: slideInFromTop 1s forwards ; /* Slide-in animation for h1 */
}

.overlay-content-text .hero-content .lead {
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 10px;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  animation: fadeIn 1s forwards ; /* Fade-in animation for lead */
}

.overlay-content-text .hero-content .btn {
  font-size: .9rem;
  padding: 8px 25px;
  text-transform: uppercase;
  margin-top: -5%;
  border-radius: 0;
  background-color: #f59103;
  color: white;
  transition: all 0.3s ease;
  opacity: 1;
   animation: pulse 1s ;
}

.overlay-content-text .hero-content .btn:hover {
  background-color: #e06c00;
  color: black;
}

/* Keyframes for Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to normal size */
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}


/* Contact Info */
.contact-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 20px;
  color: white;
}
.contact-info a {
  color: white;
  text-decoration: none;
  font-size: 13px;
  display: flex;
  align-items: center;
}

.contact-info a i {
  margin-right: 5px;
  color: #ffa700;
}

/* Social Icons */
.nav-social-icons {
  display: flex;
  gap: 10px;
}

.nav-social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}
.nav-social-icons a{
   border: 1px solid #f3f3f3;
   
}
.nav-social-icons a:hover {
  background-color: #555;
  color: white;
  border-color: #555;
}

.nav-social-icons a i {
  font-size: 12px;
}
img.custom-logo {
    width: 230px;
    height: 70px;
}
/* Search Bar */
.search-bar-icons {
  position: relative;
  width: 30px;
    margin-top: -10px;
	margin-left: 14px;
}
.search-box {
  margin-top: 10px;
}


.search-icon {
      border: 0;
    margin-top: 16px;
  transform: translateY(-50%);
  font-size: 15px;
  color: #ffffff;
  background-color: transparent;
  pointer-events: none;
}
.align-items-center a{
  
  text-decoration: none;
  font-size: 16px;
  margin: 5px;
}
.align-items-center i{
  color: #ffa700;
  font-size: 11px;
  
 
}
.contact-data {
    margin-top: -3px;
    margin-left: 30px;
}
.nav-social-icons i{
  color: #706F6F;
}
/* Responsive Styles for 1024px Screen */
@media (max-width: 1024px) {
    img.custom-logo {
    width: 210px;
    height: 70px;
}
.menu-master-kraft-container {
    margin-left: 14%;
}
  .hero-section {
    height: 500px;
  }

  .hero-section .carousel-item {
    height: 150px;
  }

  .carousel-inner {
    height: 500px;
  }

 .carousel-control-next {
  opacity: 4;
  transition: opacity .15s ease;
  padding-left: 20%;
}
.carousel-control-prev{
  opacity: 4;
  transition: opacity .15s ease;
  margin-left: -2%;
}

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 2%;
  }

 
  .overlay-content {
    z-index: 20;
    background: rgba(0, 0, 0, 0.3);
    height: 0;
  }
  .overlay-content-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}


  


.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

     .overlay-content-text .hero-content {
        top: -60px;
    }
  .overlay-content-text .hero-content h1 {
    font-size: 2rem;
  }

  .overlay-content-text .hero-content .lead {
    font-size: 1.8rem;
  }

  .overlay-content-text .hero-content .btn {
    font-size: 0.8rem;
    margin-top: -10%;
  }

  .contact-info a {
    font-size: 10px;
  }

  .nav-social-icons a {
    width: 20px;
    height: 20px;
    font-size: 6px;
  }

  .nav-social-icons a i {
    font-size: 12px;
  }

  .search-bar-icons {
    width: 25px;
   
  }
  .contact-data {
    margin-left: 160px;
}

  .search-icon {
    font-size: 12px;
  }

  .align-items-center a {
    font-size: 10px;
  }
}
/* Responsive Styles for 768px Screen */
@media (max-width: 768px) {
  /* Hero Section */
  .hero-section {
    height: 400px; /* Reduced height */
  }

  .hero-section .carousel-item {
    height: 120px; /* Adjusted height for carousel items */
  }

  .carousel-inner {
    height: 400px; /* Reduced inner height */
  }
  
  .carousel-control-next {
    opacity: 4;
    transition: opacity .15s ease;
    padding-left: 20%;
    height:auto;
  }
  .carousel-control-prev{
    opacity: 4;
    transition: opacity .15s ease;
    margin-left: -1%;
    height:auto;
  }
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 1.2rem;
    height: 1.2rem;
  }

  
  .overlay-content {
    z-index: 20;
  }
  /* Hero Content */
      .overlay-content-text .hero-content {
        top: -43px;
        left: 68px;
    }

  .overlay-content-text .hero-content h1 {
    font-size: 1.8rem; /* Smaller headline */
  }

  .overlay-content-text .hero-content .lead {
    font-size: 1.5rem;
  }

  .overlay-content-text .hero-content .btn {
    font-size: 0.7rem;
    margin-top: -8%;
    padding: 5px 10px; /* Smaller buttons */
  }
    .contact-data {
        margin-left: 210px;
        margin-top: -40px;
    }
  /* Contact Info */
  .contact-info a {
    font-size: 8px; /* Adjusted font size for contact links */
  }
  
          .contact-data {
        position: relative;
        left: 52%;
        top: -2px;
    }

 
  .search-bar-icons {
    width: 20px;
    position: relative;
    left: -52%;
}

  .search-icon {
    font-size: 10px;
  }

  /* Align Items Center */
  .align-items-center a {
    font-size: 9px;
    padding: 2px;
  }
}

@media (max-width: 425px) {
  /* Hero Section */
  .hero-section {
    height: 300px; /* Reduced height */
  }

  .hero-section .carousel-item {
    height: 100px; /* Adjusted height for carousel items */
  }

  .carousel-inner {
    height: 230px; /* Reduced inner height */
  }
  .carousel-control-next {
    opacity: 4;
    transition: opacity .15s ease;
    padding-left: 20%;
  }
   .carousel-control-prev,
   .carousel-control-next {
        display: none !important; /* Hide arrows */
    }
 
 

 
    img.custom-logo {
        width: 127px;
        height: 40px;
        margin-left: -82px;
        margin-top: 13px;
    }
        .contact-data {
        left: 12%;
        top: -8px;
    }
  /* Hero Content */
        .overlay-content-text .hero-content {
        left: 40px;
        top: -41px;
        margin-top: 160px;
    }

  .overlay-content-text .hero-content h1 {
    font-size: 1rem; 
  }

  .overlay-content-text .hero-content .lead {
    font-size: 1rem;
  }

  .overlay-content-text .hero-content .btn {
    font-size: 0.7rem;
        margin-top: -10%;
        padding: 4px 8px;
  }

  /* Contact Info */
  .contact-info a {
    font-size: 7px; /* Further reduced font size for contact links */
  }

  /* Social Icons */
  .nav-social-icons a {
    width: 12px;
    height: 12px;
    font-size: 4px; /* Smaller icons */
  }

     .nav-social-icons a i {
        font-size: 8px;
        color: #525252;
    }
  
        .search-bar-icons {
        position: relative;
        left: -22%;
        top: 32px;
    }

  .search-icon {
    font-size: 10px;
  }
  .align-items-center i {
    color: #fdfdfd;
    font-size: 11px;
}
  .align-items-center a {
    font-size: 9px;
    padding: 2px;
    margin-top: 2px;
}
div#backgroundCarousel {
    height: 195px;
}
}
@media (max-width: 375px) {
  /* Hero Section */
  .hero-section {
    height: 250px; /* Further reduced height for a better fit on smaller screens */
  }

  .hero-section .carousel-item {
    height: 80px; /* Adjusted height for carousel items */
  }

  .carousel-inner {
    height: 200px; /* Further reduced inner height */
  }

  .carousel-control-next,
  .carousel-control-prev {
    opacity: 1; /* Adjusted opacity for clearer visibility */
    transition: opacity .15s ease;
  }
    .menu-master-kraft-container {
        margin-left: -17%;
        margin-top: -11px;
    }
  .carousel-control-next {
    padding-left: 10%; /* Reduced padding */
  }

  .carousel-control-prev {
    margin-left: -1%; /* Reduced margin */
  }
  
 

    .contact-data {
        left: 11%;
        top: -8px;
    }
.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 1px solid white;
    opacity: 1;
    height: 7%;
    border-radius: 50%;
    transition: opacity .15s ease;
    margin-top: 25%;
    margin-left: 34px;
    margin-right: 35px;
}
  /* Hero Content */
    .overlay-content-text .hero-content {
        bottom: 94px;
        top:-57px;
}

  .overlay-content-text .hero-content h1 {
    font-size: 0.8rem; /* Reduced font size */
  }

  .overlay-content-text .hero-content .lead {
    font-size: 0.9rem; /* Adjusted font size */
  }

  .overlay-content-text .hero-content .btn {
    font-size: 0.6rem; /* Reduced button font size */
    margin-top: -12%; /* Adjusted margin */
    padding: 3px 6px; /* Reduced padding */
  }

  /* Contact Info */
  .contact-info a {
    font-size: 6px; /* Further reduced font size for contact links */
  }

  /* Social Icons */
  .nav-social-icons a {
    width: 10px; /* Reduced icon size */
    height: 10px;
    font-size: 3px; /* Smaller font size */
  }

  .nav-social-icons a i {
    font-size: 7px;
    color: #525252;
  }

  
     .search-bar-icons {
        position: relative;
        left: -24%;
        top: 23px;
    }

  .search-icon {
    font-size: 8px; /* Smaller search icon */
  }

  .align-items-center i {
    color: #fdfdfd;
    font-size: 9px; /* Smaller icon size */
  }

  .align-items-center a {
    font-size: 8px; /* Reduced font size */
    padding: 1px; /* Adjusted padding */
  }
   
  div#backgroundCarousel {
    height: 180px; /* Adjusted height for the background carousel */
  }
}

@media (max-width: 320px) {
  /* Hero Section */
  .hero-section {
    height: 230px; /* Further reduced height for a better fit on smaller screens */
  }
    img.custom-logo {
        width: 140px;
        height: 46px;
    }
  .hero-section .carousel-item {
    height: 70px; /* Adjusted height for carousel items */
  }

  .carousel-inner {
    height: 180px; /* Further reduced inner height */
  }
 .menu-master-kraft-container {
        margin-left: -17%;
        margin-top: -6px;
    }
  .carousel-control-next,
  .carousel-control-prev {
    opacity: 1; /* Adjusted opacity for clearer visibility */
    transition: opacity .15s ease;
  }

  .carousel-control-next {
    padding-left: 5%; /* Reduced padding */
  }

  .carousel-control-prev {
    margin-left: 0; /* Reduced margin */
  }

 
  .contact-data {
  left: 10%;
        top: 2px;
  }

  /* Hero Content */
     .overlay-content-text .hero-content {
        top:-70px;
        left: 24px;
    }

  .overlay-content-text .hero-content h1 {
    font-size: 0.8rem; /* Further reduced font size */
  }

  .overlay-content-text .hero-content .lead {
    font-size: 0.8rem; /* Adjusted font size */
  }

  .overlay-content-text .hero-content .btn {
    font-size: 0.5rem; /* Reduced button font size */
    margin-top: -12%; /* Adjusted margin */
    padding: 2px 5px; /* Reduced padding */
  }

  /* Contact Info */
  .contact-info a {
    font-size: 5px; /* Further reduced font size for contact links */
  }

  /* Social Icons */
  .nav-social-icons a {
    width: 8px; /* Reduced icon size */
    height: 8px;
    font-size: 2px; /* Smaller font size */
  }

  .nav-social-icons a i {
    font-size: 6px;
    color: #525252;
  }

 
  .search-bar-icons {
     left: -21%;
     top: 26px;
  }

  .search-icon {
    font-size: 7px; /* Smaller search icon */
  }

  .align-items-center i {
    color: #fdfdfd;
    font-size: 8px; /* Smaller icon size */
  }

  .align-items-center a {
    font-size: 9px; /* Reduced font size */
    padding: 0; /* Adjusted padding */
  }

  div#backgroundCarousel {
    height: 136px; /* Adjusted height for the background carousel */
  }
}

/* about section */
.about-section {
  background-color: #6d6d6d;
  margin: 0;
  width: 100%;
  animation: fadeIn 2s ease-in-out;
}

.about-section .img-fluid {
  object-fit: cover;
  max-width: 100%;
  height: 390px;
  animation: zoomIn 1.5s ease-in-out; /* Initial zoom-in animation */
  transition: transform 0.3s ease-in-out; /* Smooth transition for hover */
}

/* Hover Effect with Zoom In-Out */
.about-section .img-fluid:hover {
  animation: zoomInOut 2s  alternate ease-in-out; /* Continuous zoom in-out effect */
  cursor: pointer; /* Change cursor to indicate interactivity */
}

/* Keyframes for Initial Zoom-In Animation */
@keyframes zoomIn {
  0% {
    transform: scale(0.9); /* Slightly smaller initially */
    opacity: 0;
  }
  100% {
    transform: scale(1); /* Normal size */
    opacity: 1;
  }
}

/* Keyframes for Zoom In-Out Effect */
@keyframes zoomInOut {
  0% {
    transform: scale(1); /* Normal size */
  }
  100% {
    transform: scale(1.1); /* Slight zoom-in */
  }
}


.about-hr {
  border: 2px solid #f7f7f7;
  margin-top: -3px;
  opacity: 1;
  animation: slideIn 1s ease-in-out;
}

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

.about-text h2 {
  font-size: 1.7rem;
  font-weight: 600;
  color: #fcfcfc;
  animation: fadeInDown 2.2s ease-in-out ;
}

@keyframes fadeInDown {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.about-text {
    padding: 70px;
}

.about-text p {
    color: #ffffff;
    font-size: 16px;
    word-spacing: 2px;
    letter-spacing: 0.2px;
    animation: fadeInUp 3.5s ease-in-out ;
}

@keyframes fadeInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.about-text a {
    width: 120px;
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 15px;
    border: 1px solid #a7a7a7;
    border-radius: 0;
    box-shadow: 0 0 1px 1px #9f9595;
    animation: fadeIn 2s ease-in-out;
}

.about-btn {
  display: inline-block;
  margin-top: 5px;
  margin-left: 10px;
  border:none;
  background-color: transparent;
  color: #e98b12;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  animation: pulse 1.5s ;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Fade In Animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

  /* Responsive Styles for 1024px Screen */
@media (max-width: 1024px) {
  .about-section {
    padding: 0;
  }

  .about-section .img-fluid {
    max-height: 326px;
  }

  .about-hr {
    width: 10%;
    border-width: 2px;
  }

  .about-text h2 {
    font-size: 1.4rem;
  }

  .about-text p {
    font-size: 12px;
    letter-spacing: 0.1px;
    word-spacing: 0.8px;
  }

  .about-text a {
    width: 130px;
    padding: 0.4rem;
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .about-section {
    padding: 0;
    height: auto; /* Adjusted height for better flexibility */
  }

  .about-section .img-fluid {
    max-height: 326px; /* Matched to 1024px breakpoint */
    width: 100%; /* Ensure full width for responsiveness */
    object-fit: cover; /* Maintain aspect ratio */
  }

  .about-hr {
    width: 10%; /* Matched to 1024px breakpoint */
    border-width: 2px; /* Consistent with 1024px */
    margin: 10px auto; /* Centered with balanced margin */
  }

      .about-text {
        padding: 6px 10px;
        text-align: center;
    }

  .about-text h2 {
    font-size: 1.3rem; /* Slightly smaller than 1024px */
  }

  .about-text p {
    font-size: 12px; /* Same as 1024px */
    letter-spacing: 0.1px; /* Maintain spacing */
    word-spacing: 0.8px; /* Consistent with 1024px */
  }

  .about-text a {
    width: 120px; /* Slightly smaller button */
    padding: 0.4rem; /* Matched to 1024px */
    font-size: 11px; /* Consistent reduction */
  }

  .align-items-center > * {
    flex-shrink: 0;
    max-width: 50%; /* Slightly more width for smaller screens */
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
}

@media (max-width: 425px) {
     .about-section {
        padding: 0;
        height: 375px;
        margin-top: -18px;
    }

        .about-section .img-fluid {
        max-height: 165px;
        width: 100%;
       margin-top: -5px;
    }

  .about-hr {
    width: 18%; /* Increased for better visibility */
    border-width: 1.2px;
    margin: 8px auto;
  }

  .about-text h2 {
    font-size: 1rem;
    text-align: center;
  }

  .about-text p {
    font-size: 10px;
  }

  .about-text a {
    width: 80px;
    padding: 0.2rem;
    font-size: 9px;
    margin: 5px auto;
    text-align: center;
  }

  .about-text b {
    font-weight: 500;
    font-size: 10px;
  }
.row>* {
     width: 0; 
  
}
button.about-btn {
    margin-top: 0;
   font-size: 10px;
    padding: 2px 5px;
}
  .align-items-center > * {
    flex-shrink: 0;
    max-width: 100%;
    padding: 5px;
  }
}


@media (max-width: 375px) {
  /* About Section */
  .about-section {
    padding: 4px; /* Reduced padding for a compact layout */
    height: 310px; /* Further reduced height */
    margin-top: -24px;
  }

  .about-section .img-fluid {
    max-height: 150px;
        width: 100%;
        margin-top: -8px;
       
    }
  .about-hr {
    width: 15%; /* Reduced width for a more compact line */
    border-width: 1px; /* Reduced border width */
    margin: 6px auto; /* Adjusted margin for better spacing */
  }

  .about-text h2 {
    font-size: 0.9rem; /* Smaller font size for heading */
    text-align: center;
    margin-bottom: 8px; /* Reduced margin */
  }

  .about-text p {
    font-size: 9px; /* Slightly smaller paragraph font */
    line-height: 1.4; /* Adjusted line height for readability */
  }

  .about-text a {
    width: 70px; /* Reduced width of the link */
    padding: 0.2rem;
    font-size: 8px; /* Smaller font size */
    margin: 4px auto; /* Adjusted margin */
    text-align: center;
  }

  .about-text b {
    font-weight: 500;
    font-size: 9px; /* Slightly smaller font size */
  }

  .row > * {
    width: 100%; /* Adjusted to take full width */
  }

  .align-items-center > * {
    flex-shrink: 0;
    max-width: 100%;
    padding: 4px; /* Reduced padding */
  }

  /* Button style */
  .about-btn {
    font-size: 10px; /* Reduced font size */
  }
}

@media (max-width: 320px) {
  /* About Section */
  .about-section {
    padding: 3px; /* Further reduced padding for compact layout */
    height: 265px; /* Reduced height */
  }
       .about-section .img-fluid {
        max-height: 111px;
        width: 100%;
        margin-top: 15px;
    }

  .about-hr {
    width: 10%; /* Further reduced width for a compact line */
    border-width: 1px; /* Retained thinner border width */
    margin: 4px auto; /* Reduced margin */
  }

  .about-text h2 {
    font-size: 0.8rem; /* Further reduced font size for heading */
    text-align: center;
    margin-bottom: 6px; /* Adjusted margin */
  }

  .about-text p {
    font-size: 8px; /* Smaller paragraph font */
    line-height: 1.3; /* Slightly reduced line height */
  }

  .about-text a {
    width: 65px; /* Further reduced width of the link */
    padding: 0.15rem; /* Smaller padding */
    font-size: 7px; /* Further reduced font size */
    margin: 3px auto; /* Adjusted margin */
    text-align: center;
  }

  .about-text b {
    font-weight: 500;
    font-size: 8px; /* Reduced font size */
  }

  .row > * {
    width: 100%; /* Full width for all columns */
  }

  .align-items-center > * {
    flex-shrink: 0;
    max-width: 100%; /* Ensure elements fit the container */
    padding: 3px; /* Reduced padding */
  }

  /* Button Style */
  button.about-btn {
    font-size: 9px; /* Reduced font size */
    padding: 2px; /* Adjusted padding */
  }
}

/* service section */
.services {
  padding: 30px 30px 5px;
  animation: fadeIn 2s ease-in-out;
}

.section-title {
  text-align: center;
  font-size: 2em;
  margin-bottom: 20px;
  color: #707070;
  animation: fadeInDown 2.5s ease-in-out ;
}

.service-container {
  padding: 0;
  margin: 0;
}

.Service-hr {
  border: 3px solid #f59103;
  animation: slideIn 1s ease-in-out;
    margin-left: 47%;
}
.service-hr {
    width: 4%;
}

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

.service-box {
  flex: 1;
  background-color: #f59103;
  color: #fdfdfd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 425px;
  margin-top: -16%;
  padding: 20px;
  animation: scaleUp 1.5s ease-in-out;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.service-box:hover {
  transform: scale(1.1); /* Slightly increase the size on hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

@keyframes scaleUp {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


.service-box h3 {
  font-size: 3rem;
  font-weight: 300;
  animation: fadeInUp 2.5s ease-in-out ;
}

@keyframes fadeInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.service-box p {
  margin: 20px;
  display: flex;
  font-size: 16px;
  animation: fadeIn 2s ease-in-out ;
}

.service-box .btn {
  display: inline-block;
  border: 1px solid white;
  width: 110px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  padding: 5px;
  font-size: 13px;
  margin-left: 40%;
  border-radius: 0;
  animation: pulse 2s ;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.service-item {
  padding: 10px;
  text-align: center;
  width: 100%;
  animation: fadeIn 1.5s ease-in-out;
}

.service-item img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  animation: zoomIn 1.5s ease-in-out;
  transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.service-item img:nth-child(1) {
  animation-delay: 0s;
}

.service-item img:nth-child(2) {
  animation-delay: 0.5s;
}

.service-item img:nth-child(3) {
  animation-delay: 1s;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Add hover effect */
.service-item img:hover {
  transform: scale(1.1); /* Slight zoom-in effect on hover */
  cursor: pointer; /* Change cursor to indicate interactivity */
}



.service-item h4 {
  margin-top: 10px;
  font-size: 0.6em;
  font-weight: 600;
  color: #3b3b3b;
  animation: fadeInUp 1.5s ease-in-out;
}

.service-item p {
  font-size: 0.5em;
  color: #181818;
  font-weight: 500;
  animation: fadeInLeft 1.5s ease-in-out;
}

@keyframes fadeInLeft {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Fade In Animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Fade In Down Animation */
@keyframes fadeInDown {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive Styles for 1024px Screen */
@media (max-width: 1024px) {
.services {
  padding: 10px 15px;
}

.section-title {
  font-size: 1.5rem;
}

.Service-hr {
  width: 5%;
  margin: 8px auto;
}

.service-box {
  padding: 15px;
   height: 330px;
   margin-top: -20%;
    }

.service-box h3 {
  font-size: 1.8rem;
}

.service-box p {
  font-size: 14px;
  margin: 15px;
}

.service-box .btn {
  width: 100px;
  font-size: 12px;
  margin: 0 auto;
}

.service-item {
  padding: 8px;
}

.service-item img {
  max-height: 100px;
}

.service-item h4 {
  font-size: 0.9rem;
  margin-top: 8px;
}

.service-item p {
  font-size: 0.8rem;
}
}

/* Responsive for 768px screeen */
@media(max-width: 768px){
  .service-box {
    flex: 1;
    background-color: #f59103;
    color: #f1f0f0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 330px;
    margin-top: 0%;
}
.row {
  display: flex;
}
}
@media (max-width: 425px) { 
  .services {
    margin-top: 0;
  }


  .service-item {
    padding: 6px; /* Reduced padding */
    font-size: 1.2rem;
    margin: 0; /* Remove unnecessary margins */
    text-align: center;
  }

  .service-item img {
    width: 100%; /* Ensure image takes full width of container */
    max-height: 80px; /* Maintain aspect ratio and set a max height */
  }

  .service-item h4 {
    font-size: 0.9rem; /* Adjust heading size */
    margin-top: 5px;
  }

  .service-item p {
    font-size: 0.75rem; /* Adjust paragraph size */
  }

  .service-hr {
    width: 7%;
    border: 2px solid #ffa200;
    display: block;
    margin: 10px auto; /* Centered and adjusted spacing */
  }

  .section-title {
    font-size: 1.2rem; /* Adjusted font size to fit smaller screens */
    text-align: center; /* Ensure title is centered */
    margin-top: 15px;
  }

  .service-box {
    flex: 1;
    background-color: #f59103;
    color: #f1f0f0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: auto;
  }

  .service-box h3 {
    font-size: 1.4rem; /* Adjusted font size */
  }

  .service-box p {
    font-size: 12px;
    margin: 10px 0;
  }

  .service-box .btn {
    width: 80px;
    font-size: 10px;
    margin: 10px auto;
    padding:3px;
  }
}

@media (max-width: 375px) { 
  .services {
    margin-top: 0;
  }

  .service-item {
    padding: 5px; /* Further reduced padding */
    font-size: 1rem; /* Reduced font size */
    margin: 0; /* Remove unnecessary margins */
    text-align: center;
  }

  .service-item img {
    width: 100%; /* Ensure image takes full width of container */
    max-height: 70px; /* Reduced max height to fit smaller screen */
  }

  .service-item h4 {
    font-size: 0.8rem; /* Further reduced heading size */
    margin-top: 5px;
  }

  .service-item p {
    font-size: 0.7rem; /* Further reduced paragraph size */
  }

  .service-hr {
    display: block;
    margin: 8px auto; /* Adjusted spacing */
  }

  .section-title {
    font-size: 1rem; /* Reduced font size to fit smaller screens */
    text-align: center; /* Ensure title is centered */
  }

  .service-box {
    flex: 1;
    background-color: #f59103;
    color: #f1f0f0;
    padding: 12px; /* Reduced padding for a tighter fit */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: auto;
  }

  .service-box h3 {
    font-size: 1.2rem; /* Reduced font size */
  }

  .service-box p {
    font-size: 11px; /* Reduced font size for better fit */
    margin: 8px 0; /* Adjusted margin */
  }

  .service-box .btn {
    width: 70px; /* Reduced width to fit smaller screens */
    font-size: 9px; /* Smaller font size */
    margin: 8px auto; /* Adjusted margin */
  }
}

@media (max-width: 320px) { 
  .services {
    margin-top: 0;
  }

  .service-item {
    padding: 4px; /* Further reduced padding */
    font-size: 0.9rem; /* Reduced font size for compact layout */
    margin: 0;
    text-align: center;
  }

  .service-item img {
    width: 100%; /* Ensure image takes full width of container */
    max-height: 60px; /* Reduced max height for smaller screen */
  }

  .service-item h4 {
    font-size: 0.7rem; /* Further reduced heading size */
    margin-top: 4px;
  }

  .service-item p {
    font-size: 0.6rem; /* Further reduced paragraph size */
  }

  .service-hr {
    display: block;
    margin: 6px auto; /* Reduced margin */
  }

  .section-title {
    font-size: 0.9rem; /* Reduced font size to fit smaller screens */
    text-align: center;
  }

  .service-box {
    flex: 1;
    background-color: #f59103;
    color: #f1f0f0;
    padding: 10px; /* Reduced padding for a tighter fit */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: auto;
  }

  .service-box h3 {
    font-size: 1rem; /* Reduced font size */
  }

  .service-box p {
    font-size: 10px; /* Slightly smaller font size for better fit */
    margin: 6px 0; /* Adjusted margin */
  }

  .service-box .btn {
    width: 65px; /* Reduced width to fit smaller screens */
    font-size: 8px; /* Smaller font size */
    margin: 6px auto; /* Adjusted margin */
  }
}

/* events section */
.events {
    padding: 10px 30px;
    max-width: 1440px;
    animation: fadeIn 1s ease-in-out;
}

.event-container {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    animation: slideUp 1s ease-in-out;
}

.event-box {
    flex: 1;
    background-color: #616161;
    color: #f1f0f0;
    height: 405px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: -13%;
    transition: transform 0.3s ease-in-out;
}

.event-box:hover {
    transform: scale(1.05);
}

.event-box h3 {
    font-size: 3rem;
    font-weight: 300;
    animation: fadeInDown 2.2s ease-in-out ;
}

.event-box p {
    margin: 20px;
    display: flex;
    font-size: 16px;
    animation: fadeInUp 2.2s ease-in-out ;
}

.event-box .btn {
    display: inline-block;
    border: 1px solid white;
    width: 110px;
    padding: 5px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    margin-left: 40%;
    border-radius: 0;
    animation: zoomIn 1s ease-in-out;
     animation: pulse 2s ;
    
}

.event-box .btn:hover {
    background-color: #ffffff;
    color: #616161;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}


/* Keyframes for Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to normal size */
  }
}
.event-item {
    padding: 10px;
    text-align: center;
    width: 100%;
    animation: fadeIn 1.5s ease-in-out;
}

.event-item img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    opacity: 1;
    animation: fadeIn 1.5s ease-in-out;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transition */
}

/* Hover Effect */
.event-item img:hover {
    transform: scale(1.1); /* Slight zoom-in on hover */
    opacity: 0.9; /* Slight fade effect */
    cursor: pointer; /* Pointer cursor to indicate interactivity */
}


.event-item h4 {
    margin-top: 10px;
    font-size: .6em;
    font-weight: 600;
    color: #0a0a0a;
    animation: fadeInUp 1.2s ease-in-out;
}

.event-item p {
    font-size: 1em;
    color: #181818;
    font-weight: 500;
    animation: fadeInUp 1.2s ease-in-out;
}

/* Keyframes for animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive Styles for 1024px Screen */
@media (max-width: 1024px) {
  .events {
    padding: 20px 10px;
  }

  .event-container {
    padding: 10px;
  }

  .event-box {
  padding: 15px;
  height: 306px;
  margin-top: -16%;
  }

  .event-box h3 {
    font-size: 2rem;
  }

  .event-box p {
    font-size: 14px;
    margin: 15px 0;
  }

  .event-box .btn {
    width: 100px;
    font-size: 12px;
    margin: 0 auto;
  }

  .event-item {
    padding: 8px;
  }

  .event-item img {
    max-height: 100px;
  }

  .event-item h4 {
    font-size: 0.5em;
    margin-top: 8px;
  }

  .event-item p {
    font-size: 0.9em;
  }
}

/* Responsive for 768px screeen */
@media(max-width: 768px){
  .event-box  {
    flex: 1;
    background-color: #616161;
    color: #f1f0f0;
    height: 300px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 5%;
  }
}

@media (max-width: 425px) {
  .events {
    padding: 5px 10px; /* Reduced padding for better fit on smaller screens */
  }

  .event-container {
    padding: 5px; /* Reduced padding for smaller screens */
  }

  .event-box {
    background-color: #616161;
    color: #f1f0f0;
    height: auto; /* Adjusted height for flexible content */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-left: 0; /* Removed negative margin */
    width: 100%; /* Set width to 100% to fit within container */
    margin-top: 2%;
  }

  .event-box h3 {
    font-size: 1.5rem; /* Adjusted font size */
    text-align: center; /* Center aligned title */
  }

  .event-box p {
    font-size: 12px; /* Adjusted font size */
    margin: 10px 0;
  }

  .event-box .btn {
    width: 80px; /* Reduced button width */
    font-size: 10px; /* Smaller font size for buttons */
    margin: 10px auto;
    padding:3px;
  }

  /* Grid layout for event items */
  .event-container {
    display: grid;
    gap: 20px; /* Space between items */
    width: 100%; /* Ensure container width fits screen */
  }

  .event-item {
    padding: 5px;
    text-align: center; /* Center align text in event item */
  }

  .event-item img {
    max-height: 80px; /* Ensure image size is appropriate */
    width: 100%; /* Make sure the image takes full width */
  }

  .event-item h4 {
    font-size: 0.9rem; /* Adjusted heading size */
    margin-top: 5px;
  }

  .event-item p {
    font-size: 0.8rem; /* Adjusted paragraph size */
  }
}

@media (max-width: 375px) {
  .events {
    padding: 5px 8px; /* Reduced padding for smaller screens */
  }

  .event-container {
    padding: 5px; /* Reduced padding for smaller screens */
  }

  .event-box {
    background-color: #616161;
    color: #f1f0f0;
    height: auto; /* Flexible content height */
    padding: 15px; /* Reduced padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-left: 0; /* No negative margin */
    width: 100%; /* Full width */
    margin-top: 1.5%;
  }

  .event-box h3 {
    font-size: 1.2rem; /* Reduced font size */
    text-align: center;
  }

  .event-box p {
    font-size: 11px; /* Slightly smaller font size */
    margin: 8px 0;
  }

  .event-box .btn {
    width: 70px; /* Smaller button width */
    font-size: 9px; /* Smaller font size */
    margin: 8px auto;
  }

  /* Grid layout for event items */
  .event-container {
    display: grid;
    gap: 15px; /* Adjusted gap for smaller screens */
    width: 100%;
  }

  .event-item {
    padding: 5px;
    text-align: center;
  }

  .event-item img {
    max-height: 70px; /* Reduced max-height for images */
    width: 100%;
  }

  .event-item h4 {
    font-size: 0.8rem; /* Further reduced heading size */
    margin-top: 5px;
  }

  .event-item p {
    font-size: 0.75rem; /* Further reduced paragraph size */
  }
}

@media (max-width: 320px) {
  .events {
    padding: 4px 6px; /* Further reduced padding for smaller screens */
  }

  .event-container {
    padding: 4px; /* Reduced padding for compact layout */
  }

  .event-box {
    background-color: #616161;
    color: #f1f0f0;
    height: auto; /* Flexible content height */
    padding: 12px; /* Reduced padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-left: 0; /* No negative margin */
    width: 100%; /* Full width */
    margin-top: 1%;
  }

  .event-box h3 {
    font-size: 1rem; /* Reduced font size */
    text-align: center;
    margin-bottom: 8px;
  }

  .event-box p {
    font-size: 10px; /* Slightly smaller font size for better fit */
    margin: 6px 0;
  }

  .event-box .btn {
    width: 65px; /* Further reduced button width */
    font-size: 8px; /* Smaller font size */
    margin: 6px auto; /* Reduced margin */
  }

  /* Grid layout for event items */
  .event-container {
    display: grid;
    gap: 12px; /* Adjusted gap for better spacing on smaller screens */
    width: 100%;
  }

  .event-item {
    padding: 4px; /* Reduced padding */
    text-align: center;
  }

  .event-item img {
    max-height: 60px; /* Reduced max-height for images */
    width: 100%;
  }

  .event-item h4 {
    font-size: 0.7rem; /* Further reduced heading size */
    margin-top: 4px;
  }

  .event-item p {
    font-size: 0.7rem; /* Smaller paragraph size for better fit */
  }
}

/* Container for the items */
.interior-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin:50px;
    animation: fadeIn 1s ease-in-out;
}
.interior-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
    gap: 20px; /* Adjust spacing between items */
}
/* Style for each item (image and box) */
.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;  
    height: 550px;
    animation: slideIn 1.5s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.item:hover {
    transform: scale(1.05);
}


/* Style for images */
.item img {
    width: 100%;
    height: 270px;
    animation: zoomIn 1.2s ease-in-out;
}

/* Style for content boxes */
.content-box {
    color: rgb(247, 247, 247);
    text-align: center;
    font-weight: 700;
    width: 100%;
    height: 270px;
    padding: 50px;
    box-sizing: border-box; /* Ensure padding is included in the width */
    animation: fadeInUp 1.5s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.content-box:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.content-box a {
    border: 1px solid white;
    color: white;
    font-weight: 500;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 0;
    animation: fadeIn 1.2s ease-in-out;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    animation: pulse 2s ;
}

.content-box a:hover {
    background-color: white;
    color: black;
}
/* Keyframes for Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to normal size */
  }
}
.content-box h5 {
    font-weight: 400;
    font-size: 2.2rem;
    animation: fadeInDown 2.2s ease-in-out ;
}

.content-box p {
    font-weight: 500;
    font-size: 14px;
    animation: fadeInUp 3.3s ease-in-out ;
}

/* Basic horizontal line style */
.interior-hr {
    border: 3px solid #f7e2be;
    margin: 20px 0;
    animation: growWidth 1s ease-in-out;
}

/* Keyframes for animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes growWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
/*Responsive for 1024px Screen */
@media (max-width: 1024px) {
  /* Container for the items */
  .interior-container {
    flex-direction: row; /* Stack items vertically */
    align-items: center;
  }

  /* Style for each item (image and box) */
  .item {
    width: 90%; /* Reduce width for better spacing */
    height: auto; /* Adjust height dynamically */
    margin-bottom: 20px; /* Add spacing between stacked items */
  }

  /* Style for images */
  .item img {
    height: auto; /* Maintain aspect ratio */
    max-height: 140px;
  }

  /* Adjustments for content boxes */
  .content-box {
    height: 200px;
        padding: 20px;
  }

  .content-box h5 {
    font-size: 1.8rem; /* Scale down headings */
  }

  .content-box p {
    font-size: 13px; /* Adjust font size for better readability */
  }

  .content-box a {
    font-size: 13px;
    padding: 4px 8px; /* Adjust button size */
  }

  /* Horizontal line */
  .interior-hr {
    margin: 15px 0; /* Reduce spacing for smaller screens */
  }
}
@media (max-width: 768px) {
  /* Container for the items */
  .interior-container {
    flex-direction: row; /* Stack items vertically */
    align-items: center; /* Center items */
  }

  /* Style for each item (image and box) */
  .item {
    width: 100%; /* Full width for stacked items */
    height: auto; /* Adjust height dynamically */
    margin-bottom: 15px; /* Add spacing between stacked items */
  }

  /* Style for images */
  .item img {
    width: 100%; /* Ensure images fit container width */
    height: auto; /* Maintain aspect ratio */
    max-height: 120px; /* Reduce max height */
  }

  /* Adjustments for content boxes */
  .content-box {
    padding: 15px; /* Reduce padding for smaller screens */
  }

  .content-box h5 {
    font-size: 1.5rem; /* Scale down headings */
  }

  .content-box p {
    font-size: 12px; /* Adjust font size for better readability */
  }

  .content-box a {
    font-size: 12px; /* Reduce button font size */
    padding: 3px 6px; /* Adjust button size */
  }

  /* Horizontal line */
  .interior-hr {
    border-width: 2px; /* Slightly thinner border */
    margin: 10px 0; /* Compact spacing */
  }
}
@media (max-width: 425px) {
  /* Grid container */
  .interior-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Single column for smaller screens */
    gap: 15px; /* Reduce gap for better spacing */
    padding: 10px; /* Add padding */
  }

  /* Container for items */
  .interior-container {
    display: flex;
    flex-direction: column; /* Stack items */
    align-items: center; /* Center items */
    padding: 10px;
    margin:0;
  }

  /* Style for each item */
  .item {
    width: 100%; /* Full width */
    height: auto;
    margin-bottom: 15px;
  }

  /* Image adjustments */
  .item img {
    width: 100%;
    height: auto; /* Allow images to scale */
    max-height: 150px; /* Set max height */
    object-fit: cover; /* Ensure images fit properly */
  }

  /* Content box adjustments */
    .content-box {
        padding: 30px;
        width: 100%;
        text-align: center;
        height: 150px;
    }

  .content-box h5 {
    font-size: 1.1rem; /* Slightly smaller heading */
  }

  .content-box p {
    font-size: 10px;
    margin: 5px 0;
  }

  .content-box a {
    font-size: 10px;
    padding: 3px 6px;
    display: inline-block;
  }

  /* Horizontal line */
  .interior-hr {
    border-width: 1px;
    margin: 10px 0;
  }
}




/* Container for the section */
.work {
    text-align: center;
    padding: 20px;
    color: #585656;
    animation: fadeIn 1s ease-in-out;
}

/* Title style */
.work h2 {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #818181;
    font-weight: 600;
    animation: fadeInDown 2.2s ease-in-out ;
}

/* HR line style */
.work-hr {
    border: 2px solid #f59103;
    background-color: #ccc;
    margin: 20px auto;
    opacity: 1;
    width: 2%; /* Adjust the width of the line */
    animation: growWidth 1s ease-in-out;
}

.filtering span {
    cursor: pointer;
    padding: 5px 10px;
    display: inline-block;
    border: 1px solid #ddd;
    transition: background-color 0.3s, color 0.3s, transform 0.3s ease-in-out;
    font-size: 16px;
    margin: 10px;
    animation: fadeIn 1.3s ease-in-out;
     animation: pulse 2s ;
}

.filtering span:hover {
    background-color: orange;
    color: white; /* Change text color to white on hover */
    transform: scale(1.1);
}

.filtering span.active {
    background-color: transparent;
    color: black;
}

/* Keyframes for Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to normal size */
  }
}
/* Portfolio wrapper */
.portfolio-wrapper {
    overflow: hidden;
    position: relative;
    animation: slideIn 1.5s ease-in-out;
}

.portfolio-image {
    position: relative;
}

.portfolio-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease-in-out;
}

.portfolio-image img:hover {
    transform: scale(1.05);
}

/* Overlay */
.work1-overlay {
    position: absolute;
    left: 15px;
    bottom: 2px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fadeInUp 1.5s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.portfolio-image:hover .work1-overlay {
    opacity: 1;
}

.work1-overlay-content {
    text-align: center;
    animation: fadeIn 1.5s ease-in-out;
}

.work1-overlay-content .btn {
    text-transform: uppercase;
    border: 1px solid white;
    background-color: transparent;
    border-radius: 0;
    padding: 3px;
    animation: fadeInUp 1.2s ease-in-out;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.work1-overlay-content .btn:hover {
    background-color: white;
    color: black;
}

/* Keyframes for animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes growWidth {
    from {
        width: 0;
    }
    to {
        width: 2%;
    }
}

@media (max-width: 768px) {
  /* Container for the section */
  .work {
    text-align: center;
    padding: 15px; /* Reduced padding for smaller screens */
    color: #585656;
  }

  /* Title style */
  .work h2 {
    font-size: 1.5em; /* Slightly smaller font size for readability */
    margin-bottom: 8px; /* Reduced margin for compact layout */
    color: #818181;
    font-weight: 600;
  }

  /* HR line style */
  .work-hr {
    border: 2px solid #f59103; /* Slightly thinner for smaller screens */
    background-color: #ccc;
    margin: 15px auto; /* Reduced margin */
    width: 5%; /* Increased width for better visibility */
  }

  /* Filter buttons */
  .filtering span {
    font-size: 14px; /* Reduced font size for smaller screens */
    padding: 4px 8px; /* Adjusted padding for compact look */
    margin: 5px; /* Reduced margin between buttons */
  }

  .filtering span.active {
    background-color: transparent;
    color: black;
  }

  .filtering span:hover {
    background-color: orange;
    color: white; /* Retain hover effect */
  }

  /* Portfolio wrapper */
  .portfolio-wrapper {
    overflow: hidden;
    position: relative;
    margin-bottom: 15px; /* Added spacing between items */
  }

  .portfolio-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Portfolio image overlay */
  .portfolio-image {
    position: relative;
  }

  .work1-overlay {
    position: absolute;
    left: 10px; /* Adjusted position for smaller screens */
    bottom: 5px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
  }

  .work1-overlay-content {
    text-align: center;
    padding: 5px; /* Added padding for better spacing */
  }

  .work1-overlay-content .btn {
    text-transform: uppercase;
    border: 1px solid white;
    background-color: transparent;
    border-radius: 0;
    padding: 5px; /* Slightly larger for better usability */
    font-size: 12px; /* Reduced font size */
  }
}
@media (max-width: 425px) {
  /* Work Section */
  .work {
    text-align: center;
    padding: 10px; /* Reduced padding for smaller screens */
    color: #585656;
  }

  /* Title style */
  .work h2 {
    font-size: 1.2em; /* Smaller font size for readability */
    margin-bottom: 8px; /* Reduced margin for compact layout */
    color: #818181;
    font-weight: 600;
  }

  /* HR line style */
  .work-hr {
    border: 2px solid #f59103; /* Slightly thinner for smaller screens */
    background-color: #ccc;
    margin: 10px auto; /* Reduced margin */
    width: 8%; /* Reduced width for better fit */
  }

  /* Filter buttons */
  .filtering span {
    font-size: 12px; /* Further reduced font size for smaller screens */
    padding: 4px 8px; /* Adjusted padding for compact look */
    margin: 3px; /* Reduced margin between buttons */
  }

  .filtering span.active {
    background-color: transparent;
    color: black;
  }

  .filtering span:hover {
    background-color: orange;
    color: white;
  }

  /* Portfolio wrapper */
  .portfolio-wrapper {
    overflow: hidden;
    position: relative;
    margin-bottom: 15px; /* Space between items */
  }

     .portfolio-image img {
        width: 100%;
        height: 180px;
    }

  /* Portfolio image overlay */
  .portfolio-image {
    position: relative;
  }

  .work1-overlay {
    position: absolute;
    left: 5px; /* Adjusted position for smaller screens */
    bottom: 5px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
  }

  .work1-overlay-content {
    text-align: center;
    padding: 5px; /* Added padding for better spacing */
  }

  .work1-overlay-content .btn {
    text-transform: uppercase;
    border: 1px solid white;
    background-color: transparent;
    border-radius: 0;
    padding: 5px; /* Slightly larger for better usability */
    font-size: 12px; /* Reduced font size */
  }
}


/* Banner image with text overlay */
.banner {
    position: relative;
    width: 100%;
    height: 320px; /* You can adjust the height as needed */
    background-image: url('Images/Mask%20Group%20112.jpg?ver=1.0');
    background-size: cover;
    background-position: center;
    animation: zoomIn 3.5s ease-in-out ;
    
}

/* Create the content box overlay on the left side */
.overlay-box {
    position: absolute;
    top: 50%;
    left: 15px; /* Adjust as needed to move the content box */
    transform: translateY(-50%);
    background-color: #f59103; /* Semi-transparent black background */
    color: white;
    text-align: center;
    width: 500px; 
    height: 320px;
    padding: 20px;
    animation: slideInLeft 1.2s ease-in-out;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.overlay-box:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

/* Style for the heading */
.overlay-box h3 {
    margin: 0;
    font-size: 2rem;
    margin-top: 20%;
    font-weight: 500;
    animation: fadeInDown 3.3s ease-in-out ;
}

/* Style for the paragraph */
.overlay-box p {
    font-size: 14px;
    margin-top: 10px;
    font-weight: 400;
    animation: fadeInUp 3.4s ease-in-out ;
}

/* Style for the button */
.overlay-box .btn {
    display: inline-block;
    border: 1px solid white;
    color: white;
    font-size: 13px;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 0;
    animation: fadeIn 1.5s ease-in-out;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
     animation: pulse 2s ;
}

.overlay-box .btn:hover {
    background-color: #e64a19;
    color: #ffffff;
}

/* Keyframes for Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to normal size */
  }
}
/* Keyframes for animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
 
  .banner {
    height: 200px; 
  }

  /* Overlay box adjustments */
  .overlay-box {
    top: 50%; 
    left: 10px; /* Reduce horizontal margin for smaller screens */
    transform: translateY(-50%);
    width: 50%; /* Make overlay box width responsive */
    height: 200px; /* Allow height to adjust dynamically */
    padding: 15px; /* Adjust padding */
  }

  /* Heading adjustments */
  .overlay-box h3 {
    font-size: 1.5rem; /* Scale down heading font size */
    margin-top: 10%; /* Adjust spacing */
  }

  /* Paragraph adjustments */
  .overlay-box p {
    font-size: 12px; /* Reduce font size */
    margin-top: 5px; /* Adjust spacing */
  }

  /* Button adjustments */
  .overlay-box .btn {
    font-size: 12px; /* Scale down button font size */
    padding: 4px 8px; /* Adjust padding for a smaller button */
  }

  .overlay-box .btn:hover {
    background-color: #d84315; /* Slightly adjust hover effect color */
  }
}

@media (max-width: 425px) {
  .overlay-box h3 {
    font-size: 1rem;
        margin-top: 22%;
        text-align: center;
  }

  /* Paragraph adjustments */
  .overlay-box p {
    font-size: 10px; /* Further reduce paragraph font size */
    margin-top: 5px; /* Adjust margin for better spacing */
    text-align: center; /* Center the text for better presentation */
  }

  /* Button adjustments */
  .overlay-box .btn {
    font-size: 10px; /* Reduce button font size */
    padding: 5px 10px; /* Adjust padding for smaller buttons */
    width: 56%; /* Make button full width for better accessibility */
    margin-top: 10px; /* Add some space between text and button */
  }

  .overlay-box .btn:hover {
    background-color: #d84315; /* Maintain hover color */
  }
}


/* Styling for Testimonial */
.your-class {
  padding: 20px;
  background-color: white;
  width: 80%;
  margin: 0 auto;
  animation: fadeIn 1s ease-in-out;
  height:250px;
}

/* Horizontal line */
.testimonial-hr {
  width: 2%;
  margin: 10px auto;
  border: 2px solid #f59103;
  opacity: 1;
  animation: growWidth 1s ease-in-out;
  margin-bottom:30px;
}

/* Styling for each testimonial text */
.your-class > div {
  font-size: 1.1rem;
  color: #555;
  text-align: center;
  margin: 10px 0;
  opacity: 0;
  animation: fadeInUp 1s ease-in-out forwards;
}
h2.testimonial_heading {
  animation: fadeInUp 3s ease-in-out forwards ;
  font-size:1.5rem;
    
}
/* Slick slide styling */
.slick-slide {
  font-size: 15px;
  font-weight: 500;
  color: #626060;
  opacity: 0;
  animation: fadeInUp 1.2s ease-in-out forwards;
}

/* Override Slick's default arrow styles */
.slick-prev,
.slick-next {
  width: 40px;
  height: 40px;
  background-color: white;
  color: #0e0e0e; /* White arrow color */
  border-radius: 50%; /* Make the arrows circular */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure the arrows are on top of other content */
  border: 1px solid black;
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

.test-slick-prev {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: black;
  cursor: pointer;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid black;
	width: 45px;
    height: 45px;
}

.test-slick-prev i {
     font-size: 16px;
    color: #4e4c4c;
  transition: color 0.3s ease; /* Smooth color transition on hover */
}

/* Hover effect for the left arrow */
.test-slick-prev:hover i {
  color: #ff8a00; /* Change color on hover */
}

/* Custom next arrow button */
.test-slick-next {
  position: absolute;
  right: 10px; /* Position the right arrow */
  top: 50%;
  transform: translateY(-50%); /* Center the arrow vertically */
  background: none;
  color: #000; /* Arrow color */
  font-size: 20px; /* Adjust size */
  cursor: pointer;
  z-index: 1; /* Ensure it is above the images */
  border-radius: 50%;
  border: 1px solid black;
	width: 45px;
    height: 45px;
}

.test-slick-next i {
      font-size: 16px;
    color: #4e4c4c;
  transition: color 0.3s ease; /* Smooth color transition on hover */
}

/* Hover effect for the right arrow */
.test-slick-next:hover i {
  color: #ff8a00; /* Change color on hover */
}

/* Keyframes for animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes growWidth {
  from {
    width: 0;
  }
  to {
    width: 2%;
  }
}

@media (max-width: 768px){
.test-slick-prev {
    position: absolute;
    left: -30px;
}
.test-slick-next {
    position: absolute;
    right: -32px;
}
}

@media (max-width: 425px) {
  /* Style for the content inside the slick-slide */
  .your-class > div {
    font-size: 0.9rem; /* Smaller font size */
    color: #555;
    text-align: center;
    margin: 8px 0; /* Adjusted margin for better spacing */
  }
  .testimonial-hr {
    border: 2px solid #f59103;
	   width: 10%;
  }
	h2.testimonial_heading {
    animation: fadeInUp 3s ease-in-out forwards;
    margin-top: 25px;
    font-size: 1.2rem;
}
	.testimonial-heading {
    font-size: 1em;
  }
  .testimonial_heading h2{
    animation: fadeInDown 2.2s ease-in-out ;
}
  /* Slick slide text adjustments */
  .slick-slide {
    font-size: 14px; /* Adjust font size */
    font-weight: 500;
    color: #626060;
  }
.test-slick-prev {
    position: absolute;
    left: -47px;
    top:25px;
}
.test-slick-next {
    position: absolute;
    right: -47px;
    top:25px;
}
  /* Override Slick's default arrow styles */
  .slick-prev,
  .slick-next {
    width: 30px; /* Smaller arrow size for compact screens */
    height: 30px; /* Reduced height */
    background-color: white;
    color: #0e0e0e;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
.slick-prev,
  .slick-next {
border: 1px solid rgb(15, 15, 15);
}

  /* Hover effect for the arrows */
  .slick-prev:hover,
  .slick-next:hover {
    background-color: #555;
    color: #fff;
  }

  /* Remove focus outline */
  .slick-prev:focus,
  .slick-next:focus {
    outline: none;
  }

  /* Adjust default Slick arrow size */
  .slick-prev:before,
  .slick-next:before {
    font-size: 18px; /* Reduced size */
    content: ''; /* Remove default arrows */
  }

  /* Custom arrow content */
  .slick-prev:after,
  .slick-next:after {
    font-family: Arial, sans-serif;
    font-size: 16px; /* Adjusted font size for better visibility */
    font-weight: bold;
    line-height: 1;
  }

  .slick-prev:after {
    content: '←'; /* Left arrow */
  }

  .slick-next:after {
    content: '→'; /* Right arrow */
  }
}
  @media (max-width: 320px) {
  .slick-prev, .slick-next {
   margin: 0;
    }
  }


/* Client section */
.client-section {
    text-align: center;
    height: 650px;
    background-color: #e9e9e9;
    padding: 20px;
    animation: fadeIn 1.5s ease-in-out;
}

/* Horizontal line */
.client-hr {
    width: 2%;
    margin: 10px auto;
    border: 2px solid #f59103;  
    margin-top: -12px;
    opacity: 1;
    animation: growWidth 1s ease-in-out;
}

/* Client section heading */
.client-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: 600;
    color: #626161;
    animation: fadeInDown 2s ease-in-out ;
    margin-top:30px;
}

.client-container {
  display: flex;
/*   height: 500px; */
  flex-direction: column;
/*   gap: 15px; */
  opacity: 2; /* Initially hidden */
  animation: slideInLeftToRight 9.5s ease-out forwards ; /* Left-to-right animation */
	margin-bottom:30px;
}

/* Keyframes for Left-to-Right Animation */
@keyframes slideInLeftToRight {
  0% {
    transform: translateX(-100%); /* Start from the left, off-screen */
    opacity: 2; /* Initially hidden */
  }
  100% {
    transform: translateX(0); /* Move to the normal position */
    opacity: 5; /* Fully visible */
  }
  100% {
    transform: translateX(0); /* Move to the normal position */
    opacity: 8; /* Fully visible */
  }
}


/* Client row layout */
.client-row {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    filter: brightness(90%);
    animation: slideInUp 1s ease-in-out;
}

/* Client logo styling */
.client-row img {
    width: 180px;
    height: 90px;
    margin: 0 10px;
    opacity: 0;
    animation: fadeInUp 1.2s ease-in-out forwards;
}

/* Additional styling for specific client logo */
.client-row .client-2 {
    width: 240px; 
    height: 90px;
}

.view-more-btn {
    margin-top: -20%;
    padding: 6px 13px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    background-color: #f59103;
    color: white;
    border: none;
    animation: fadeIn 1s ease-in-out ;  
    opacity: 1;
}

/* Hover effect for the view more button */
.view-more-btn:hover {
    background-color: #0056b3;
}

/* Keyframes for animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



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

@keyframes growWidth {
    from {
        width: 0;
    }
    to {
        width: 2%;
    }
}

 
  @media (max-width: 768px) {
    /* Client section adjustments */
    .client-section {
      padding: 15px;
      height: auto; /* Allow height to adjust dynamically */
    }
  
    /* Title adjustments */
    .client-section h2 {
      font-size: 1.5rem; /* Reduce title font size */
      margin-bottom: 15px; /* Adjust spacing */
    }
  
    /* HR line adjustments */
    .client-hr {
      width: 10%; /* Increase width slightly for smaller screens */
      border-width: 2px; /* Reduce thickness */
    }
  
    /* Client container adjustments */
    .client-container {
      gap: 10px; /* Reduce gap between elements */
      height: auto; /* Make height dynamic */
    }
  
    /* Client row adjustments */
    .client-row {
      flex-direction: row; /* Stack client logos vertically */
      align-items: center; /* Center align logos */
      width: 100%;
    }
 
        .client-row img {
        width: 124px;
        height: 45px;
        margin: 10px 0;
    }
    .client-row .client-2{
      width: 130px; 
      height: 80px
    }
    /* View more button adjustments */
    .view-more-btn {
      margin-top: 15px; /* Adjust positioning */
      font-size: 0.9rem; /* Scale down font size */
      padding: 5px 8px; /* Adjust padding for better fit */
    }
  }
  
  @media (max-width: 425px) {
    /* Client section adjustments */
    .client-section {
      padding: 10px; 
      height: auto;   
      }
  
    /* Title adjustments */
        .client-section h2 {
        font-size: 1.2rem;
        margin-bottom: 12px;
        text-align: center;
        margin-top: 15px;
    }
  
    /* HR line adjustments */
    .client-hr {
      width: 4%;
      border-width: 2px;
      margin: 10px auto;
      opacity:1;
    }
  
    /* Client container adjustments */
       .client-container {
        gap: 5px;
        height: auto;
        margin-bottom: 12px;
    }
  
    /* Client row adjustments */
      .client-row {
        flex-direction: column;
        align-items: center;
        gap:25px;
        width: 100%;
        margin-top: 30px;
        margin-bottom: 4px;
    }
  
    .client-row img {
        width: 74px;
        height: 35px;
        margin: -2px;
    }
    .client-row .client-2{
      width: 100px;
        height: 35px;
    }
  
    /* View more button adjustments */
    .view-more-btn {
    font-size: 0.8rem;
        padding: 5px 10px;
        margin-left: auto;
        margin-right: auto;
    }
  }
  
  @media (max-width: 375px) {
  /* Client section adjustments */
  .client-section {
    padding: 8px; /* Reduced padding for smaller screens */
    height: auto; /* Let height be dynamic to fit the content */
  }

  /* Title adjustments */
  .client-section h2 {
    font-size: 1rem; /* Further reduced title font size for small screens */
    margin-bottom: 10px; /* Reduced spacing */
    text-align: center; /* Center align the title */
  }

  /* HR line adjustments */
  .client-hr {
    width: 9%; /* Reduced width */
    border-width: 2px; /* Thinner line */
    margin: 8px auto; /* Adjusted margin */
    opacity: 1;
  }

  /* Client container adjustments */
  .client-container {
    gap: 5px; /* Reduced gap between client logos */
    height: auto; /* Allow dynamic height */
  }

  /* Client row adjustments */
    .client-row {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

  .client-row img {
 width: 61px;
 height: 31px;
 margin: 0 5px;
  }

  .client-row .client-2 {
    width: 80px; /* Slightly reduced width for this item */
    height: 30px; /* Adjusted height */
  }

  /* View more button adjustments */
  .view-more-btn {
    font-size: 0.75rem; /* Reduced font size for smaller screens */
    padding: 5px 8px; /* Adjusted padding */
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 320px) {
  /* Client section adjustments */
  .client-section {
    padding: 6px; /* Further reduced padding for very small screens */
    height: auto; /* Dynamic height to fit the content */
  }

  /* Title adjustments */
  .client-section h2 {
    font-size: 1.1rem; /* Smaller title font size */
    margin-bottom: 8px; /* Reduced spacing */
    text-align: center; /* Center align the title */
  }

     .client-hr {
        width: 9%;
        border-width: 2px;
        margin: 6px auto;
        opacity: 1;
    }

  /* Client container adjustments */
  .client-container {
    gap: 4px; /* Further reduced gap between client logos */
    height: auto; /* Keep dynamic height */
  }

  /* Client row adjustments */
  .client-row {
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-content: center; /* Center logos */
  }

.client-row img {
    width: 51px;
    height: 21px;
    margin: 0 4px;
    }
  .client-row .client-2 {
    width: 70px; /* Slightly smaller width */
    height: 28px; /* Adjusted height */
  }

  /* View more button adjustments */
  .view-more-btn {
    font-size: 0.7rem; /* Smaller font size for the button */
    padding: 4px 6px; /* Reduced padding */
    margin-left: auto;
    margin-right: auto;
  }
}


/* Contact form */
.contact-form {
    width: 100%;
    margin: auto;
    height: 400px;
    padding-left: 6%;
    margin-top: 5%;
    animation: fadeIn 1.5s ease-in-out;
}

/* Centered text style */
.text-center {
    font-size: 1.7rem;
    font-weight: 600;
    color: #505050;
    margin-top: 5%;
    margin-bottom: 30px;
}

/* Horizontal line for contact text */
.contact-text-hr {
    width: 4%;
    margin: 10px auto;
    border: 2px solid #f59103;
    opacity: 1;
    animation: growWidth 1s ease-in-out;
}

/* Contact form row */
.contact-row.row {
    margin-right: 0;
    animation: slideInUp 1s ease-in-out ;
}

/* Contact form input and textarea styles */
.column input,
.column textarea {
    padding: 10px;
    border: 1px solid #ccc;
    width: 100%;
    animation: fadeInUp 1.2s ease-in-out forwards;
}

/* Height of message box */
#message {
    height: 118px;
}

/* Form layout */
#form {
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Column layout */
.column {
    flex: 1;
    margin: 10px;
}

/* Contact form container */
.contacts-container {
    display: flex;
    animation: fadeInUp 1.5s ease-in-out;
}

/* Contact input label */
.column label {
    display: block;
    margin-bottom: 5px;
}

.contact-box {
    display: flex;
    justify-content: center;
}
.contact-box .contact-button {
    width: 100px;
    margin-left: 10px;
}

.contact-button {
    width: 8%;
    color: white;
    margin-bottom: 10px;
    border: none;
    background-color: #292929;
    font-size: 16px;
    font-weight: 500;
    padding: 5px 5px 5px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    animation: fadeIn 1s ease-in-out;
    opacity: 1;
    animation: pulse 2s ;
}

/* Button hover effect */
.contact-button:hover {
    background-color: #333;
}

/* Contact button on hover */
button:hover {
    background-color: none;
}



/* Keyframes for Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to normal size */
  }
}
/* Keyframes for animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes growWidth {
    from {
        width: 0;
    }
    to {
        width: 4%;
    }
}

@media screen and (max-width: 768px) {
  .contact-form {
      padding-left: 5%;
      height: auto; /* Allow the form to adjust its height */
      box-shadow: none; /* Optional: remove shadow for simplicity */
  }

  .text-center {
      font-size: 1.5rem; /* Adjust font size */
      margin-top: 10%; /* Add more spacing for better visibility */
  }

  form {
      flex-direction: column; /* Stack form fields vertically */
  }
  #message {
    height: 100px;
}
  .contact-text-hr {
      width: 3%; /* Adjust width for smaller screens */
  }

  .column input,
  .column textarea {
    height: 30px
  }
  ::placeholder {
    font-size: .8em;
    padding: 5px;
  }
  textarea {
      height: auto; /* Allow textarea height to adjust dynamically */
  }
  .contact-row{
    display: flex;
    width: 100%;
  }
  .contact-box {
      flex-direction: column; /* Center align the button */
      align-items: center; /* Center align the content */
  }

  .contact-button {
    width: 8%;
    padding: 5px;
    font-size: 14px;
} 
}

@media (max-width: 425px) {
  .contact-form {
      padding-left: 2%; /* Reduce padding for smaller screens */
      padding-right: 2%; /* Add right padding for balance */
  }

  .text-center {
      font-size: .7rem; /* Reduce font size for better fit */
      margin-top: 5%; /* Adjust margin for smaller screens */
  }

  .contact-text-hr {
      width: 8%; /* Increase width for better visibility */
  }
  .column input, .column textarea {
    width: 100%;
     margin-bottom: 0; 
}
    #message {
        height: 100px;
    }
  .contact-row {
    flex-direction: row;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}
  ::placeholder {
    font-size: .6em;
    padding: 5px;
  }

  .contact-box {
      flex-direction: column; /* Keep elements stacked */
      align-items: center; /* Center align content */
  }

  .contact-button {
      width: 18%; 
      font-size: 15px;
  }
}
@media (max-width: 320px) {
  .contact-form {
    padding-left: 4%; /* Slightly increased padding for proper alignment */
    padding-right: 4%; /* Balanced right padding */
  }

  .text-center {
    font-size: 0.9rem; /* Further reduced font size for smaller screens */
    margin-top: 6%; /* Adjusted margin for better spacing */
  }

  .contact-text-hr {
    width: 10%; /* Slightly increased width for better visibility */
  }

  .column input,
  .column textarea {
    width: 100%; /* Ensure inputs take full width */
    margin-bottom: 0; /* Added bottom margin for better spacing */
    height:23px;
  }

  #message {
    height: 80px; /* Reduced height for better fit */
  }

  .contact-row {
    flex-direction: column; /* Stack items vertically for small screens */
    align-items: center; /* Center align content */
    display: flex;
    flex-wrap: wrap;
  }
.contacts-container.p {
    margin-top: -8px;
}
  ::placeholder {
    font-size: 0.55rem; /* Smaller font size for placeholders */
    padding: 4px; /* Reduced padding for better alignment */
  }

  .contact-box {
    flex-direction: column; /* Keep elements stacked */
    align-items: center; /* Center align content */
    padding: 8px; /* Add padding for better spacing */
  }

  .contact-button {
    width: 40%; /* Increased width for better usability */
    font-size: 0.7rem; /* Reduced font size */
    padding: 6px 10px; /* Adjusted padding for better fit */
    text-align: center; /* Center align text in the button */
  }
}
/* footer part */
footer {
    background-color: #333;
    color: #fff;
    padding: 40px 0;
  }
  
  .footer-container {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
  
  .footer-column {
    flex: 1;
    margin: 20px;
  }
  
 .footer-logo {
  max-width: 250px;
  margin-bottom: 20px;
  margin-left: -16%;
animation: slideInLeftToRight 3.5s ease-out forwards ;
     
 }

/* Keyframes for Left-to-Right Animation */
@keyframes slideInLeftToRight {
  0% {
    transform: translateX(-100%); /* Start from the left */
    opacity: 0; /* Initially invisible */
  }
  100% {
    transform: translateX(0); /* Move to normal position */
    opacity: 1; /* Fully visible */
  }
}

  .social-icons {
    display: flex;
    gap: 15px;
    animation: pulse 2s ;
}
.footer-menu ul{
    list-style: none;
    display: contents;
}
.social-icons a {
    color: #000;
    font-size: 14px;
    text-decoration: none;
}
.social-icons a:hover {
    color: #007bff;
}
  
  .newsletter-input {
    padding: 5px;
    width: 80%;
    margin-bottom: 10px;
    border: 1px solid #7e7e7e;
    background-color: transparent;
  }
  .newsletter-input ::placeholder{
  color: white;
  } 
  label.news-email {
    width: 225px;
}
  .subscribe-btn {
    padding: 5px;
    background-color: #555;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }
  
  .subscribe-btn:hover {
    background-color: #777;
  }
  
  .social-icons a {
    display: block;
    color: #fff;
    text-decoration: none;
  }
 .footer {
  background-color: #4b4c4c;
  color: #fff;
  padding: 70px 0 40px 40px;
  width: 100%;
 /* height: 450px;*/
}
.page_item.page-item-102 {
    display: none;
}
.footer-column h3 {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 30px;
  color: #f59103;
}
.social-icons h4{
  font-size: 15px;
  font-weight: 500px;
} 
  .footer-menu, .footer-services {
    list-style: none;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
  }
  .footer-services a{
      color:#fff;
      text-decoration:none;
  }
  .footer-menu li, .footer-services li {
    margin: 5px 0;
  }
  
  .footer-menu li a {
    color: #fff;
    text-decoration: none;
  }
  
  .footer-menu li a:hover {
    color: #ccc;
  }
.footer-menu .children li{
    display: none;
}
  .contact-info .contact-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
    font-size: 14px;
    gap: 10px;
}
  .contact-info .contact-item i {
    display:inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: white;
    color: black;
    text-align: center;
    line-height: 25px;

  }
  .contact-info{
    display: inline-block;
    align-content: center;
  }
  .contact-info a {
    color: #fff;
    text-decoration: none;
  }
  
  .contact-info a:hover {
    color: #ccc;
  }
/* responsive for 768px screen */
@media (max-width: 768px) {
.footer {
  background-color: #4b4c4c;
  color: #fff;
  padding: 20px 0;
  width: 100%;
  height: 330px;
}
.footer-column {
  flex: 1;
}
.footer-logo {
  max-width: 180px;
  margin-bottom: 20px;
  margin-left: -16%;
}
.footer-column h3 {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 30px;
  color: #f59103;
}
.newsletter-input {
  width: 70%;
  border: 1px solid white;
  background-color: transparent;
}
.social-icons {
  display: flex;
  gap: 10px;
}
.social-icons a {
  font-size: 12px;
  color: #fff;
  text-decoration: none;
}

.social-icons
.social-icons h4 {
  font-size: 13px;
}
.footer-menu, .footer-services {
  list-style: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
}
.contact-info {
  display: inline-block;
  align-content: center;
}

.contact-info .contact-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 10px;
  gap: 8px;
}
.contact-info a{
  font-size:10px;
}
.contact-info .contact-item i {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: white;
  color: black;
  text-align: center;
  line-height: 24px;
}
}
@media (max-width: 425px) {
  .footer {
    height: auto; /* Adjust height to fit content */
    padding: 15px;
    text-align: center; /* Center-align content */
  }
  
  .footer-container {
    display: flex;
    flex-direction: column; /* Stack content vertically *
    align-items: center; /* Center-align items */
    margin-left: 0; /* Remove extra margin */
  }
  
  .footer-logo {
    max-width: 200px; /* Adjust logo size */
  }
  
  .footer-column {
    margin: 10px 0; /* Add vertical spacing between columns */
    text-align: center; /* Center content within each column */
  }
  
  .footer-column h3 {
    font-size: 15px; /* Adjust heading size */
    margin: 10px 0; /* Space around the headings */
  }
  
  .newsletter-input {
    width: 50%;
    padding: 5px;
  }
  
  .social-icons {
    display: flex;
    flex-direction: row; /* Align icons in a row */
    justify-content: center; /* Center the icons */
    gap: 10px; /* Space between icons */
	  align-items:center;
  }
  
  .social-icons h4 {
    font-size: 13px;
    margin: 5px 0; /* Adjust margin for spacing */
  }
  
  .social-icons a {
    font-size: 11px;
	  margin:5px 0;
  }
  
  .footer-menu, .footer-services {
    list-style: none; /* Remove default list styling */
    padding: 0;
    font-size: 13px; /* Adjust font size */
    margin: 10px 0; /* Add vertical spacing */
    text-align: center; /* Center-align menu items */
  }
  
  .contact-info {
    text-align: center; /* Center the contact info */
  }
  
  .contact-info .contact-item {
    font-size: 13px; /* Adjust font size */
    display: flex; 
    align-items: center;
    margin: 5px 77px; 
  }
  
  .contact-info .contact-item i {
    width: 18px; /* Adjust icon size */
    height: 18px;
    line-height: 18px;
    margin-right: 5px; /* Add space between icon and text */
  }
  
  .contact-info a {
    font-size: 10px; /* Adjust link font size */
  }
}
@media (max-width: 425px) {
    .contact-info .contact-item {
        margin: 5px;
    }
}

  /* nd footer */
  .simple-footer {
    background-color: #ffffff;
    color: #646464;
    padding:0 20px 0;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }
  .company-text a {
      color:#646464;
      text-decoration:none;
  }
  
  .company-text a:hover {
  text-decoration: underline;
}

  
.Copyright-container{
    display: flex;
    justify-content: space-between;
  }
  
  .Copyright-footer-column {
    flex: 1;
  }
  
  .Copyright-footer-column-1 p {
    width: 60%;
    display: inline;
    font-size: 14px;
    font-weight: 500;
    margin: 10px 70px;
    color: #7a7979;
}
  .Copyright-footer-column a {
    color: #fff;
    text-decoration: none;
  }
  
  .Copyright-footer-column a:hover {
    color: #ccc;
  }

  /* Responsive for 768px screen */
  @media (max-width: 768px) {
  .Copyright-footer-column-1 p {
    width: 60%;
    display: inline;
    font-size: 12px;
    font-weight: 500;
    margin: 10px 70px;
    color: #7a7979;
}
.simple-footer {
  background-color: #ffffff;
  color: #7a7979;
  font-size: 12px;
  padding: 0 20px 0;
}
  }
  @media (max-width: 425px) {
  .Copyright-footer-column-1 p {
      width: 90%; /* Adjust width to prevent overflow */
      font-size: 10px; /* Reduce font size */
      color: #7a7979;
      margin: 5px 0; /* Add spacing between paragraphs */
    }
	  .Copyright-container {
     display: block; 
    
}
  
    .simple-footer {
      background-color: #ffffff;
      color: #7a7979;
      font-size: 10px; /* Reduce font size */
      padding: 10px 15px; /* Add padding for better spacing */
      text-align: center; /* Center-align footer content */
    }
  }
  
  @media (max-width: 320px) {
    .Copyright-footer-column-1 p {
        width: 70%; /* Adjust width to prevent overflow */
        display: block;
        font-size: 8px; /* Reduce font size */
        color: #7a7979;
        margin: 5px 45px; /* Add spacing between paragraphs */
      }
    
      .simple-footer {
        background-color: #ffffff;
        color: #7a7979;
        font-size: 8px; /* Reduce font size */
        padding: 10px 15px; /* Add padding for better spacing */
        text-align: center; /* Center-align footer content */
      }
    }
  

/*  Wordpress css code after conversion */

/* breadcrumb code */

.middle-right{
  background-color: #f59103;
    width: 100%;
    height: 180px;
    margin-top: 6%;
}
.page-status {
  display: flex;
  justify-content: center;
  padding-top: 4%;
  color: white;

}
.page-status h4{
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
}
.page-status p{
  color: white;
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb {
  font-size: 14px;
  margin: 10px 0;
}

.page-status a {
  text-decoration: none;
  color:white;
}

.top-title{
    display: flex;
    justify-content: center;
    color: white;

}
.top-title h3{
  font-size: 2rem;
  font-weight: 600;

}
@media (width:1024px){
.middle-right{
    background-color: #f59103;
    width: 100%;
    height: 150px;
    margin-top: 8%;
}
	.top-title h3 {
    font-size: 1.8rem;
   
}
}
@media (width:768px){

.middle-right {
    background-color: #f59103;
    width: 100%;
    height: 130px;
    margin-top: 7%;
}
	  .top-title h3 {
        font-size: 1.5rem;
    }
}
@media (width:425px){
    .middle-right {
        width: 100%;
        height: 100px;
        margin-top: 12%;
    }

      .top-title h3 {
        font-size: 1rem;
    }
}

@media (max-width: 375px) {
  .middle-right {
    width: 100%;
    height: 100px; /* Reduced height for smaller screens */
    margin-top: 10%; /* Adjusted margin for better positioning */
  }

  .top-title h3 {
    font-size: 1rem; /* Slightly reduced font size for better readability */
  }
}

@media (max-width: 320px) {
  .middle-right {
    width: 100%;
    height: 90px; /* Further reduced height for very small screens */
    margin-top: 12%; /* Adjusted margin */
  }

  .top-title h3 {
    font-size: 1rem; /* Further reduced font size */
  }
}


/* Template about section */
.about-page-section {
  background-color: #ffffff;
  margin: 0;
  width: 100%;
  animation: fadeIn 1s ease-in-out;
  height:500px;
}

.about-page-section .about-image {
  object-fit: cover;
  width: 650px;
  height: 495px;
  animation: slideInLeft 1s ease-out; /* Initial slide-in animation */
  transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
}

/* Hover Effect with Zoom In-Out */
.about-page-section .about-image:hover {
  animation: zoomInOut 1.5s  alternate ease-in-out; /* Continuous zoom in-out effect */
  cursor: pointer; /* Change cursor to indicate interactivity */
}


/* Keyframes for Zoom In-Out Effect */
@keyframes zoomInOut {
  0% {
    transform: scale(1); /* Normal size */
  }
  100% {
    transform: scale(1.1); /* Slight zoom-in */
  }
}


/* Horizontal line */
.about-page-hr {
  width: 5%;
  border: 2px solid #eba308;
  opacity: 1;
  margin: 0;
  animation: growWidth 1s ease-in-out;
}

.about-page-text h2 {
  font-size: 1.7rem;
  font-weight: 600;
  color: #696969;
  animation: fadeInUp 2s ease-out ;
}

.about-page-text {
  padding: 30px 55px 0 65px;
  animation: fadeInUp 1s ease-out;
}

.about-page-text p {
  color: #777777;
  font-size: 16px;
  line-height: 1.6em;
  word-spacing: 1px;
  letter-spacing: .2px;
  animation: fadeInUp 3.2s ease-out ;
}

.about-page-row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  animation: slideInUp 1s ease-out;
}

/* Section */
.about-text-section {
  background-color: #636262; /* Light grey background */
  padding: 40px 20px;
  height: 300px;
  margin-top: -5px;
  animation: fadeInUp 1.5s ease-out;
}

.about-text-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeInLeft 1.2s ease-out;
}

.about-column {
  flex: 1;
  padding: 0 30px;
  animation: fadeInUp 2.3s ease-out ;
}

.about-column h3 {
  margin-bottom: 10px;
  font-size: 1.8rem;
  color: #f19f24;
  animation: fadeInUp 2s ease-out ;
}

.about-column p {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.8em;
  font-weight: 500;
  animation: fadeInUp 1.5s ease-out;
}

.about-text-vertical-line {
  width: 2px;
  border-right: 1px solid #ccc;
  height: 200px;
  animation: fadeInRight 1s ease-out;
}

/* Keyframes for animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes growWidth {
  from {
    width: 0;
  }
  to {
    width: 3%;
  }
}

@media (max-width: 768px) {
  .about-text-section {
    background-color: #636262; /* Maintain background color */
    padding: 30px 15px;       /* Reduce padding for smaller screens */
    height: auto;            /* Allow dynamic height */
    margin-top: 135px;           /* Remove negative margin for cleaner layout */
  }

  .about-text-container {
    display: block;          /* Stack columns vertically */
    max-width: 100%;         /* Use full width of the screen */
    margin: 0 auto;
  }

  .about-column {
    flex: none;              /* Remove flex behavior for stacking */
    padding: 10px 15px;      /* Reduce padding for smaller screens */
  }

  .about-column h3 {
    font-size: 1.2rem;       /* Reduce font size for better fit */
    margin-bottom: 8px;      /* Adjust spacing */
    text-align: center;      /* Center-align the heading */
  }

  .about-column p {
    font-size: 14px;         /* Reduce font size for readability */
    line-height: 1.6;        /* Adjust line height */
    text-align: center;      /* Center-align text */
  }

  .about-text-vertical-line {
    display: none;           /* Hide the vertical line for stacked layout */
  }
}
@media (max-width: 425px) {
    .about-text-section {
margin-top: 35px;
    }
}
@media (max-width: 375px) {
    .about-text-section {
        margin-top: 0px;
    }
}
 /* Organizational Chart Container */
.org-chart-container {
  background-color: #505050;
  padding: 30px;
  color: #ffffff;
  text-align: center;
  animation: fadeInUp 1s ease-out;
}

/* Title */
.org-chart h1 {
  margin-bottom: 20px;
  animation: fadeInUp 1.2s ease-out;
}

/* Horizontal line */
.org-chart hr {
  border: 1px solid #fff;
  width: 50%;
  margin: 10px auto 30px auto;
  animation: growWidth 1s ease-in-out;
}

/* Organizational Box */
.org-box {
  background-color: #ffffff;
  color: #000000;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
  text-align: center;
  font-weight: bold;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.5s ease-out forwards;
}

/* Vertical Line between boxes */
.org-line {
  width: 2px;
  height: 30px;
  background-color: #fff;
  margin: 0 auto;
  opacity: 0;
  animation: fadeInUp 1.5s ease-out 0.3s forwards;
}

/* Arrow between boxes */
.org-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  margin: 5px auto;
  opacity: 0;
  animation: fadeInUp 1.5s ease-out 0.5s forwards;
}

/* Keyframes for animations */

/* Fade-in and slide-up effect */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Grow width effect for the horizontal line */
@keyframes growWidth {
  from {
    width: 0;
  }
  to {
    width: 50%;
  }
}

 /* ABOUT org chart CSS */

/* Image box container */
.image-box {
  width: 100%; /* Full width */
  height: 780px; /* Fixed height */
  overflow: hidden; /* Ensures the image doesn't overflow */
  display: none; /* Centers the image */
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0; /* Fallback background color */
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards; /* Fade in with upward motion */
}

/* Image inside the image box */
.image-box img {
  width: 100%; /* Makes the image full-width */
  height: 100%; /* Makes the image match the container's height */
  object-fit: cover; /* Ensures the image is properly scaled and cropped */
  transform: scale(1.1); /* Slight zoom effect */
  animation: zoomIn 1s ease-out forwards; /* Apply zoom effect */
  opacity: 0;
  animation-delay: 0.3s; /* Slight delay for the image */
  transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
}

/* Hover Effect */
.image-box img:hover {
  transform: scale(1.2); /* Zoom in further on hover */
  cursor: pointer; /* Change cursor to indicate interactivity */
}

@media (max-width:1024px){
        .about-page-section .about-image {
        width: 550px;
        margin-top: 0%;
        height: 500px;
    }
  .image-box {
    width: 100%; /* Maintain full width */
    height: 600px; /* Reduced height for better fit on smaller screens */
    overflow: hidden; /* Prevent image overflow */
    display: flex; /* Center the image */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Fallback background color */
  }

  .image-box img {
    width: 100%; /* Maintain aspect ratio */
    height: 100%; /* Stretch to fill container height */
    object-fit: cover; /* Keep the image proportionate and cover the container */
  }
}

@media (max-width: 768px) {
          .about-page-section .about-image {
        width: 100%;
        margin-top: 0px;
        height: 636px;
    }
.about-page-text {
     padding: 20px 45px 0 55px; 
}
	.about-page-text h2 {
    font-size: 1.4rem;
   
}
  .image-box {
    width: 100%;            /* Full width for responsive design */
    height: 450px;          /* Reduced height for smaller screens */
    overflow: hidden;       /* Prevent image overflow */
    display: flex;          /* Center the image */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Neutral background for fallback */
  }

  .image-box img {
    width: 100%;            /* Ensure image fills the width */
    height: 100%;           /* Ensure image fills the container height */
    object-fit: cover;      /* Keep image proportionate and cover container */
  }
}
@media (max-width: 425px) {
      .about-page-section .about-image {
        width: 100%;
        margin-top: -6px;
        height: 184px;
    }
.about-page-section {
    height: 520px;
}
  .about-page-text {
    padding: 15px 15px 0 15px;  /* Adjusted padding for smaller screens */
    font-size: 0.9rem;          /* Adjust font size for better readability */
    text-align: center;         /* Center-align text for better presentation */
    margin-top: 20px;           /* Add spacing between image and text */
  }
.about-page-row {
    width: 100%;
    display:block;
}
.about-page-hr {
  
    margin-left: 175px;
	width: 9%;
	margin-bottom:12px
}
  .image-box {
    width: 100%;            /* Full width for responsive design */
    height: 300px;          /* Further reduced height for compact screens */
    overflow: hidden;       /* Prevent image overflow */
    display: flex;          /* Center the image */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Neutral background for fallback */
    margin-bottom: 20px;     /* Add spacing between image and text */
  }

  .image-box img {
    width: 100%;            /* Ensure image fills the width */
    height: 100%;           /* Ensure image fills the container height */
    object-fit: cover;      /* Keep image proportionate and cover container */
  }

  .about-page-text h3 {
    font-size: 1.1rem;       /* Slightly smaller heading font size */
    margin-bottom: 10px;     /* Adjusted margin */
  }

  .about-page-text p {
    font-size: 0.8rem;       /* Smaller paragraph font size */
    line-height: 1.6;        /* Adjust line-height for readability */
  }
}

@media (max-width: 375px) {
  .about-page-section .about-image {
    width: 100%;             /* Full width for the image */
    margin-top: -4px;        /* Adjust margin for better fit */
    height: 160px;           /* Adjusted height for smaller screens */
  }

  .about-page-text {
    padding: 10px 10px 0 10px;  /* Adjusted padding for more compact screens */
    font-size: 0.85rem;          /* Slightly smaller font size for readability */
    text-align: center;         /* Center-align text for better presentation */
    margin-top: 10px;           /* Add spacing between image and text */
  }

  .about-page-row {
    width: 100%;
    display: block;            /* Stack elements vertically */
  }

  .image-box {
    width: 100%;              /* Full width for responsive design */
    height: 250px;            /* Reduced height for compact screens */
    overflow: hidden;         /* Prevent image overflow */
    display: flex;            /* Center the image */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Neutral background for fallback */
    margin-bottom: 15px;       /* Add spacing between image and text */
  }

  .image-box img {
    width: 100%;              /* Ensure image fills the width */
    height: 100%;             /* Ensure image fills the container height */
    object-fit: cover;        /* Keep image proportionate and cover container */
  }

  .about-page-text h3 {
    font-size: 1rem;           /* Smaller heading font size */
    margin-bottom: 8px;        /* Adjusted margin */
  }

  .about-page-text p {
    font-size: 0.75rem;        /* Smaller paragraph font size */
    line-height: 1.5;          /* Adjust line-height for readability */
  }
}

@media (max-width: 320px) {
  .about-page-section .about-image {
    width: 100%;              /* Full width for the image */
    margin-top: -3px;         /* Adjust margin for better fit */
    height: 140px;            /* Adjusted height for smaller screens */
  }

  .about-page-text {
    padding: 8px 8px 0 8px;    /* Adjusted padding for very small screens */
    font-size: 0.75rem;        /* Smaller font size for better readability */
    text-align: center;        /* Center-align text for better presentation */
    margin-top: 8px;           /* Add spacing between image and text */
  }

  .about-page-row {
    width: 100%;
    display: block;            /* Stack elements vertically */
  }
    .about-page-section {
        height: 425px;
    }
        .about-page-hr {
        margin-left: 140px;
    }
  .image-box {
    width: 100%;              /* Full width for responsive design */
    height: 220px;            /* Reduced height for compact screens */
    overflow: hidden;         /* Prevent image overflow */
    display: flex;            /* Center the image */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Neutral background for fallback */
    margin-bottom: 12px;       /* Add spacing between image and text */
  }
      .about-column {
        flex: none;
         margin-bottom: 0; 
    }

  .image-box img {
    width: 100%;              /* Ensure image fills the width */
    height: 100%;             /* Ensure image fills the container height */
    object-fit: cover;        /* Keep image proportionate and cover container */
  }

  .about-page-text h3 {
    font-size: 0.9rem;         /* Smaller heading font size */
    margin-bottom: 6px;        /* Adjusted margin */
  }

  .about-page-text p {
    font-size: 0.65rem;        /* Smaller paragraph font size */
    line-height: 1.4;          /* Adjust line-height for readability */
  }
}



/* Welcome Section */
.welcome-container {
  display: none;
  justify-content: space-between;
  align-items: center;
  background-color: #ff961a;
  padding-top: 30px;
  width: 100%;
  height: 500px;
  color: #fff;
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards; /* Fade in with upward motion */
}

/* Welcome column animation */
.welcome-column {
  flex: 1;
  padding: 0 0 0 100px;
  opacity: 0;
  animation: slideInLeft 1.5s ease-out forwards; /* Slide from left */
  animation-delay: 0.5s; /* Delay for staggered effect */
}

/* Client column heading animation */
.client-column h2 {
  font-size: 28px;
  margin-bottom: 20px;
  font-weight: 700;
  opacity: 0;
  animation: fadeIn 2s ease-out forwards ; /* Fade in the heading */
  animation-delay: 1s;
}

/* Horizontal rule */
.message-hr {
  width: 4%;
  border: 2px solid #f7f7f7;
  opacity: 1;
  animation: fadeIn 1s ease-out forwards; /* Fade in the HR */
  animation-delay: 1.2s;
}

/* Client column paragraph animation */
.client-column p {
  font-size: 1.2rem;
  line-height: 1.7;
  font-weight: 500;
  opacity: 0;
  animation: fadeIn 2.5s ease-out forwards ;
  animation-delay: 1.4s;
}

/* Client image column animation */
.client-image-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: slideInRight 1.5s ease-out forwards; /* Slide from right */
  animation-delay: 0.7s;
}

/* Profile box animation */
.profile {
  text-align: center;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeInUp 3s ease-out forwards ; /* Fade in from below */
  animation-delay: 1s;
}

/* Profile image animation */
.profile img {
  width: 200px;
  height: 200px;
  opacity: 0;
  transform: scale(0.8); /* Slightly scale down initially */
  animation: scaleUp 1s ease-out forwards; /* Scale up and fade in */
  animation-delay: 1.5s;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for hover and shadow */
}

/* Hover Effect with Zoom In-Out */
.profile img:hover {
  animation: zoomInOut 1.5s  alternate ease-in-out; /* Pulsating zoom effect */
  cursor: pointer; /* Change cursor to indicate interactivity */
}

/* Keyframes for initial animation */
@keyframes scaleUp {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Keyframes for Zoom In-Out Effect */
@keyframes zoomInOut {
  0% {
    transform: scale(1); /* Normal size */
  }
  100% {
    transform: scale(1.2); /* Slight zoom-in */
  }
}


/* Profile heading fade-in */
.profile h4 {
  margin: 10px 0 5px;
  font-size: 18px;
  color: #fff;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 1.8s;
}

/* Profile paragraph fade-in */
.profile p {
  font-size: 14px;
  color: #f0f0f0;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 2s;
}

/* Keyframes for fading in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for sliding in from the left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Keyframes for sliding in from the right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Keyframes for scaling up the profile image */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Keyframes for fading in and moving up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

 @media (max-width: 768px) {
  .welcome-container {
    padding-top: 20px;       /* Reduce padding for smaller screens */
    height: auto;            /* Allow dynamic height to fit content */
    text-align: center;      /* Center-align content for smaller screens */
  }

  .welcome-column {
    padding: 10px 20px;      /* Reduce padding for smaller screens */
  }

  .client-column h2 {
    font-size: 24px;         /* Slightly smaller heading font size */
    margin-bottom: 15px;     /* Adjust spacing */
  }

  .message-hr {
    width: 10%;              /* Increase width for better visibility */
    border-width: 2px;       /* Reduce border thickness */
    margin: 10px auto;       /* Center-align the horizontal rule */
  }

  .client-column p {
    font-size: 1rem;         /* Reduce paragraph font size */
    line-height: 1.6;        /* Adjust line height for readability */
  }

  .client-image-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;        /* Add spacing above images */
  }

  .profile {
    margin-bottom: 15px;     /* Adjust spacing between profiles */
  }

  .profile img {
    width: 150px;            /* Reduce image size for smaller screens */
    height: 150px;           /* Maintain aspect ratio */
  }

  .profile h4 {
    font-size: 16px;         /* Reduce font size for better fit */
    margin: 8px 0 5px;       /* Adjust margins */
  }

  .profile p {
    font-size: 12px;         /* Slightly smaller font size */
    color: #e0e0e0;          /* Lighter text color for contrast */
  }
}

 @media (max-width: 425px) {
  .welcome-container {
    display:none;          /* Stack columns vertically */
    padding-top: 15px;       /* Reduced padding for smaller screens */
    height: auto;            /* Allow dynamic height to fit content */
    text-align: center;      /* Center-align content for smaller screens */
  }

  .welcome-column {
    padding: 8px 15px;       /* Reduced padding for smaller screens */
  }

  .client-column h2 {
    font-size: 20px;         /* Smaller heading font size */
    margin-bottom: 10px;     /* Adjusted margin */
  }

  .message-hr {
    width: 6%;              /* Adjust width for better visibility */
    border-width: 2px;       /* Keep the border thickness */
    margin: 10px auto;       /* Center-align the horizontal rule */
  }

  .client-column p {
    font-size: 0.9rem;       /* Slightly smaller paragraph font size */
    line-height: 1.6;        /* Adjust line height for readability */
  }

  .client-image-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;        /* Add spacing above images */
  }

  .profile {
    margin-bottom: 10px;     /* Adjust spacing between profiles */
  }

  .profile img {
    width: 120px;            /* Further reduced image size */
    height: 120px;           /* Maintain aspect ratio */
  }

  .profile h4 {
    font-size: 14px;         /* Reduce font size for better fit */
    margin: 5px 0;           /* Adjust margins */
  }

  .profile p {
    font-size: 11px;         /* Smaller font size */
    color: #e0e0e0;          /* Lighter text color for contrast */
  }
}

  @media (max-width: 375px) {
    .welcome-container {
      flex-direction: column; /* Stack items vertically */
      align-items: center; /* Center align for smaller screens */
    }
  
    .welcome-column {
      flex: 1;
      padding: 0 3px; /* Reduce padding */
    }
  
    .column {
      padding: 0;
      margin-bottom: 15px; /* Further reduce margin */
    }
  
    .message-hr {
      width: 8%; /* Narrower for smaller screens */
      opacity:1;
    }
  
  
  
    .client-column h2 {
      font-size: 16px; /* Smaller heading size */
      margin-bottom: 12px; /* Adjust spacing */
      font-weight: 500; /* Slightly lighter weight */
    }
  
    .client-column p {
      font-size: 13px; /* Adjust font size */
    }
  
    .client-image-column {
      flex-direction: column; /* Stack images vertically */
      gap: 10px; /* Adjust gap */
      margin-top: -5%;
    }
  
    .profile {
      flex: 1;
      margin-bottom: 8px; /* Reduce spacing */
    }
  
    .profile img {
      width: 80px; /* Smaller image size */
      height: 80px; /* Keep square aspect ratio */
    }
  
    .profile h4 {
      font-size: 12px; /* Adjust font size */
    }
  
    .profile p {
      font-size: 11px; /* Smaller font size */
      color: #d0d0d0; /* Slightly lighter text color */
    }
  }
  
  @media (max-width: 320px) {
    .welcome-container {
      flex-direction: column; /* Stack items vertically */
      align-items: center; 
      height: 420px;
    }
  
    .welcome-column {
      flex: 1;
      padding: 0 2px; /* Reduce padding further */
    }
  
    .column {
      padding: 0;
      margin-bottom: 10px; /* Compact spacing */
    }
  
    .message-hr {
      width: 6%; /* Further narrower for very small screens */
    }
  
    hr {
      opacity: 1;
      border: 0.6px solid #f7f7f7; /* Thinner border */
    }
  
    .client-column h2 {
      font-size: 14px; /* Smaller font size */
      margin-bottom: 10px;
      font-weight: 500; /* Adjust weight */
    }
  
    .client-column p {
      font-size: 12px; /* Further adjust font size */
    }
  
    .client-image-column {
      flex-direction: column; /* Stack images vertically */
      gap: 8px; /* Compact spacing */
      margin-top: -4%;
    }
  
    .profile {
      flex: 1;
      margin-bottom: 5px; /* Tight spacing */
    }
  
    .profile img {
      width: 70px; /* Reduce image size */
      height: 70px;
    }
  
    .profile h4 {
      font-size: 11px; /* Smaller heading size */
    }
  
    .profile p {
      font-size: 10px; /* Adjust font size */
      color: #c0c0c0; /* Slightly lighter text color */
    }
  }
  
  
  /* Centered Text Section */
.centered-container {
  width: 100%;
  height: 200px;
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards; /* Fade in with upward motion */
}

.centered-heading {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 50px;
  color: grey;
  margin-left: 20%;
  opacity: 0;
  animation: fadeIn 1.5s ease-out forwards; /* Fade in the heading */
  animation-delay: 0.5s; /* Delay for staggered effect */
}

.centered-row {
  display: flex;
  justify-content: space-around;
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards;
  animation-delay: 1s; /* Delay for staggered effect */
}

.centered-column {
  flex: 1;
}

.images-column img {
  width: 100%;
  max-width: 150px;
  height: auto;
  opacity: 0;
  transform: scale(0.9); /* Slightly scale down the images */
  animation: scaleUp 1s ease-out forwards;
  animation-delay: 1.5s;
}

/* Associated Companies Section */
.associated-companies {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 200px;
  text-align: center;
  background-color: rgb(226, 224, 226);
  opacity: 0;
  animation: fadeIn 1.5s ease-out forwards; /* Fade in effect */
  animation-delay: 2s; /* Delay for staggered effect */
}

.associated-companies h3 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  color: #797878;
  opacity: 0;
  animation: fadeIn 2s ease-out forwards ; /* Fade in the heading */
  animation-delay: 2.5s;
}

.associated-companies .images {
  display: flex;
  gap: 20px;
      align-items: center;
}

.associated-companies .images img {
  width: 150px;
  height: auto;
  object-fit: contain;
  opacity: 1;
  transform: scale(0.9); /* Initial slight scale down */
  animation: scaleUp 1s ease-out forwards; /* Initial scale and fade-in animation */
  animation-delay: 3s;
  transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
}

/* Hover Effect with Zoom In-Out */
.associated-companies .images img:hover {
  animation: zoomInOut 1s  alternate ease-in-out; /*  zoom in-out effect on hover */
  cursor: pointer; /* Change cursor to indicate interactivity */
}

/* Keyframes for initial fade-in and scale animation */
@keyframes scaleUp {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Keyframes for Zoom In-Out Effect */
@keyframes zoomInOut {
  0% {
    transform: scale(1); /* Normal size */
  }
  100% {
    transform: scale(1.1); /* Slight zoom-in */
  }
}


/* Keyframes for fading in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for sliding up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (width:768px){
  .associated-companies h3 {
    font-size: 19px;
  }
  .associated-companies {
    margin-top: -10px;
}
}

@media (max-width: 425px) {
  .associated-companies {
    display: block;               /* Stack content vertically for small screens */
    align-items: center;          /* Center items */
    justify-content: center;      /* Center the content */
    gap: 15px;                    /* Reduced gap for smaller screens */
    height: auto;                 /* Allow dynamic height */
    text-align: center;           /* Center-align text */
    padding: 15px;                /* Add some padding for better spacing */
    background-color: rgb(226, 224, 226); /* Keep background color */
    margin-top:-10px;
  }

  .associated-companies h3 {
    font-size: 18px;              /* Smaller font size */
    font-weight: bold;            /* Keep text bold */
    margin: 10px 0;               /* Adjust margin for better spacing */
    color: #797878;               /* Keep text color */
  }

  .associated-companies .images {
    display: block;               /* Stack images vertically */
    gap: 10px;                    /* Reduced gap between images */
    margin-top: 10px;             /* Add some space above images */
  }

  .associated-companies .images img {
    height: auto;                 /* Maintain aspect ratio */
    object-fit: contain;          /* Maintain image content visibility */
  }
}
@media (max-width: 375px) {
  .associated-companies {
    display: block;               /* Stack content vertically for small screens */
    align-items: center;          /* Center items */
    justify-content: center;      /* Center the content */
    gap: 10px;                    /* Further reduced gap for 375px screen */
    height: auto;                 /* Allow dynamic height */
    text-align: center;           /* Center-align text */
    padding: 10px;                /* Adjust padding for more compact layout */
    background-color: rgb(226, 224, 226); /* Keep background color */
    margin-top: -15px;             /* Adjust margin for better positioning */
  }

  .associated-companies h3 {
    font-size: 18px;              /* Smaller font size for tighter screens */
    font-weight: bold;            /* Keep text bold */
    margin: 8px 0;                /* Adjusted margin for better spacing */
    color: #797878;               /* Keep text color */
  }

  .associated-companies .images {
    display: block;               /* Stack images vertically */
    gap: 8px;                     /* Reduced gap between images for tight space */
    margin-top: 8px;              /* Adjusted space above images */
  }

  .associated-companies .images img {
    width: 120px;                 /* Set width to fit better on small screens */
    height: auto;                 /* Maintain aspect ratio */
    object-fit: contain;          /* Maintain image content visibility */
  }
}



/* Production Facilities Section */
.production-facilities {
  text-align: center;
  margin: 20px auto;
  width: 100%;
  opacity: 0; /* Initially hidden */
  animation: fadeInUp 1.5s ease-out forwards; /* Fade in with upward motion */
}

.production-facilities h3 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #7c7a7a;
  opacity: 0; /* Initially hidden */
  animation: fadeIn 2s ease-out forwards ;
  animation-delay: 0.5s; /* Delay to appear after the section fades in */
}

.production-hr {
  width: 3%;
  border: 2px solid #ffae00;
  margin-left: 50%;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 1s; /* Delay for the horizontal line */
}

.image-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards;
  animation-delay: 1.5s; /* Delay for images row */
}

.image-row img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.9); /* Start scaled down */
  animation: scaleUp 1s ease-out forwards;
  animation-delay: 2s; /* Delay for each image */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transition */
}

/* Hover Effect with Zoom In-Out */
.image-row img:hover {
  animation: zoomInOut 1.5s  alternate ease-in-out; /*  zoom in-out effect */
  cursor: pointer; /* Change cursor to indicate interactivity */
  opacity: 1; /* Ensure full visibility on hover */
}

/* Keyframes for Initial Scale Up Animation */
@keyframes scaleUp {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Keyframes for Zoom In-Out Effect */
@keyframes zoomInOut {
  0% {
    transform: scale(1); /* Normal size */
  }
  100% {
    transform: scale(1.1); /* Slight zoom-in */
  }
}


/* Keyframes for scaleUp */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


.production-view {
  background-color: #f5910f;
  color: #fff;
  border: none;
  padding: 5px;
  font-size: 16px;
  cursor: pointer;
  opacity: 1;
  transform: translateY(10px); /* Start slightly below */
  animation: slideUp 1s ease-out forwards; /* Slide up animation */
    animation: pulse 1.5s ;
    
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Keyframes for slideUp animation */
@keyframes slideUp {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Keyframes for fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for sliding up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (max-width: 1024px) {
  .production-facilities {
    text-align: center;       /* Center the content */
    margin: 15px auto;        /* Adjust spacing for smaller screens */
    width: 100%;               /* Reduce width for better fit */
  }

  .production-facilities h3 {
    font-size: 1.8rem;        /* Slightly smaller font size */
    font-weight: bold;
    margin-bottom: 15px;      /* Reduced margin */
    color: #7c7a7a;           
  }

  .production-hr {
    width: 5%;               /* Increased width for better visibility */
    border: 2px solid #ffae00; /* Slightly thinner border */
    margin: 10px auto;       /* Centered and reduced margin */
  }

  .image-row {
    display: flex;           /* Keep images in a row */
    flex-wrap: wrap;         /* Allow wrapping on smaller screens */
    justify-content: center; /* Center-align images */
    gap: 10px;               /* Reduced gap between images */
    margin-bottom: 15px;     /* Reduced spacing between rows */
  }

  .image-row img {
    width: 230px;            /* Smaller image size for better fit */
    height: 230px;
    object-fit: cover;       /* Maintain aspect ratio while filling container */
  }

  .production-view {
    background-color: #f5910f;
    color: #fff;
    border: none;
    padding: 8px 12px;       /* Increased padding for better touch targets */
    font-size: 14px;         /* Slightly smaller font size */
    cursor: pointer;
  }
}
@media (max-width: 768px) {
  .production-facilities {
    text-align: center;        /* Center the content */
    margin: 10px auto;         /* Adjust spacing for smaller screens */
    width: 100%;               /* Full width */
  }

  .production-facilities h3 {
    font-size: 1.5rem;         /* Smaller font size for better fit */
    font-weight: bold;
    margin-bottom: 10px;       /* Reduced margin */
    color: #7c7a7a;
  }

  .production-hr {
    width: 6%;                /* Increased width for better visibility */
    border: 2px solid #ffae00; /* Thinner border */
    margin: 12px auto;         /* Centered and reduced margin */
  }

  .image-row {
    display: flex;             /* Keep images in a row */
    flex-wrap: wrap;           /* Allow wrapping on smaller screens */
    justify-content: center;   /* Center-align images */
    gap: 8px;                  /* Reduced gap between images */
    margin-bottom: 20px;       /* Reduced spacing between rows */
  }

  .image-row img {
    width: 180px;              /* Smaller image size for better fit */
    height: 180px;
    object-fit: cover;         /* Maintain aspect ratio while filling container */
  }

  .production-view {
    background-color: #f5910f;
    color: #fff;
    border: none;
    padding: 6px;         /* Adjust padding for better fit */
    font-size: 14px;           /* Keep font size consistent */
    cursor: pointer;
	  margin-bottom:10px;
  }
}
@media (max-width: 768px) {
	    .production-facilities h3 {
        font-size: 1.2rem;
	}
}

@media (max-width: 1024px) {
  .image-box {
    width: 100%; /* Maintain full width */
    height: 600px; /* Reduced height for better fit on smaller screens */
    overflow: hidden; /* Prevent image overflow */
    display:none;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Fallback background color */
  }

  .image-box img {
    width: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure the image doesn't exceed the container width */
    height: 100%; /* Stretch to fill container height */
    object-fit: cover; /* Keep the image proportionate and cover the container */
  }
}
@media (max-width: 768px) {
  .image-box {
    width: 100%; /* Maintain full width */
    height: 440px; /* Adjusted height for better fit on smaller screens */
    overflow: hidden; /* Prevent image overflow */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Fallback background color */
  }

  .image-box img {
    width: 100%; /* Ensure the image takes full width of the container */
    height: auto; /* Maintain aspect ratio */
    max-height: 100%; /* Ensure the image doesn't exceed the container's height */
    object-fit: cover; /* Keep the image proportionate and cover the container */
  }
}
@media (max-width: 425px) {
  .image-box {
    width: 100%;                /* Maintain full width */
    height: 247px;              /* Adjusted height for smaller screens */
    overflow: hidden;           /* Prevent image overflow */
    display: none;              /* Center the image */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Fallback background color */
  }

  .image-box img {
    width: 100%;                /* Ensure the image takes full width of the container */
    height: 100%;               /* Ensure the image fills the container height */
    object-fit: cover;          /* Maintain aspect ratio and cover the container */
  }
}
@media (max-width: 375px) {
  .image-box {
    width: 100%;                /* Maintain full width */
    height: 220px;              /* Adjusted height for smaller screens */
    overflow: hidden;           /* Prevent image overflow */
    display: none;              /* Center the image */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Fallback background color */
  }

  .image-box img {
    width: 100%;                /* Ensure the image takes full width of the container */
    height: 100%;               /* Ensure the image fills the container height */
    object-fit: cover;          /* Maintain aspect ratio and cover the container */
  }
}
@media (max-width: 320px) {
  .image-box {
    width: 100%;                /* Maintain full width */
    height: 180px;              /* Adjusted height for smaller screens */
    overflow: hidden;           /* Prevent image overflow */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;  /* Fallback background color */
  }

  .image-box img {
    width: 100%;                /* Ensure the image takes full width of the container */
    height: 100%;               /* Ensure the image fills the container height */
    object-fit: cover;          /* Maintain aspect ratio and cover the container */
  }
}


  /*                                      serice page                                 */
  
  
 /* Image Grids Section */
.image-grids {
  display: flex;
  flex-direction: column;
  margin-top: 5%;
  height: 750px;
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards; /* Fade in with upward motion */
}

/* Row styling */
.grid-row {
  display: flex;
  justify-content: center;
  gap: 30px;
}

/* Container styling for individual image cards */
.image-card {
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards; /* Fade in each image card */
  animation-delay: 0.5s; /* Delay to stagger the appearance of image cards */
}


/* Image styling */
.card-image {
  width: 450px;
  height: 300px; /* Adjust as per your layout */
  object-fit: cover;
  opacity: 0;
  transform: scale(0.95); /* Start scaled down */
  animation: scaleUp 1s ease-out forwards;
  animation-delay: 0.7s; /* Delay for images */
}

/* Text overlay */
.overlay {
  position: relative;
  width: 270px;
  top: -13%;
  left: 0;
  color: #1b1b1b;
  background-color: white;
  padding: 10px 15px;
  text-align: center;
  height: 100px;
  opacity: 0;
  transform: translateY(20px); /* Start slightly below */
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 1s; /* Delay for the overlay */
}

.overlay h3 {
  font-size: 13px;
  display: flex;
  margin-top: 15px;
  justify-content: flex-start;
}

.overlay:hover {
  background-color: #e98b12;
  color: white;
  transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Button inside overlay */
.button {
  display: inline-block;
  margin-top: 15px;
  margin-left: 50px;
  padding: 5px 10px;
  background-color: transparent;
  color: #e98b12;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #e98b12;
  border-radius: 50%;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px); /* Start slightly below */
  animation: slideUp 0.5s ease-out forwards;
  animation-delay: 1.5s; /* Delay for the button */
}

.button:hover {
  background-color: #e98b12;
  color: white;
  transform: scale(1.1); /* Enlarge on hover */
}

/* View More section styling */
.view-more {
  text-align: center;
  margin-top: 20px;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 2s; /* Delay for view more section */
}

/* View More button styling */
.view-more-button {
  display: inline-block;
  padding: 5px 5px;
  background-color: #ff8a00; /* Button background */
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s ease; /* Smooth transition for hover */
  animation: pulse 2s ; /* Pulse animation */
}

/* Hover Effect */
.view-more-button:hover {
  background-color: #e55b00; /* Darker background on hover */
}

/* Keyframes for Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to normal size */
  }
}


/* Keyframes for fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for sliding up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframes for scaling up images */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Keyframes for button slide-up */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

  @media (max-width: 768px) {
      .image-grids {
    height: 790px;
}
  /* Text overlay */
  .overlay {
    position: relative;
    width: 90%;               /* Adjust width for smaller screens */
    top: -5%;                 /* Adjust positioning */
    left: 5%;                 /* Add left margin for centering */
    color: #1b1b1b;
    background-color: white;
    padding: 15px;            /* Increased padding for better spacing */
    text-align: center;
    height: auto;             /* Allow dynamic height for content */
  }

  .overlay h3 {
    font-size: 13px;          /* Increased font size for better readability */
  }

  /* Button inside overlay */
  .button {
       
        font-size: 12px;
        width: 30px;
        height: 30px;
        transition: all 0.3s ease;
    }
  }

  /* View More button styling */
  .view-more {
    text-align: center;
    margin-top: 15px;
  }

  .view-more-button {
    display: inline-block;
    padding: 6px 11px;        /* Increased padding for better touch area */
    background-color: #ff8a00; /* Button background */
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 20px;
    font-size: 16px;           /* Adjusted font size */
    font-weight: bold;
    transition: background-color 0.3s ease;
  }
@media (max-width: 425px) {
  .image-grids {
    height: auto;               /* Adjust height dynamically for smaller screens */
    flex-direction: column;      /* Stack images vertically */
    align-items: center;         /* Center images horizontally */
    justify-content: center;     /* Center content vertically */
  }

  /* Text overlay */
  .overlay {
   
    width: 195px;   
                
  }
  .grid-row {
     display: block;
    }

  .overlay h3 {
    font-size: 12px;            /* Smaller font size for readability */
  }

  /* Button inside overlay */
  .button {
    font-size: 10px;            /* Smaller font size for better fit */
    width: 25px;                /* Adjusted width */
    height: 25px;               /* Adjusted height */
    transition: all 0.3s ease;
  }

  /* View More button styling */
  .view-more {
    text-align: center;
    margin-top: 10px;           /* Reduced margin for smaller screens */
  }

  .view-more-button {
    display: inline-block;
    padding: 6px 10px;          /* Adjusted padding */
    background-color: #ff8a00;  /* Button background */
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 15px;   
    font-size:13px;
  }



  .service-contact-form{
  width: 100%;
  background-color: #f9f9f9;
   height: 360px;
  }
 
}
@media (max-width:375px){
    .view-more-button{
        font-size:12px;
    }
}
@media(max-width:1024px){
  .card-image {
    width: 300px;
    height: 300px; /* Adjust as per your layout */
    object-fit: cover;
    
  }
}


/* Contact Page Section */
.contact-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px;
  opacity: 0;
  animation: fadeInUp 1.5s ease-out forwards; /* Fade-in with upward motion */
}

/* Left and Right Contact Sections */
.contact-left, .contact-right {
  width: 42%;
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards; /* Fade-in with upward motion */
}

/* Contact Left Section */
.contact-left h2 {
  font-size: 24px;
  margin-bottom: 10px;
  opacity: 0;
  animation: fadeInUp 3s ease-out forwards ; /* Fade-in with upward motion */
  animation-delay: 0.2s; /* Stagger the animation */
}

.contact-left p {
  color: #555;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  animation: fadeInUp 3s ease-out forwards ;
  animation-delay: 0.4s; /* Stagger the animation */
}
.contact-hr {
    border: 2px solid orange;
    opacity: 1;
    width: 45px;
}

.form-group {
  gap: 10px;
  margin-bottom: 15px;
}

.form-group input, .form-group textarea {
  width: 100%;
  height: 40px;
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 10px;
  opacity: 1;
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.6s; /* Stagger the animation */
}

#input {
  width: 100%;
}

.message-form-group input,
.message-form-group input,
.message-form-group textarea {
  padding: 5px;
}

.message-form-group input, .message-form-group textarea {
  width: 100%;
  height: 100px;
  font-size: 14px;
  border: 1px solid #ccc;
  opacity: 1;
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.8s; /* Stagger the animation */
}

textarea {
  resize: none;
  height: 80px;
}

.form-button {
  text-align: left;
}

.form-button button {
  background-color: #f7941e;
  color: white;
  border: none;
  padding: 5px 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
    animation: pulse 2s ;
}

.form-button button:hover {
  background-color: #e68517; /* Darker shade on hover */
  transform: scale(1.05); /* Slightly enlarge the button on hover */
}
/* Keyframes for Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to normal size */
  }
}
/* Contact Right Section */
.contact-right {
  color: #555;
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 1s; /* Stagger the animation */
}

.contact-right h3 {
  font-size: 20px;
  margin-bottom: 10px;
      animation: fadeInUp 3s ease-out forwards ;
}
.map-image {
    width: 550px;
    height: 250px;
}
.contact-right .map-link {
  display: inline-block;
  margin-bottom: 20px;
  color: #007bff;
  text-decoration: none;
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 1.2s; /* Stagger the animation */
}

.contact-right .map-link:hover {
  text-decoration: underline;
}

.contact-details {
    display: flex;
    justify-content: space-between;
    animation: pulse 4s ;
}

.contact-details .column {
  width: 25%;
}

.column a {
  color: black;
  text-decoration: none;
}

.contact-details ul {
  list-style: none;
  padding: 0;
}

.contact-details ul li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.contact-details ul li i {
  font-size: 10px;
  color: white;
  border-radius: 50%;
  padding: 10px;
  background-color: #f7941e;
  margin-right: 10px;
  border: 1px solid #f7941e;
  transition: background-color 0.3s ease;
}

.contact-details ul li i:hover {
  background-color: #e68517; /* Darker shade on hover */
}

/* Keyframes for fade-in with upward motion */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 1024px){
  .form-group{
    width: 100%;
  }
  .message-form-group {
    width: 100%;
    height: 100px;
  }
  .message-form-group textarea{
      margin-top: 0;
  }

  .form-button{
display: flex;
justify-content: flex-start;
  }
  .form-button button {
    padding:7px 10px;
    margin-top: 10px;
}
.contact-details ul li {
    font-size: 11px;
}
.map-image {
    width: 420px;
    height: 225px;
}
}
@media screen and (max-width: 768px) {
  .contact-container {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .contact-left,
  .contact-right {
    width: 90%;
    margin-bottom: 20px;
  }

  .contact-left h2 {
    font-size: 20px;
  }
.contact-hr {
    border: 2px solid orange;
    opacity: 1;
    width: 27px;
}
  .contact-left p {
    font-size: 14px;
    text-align: center;
  }

  .form-group {
    flex-direction: row;
    gap: 5px;
  }
  .form-group ::placeholder{
    font-size: 10px;
  }
  .form-group input,
  .form-group textarea {
    height: 35px;
    font-size: 12px;
  }

  .message-form-group input,
  .message-form-group textarea {
    width: 100%;
    height: 100px;
    margin-top: 0;
  }
  .message-form-group ::placeholder{
    font-size: 10px;
  }

  .form-button {
    text-align: center;
  }

  .contact-right h3 {
    text-align: center;
  }
    .map-image {
        width: 100%;
        height: 250px;
    }
  .contact-right .map-link {
    display: block;
    text-align: center;
  }

  .contact-details {
    flex-direction: row;
    gap: 10px;
  }

  .contact-details .column {
    width: 100%;
  }

  .contact-details ul li {
    font-size: 11px;
  }

  .contact-details ul li i {
    font-size: 8px;
    padding: 8px;
  }
}

@media screen and (max-width: 375px) {
    .contact-details ul li {
        font-size: 12px;
    }
    .contact-details {
    display:block;
}
}
 @media screen and (max-width: 320px) {
     
    a.map-link {
        font-size: 13px;
}
.contact-details {
    display:block;
}
 .contact-details ul li {
        font-size: 11px;
    }
    .contact-left, .contact-right {
        width: 100%;
 }
}
/* OUR WORKS */
.work-container {
    width: 100%;
}

.work-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.w-buttons {
    border: 1px solid #7e7e7e;
    background-color: white;
    transition: all 0.3s ease;
}

.w-buttons a {
    color: #7e7e7e;
    text-decoration: none;
    padding: 5px 10px;
    display: block;
}

.w-buttons:hover {
    background-color: orange;
    border-color: orange;
}

.w-buttons:hover a {
    color: white;
}

/* Filter Buttons */
.filtering span {
    cursor: pointer;
    padding: 8px 12px;
    margin: 5px;
    display: inline-block;
    border: 1px solid #333;
    color: #333;
    transition: all 0.3s ease;
}

.filtering span.active,
.filtering span:hover {
    background: #e1760c;
    color: #fff;
}

/* Work Grid */
.work-container {
    padding: 20px;
}

.work-container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.work-image-card {
    position: relative;
    overflow: hidden;
    height: 370px;
    padding: 15px;
    text-align: center;
    max-width: 90%; /* Limits the card width */
    object-fit: cover;
}


.work-image-card img {
    width: 90%; /* Reduce the image width */
    height: 280px; /* Slightly adjust height */
    object-fit: cover;
    display: block; /* Ensures proper alignment */
    transition: transform 0.3s ease;
}

.work-image-card:hover img {
    transform: scale(1.03); /* Subtle zoom effect */
}

/* Overlay */
.work-overlay {
    position: absolute;
    bottom: 30px;
    width: 67%;
    background: white;
    padding: 10px;
    text-align: center;
    transition: background 0.3s ease;
    height: 90px;
}

.work-overlay h3 {
    font-size: 14px;
    margin: 0;
    padding: 5px 0;
}

.work-overlay a {
    color: #e1760c;
    font-size: 18px;
}

.work-overlay:hover {
    background: #e1760c;
    color: white;
}

.work-overlay:hover a {
    color: white;
}

/* Work Button */
.work-button {
    border-radius: 50%;
    border: 1px solid #e1760c;
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.work-button i {
    color: #e1760c;
}

.work-button:hover {
    transform: scale(1.2);
}

/* View More */
.work-view-more {
    text-align: center;
    margin-bottom: 20px;
}

.work-view-more a {
    border: 1px solid #626262;
    padding: 8px 16px;
    color: #626262;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}

.work-view-more a:hover {
    background-color: #e55b00;
    color: white;
    border: 1px solid white;
}

/* Responsive Fixes */
@media (max-width: 991px) {
    .work-image-card {
        height: auto;
    }

    .work-overlay {
        position: relative;
        padding: 8px;
    }
}

@media (max-width: 768px) {
    .filtering span {
        display: block;
        margin: 5px auto;
        text-align: center;
    }
}

@media screen and (max-width: 1024px){
.work-image-card {
   
    padding: 16px;
}
.work-overlay {
    width: 200px;
    height:107px;
}
.work-view-more a {
      
    padding: 8px;
    font-size: 14px;
    margin-bottom: 15px;
}

.filtering span {
  
    font-size: 15px; 
}
}
@media screen and (max-width: 768px) {
  .image-grid {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to form multiple rows */
    gap: 20px;
    width: 100%;
  }
.work-buttons {
    margin-top: 15px;
}
  .work-grid-row {
    display: flex;
    flex-wrap: wrap; /* Enable wrapping for 2 images per row */
    gap: 20px;
    margin-left: 10px; 
    margin-right: 10px;
  }

  .work-image-card {
    width: calc(50% - 20px); /* Ensure 2 cards per row, accounting for gap */
    margin-bottom: 20px; /* Add spacing between rows */
  }

  .work-overlay {
    width: 80%;
    top: -13%;
  }

  .overlay {
    width: 180px;
    height: 90px;
    margin-left: -17px;
    top: -58px;
  }
.images-grid {
        margin-left: 4%;
    }
  .card-image {
    width: 100%; /* Adjust image width to fit within card */
    height: auto; /* Maintain aspect ratio */
  }
}

/* For screens 424px and below */
@media screen and (max-width: 425px) {
        .filtering span {
        font-size: 12px;
    }
    .row.no-gutters {
    margin-right: 0;
}
  .image-grid {
    flex-direction: column;
    gap: 15px;
    width: 90%;
    height: 100%;
    margin: 20px;
}

  .work-grid-row {
    flex-direction: column;
    width: 100%;
    gap: 15px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .work-image-card {
    width: 100%; /* Take full width for smaller screens */
    height: 350px; /* Maintain aspect ratio */
  }
  .buttons {
    width: 100%;
  }
  .buttons button {
    width: 70px;
    margin: 2px;
    padding: 2px;
}
  .buttons button a {
    font-size: 0.6rem;
}
     .work-overlay {
        width: 75%;
        top: -15%;
        left: 0%;
        font-size: 12px;
    }

 

  .overlay {
   width: 165px;
   height: 100px;
  }

  .card-image {
    height: auto; /* Maintain image proportions */
  }

  /* Adjust 'View More' button */
  .work-view-more {
    margin-top: 15px;
  }
    .work-view-more a {
        padding: 6px;
        font-size: 12px;
    }
}
@media screen and (max-width: 375px) {
        .filtering span {
        font-size: 10px;
       
    }
  .image-grid {
    flex-direction: column; /* Stack images vertically */
    gap: 15px;
    width: 90%;
    margin: 15px auto; /* Center align and add top/bottom margin */
  }

  .work-grid-row {
    flex-direction: column; /* Stack items vertically */
    width: 100%;
    gap: 15px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .work-image-card {
    width: 100%; /* Full width for small screens */
    height: 380px; /* Adjusted height */
  }

  .buttons {
    width: 100%;
    display: flex; /* Align buttons horizontally */
    justify-content: center; /* Center buttons */
    gap: 5px; /* Space between buttons */
  }

  .buttons button {
    width: 65px; /* Slightly smaller buttons */
    padding: 3px; /* Adjust padding */
    font-size: 0.7rem; /* Adjust font size for readability */
  }

    .work-overlay {
        width: 75%;
        top: -13%;
        left: 0;
        font-size: 11px;
    }

  .overlay {
    width: 160px; /* Adjust overlay width */
    height: 90px;  /* Adjust overlay height */
  }

  .card-image {
    width: 100%; /* Full width for image */
    height: auto; /* Maintain aspect ratio */
  }

  /* Adjust 'View More' button */
  .work-view-more {
    margin-top: 10px; /* Reduce top margin */
  }

  .work-view-more a {
    padding: 6px 8px; /* Adjust padding for better click area */
    font-size: 12px;  /* Adjust font size for readability */
  }
}

@media screen and (max-width: 320px) {
  .filtering span {
    font-size: 9px; /* Slightly smaller font for compact screens */
  }

  .image-grid {
    flex-direction: column; /* Stack images vertically */
    gap: 10px; /* Reduced gap */
    width: 90%;
    margin: 10px auto; /* Adjust margins */
  }

  .work-grid-row {
    flex-direction: column; /* Stack items vertically */
    width: 100%;
    gap: 10px; /* Reduced gap */
    margin-left: 5px;
    margin-right: 5px;
  }

  .work-image-card {
    width: 100%; /* Full width for small screens */
    height: 350px; /* Slightly reduced height */
  }

  .buttons {
    width: 100%;
    display: flex; /* Align buttons horizontally */
    justify-content: center; /* Center buttons */
    gap: 3px; /* Reduced gap */
  }

  .buttons button {
    width: 60px; /* Smaller buttons */
    padding: 2px; /* Reduced padding */
    font-size: 0.6rem; /* Smaller font size for readability */
  }

         .work-overlay {
        width: 72%;
        top: -16%;
        left: 0%;
        font-size: 9px;
    }
    .images-grid {
     margin: 0; 
     margin-left: 0; 
}

  .overlay {
    width: 160px; /* Adjust overlay width */
    height: 85px; /* Adjust overlay height */
  }

  .card-image {
    width: 100%; /* Full width for image */
    height: auto; /* Maintain aspect ratio */
  }

  /* Adjust 'View More' button */
  .work-view-more {
    margin-top: 8px; /* Reduced top margin */
  }

  .work-view-more a {
    padding: 5px 7px; /* Adjust padding */
    font-size: 11px; /* Reduced font size for compact screens */
  }
}

@media screen and (max-width:375px) {

  .nav-social-icons {
    gap:0;
  }
}

@media screen and (max-width:320px){

.image-grid {
  margin: 10px;
}
}

.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form textarea{
     padding:7px 10px;
    width: 100%;
    background-color:transparent;
     animation: pulse 2s ;
}
/* Keyframes for Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to normal size */
  }
}
@media screen and (max-width:425px){
.wpcf7 form input[type="email"]{
     padding:5px;
 }
}



/* --------------single page ----------------*/

/* WORK TITLE */
.work-title h2 {
    display: flex;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

.work-title a {
    color: white;
    text-decoration: none;
}

/* Slick Slide Styling */
.slick-slide img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.5s; /* Staggered animation */
}

/* General Arrow Styling */
.slick-prev,
.slick-next {
    background-color: #f5f5f5; /* Background color for arrows */
    border: 1px solid #ddd;   /* Border for the buttons */
    border-radius: 50%;       /* Make arrows circular */
    width: 40px;              /* Button width */
    height: 40px;             /* Button height */
    display: flex;            /* Center icon inside */
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease; /* Smooth hover effect */
    z-index: 100;             /* Ensure arrows are above the content */
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards; /* Fade-in with upward motion */
    animation-delay: 1s; /* Staggered animation */
}

button.slick-arrow.slick-prev {
    margin-left: 35px;
}

button.slick-arrow.slick-next {
    margin-right: 47px;
}

.slick-prev:before {
    font-size: 30px;
}

/* Icon inside the arrow */
.slick-prev i,
.slick-next i {
    font-size: 16px;          /* Size of the icon */
    color: #333;              /* Default icon color */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover Effect for Arrows */
.slick-prev:hover,
.slick-next:hover {
    background-color: #ff8a00; /* Change background on hover */
    border-color: #ff8a00;     /* Change border color */
}

.slick-prev:hover i,
.slick-next:hover i {
    color: #fff;              /* Change icon color on hover */
}

/* Next Work Button */
.next-work-button {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    opacity: 1;
    animation-delay: 1.5s; /* Staggered animation */
    animation: pulse 2s ;
}

.next-work-button .single-btn {
    background-color: orange;
    border: none;
    color: white;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.next-work-button .single-btn:hover {
    background-color: darkorange;
    transform: translateY(-5px); /* Slightly lift the button on hover */
}

/* Keyframes for Fade-in with Upward Motion */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

 @media screen and (max-width:425px){ 
  .work-title a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    margin: 10px;
}
}
.header-service h5{
    display:flex;
    justify-content:center;
    margin:40px;
}

.main-img {
    display: flex;
    justify-content: center;
    width: 50%;
    margin-left: 330px;
    height: 300px;
}  
.main-para {
    display:flex;
    justify-content:center;
    margin:40px;
    
}
@media screen and (max-width: 1024px) {
    .header-service h5 {
        display: flex;
        justify-content: center;
        margin: 20px; /* Reduced margin for smaller screens */
    }

    .main-img {
        display: flex;
        justify-content: center;
        width: 80%; /* Increased width for better responsiveness */
        margin-left: auto; /* Centering */
        margin-right: auto; /* Centering */
        height: auto; /* Adjust height dynamically */
        max-height: 300px; /* Limit max height */
    }

    .main-para {
        display: flex;
        justify-content: center;
        margin: 40px; /* Reduced margin */
        text-align: center; /* Ensures proper alignment */
    }
}

@media screen and (max-width: 768px) {
    .header-service h5 {
        font-size: 18px; /* Adjust font size */
        margin: 30px;
    }

    .main-img {
        width: 90%; /* More width for smaller screens */
        max-height: 250px; /* Reduce height */
    }

    .main-para {
        font-size: 16px;
        margin: 30px;
    }
}

@media screen and (max-width: 425px) {
    .header-service h5 {
        font-size: 16px; /* Further reduce font size */
        margin: 30px;
    }

    .main-img {
        width: 100%; /* Full width for mobile screens */
        max-height: 200px;
    }

    .main-para {
        font-size: 14px;
        margin: 30px;
    }
}
@media screen and (max-width: 375px) {
    .header-service h5 {
        font-size: 14px; /* Reduce font size for smaller screens */
        margin: 20px;
    }

    .main-img {
        width: 100%; /* Full width */
        max-height: 180px; /* Reduce height for better fit */
    }

    .main-para {
        font-size: 13px;
        margin: 20px;
    }
}

@media screen and (max-width: 320px) {
    .header-service h5 {
        font-size: 12px; /* Further reduce font size */
        margin: 15px;
    }

    .main-img {
        width: 100%; /* Full width for small screens */
        max-height: 160px; /* Limit height */
    }

    .main-para {
        font-size: 12px;
        margin: 15px;
    }
}


/* SEARCH CSS CODE */


.search-bar-form {
  position: relative;
}

.search-wrapper {
  display: flex;
  align-items: center;
  position: relative;
 top: -4px;
}

.search-input {
  width: 0;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

.search-icon-btn, .search-submit-btn {
  background-color: transparent;
  color: white;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-submit-btn {
  display: none; /* Hidden until search is opened */
}

/* When search input is visible */
.search-bar-form.active .search-input {
  width: 200px;
  opacity: 1;
  margin-right: 5px;
}

.search-bar-form.active .search-submit-btn {
  display: inline-flex;
}

.search-text {
    font-size: 14px;
    display: flex;
    justify-content: center;
    margin: 30px;
}
body:not(.home) .search-icon-btn {
  color: black;
}

#backToTop {
 
  z-index: 999;
  background-color: darkblue;
  color: white;
  border: none;
  outline: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
      margin-right: 25px;
    margin-top: 220px;
}

#backToTop:hover {
  background-color: #001f4d;
}

@media screen and (max-width: 425px){
   #backToTop {
    margin-top: 0;
    margin-left: calc(68% + 50px);
}

}
/*Added by kk*/
/* Show dropdown on hover (desktop only) */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  .navbar .dropdown-toggle::after {
    transform: rotate(180deg);
  }
}
.navbar {
  border-bottom: 5px solid #f59c1a; /* Orange border */
  border-top: 5px solid #333;       /* Top dark border if needed */
  padding-top: 0;
  padding-bottom: 0;
}