/* about page */
/* Initially hide elements */
.about-hero h1 {
    opacity: 0;
    transform: translateX(-200px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.about-hero p {
    opacity: 0;
    transform: translateX(200px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


/* When elements become visible */
.about-hero.show h1 {
    opacity: 1;
    transform: translateX(0);
}

.about-hero.show p {
    opacity: 1;
    transform: translateX(0);
}

.about-hero.show .hero-buttons {
    opacity: 1;
    transform: scale(1);
}


/* Initial hidden state */
.about-story-heading {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-in-out;
}

/* Active state when element is in viewport */
.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Initially hide elements */
.about-story p,
.about-story video {
    opacity: 0;
    transform: translateX(-50px);
    /* Default for text */
    transition: all 1s ease-in-out;
}

/* Slide-in from left for paragraphs */
.about-story p {
    transform: translateX(-100px);
}

/* Slide-in from right for video */
.about-story video {
    transform: translateX(100px);
}

/* When in view, animate */
.about-story.show p,
.about-story.show video {
    transform: translateX(0);
    opacity: 1;
}



/* Initial hidden state */
.about-value,
.our-image,
.our-value {
    opacity: 0;
    transition: all 0.9s ease-in-out;
}

/* Slide up for about-value */
.about-value {
    transform: translateY(50px);
}

/* Slide in from left for image */
.our-image {
    transform: translateX(-100px);
}

/* Slide in from right for our-value */
.our-value {
    transform: translateX(100px);
}

/* Active state when element is in viewport */
.animate {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* contact page */
.contact-left,
.contact-right {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* When the section is visible, apply this class */
.contact-visible {
    opacity: 1;
    transform: translateY(0);
}

/* footer */
/* Initially hide the footer-1 sections */
.footer-1 {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* When the element is visible */
.footer-1.show {
    opacity: 1;
    transform: translateY(0);
}



/* .custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.btn-15 {
    background: #333a70;
    border: none;
    z-index: 1;
  }
  .btn-15:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background-color: rgb(25, 79, 137);
    border-radius: 5px;
     box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    transition: all 0.3s ease;
  }
  .btn-15:hover {
    color: #fff;
  }
  .btn-15:hover:after {
    left: 0;
    width: 100%;
  }
  .btn-15:active {
    top: 2px;
  } */
  
  @keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-why {
    animation: fadeUp 1s ease-in-out;
    animation-fill-mode: both;
}

/* Add staggered delay for smoother appearance */
.home-why .sec1p {
    animation-delay: 0.3s;
}

.home-why .sec1p2 {
    animation-delay: 0.6s;
}

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

@keyframes fadeRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-buttons .btn:first-child {
    animation: fadeLeft 1s ease-in-out;
    animation-fill-mode: both;
}

.hero-buttons .btn.secondary {
    animation: fadeRight 1s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 0.3s; 
}






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

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

.fade-in-left {
    animation: fadeInLeft 1.5s ease-in-out;
}

.fade-in-right {
    animation: fadeInRight 1.5s ease-in-out;
}





@keyframes scaleUp {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1);
    }
}

@keyframes slideFromBottom {
    from {
        transform: translateY(50px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes rotateSkew {
    from {
        transform: rotate(-10deg) skewX(-10deg);
    }
    to {
        transform: rotate(0) skewX(0);
    }
}

/* Apply animations */
.hero-content h1 {
    animation: scaleUp 1.2s ease-in-out;
}

.hero-content p {
    animation: slideFromBottom 1s ease-in-out;
}

.hero-buttons a:first-child {
    animation: rotateSkew 1.5s ease-in-out;
}

.hero-buttons a:last-child {
    animation: rotateSkew 1.7s ease-in-out;
}




/* From Uiverse.io by SouravBandyopadhyay */ 
.card-title {
    color: #262626;
    font-size: 1.2em;
    line-height: normal;
    font-weight: 700;
    margin-bottom: 0.5em;
  }
  
  .small-desc {
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5em;
    color: #452c2c;
  }
  

  .small-desc {
    font-size: 1em;
    color: black;
  }
  
  .go-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 2em;
    height: 2em;
    overflow: hidden;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #6293c8, #384c6c);
    border-radius: 0 4px 0 32px;
  }
  
  .go-arrow {
    margin-top: -4px;
    margin-right: -4px;
    color: white;
    font-family: courier, sans;
  }
  
  .card-Industries {
    display: block;
    position: relative;
    /* max-width: 300px; */
    max-height: 320px;
    background-color:#f9fafb;
    border-radius: 10px;
    padding: 2em 1.2em;
    margin: 12px;
    text-decoration: none;
    z-index: 0;
    overflow: hidden; 
  }
  
  .card-Industries:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: linear-gradient(135deg, #364a60, #384c6c);
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.35s ease-out;
  }
  
  .card-Industries:hover:before {
    transform: scale(28);
  }
  
  .card-Industries:hover .small-desc {
    transition: all 0.5s ease-out;
    color: rgba(255, 255, 255, 0.8);
  }
  
  .card-Industries:hover .card-title {
    transition: all 0.5s ease-out;
    color: #ffffff;
  }
  

  



/* Initial State - Hidden */
.fade-in-left,
.fade-in-right {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-in-out;
}

.fade-in-right {
    transform: translateX(50px);
}

/* Active State - When in View */
.fade-in-left.active,
.fade-in-right.active {
    opacity: 1;
    transform: translateX(0);
}


/* Initial Hidden State */
.fade-in-top {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.8s ease-in-out;
}

/* Active State - When in View */
.fade-in-top.active {
    opacity: 1;
    transform: translateY(0);
}


/* Initial Hidden State */
.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease-in-out;
}

/* Active State - When in View */
.fade-in-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Initial Hidden State */
.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease-in-out;
}

/* Active State - When in View */
.fade-in-right.active {
    opacity: 1;
    transform: translateX(0);
}


/* Initial hidden state */
.home-about p, .home-about h3, .home-about ul, .home-about li {
    opacity: 0;
    transform: translateY(50px); /* Move elements down */
    transition: all 1s ease-in-out;
}

/* When in viewport, animate elements */
.home-about.show p,
.home-about.show h3,
.home-about.show ul,
.home-about.show li {
    opacity: 1;
    transform: translateY(0);
}

/* Delay effect for second column */
.home-about.show h3:nth-child(1) { transition-delay: 0.4s; }
.home-about.show p:nth-child(2) { transition-delay: 0.7s; }
.home-about.show ul { transition-delay: 0.8s; }
.home-about.show li:nth-child(1) { transition-delay: 0.9s; }
.home-about.show li:nth-child(2) { transition-delay: 1s; }
.home-about.show li:nth-child(3) { transition-delay: 1.2s; }
.home-about.show li:nth-child(4) { transition-delay: 1.4s; }
.home-about.show li:nth-child(5) { transition-delay: 1.6s; }


/* Initial hidden state */
.home-industries h2, 
.home-industries p {
    opacity: 0;
    transform: translateY(50px); /* Moves down */
    transition: all 0.6s ease-in-out;
}

/* When in viewport, animate elements */
.home-industries.show h2 { 
    opacity: 1; 
    transform: translateY(0); 
    transition-delay: 0.2s;
}

.home-industries.show p:nth-of-type(1) { 
    opacity: 1; 
    transform: translateY(0); 
    transition-delay: 0.4s;
}

.home-industries.show p:nth-of-type(2) { 
    opacity: 1; 
    transform: translateY(0); 
    transition-delay: 0.6s;
}





.move {
    cursor: move;
    /* background: linear-gradient(145deg, #2a2a2a, #383838); */
    /* border: 2px solid #135994; */
    
    /* Apply box-shadow with more depth */
}

.move:hover {
    animation: moveAround 2s infinite ease-in-out;
    /* background: linear-gradient(145deg, #135994, #282a5f);
    color: #fff; */
}

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

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0) scale(1.05);
    }

    25% {
        transform: translateX(-5px) scale(1.05);
    }

    75% {
        transform: translateX(5px) scale(1.05);
    }
}

@keyframes moveAround {
    0% {
        transform: translate(0, 0) scale(1.05);
    }

    25% {
        transform: translate(5px, -5px) scale(1.05);
    }

    50% {
        transform: translate(0, 0) scale(1.05);
    }

    75% {
        transform: translate(-5px, 5px) scale(1.05);
    }

    100% {
        transform: translate(0, 0) scale(1.05);
    }
}




/* Initially hidden state */
.home-woc, 
.home-sec {
    opacity: 0;
    transform: translateY(50px); /* Move down */
    transition: all 0.6s ease-in-out;
}

/* When in viewport, animate elements */
.show .home-woc { 
    opacity: 1; 
    transform: translateY(0); 
    transition-delay: 0.2s;
}

.show .home-sec { 
    opacity: 1; 
    transform: translateY(0); 
    transition-delay: 0.4s;
}


.home-packening:hover {
    transform: translateY(-1.5rem);
    border: #333A70 0.2em solid;
    border-radius: 2.5rem 0 2.5rem 0;
} 

.home-packening{
    transition: all 0.4s ease-in;
}