/* Add animation classes if needed */
.wow {
    visibility: hidden;
}
  
.zoomIn {
    animation: zoomIn 1s ease-in-out;
}
  
@keyframes zoomIn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
}
  

  
.fadeInUp {
    animation: fadeInUp 1s ease-in-out;
}
  
@keyframes fadeInUp {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
}
  
.flipInX {
    animation: flipInX 1s ease-in-out;
}
  
@keyframes flipInX {
    0% {
      transform: rotateX(90deg);
      opacity: 0;
    }
    100% {
      transform: rotateX(0);
      opacity: 1;
    }
}
  


  
.slideInLeft {
    animation: slideInLeft 1s ease-in-out;
}
  
@keyframes slideInLeft {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}
  

.fadeInLeft {
    animation: fadeInLeft 1s ease-in-out;
}
  
@keyframes fadeInLeft {
    0% {
      transform: translateX(-20px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}
  
.zoomInUp {
    animation: zoomInUp 1s ease-in-out;
}
  
@keyframes zoomInUp {
    0% {
      transform: scale(0) translateY(20px);
      opacity: 0;
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
}
  
.fadeInRight {
    animation: fadeInRight 1s ease-in-out;
}
  
@keyframes fadeInRight {
    0% {
      transform: translateX(20px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}
  
@keyframes slideInRight {
  from {
      transform: translateX(100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}

.slideInRight {
  animation-name: slideInRight;
  animation-duration: 1s;
  animation-fill-mode: both;
}




/* hover effect of related images*/
.portfolio-img {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 10px;
}

/* Initially hidden effect */
.portfolio-img:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 100%;
    left: -100%;
    top: 0;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-45deg);
    transition: left 0.6s ease-in-out;
    opacity: 0;
}

/* Show effect only on hover */
.portfolio-img:hover:after {
    left: 100%;
    opacity: 1;
}

/* tiping effect */


  /* Typewriting effect */
.typewriter {
    overflow: hidden; /* Ensures text overflows won't be visible initially */
    white-space: nowrap; /* Prevents text from wrapping */
    border-right: 4px solid black; /* The cursor effect */
    width: 0; /* Start with no width, so it appears as if typing */
    animation: typing 4s steps(40) 1s forwards, blink 0.75s step-end infinite;
  }
  
  /* Typing animation */
  @keyframes typing {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }
  
  /* Cursor blinking effect */
  @keyframes blink {
    0%,
    50% {
      border-color: transparent;
    }
    100% {
      border-color: black;
    }
  }
  
  /* Responsive font size and width adjustments */
  @media (max-width: 1200px) {
    .typewriter {
      font-size: 1.5rem; /* Adjust font size for larger screens */
    }
  }
  
  @media (max-width: 768px) {
    .typewriter {
      font-size: 1.2rem; /* Smaller font size for tablets */
    }
  }
  
  @media (max-width: 480px) {
    .typewriter {
      font-size: 1rem; /* Further reduction for mobile screens */
    }
  }
  
      

      


/* list invisble style for sliding */

.list-style1 li {
    opacity: 0; /* Hidden at first */
    transform: translateX(50px); /* Offset to the right */
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.list-style1 li.visible {
    opacity: 1;
    transform: translateX(0); /* Moves back to normal position */
}

/* p tag slide mechanical division invisble  */

.paragraph {
    opacity: 0; /* Initially hidden */
    transform: translateX(50px); /* Offset to the right */
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.paragraph.visible {
    opacity: 1;
    transform: translateX(0); /* Moves back to normal position */
}


   
    
/* home page typing heading css */

/* Optional: Style for the space between words */
.space {
    display: inline-block;
    opacity: 0;
    animation: slideInLetter 0.3s ease forwards;  /* Reduced animation time for smoother transition */
    margin-right: 2px; /* Reduced space between words */
  }
  
  /* CSS for individual letter animation */
  .letter {
    display: inline-block;
    opacity: 0;
    animation: slideInLetter 0.5s ease forwards;
  }
  
  .word {
    display: inline-block;
    margin-right: 2px; /* Reduced space between words */
  }
  
  @keyframes slideInLetter {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  


/* Add these form styles */
.form-control {
    background-color: #f8f8f8;
    border: none;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    width: 100%;
    border: 2px solid #ddd;
}

.form-control:focus {
    background-color: #f3f3f3;
    box-shadow: none;
    outline: none;
}

textarea.form-control {
    min-height: 120px;
}

.butn {
    background-color: #001736;
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.3s ease;
}

.butn:hover {
    background-color: #001736;
}

/* Form container styles */
.contact.quform {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

/* Label styles */
.quform-element label {
    color: #001736;
    font-weight: 500;
    margin-bottom: 8px;
    font-size:16px;
    font-weight: 550;
}

.quform-required {
    color: #001736;
}


/* /service image animation */


/* General styles for the services-gallery */
.services-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Adds spacing between images */
    justify-content: center;
    /* Centers the content */
}

.services-gallery .services-item {
    flex: 1 1 calc(33.333% - 10px);
    /* 3 columns per row with spacing */
    max-width: calc(33.333% - 10px);
    box-sizing: border-box;
}

.services-gallery .services-item img {
    width: 100%;
    height: 270px;
    border-radius: 8px;
    /* Adds rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Adds a shadow effect */
    transition: transform 0.5s ease;
}

/* Continuous animation for animate-left */
.services-gallery .animate-left {
    animation: floatLeft 3s ease-in-out infinite;
}

@keyframes floatLeft {
    0% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
        /* Moves to the right */
    }

    100% {
        transform: translateX(-10px);
        /* Returns to the left */
    }
}

/* Continuous animation for animate-right */
.services-gallery .animate-right {
    animation: floatRight 3s ease-in-out infinite;
}

@keyframes floatRight {
    0% {
        transform: translateX(10px);
    }

    50% {
        transform: translateX(-10px);
        /* Moves to the left */
    }

    100% {
        transform: translateX(10px);
        /* Returns to the right */
    }
}

/* Hover animation (optional, scales on hover) */
.services-gallery .services-item img:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    /* Enhance the shadow */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .services-gallery .services-item {
        flex: 1 1 calc(50% - 10px);
        /* 2 columns per row */
        max-width: calc(50% - 10px);
        
    }
    .services-item {
        height:auto;
    }
}

@media (max-width: 480px) {
    .services-gallery .services-item {
        flex: 1 1 100%;
        /* 1 column per row */
        max-width: 100%;
      
    }
    .services-item {
        height:auto;
    }
}


/* list effect */
.list-style1 li {
    text-decoration: none !important;
    border-bottom: none !important;
}


/* card style index page */


    .card-style1 {
        opacity: 0;
        transform: translateX(100px); /* Default move from right */
        transition: all 0.8s ease-in-out;
    }
    .card-style1.slide-left {
        transform: translateX(-100px); /* Move from left */
    }
    .card-style1.visible {
        opacity: 1;
        transform: translateX(0);
    }

    
    .card-style1 .card-content {
        padding: 52px 30px;
    }

    [data-settings] {
        visibility: hidden;
        opacity: 0;
        transition: all 0.6s ease;
    }

    [data-settings].is-visible {
        visibility: visible;
        opacity: 1;
    }

    .slideInLeft {
        animation: slideInLeft 0.6s ease forwards;
    }

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





/* about index style */
.animated-text {
  opacity: 0;
  transform: translateX(100px); /* Move from right */
  transition: all 0.8s ease-in-out;
}
.animated-text.visible {
  opacity: 1;
  transform: translateX(0);
}

/* dividion img main */

/* Add these styles */

.invisible-image {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}

.visible-image {
    opacity: 1;
    transform: translateX(0);
}

/* page title responsive */

/* Make the background image cover the section */
.page-title-section {
    background-size: cover; /* Ensures the background image covers the entire area */
    background-position: center center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the background from repeating */
}

/* Adjust the height for responsiveness */
.page-title-section {
    height: 600px; /* Default height */
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .page-title-section {
        height: 400px; /* Reduce height on larger tablets and desktops */
    }
}

@media (max-width: 768px) {
    .page-title-section {
        height: 450px; /* Adjust height for tablets */
    }
}

@media (max-width: 480px) {
    .page-title-section {
        height: 400px; /* Further reduce height for mobile */
    }
}