html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* Smooth transition for everything that needs interaction */
a,
button,
.industry-card,
.industry-card img,
.industry-label,
#brands .col-lg-2 {
  transition: all 0.4s ease;
}
/* =========================================================
   PAGE LOAD ANIMATION
   ========================================================= */

body {
  animation: pageFadeIn 0.8s ease forwards;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* =========================================================
   NAVBAR ANIMATION
   Works with most Bootstrap navbar/header structures
   ========================================================= */

header,
.navbar {
  animation: navbarDrop 0.8s ease both;
  animation-delay: 0.2s;
}

@keyframes navbarDrop {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar-nav .nav-item {
  animation: navItemFade 0.6s ease both;
}

.navbar-nav .nav-item:nth-child(1) {
  animation-delay: 0.3s;
}

.navbar-nav .nav-item:nth-child(2) {
  animation-delay: 0.4s;
}

.navbar-nav .nav-item:nth-child(3) {
  animation-delay: 0.5s;
}

.navbar-nav .nav-item:nth-child(4) {
  animation-delay: 0.6s;
}

.navbar-nav .nav-item:nth-child(5) {
  animation-delay: 0.7s;
}

@keyframes navItemFade {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.carousel {
  overflow: hidden;
}

.carousel-item img {
  transform: scale(1.08);
  transition: transform 6s ease;
}

.carousel-item.active img {
  transform: scale(1);
}

/* Dark cinematic overlay */
.carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.05)
  );
  pointer-events: none;
}

/* Make sure overlay stays above image */
.carousel-item {
  position: relative;
}

/* Caption animation */

.carousel-caption {
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
}

.carousel-item.active .carousel-caption {
  animation: heroCaption 1s 0.3s ease forwards;
}

.carousel-caption h2 {
  animation: heroTitle 1s 0.5s ease both;
}

.carousel-caption p {
  animation: heroText 1s 0.75s ease both;
}

@keyframes heroCaption {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroTitle {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroText {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Carousel controls */

.carousel-control-prev,
.carousel-control-next {
  transition: all 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  transform: scale(1.15);
}


/* Carousel indicators */

.carousel-indicators button {
  transition: all 0.3s ease;
}

.carousel-indicators button:hover {
  transform: scale(1.4);
}

.carousel-indicators .active {
  transform: scaleX(1.5);
}


/* =========================================================
   SEARCH SECTION
   ========================================================= */

.search,
#search,
.search-section {
  animation: searchAppear 0.9s ease both;
}

@keyframes searchAppear {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.animate-hidden {
  opacity: 0;
  transform: translateY(70px);
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Section headings */

.animate-visible h2 {
  animation: headingReveal 0.9s ease both;
}

@keyframes headingReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   WELCOME SECTION
   ========================================================= */

#welcome {
  position: relative;
}

#welcome p {
  animation: welcomeText 1s 0.2s ease both;
}

@keyframes welcomeText {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   INDUSTRY CARDS
   ========================================================= */

.industry-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transform: translateY(0);
}

/* Image zoom */

.industry-card img {
  width: 100%;
  display: block;
  transform: scale(1);
}

.industry-card:hover img {
  transform: scale(1.12);
}

/* Card lift */

.industry-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.20);
}

/* Image overlay */

.industry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    transparent 65%
  );
  opacity: 0.7;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.industry-card:hover::after {
  opacity: 1;
}


/* Industry label */

.industry-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  transform: translateY(5px);
  transition: all 0.4s ease;
}

.industry-card:hover .industry-label {
  transform: translateY(-8px);
}


/* Staggered card reveal */

#industries .row > div:nth-child(1) {
  transition-delay: 0.1s;
}

#industries .row > div:nth-child(2) {
  transition-delay: 0.2s;
}

#industries .row > div:nth-child(3) {
  transition-delay: 0.3s;
}

#industries .row > div:nth-child(4) {
  transition-delay: 0.4s;
}

#industries .row > div:nth-child(5) {
  transition-delay: 0.5s;
}


/* =========================================================
   BRANDS
   ========================================================= */

#brands .row:last-child > div {
  opacity: 0;
  transform: translateY(25px);
}

#brands.animate-visible .row:last-child > div {
  animation: brandReveal 0.7s ease forwards;
}

#brands.animate-visible .row:last-child > div:nth-child(1) {
  animation-delay: 0.1s;
}

#brands.animate-visible .row:last-child > div:nth-child(2) {
  animation-delay: 0.2s;
}

#brands.animate-visible .row:last-child > div:nth-child(3) {
  animation-delay: 0.3s;
}

#brands.animate-visible .row:last-child > div:nth-child(4) {
  animation-delay: 0.4s;
}

#brands.animate-visible .row:last-child > div:nth-child(5) {
  animation-delay: 0.5s;
}

#brands.animate-visible .row:last-child > div:nth-child(6) {
  animation-delay: 0.6s;
}

#brands.animate-visible .row:last-child > div:nth-child(7) {
  animation-delay: 0.7s;
}

#brands.animate-visible .row:last-child > div:nth-child(8) {
  animation-delay: 0.8s;
}

#brands.animate-visible .row:last-child > div:nth-child(9) {
  animation-delay: 0.9s;
}

@keyframes brandReveal {
  from {
    opacity: 0;
    transform: translateY(25px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* Brand hover */

#brands .row:last-child > div {
  cursor: pointer;
}

#brands .row:last-child > div:hover {
  transform: translateY(-8px) scale(1.05);
  letter-spacing: 1px;
}


/* =========================================================
   BUTTON ANIMATIONS
   ========================================================= */

.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: scale(0.96);
}


/* Ripple */

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

@keyframes rippleEffect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}


/* =========================================================
   LINKS
   ========================================================= */

a {
  transition: color 0.3s ease, transform 0.3s ease;
}


/* =========================================================
   FLOATING EFFECT
   ========================================================= */

.float-animation {
  animation: floating 4s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}


/* =========================================================
   IMAGE HOVER EFFECT
   ========================================================= */

img {
  transition: transform 0.6s ease;
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  position: relative;
}

footer a {
  transition: all 0.3s ease;
}

footer a:hover {
  transform: translateX(5px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .carousel-caption {
    bottom: 10%;
  }

  .carousel-caption h2 {
    font-size: 1.7rem;
  }

  .carousel-caption p {
    font-size: 0.85rem;
  }

  .industry-card:hover {
    transform: translateY(-6px);
  }

  #brands .row:last-child > div:hover {
    transform: translateY(-4px) scale(1.02);
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

}
.navbar-scrolled {
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
}
/* Header must stay above the carousel */
@media screen and (min-width: 992px){
header,
.navbar {
    position: relative;
    z-index: 1050;
}

/* Bootstrap dropdown */
.navbar .dropdown-menu {
    position: absolute;
    z-index: 9999 !important;
}

/* Keep carousel below header */
#carouselExampleCaptions {
    position: relative;
    z-index: 1;
}
}
```css
/* =========================================================
   ABOUT US PAGE - ANIMATIONS
   ========================================================= */


/* =========================================================
   1. BANNER
   ========================================================= */

#banner {
    position: relative;
    overflow: hidden;
}

#banner .banner-content {
    animation: bannerContent 1s ease forwards;
    opacity: 0;
    transform: translateY(40px);
}

#banner h1 {
    animation: bannerTitle 1.1s 0.15s ease forwards;
    opacity: 0;
    transform: scale(0.9);
}

@keyframes bannerContent {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bannerTitle {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================================
   2. SEARCH SECTION
   ========================================================= */

#searchSection {
    opacity: 0;
    transform: translateY(40px);
    animation: searchSectionReveal 0.9s 0.3s ease forwards;
}

#searchSection h2 {
    animation: searchHeading 0.8s 0.5s ease both;
}

#searchSection .search-box {
    animation: searchBoxReveal 0.8s 0.7s ease both;
}

@keyframes searchSectionReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes searchBoxReveal {
    from {
        opacity: 0;
        transform: scaleX(0.8);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

#searchSection input {
    transition: all 0.35s ease;
}

#searchSection input:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   3. ABOUT SECTION
   ========================================================= */

#aboutUs1 .col-lg-12 {
    opacity: 0;
    transform: translateY(60px);
}

#aboutUs1.animate-visible .col-lg-12 {
    animation: aboutSectionReveal 1s ease forwards;
}

@keyframes aboutSectionReveal {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* About image */

#aboutUs1 img {
    opacity: 0;
    transform: translateX(-70px);
}

#aboutUs1.animate-visible img {
    animation: aboutImageReveal 1s 0.2s ease forwards;
}

@keyframes aboutImageReveal {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* About heading */

#aboutUs1 h2 {
    opacity: 0;
    transform: translateX(50px);
}

#aboutUs1.animate-visible h2 {
    animation: aboutHeadingReveal 0.8s 0.35s ease forwards;
}

@keyframes aboutHeadingReveal {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* About paragraph */

#aboutUs1 p {
    opacity: 0;
    transform: translateY(30px);
}

#aboutUs1.animate-visible p {
    animation: aboutTextReveal 1s 0.55s ease forwards;
}

@keyframes aboutTextReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Image hover */

#aboutUs1 img {
    transition: transform 0.7s ease;
}

#aboutUs1 img:hover {
    transform: scale(1.03);
}


/* =========================================================
   4. FEATURES
   ========================================================= */

#features {
    overflow: hidden;
}

#features .feature-box {
    opacity: 0;
    transform: translateY(60px);
}

#features.animate-visible .feature-box {
    animation: featureReveal 0.8s ease forwards;
}

#features.animate-visible .feature-box:nth-child(1) {
    animation-delay: 0.1s;
}

#features.animate-visible .feature-box:nth-child(2) {
    animation-delay: 0.25s;
}

#features.animate-visible .feature-box:nth-child(3) {
    animation-delay: 0.4s;
}

#features.animate-visible .feature-box:nth-child(4) {
    animation-delay: 0.55s;
}

@keyframes featureReveal {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Feature hover */

#features .feature-box {
    transition: all 0.4s ease;
}

#features .feature-box:hover {
    transform: translateY(-10px);
}

#features .feature-box img {
    transition: all 0.5s ease;
}

#features .feature-box:hover img {
    transform: scale(1.08) rotate(2deg);
}


/* Feature title */

#features .feature-box h5 {
    transition: all 0.35s ease;
}

#features .feature-box:hover h5 {
    letter-spacing: 1px;
}


/* =========================================================
   5. TIMELINE
   ========================================================= */

#timeline-section {
    overflow: hidden;
}

#timeline-section .section-title {
    opacity: 0;
    transform: translateY(40px);
}

#timeline-section.animate-visible .section-title {
    animation: timelineTitle 0.9s ease forwards;
}

@keyframes timelineTitle {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Timeline items */

#timeline-section .timeline-item {
    opacity: 0;
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Left items */

#timeline-section .timeline-item.left {
    transform: translateX(-100px);
}


/* Right items */

#timeline-section .timeline-item.right {
    transform: translateX(100px);
}


/* Visible state */

#timeline-section.animate-visible .timeline-item {
    opacity: 1;
    transform: translateX(0);
}


/* Stagger timeline */

#timeline-section.animate-visible .timeline-item:nth-child(1) {
    transition-delay: 0.1s;
}

#timeline-section.animate-visible .timeline-item:nth-child(2) {
    transition-delay: 0.25s;
}

#timeline-section.animate-visible .timeline-item:nth-child(3) {
    transition-delay: 0.4s;
}

#timeline-section.animate-visible .timeline-item:nth-child(4) {
    transition-delay: 0.55s;
}

#timeline-section.animate-visible .timeline-item:nth-child(5) {
    transition-delay: 0.7s;
}

#timeline-section.animate-visible .timeline-item:nth-child(6) {
    transition-delay: 0.85s;
}

#timeline-section.animate-visible .timeline-item:nth-child(7) {
    transition-delay: 1s;
}

#timeline-section.animate-visible .timeline-item:nth-child(8) {
    transition-delay: 1.15s;
}

#timeline-section.animate-visible .timeline-item:nth-child(9) {
    transition-delay: 1.3s;
}


/* Timeline content hover */

#timeline-section .timeline-content {
    transition: all 0.4s ease;
}

#timeline-section .timeline-content:hover {
    transform: translateY(-7px);
}


/* Timeline year */

#timeline-section .timeline-content h4 {
    transition: all 0.35s ease;
}

#timeline-section .timeline-content:hover h4 {
    transform: scale(1.1);
}


/* Timeline arrows */

#timeline-section .timeline-content img {
    transition: transform 0.5s ease;
}

#timeline-section .timeline-content:hover img {
    transform: translateX(8px);
}


/* =========================================================
   6. INDUSTRY SECTION
   ========================================================= */

#industrysection {
    overflow: hidden;
}

#industrysection h2 {
    opacity: 0;
    transform: translateY(40px);
}

#industrysection.animate-visible h2 {
    animation: industryHeading 0.9s ease forwards;
}

@keyframes industryHeading {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


#industrysection > .container > p {
    opacity: 0;
    transform: translateY(25px);
}

#industrysection.animate-visible > .container > p {
    animation: industryText 0.8s 0.25s ease forwards;
}

@keyframes industryText {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Industry cards */

#industrysection .industry-card {
    opacity: 0;
    transform: translateY(70px);
}

#industrysection.animate-visible .industry-card {
    animation: industryCardReveal 0.8s ease forwards;
}

#industrysection.animate-visible .industry-card:nth-child(1) {
    animation-delay: 0.15s;
}

#industrysection.animate-visible .industry-card:nth-child(2) {
    animation-delay: 0.3s;
}

#industrysection.animate-visible .industry-card:nth-child(3) {
    animation-delay: 0.45s;
}

#industrysection.animate-visible .industry-card:nth-child(4) {
    animation-delay: 0.6s;
}

#industrysection.animate-visible .industry-card:nth-child(5) {
    animation-delay: 0.75s;
}

#industrysection.animate-visible .industry-card:nth-child(6) {
    animation-delay: 0.9s;
}

@keyframes industryCardReveal {
    from {
        opacity: 0;
        transform: translateY(70px) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Industry image */

#industrysection .industry-card img {
    transition: transform 0.7s ease;
}

#industrysection .industry-card:hover img {
    transform: scale(1.1);
}


/* Industry card hover */

#industrysection .industry-card {
    cursor: pointer;
    transition: all 0.4s ease;
}

#industrysection .industry-card:hover {
    transform: translateY(-10px);
}


/* Industry title */

#industrysection .industry-card h5 {
    transition: all 0.4s ease;
}

#industrysection .industry-card:hover h5 {
    letter-spacing: 2px;
    transform: translateY(-4px);
}


/* =========================================================
   7. GENERAL SECTION HEADING EFFECT
   ========================================================= */

section h2 {
    position: relative;
}

section h2::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 10px;
    transition: width 0.7s ease;
}

section.animate-visible h2::after {
    width: 60px;
}


/* =========================================================
   8. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #aboutUs1 img {
        transform: translateY(40px);
    }

    #aboutUs1.animate-visible img {
        animation-name: aboutImageMobile;
    }

    @keyframes aboutImageMobile {
        from {
            opacity: 0;
            transform: translateY(40px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #timeline-section .timeline-item.left,
    #timeline-section .timeline-item.right {
        transform: translateY(50px);
    }

    #timeline-section.animate-visible .timeline-item {
        transform: translateY(0);
    }

    #features .feature-box:hover {
        transform: translateY(-5px);
    }

    #industrysection .industry-card:hover {
        transform: translateY(-5px);
    }

}


/* =========================================================
   9. REDUCE MOTION FOR ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}
#timeline-section .timeline-item.timeline-visible {
    opacity: 1;
    transform: translateX(0);
}
/* =========================================================
   OVERVIEW PAGE ANIMATIONS
   ========================================================= */

/* ---------- Banner ---------- */

#banner {
    position: relative;
    overflow: hidden;
}

#banner .banner-content {
    opacity: 0;
    transform: translateY(40px);
    animation: overviewBanner 1s ease forwards;
}

#banner h1 {
    opacity: 0;
    transform: scale(0.9);
    animation: overviewBannerTitle 1s 0.2s ease forwards;
}

@keyframes overviewBanner {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes overviewBannerTitle {
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ---------- Breadcrumb ---------- */

#breadCrums {
    opacity: 0;
    transform: translateY(20px);
    animation: breadcrumbReveal 0.8s 0.5s ease forwards;
}

#breadCrums ul li {
    opacity: 0;
    transform: translateX(-15px);
}

#breadCrums ul li:nth-child(1) {
    animation: breadcrumbItem 0.5s 0.6s ease forwards;
}

#breadCrums ul li:nth-child(2) {
    animation: breadcrumbItem 0.5s 0.7s ease forwards;
}

#breadCrums ul li:nth-child(3) {
    animation: breadcrumbItem 0.5s 0.8s ease forwards;
}

#breadCrums ul li:nth-child(4) {
    animation: breadcrumbItem 0.5s 0.9s ease forwards;
}

#breadCrums ul li:nth-child(5) {
    animation: breadcrumbItem 0.5s 1s ease forwards;
}

@keyframes breadcrumbReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes breadcrumbItem {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ---------- Overview 1 ---------- */

#overView1 {
    overflow: hidden;
}

#overView1 h2 {
    opacity: 0;
    transform: translateY(40px);
}

#overView1.animate-visible .sciencecolor {
    animation: scienceReveal 0.9s ease forwards;
}

#overView1.animate-visible .artexcellence {
    animation: excellenceReveal 0.9s 0.25s ease forwards;
}

@keyframes scienceReveal {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes excellenceReveal {
    from {
        opacity: 0;
        transform: translateX(70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Highlight words */

#overView1 h2 span {
    display: inline-block;
    transition: all 0.4s ease;
}

#overView1 h2:hover span {
    transform: translateX(8px);
}


/* ---------- Overview 2 ---------- */

#overView2 {
    overflow: hidden;
}

#overView2 p {
    opacity: 0;
    transform: translateX(60px);
}

#overView2.animate-visible p {
    animation: overviewTextReveal 0.8s ease forwards;
}

#overView2.animate-visible p:nth-child(1) {
    animation-delay: 0.15s;
}

#overView2.animate-visible p:nth-child(2) {
    animation-delay: 0.35s;
}

#overView2.animate-visible p:nth-child(3) {
    animation-delay: 0.55s;
}

@keyframes overviewTextReveal {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Overview image */

#overView2 img {
    opacity: 0;
    transform: translateX(-80px) scale(0.9);
}

#overView2.animate-visible img {
    animation: overviewImageReveal 1s 0.2s ease forwards;
}

@keyframes overviewImageReveal {
    from {
        opacity: 0;
        transform: translateX(-80px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

#overView2 img {
    transition: transform 0.7s ease;
}

#overView2 img:hover {
    transform: scale(1.04);
}


/* ---------- Vision / Mission ---------- */

#overView3 {
    overflow: hidden;
}

#overView3 .col-lg-6 {
    opacity: 0;
    transform: translateY(70px);
}

#overView3.animate-visible .col-lg-6 {
    animation: visionMissionReveal 0.9s ease forwards;
}

#overView3.animate-visible .col-lg-6:nth-child(1) {
    animation-delay: 0.15s;
}

#overView3.animate-visible .col-lg-6:nth-child(2) {
    animation-delay: 0.4s;
}

@keyframes visionMissionReveal {
    from {
        opacity: 0;
        transform: translateY(70px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Vision / Mission images */

#overView3 img {
    transition: transform 0.6s ease;
}

#overView3 .col-lg-6:hover img {
    transform: translateY(-8px) scale(1.06);
}


/* Titles */

#overView3 h2 {
    transition: all 0.4s ease;
}

#overView3 .col-lg-6:hover h2 {
    transform: translateY(-4px);
    letter-spacing: 1px;
}


/* Paragraph */

#overView3 p {
    transition: all 0.4s ease;
}

#overView3 .col-lg-6:hover p {
    transform: translateY(-3px);
}


/* ---------- Search ---------- */

#searchSection {
    opacity: 0;
    transform: translateY(30px);
    animation: overviewSearch 0.8s 0.4s ease forwards;
}

@keyframes overviewSearch {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#searchSection input {
    transition: all 0.4s ease;
}

#searchSection input:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}


/* ---------- General scroll reveal ---------- */

.scroll-hidden {
    opacity: 0;
    transform: translateY(60px);
}

.scroll-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------- Mobile ---------- */

@media (max-width: 767px) {

    #overView1.animate-visible .sciencecolor,
    #overView1.animate-visible .artexcellence {
        animation-name: mobileHeadingReveal;
    }

    #overView2 img {
        transform: translateY(50px) scale(0.9);
    }

    #overView2.animate-visible img {
        animation-name: mobileImageReveal;
    }

    #overView2 p {
        transform: translateY(30px);
    }

    #overView2.animate-visible p {
        animation-name: mobileTextReveal;
    }

    @keyframes mobileHeadingReveal {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes mobileImageReveal {
        from {
            opacity: 0;
            transform: translateY(50px) scale(0.9);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes mobileTextReveal {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}


/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }

}
```css
/* =========================================================
   RESEARCH & INNOVATION PAGE ANIMATIONS
   ========================================================= */


/* =========================================================
   1. BANNER
   ========================================================= */

#banner {
    position: relative;
    overflow: hidden;
}

#banner .banner-content {
    opacity: 0;
    transform: translateY(45px);
    animation: riBannerContent 1s ease forwards;
}

#banner h1 {
    opacity: 0;
    transform: scale(0.9);
    animation: riBannerTitle 1s 0.2s ease forwards;
}

@keyframes riBannerContent {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes riBannerTitle {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================================
   2. BREADCRUMBS
   ========================================================= */

#breadCrums {
    opacity: 0;
    transform: translateY(20px);
    animation: riBreadcrumb 0.8s 0.4s ease forwards;
}

#breadCrums ul li {
    opacity: 0;
    transform: translateX(-15px);
}

#breadCrums ul li:nth-child(1) {
    animation: riBreadcrumbItem 0.5s 0.5s ease forwards;
}

#breadCrums ul li:nth-child(2) {
    animation: riBreadcrumbItem 0.5s 0.6s ease forwards;
}

#breadCrums ul li:nth-child(3) {
    animation: riBreadcrumbItem 0.5s 0.7s ease forwards;
}

#breadCrums ul li:nth-child(4) {
    animation: riBreadcrumbItem 0.5s 0.8s ease forwards;
}

#breadCrums ul li:nth-child(5) {
    animation: riBreadcrumbItem 0.5s 0.9s ease forwards;
}

@keyframes riBreadcrumb {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes riBreadcrumbItem {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   3. RESEARCH INNOVATION HERO TEXT
   ========================================================= */

#researchinnovation1 {
    overflow: hidden;
}

#researchinnovation1 h3,
#researchinnovation1 h2 {
    opacity: 0;
    position: relative;
}


/* Engineering */

#researchinnovation1 .engineering {
    transform: translateX(-100px);
}


/* Innovation */

#researchinnovation1 .innovation {
    transform: translateX(100px) scale(0.9);
}


/* Empowering */

#researchinnovation1 .empowering {
    transform: translateX(-100px);
}


/* Industries */

#researchinnovation1 .industries {
    transform: translateX(100px);
}


/* Trigger */

#researchinnovation1.animate-visible .engineering {
    animation: riLeftReveal 0.9s ease forwards;
}

#researchinnovation1.animate-visible .innovation {
    animation: riInnovationReveal 1s 0.2s ease forwards;
}

#researchinnovation1.animate-visible .empowering {
    animation: riLeftReveal 0.9s 0.4s ease forwards;
}

#researchinnovation1.animate-visible .industries {
    animation: riRightReveal 0.9s 0.6s ease forwards;
}


@keyframes riLeftReveal {

    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes riRightReveal {

    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes riInnovationReveal {

    from {
        opacity: 0;
        transform: translateX(100px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

}


/* Innovation hover */

#researchinnovation1 .innovation {
    transition: all 0.4s ease;
}

#researchinnovation1 .innovation:hover {
    transform: scale(1.04);
}


/* =========================================================
   4. RESEARCH INTRODUCTION
   ========================================================= */

#researchinnovation2 {
    overflow: hidden;
}


/* Image */

#researchinnovation2 img {
    opacity: 0;
    transform: translateX(-80px) scale(0.9);
}

#researchinnovation2.animate-visible img {
    animation: riImageReveal 1s 0.2s ease forwards;
}

@keyframes riImageReveal {

    from {
        opacity: 0;
        transform: translateX(-80px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

}


/* Text */

#researchinnovation2 p {
    opacity: 0;
    transform: translateX(70px);
}

#researchinnovation2.animate-visible p {
    animation: riParagraphReveal 0.8s ease forwards;
}

#researchinnovation2.animate-visible p:nth-child(1) {
    animation-delay: 0.25s;
}

#researchinnovation2.animate-visible p:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes riParagraphReveal {

    from {
        opacity: 0;
        transform: translateX(70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* Image hover */

#researchinnovation2 img {
    transition: transform 0.7s ease;
}

#researchinnovation2 img:hover {
    transform: scale(1.05);
}


/* =========================================================
   5. INNOVATION PERFORMANCE HEADING
   ========================================================= */

#researchinnovation3 {
    overflow: hidden;
}

#researchinnovation3 h2 {
    opacity: 0;
    transform: translateY(50px);
}

#researchinnovation3.animate-visible h2 {
    animation: riSectionHeading 0.9s ease forwards;
}

@keyframes riSectionHeading {

    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   6. THREE INNOVATION CARDS
   ========================================================= */

#researchinnovation3 .row:nth-child(2) .col-lg-4 {
    opacity: 0;
    transform: translateY(70px);
}

#researchinnovation3.animate-visible .row:nth-child(2) .col-lg-4 {
    animation: riCardReveal 0.8s ease forwards;
}


/* Stagger */

#researchinnovation3.animate-visible .row:nth-child(2) .col-lg-4:nth-child(1) {
    animation-delay: 0.15s;
}

#researchinnovation3.animate-visible .row:nth-child(2) .col-lg-4:nth-child(2) {
    animation-delay: 0.35s;
}

#researchinnovation3.animate-visible .row:nth-child(2) .col-lg-4:nth-child(3) {
    animation-delay: 0.55s;
}


@keyframes riCardReveal {

    from {
        opacity: 0;
        transform: translateY(70px) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   7. INNOVATION IMAGES
   ========================================================= */

#researchinnovation3 .col-lg-4 img {
    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}

#researchinnovation3 .col-lg-4:hover img {
    transform: translateY(-10px) scale(1.06);
}


/* =========================================================
   8. INNOVATION PARAGRAPHS
   ========================================================= */

#researchinnovation3 .col-lg-4 p {
    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
}

#researchinnovation3 .col-lg-4:hover p {
    transform: translateY(-5px);
}


/* =========================================================
   9. CARD HOVER
   ========================================================= */

#researchinnovation3 .col-lg-4 {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

#researchinnovation3 .col-lg-4:hover {
    transform: translateY(-8px);
}


/* =========================================================
   10. SEARCH
   ========================================================= */

#searchSection {
    opacity: 0;
    transform: translateY(30px);
    animation: riSearchReveal 0.8s 0.35s ease forwards;
}

@keyframes riSearchReveal {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

#searchSection input {
    transition: all 0.4s ease;
}

#searchSection input:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #researchinnovation1 .engineering,
    #researchinnovation1 .innovation,
    #researchinnovation1 .empowering,
    #researchinnovation1 .industries {
        transform: translateY(35px);
    }

    #researchinnovation1.animate-visible .engineering,
    #researchinnovation1.animate-visible .innovation,
    #researchinnovation1.animate-visible .empowering,
    #researchinnovation1.animate-visible .industries {
        animation-name: riMobileHeading;
    }

    #researchinnovation2 img {
        transform: translateY(50px) scale(0.9);
    }

    #researchinnovation2.animate-visible img {
        animation-name: riMobileImage;
    }

    #researchinnovation2 p {
        transform: translateY(30px);
    }

    #researchinnovation2.animate-visible p {
        animation-name: riMobileText;
    }


    @keyframes riMobileHeading {

        from {
            opacity: 0;
            transform: translateY(35px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }


    @keyframes riMobileImage {

        from {
            opacity: 0;
            transform: translateY(50px) scale(0.9);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

    }


    @keyframes riMobileText {

        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }

}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }

}
/* =========================================================
   TEAM PAGE ANIMATIONS
   ========================================================= */

/* ---------- Banner ---------- */

#banner.aboutusBanner .banner-content h1 {
    opacity: 0;
    transform: translateY(35px);
    animation: teamBannerTitle 1s ease-out 0.25s forwards;
}

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


/* ---------- Breadcrumb ---------- */

#breadCrums ul li {
    opacity: 0;
    transform: translateX(-15px);
    animation: teamBreadcrumb 0.5s ease-out forwards;
}

#breadCrums ul li:nth-child(1) {
    animation-delay: 0.15s;
}

#breadCrums ul li:nth-child(2) {
    animation-delay: 0.25s;
}

#breadCrums ul li:nth-child(3) {
    animation-delay: 0.35s;
}

#breadCrums ul li:nth-child(4) {
    animation-delay: 0.45s;
}

#breadCrums ul li:nth-child(5) {
    animation-delay: 0.55s;
}

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


/* =========================================================
   TEAM 1 - LEADERSHIP STATEMENT
   ========================================================= */

#team1 {
    overflow: hidden;
}

#team1 .leadership,
#team1 .inspires,
#team1 .visons,
#team1 .endures {
    opacity: 0;
    visibility: hidden;
}


/* Leadership - left */

#team1 .leadership {
    transform: translateX(-100px);
}


/* Inspires - right */

#team1 .inspires {
    transform: translateX(100px) scale(0.95);
}


/* Vision - left */

#team1 .visons {
    transform: translateX(-100px);
}


/* Endures - right */

#team1 .endures {
    transform: translateX(100px) scale(0.95);
}


/* When section becomes visible */

#team1.animate-visible .leadership {
    animation: teamLeftReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.1s forwards;
}

#team1.animate-visible .inspires {
    animation: teamRightReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.3s forwards;
}

#team1.animate-visible .visons {
    animation: teamLeftReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.5s forwards;
}

#team1.animate-visible .endures {
    animation: teamRightReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.7s forwards;
}

@keyframes teamLeftReveal {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

@keyframes teamRightReveal {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translateX(100px) scale(0.95);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(0) scale(1);
    }
}


/* =========================================================
   TEAM 2 - INTRODUCTION
   ========================================================= */

#team2 {
    overflow: hidden;
}

#team2 p {
    opacity: 0;
    transform: translateY(45px);
}

#team2.animate-visible p {
    animation: teamIntroReveal 1s cubic-bezier(.22, 1, .36, 1) 0.15s forwards;
}

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


/* =========================================================
   TEAM 3 - DIRECTORS
   ========================================================= */

#team3 {
    overflow: hidden;
}


/* Initial state */

#team3 .col-lg-4 {
    opacity: 0;
    transform: translateY(70px);
}


/* Staggered reveal */

#team3.animate-visible .col-lg-4:nth-child(1) {
    animation: teamMemberReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.1s forwards;
}

#team3.animate-visible .col-lg-4:nth-child(2) {
    animation: teamMemberReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.3s forwards;
}

#team3.animate-visible .col-lg-4:nth-child(3) {
    animation: teamMemberReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.5s forwards;
}

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


/* ---------- Member Images ---------- */

#team3 img {
    transition:
        transform 0.7s cubic-bezier(.22, 1, .36, 1),
        filter 0.7s ease;
}

#team3 .col-lg-4:hover img {
    transform: translateY(-8px) scale(1.04);
    filter: brightness(1.03);
}


/* ---------- Member Names ---------- */

#team3 h3 {
    transition:
        transform 0.4s ease,
        letter-spacing 0.4s ease;
}

#team3 .col-lg-4:hover h3 {
    transform: translateY(-3px);
    letter-spacing: 0.5px;
}


/* ---------- Member Description ---------- */

#team3 p {
    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
}

#team3 .col-lg-4:hover p {
    transform: translateY(-2px);
}


/* =========================================================
   SEARCH SECTION
   ========================================================= */

#searchSection {
    opacity: 0;
    transform: translateY(30px);
    animation: teamSearchReveal 0.8s ease-out 0.4s forwards;
}

#searchSection .search-box {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

#searchSection .search-box:focus-within {
    transform: translateY(-3px);
}

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


/* =========================================================
   SECTION HEADING HOVER EFFECT
   ========================================================= */

#team1 h2 {
    transition:
        letter-spacing 0.5s ease,
        transform 0.5s ease;
}

#team1 h2:hover {
    letter-spacing: 1px;
    transform: translateX(5px);
}


/* =========================================================
   SUBTLE IMAGE FLOAT
   ========================================================= */

#team3.animate-visible img {
    animation: teamImageFloat 4s ease-in-out 1.5s infinite;
}

@keyframes teamImageFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #team1 .leadership,
    #team1 .inspires,
    #team1 .visons,
    #team1 .endures {
        transform: translateY(35px);
    }

    #team1.animate-visible .leadership,
    #team1.animate-visible .inspires,
    #team1.animate-visible .visons,
    #team1.animate-visible .endures {
        animation: teamMobileReveal 0.7s ease-out forwards;
    }

    #team1.animate-visible .leadership {
        animation-delay: 0.1s;
    }

    #team1.animate-visible .inspires {
        animation-delay: 0.25s;
    }

    #team1.animate-visible .visons {
        animation-delay: 0.4s;
    }

    #team1.animate-visible .endures {
        animation-delay: 0.55s;
    }

    #team3 .col-lg-4 {
        transform: translateY(45px);
    }

    #team3.animate-visible .col-lg-4:nth-child(1) {
        animation-delay: 0.1s;
    }

    #team3.animate-visible .col-lg-4:nth-child(2) {
        animation-delay: 0.25s;
    }

    #team3.animate-visible .col-lg-4:nth-child(3) {
        animation-delay: 0.4s;
    }

    @keyframes teamMobileReveal {
        from {
            opacity: 0;
            visibility: hidden;
            transform: translateY(35px);
        }

        to {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #banner.aboutusBanner .banner-content h1,
    #breadCrums ul li,
    #searchSection,
    #team1 .leadership,
    #team1 .inspires,
    #team1 .visons,
    #team1 .endures,
    #team2 p,
    #team3 .col-lg-4 {
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    #team3 img,
    #team3 h3,
    #team3 p,
    #team1 h2,
    #searchSection .search-box {
        transition: none !important;
        animation: none !important;
    }
}
/* =========================================================
   COATINGS / PRODUCTS PAGE ANIMATIONS
   ========================================================= */

/* ---------- Banner ---------- */

#banner.coatingBanner .banner-content h1 {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    animation: coatingBannerTitle 1s cubic-bezier(.22, 1, .36, 1) 0.2s forwards;
}

@keyframes coatingBannerTitle {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

#breadCrums ul li {
    opacity: 0;
    transform: translateX(-15px);
    animation: coatingBreadcrumb 0.5s ease-out forwards;
}

#breadCrums ul li:nth-child(1) {
    animation-delay: 0.15s;
}

#breadCrums ul li:nth-child(2) {
    animation-delay: 0.25s;
}

#breadCrums ul li:nth-child(3) {
    animation-delay: 0.35s;
}

#breadCrums ul li:nth-child(4) {
    animation-delay: 0.45s;
}

#breadCrums ul li:nth-child(5) {
    animation-delay: 0.55s;
}

@keyframes coatingBreadcrumb {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   SEARCH
   ========================================================= */

#searchSection {
    opacity: 0;
    transform: translateY(30px);
    animation: coatingSearchReveal 0.8s ease-out 0.35s forwards;
}

#searchSection .search-box {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

#searchSection .search-box:focus-within {
    transform: translateY(-3px);
}

@keyframes coatingSearchReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   PRODUCTS 1
   ========================================================= */

#products1 {
    overflow: hidden;
}


/* ---------- Category Buttons ---------- */

#products1 .text-center:first-child a {
    display: inline-block;
    opacity: 0;
    transform: translateY(25px);
}

#products1.animate-visible .text-center:first-child a {
    animation: coatingButtonReveal 0.65s cubic-bezier(.22, 1, .36, 1) forwards;
}

#products1.animate-visible .text-center:first-child a:nth-child(1) {
    animation-delay: 0.05s;
}

#products1.animate-visible .text-center:first-child a:nth-child(2) {
    animation-delay: 0.15s;
}

#products1.animate-visible .text-center:first-child a:nth-child(3) {
    animation-delay: 0.25s;
}

#products1.animate-visible .text-center:first-child a:nth-child(4) {
    animation-delay: 0.35s;
}

#products1.animate-visible .text-center:first-child a:nth-child(5) {
    animation-delay: 0.45s;
}

@keyframes coatingButtonReveal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Button hover */

#products1 .btn {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

#products1 .btn:hover {
    transform: translateY(-4px);
}


/* ---------- Heading ---------- */

#products1 .text-center + .row {
    opacity: 0;
    transform: translateY(40px);
}

#products1.animate-visible .text-center + .row {
    animation: coatingIntroReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.6s forwards;
}

@keyframes coatingIntroReveal {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#products1 h3 {
    transition:
        letter-spacing 0.5s ease,
        transform 0.5s ease;
}

#products1 h3:hover {
    letter-spacing: 1px;
    transform: translateX(5px);
}


/* =========================================================
   PRODUCTS 2 - APPLICATION CARDS
   ========================================================= */

#products2 {
    overflow: hidden;
}

#products2 .col-lg-4 {
    opacity: 0;
    transform: translateY(65px) scale(0.96);
}


/* Stagger cards */

#products2.animate-visible .col-lg-4:nth-child(1) {
    animation: coatingCardReveal 0.8s cubic-bezier(.22, 1, .36, 1) 0.05s forwards;
}

#products2.animate-visible .col-lg-4:nth-child(2) {
    animation: coatingCardReveal 0.8s cubic-bezier(.22, 1, .36, 1) 0.15s forwards;
}

#products2.animate-visible .col-lg-4:nth-child(3) {
    animation: coatingCardReveal 0.8s cubic-bezier(.22, 1, .36, 1) 0.25s forwards;
}

#products2.animate-visible .col-lg-4:nth-child(4) {
    animation: coatingCardReveal 0.8s cubic-bezier(.22, 1, .36, 1) 0.35s forwards;
}

#products2.animate-visible .col-lg-4:nth-child(5) {
    animation: coatingCardReveal 0.8s cubic-bezier(.22, 1, .36, 1) 0.45s forwards;
}

#products2.animate-visible .col-lg-4:nth-child(6) {
    animation: coatingCardReveal 0.8s cubic-bezier(.22, 1, .36, 1) 0.55s forwards;
}

#products2.animate-visible .col-lg-4:nth-child(7) {
    animation: coatingCardReveal 0.8s cubic-bezier(.22, 1, .36, 1) 0.65s forwards;
}

@keyframes coatingCardReveal {
    from {
        opacity: 0;
        transform: translateY(65px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ---------- Application Images ---------- */

#products2 img {
    transition:
        transform 0.7s cubic-bezier(.22, 1, .36, 1),
        filter 0.5s ease;
}

#products2 .col-lg-4:hover img {
    transform: scale(1.06);
    filter: brightness(1.05);
}


/* ---------- Application Titles ---------- */

#products2 h4 {
    transition:
        transform 0.4s ease,
        letter-spacing 0.4s ease;
}

#products2 .col-lg-4:hover h4 {
    transform: translateY(-4px);
    letter-spacing: 0.5px;
}


/* =========================================================
   PRODUCTS 3 - PRODUCT SERIES
   ========================================================= */

#products3 {
    overflow: hidden;
}


/* ---------- Series Rows ---------- */

#products3 .enqRow {
    opacity: 0;
    transform: translateX(-60px);
}

#products3.animate-visible .enqRow {
    animation: coatingSeriesReveal 0.8s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes coatingSeriesReveal {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ---------- Series Heading ---------- */

#products3 .enqRow h2 {
    transition:
        transform 0.4s ease,
        letter-spacing 0.4s ease;
}

#products3 .enqRow:hover h2 {
    transform: translateX(5px);
    letter-spacing: 0.5px;
}


/* ---------- Enquire Button ---------- */

#products3 .enqRow .btn {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

#products3 .enqRow .btn:hover {
    transform: translateY(-4px);
}


/* ---------- Product Rows ---------- */

#products3 .productRow {
    opacity: 0;
    transform: translateY(35px);
}

#products3.animate-visible .productRow {
    animation: coatingProductRowReveal 0.8s ease-out forwards;
}

@keyframes coatingProductRowReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------- Individual Products ---------- */

#products3 .productRow > div {
    opacity: 0;
    transform: translateY(20px);
}

#products3.animate-visible .productRow > div {
    animation: coatingProductReveal 0.55s ease-out forwards;
}

#products3.animate-visible .productRow > div:nth-child(1) {
    animation-delay: 0.1s;
}

#products3.animate-visible .productRow > div:nth-child(2) {
    animation-delay: 0.16s;
}

#products3.animate-visible .productRow > div:nth-child(3) {
    animation-delay: 0.22s;
}

#products3.animate-visible .productRow > div:nth-child(4) {
    animation-delay: 0.28s;
}

#products3.animate-visible .productRow > div:nth-child(5) {
    animation-delay: 0.34s;
}

#products3.animate-visible .productRow > div:nth-child(6) {
    animation-delay: 0.40s;
}

#products3.animate-visible .productRow > div:nth-child(7) {
    animation-delay: 0.46s;
}

#products3.animate-visible .productRow > div:nth-child(8) {
    animation-delay: 0.52s;
}

@keyframes coatingProductReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------- Product Color Swatches ---------- */

#products3 .productRow span {
    display: inline-block;
        width: 38px;
    height: 38px;
    border-radius: 50%;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

#products3 .productRow td:first-child:hover span {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}


/* ---------- Product Hover ---------- */

#products3 .productRow > div {
    transition:
        transform 0.35s ease;
}

#products3 .productRow > div:hover {
    transform: translateY(-3px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #products1 .text-center:first-child a {
        margin-bottom: 8px;
    }

    #products2 .col-lg-4 {
        transform: translateY(40px) scale(0.98);
    }

    #products2.animate-visible .col-lg-4:nth-child(1) {
        animation-delay: 0.05s;
    }

    #products2.animate-visible .col-lg-4:nth-child(2) {
        animation-delay: 0.15s;
    }

    #products2.animate-visible .col-lg-4:nth-child(3) {
        animation-delay: 0.25s;
    }

    #products2.animate-visible .col-lg-4:nth-child(4) {
        animation-delay: 0.35s;
    }

    #products2.animate-visible .col-lg-4:nth-child(5) {
        animation-delay: 0.45s;
    }

    #products2.animate-visible .col-lg-4:nth-child(6) {
        animation-delay: 0.55s;
    }

    #products2.animate-visible .col-lg-4:nth-child(7) {
        animation-delay: 0.65s;
    }

    #products3 .enqRow {
        transform: translateY(35px);
    }

    #products3 .enqRow .btn {
        margin-top: 10px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #banner.coatingBanner .banner-content h1,
    #breadCrums ul li,
    #searchSection,
    #products1 .text-center:first-child a,
    #products1 .text-center + .row,
    #products2 .col-lg-4,
    #products3 .enqRow,
    #products3 .productRow,
    #products3 .productRow > div {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #products2 img,
    #products2 h4,
    #products1 .btn,
    #products3 .enqRow .btn,
    #products3 .enqRow h2,
    #products3 .productRow span {
        transition: none !important;
    }
}
section.animate-visible h2::after{
  display: none;
}
/* =========================================================
   CERTIFICATION PAGE ANIMATIONS
   ========================================================= */

/* ---------- Banner ---------- */

#banner.certificationBanner .banner-content h1 {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    animation: certificationBannerTitle 1s cubic-bezier(.22, 1, .36, 1) 0.2s forwards;
}

@keyframes certificationBannerTitle {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   SEARCH
   ========================================================= */

#searchSection {
    opacity: 0;
    transform: translateY(30px);
    animation: certificationSearchReveal 0.8s ease-out 0.35s forwards;
}

#searchSection .search-box {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

#searchSection .search-box:focus-within {
    transform: translateY(-3px);
}

@keyframes certificationSearchReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   CERTIFICATION 1 - INTRO
   ========================================================= */

#certification1 {
    overflow: hidden;
}

#certification1 h2 {
    opacity: 0;
    transform: translateY(45px);
}

#certification1 p {
    opacity: 0;
    transform: translateY(35px);
}

#certification1.animate-visible h2 {
    animation: certificationHeadingReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.1s forwards;
}

#certification1.animate-visible p {
    animation: certificationTextReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.3s forwards;
}

@keyframes certificationHeadingReveal {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes certificationTextReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Heading hover */

#certification1 h2 {
    transition:
        letter-spacing 0.5s ease,
        transform 0.5s ease;
}

#certification1 h2:hover {
    letter-spacing: 0.5px;
    transform: translateX(4px);
}


/* =========================================================
   CERTIFICATION 2
   ========================================================= */

#certification2 {
    overflow: hidden;
}


/* ---------- Initial state ---------- */

#certification2 .row {
    opacity: 0;
}


/* First and third certifications */

#certification2 .row:nth-child(odd) {
    transform: translateX(-80px);
}


/* Second and fourth certifications */

#certification2 .row:nth-child(even) {
    transform: translateX(80px);
}


/* ---------- Reveal ---------- */

#certification2.animate-visible .row:nth-child(1) {
    animation: certificationLeftReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.1s forwards;
}

#certification2.animate-visible .row:nth-child(2) {
    animation: certificationRightReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.3s forwards;
}

#certification2.animate-visible .row:nth-child(3) {
    animation: certificationLeftReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.5s forwards;
}

#certification2.animate-visible .row:nth-child(4) {
    animation: certificationRightReveal 0.9s cubic-bezier(.22, 1, .36, 1) 0.7s forwards;
}


@keyframes certificationLeftReveal {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes certificationRightReveal {
    from {
        opacity: 0;
        transform: translateX(80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   CERTIFICATION LOGOS
   ========================================================= */

#certification2 img {
    transition:
        transform 0.6s cubic-bezier(.22, 1, .36, 1),
        filter 0.5s ease;
}


/* Logo hover */

#certification2 .col-lg-3:hover img {
    transform: scale(1.08) translateY(-5px);
    filter: brightness(1.04);
}


/* Subtle floating effect after reveal */

#certification2.animate-visible .row:nth-child(1) img {
    animation: certificationLogoFloat 4s ease-in-out 1.2s infinite;
}

#certification2.animate-visible .row:nth-child(2) img {
    animation: certificationLogoFloat 4s ease-in-out 1.4s infinite;
}

#certification2.animate-visible .row:nth-child(3) img {
    animation: certificationLogoFloat 4s ease-in-out 1.6s infinite;
}

#certification2.animate-visible .row:nth-child(4) img {
    animation: certificationLogoFloat 4s ease-in-out 1.8s infinite;
}

@keyframes certificationLogoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}


/* =========================================================
   CERTIFICATION TEXT
   ========================================================= */

#certification2 h3 {
    transition:
        transform 0.4s ease,
        letter-spacing 0.4s ease;
}

#certification2 .row:hover h3 {
    transform: translateX(4px);
    letter-spacing: 0.4px;
}

#certification2 p {
    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
}

#certification2 .row:hover p {
    transform: translateY(-2px);
}


/* =========================================================
   ROW HOVER
   ========================================================= */

#certification2 .row {
    transition:
        background-color 0.4s ease;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #certification2 .row:nth-child(odd),
    #certification2 .row:nth-child(even) {
        transform: translateY(45px);
    }

    #certification2.animate-visible .row:nth-child(1),
    #certification2.animate-visible .row:nth-child(2),
    #certification2.animate-visible .row:nth-child(3),
    #certification2.animate-visible .row:nth-child(4) {
        animation: certificationMobileReveal 0.8s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    #certification2.animate-visible .row:nth-child(1) {
        animation-delay: 0.1s;
    }

    #certification2.animate-visible .row:nth-child(2) {
        animation-delay: 0.3s;
    }

    #certification2.animate-visible .row:nth-child(3) {
        animation-delay: 0.5s;
    }

    #certification2.animate-visible .row:nth-child(4) {
        animation-delay: 0.7s;
    }

    @keyframes certificationMobileReveal {
        from {
            opacity: 0;
            transform: translateY(45px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #banner.certificationBanner .banner-content h1,
    #searchSection,
    #certification1 h2,
    #certification1 p,
    #certification2 .row {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #certification2 img,
    #certification2 h3,
    #certification2 p,
    #certification1 h2,
    #searchSection .search-box {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   SUSTAINABILITY PAGE ANIMATIONS
   ========================================================= */

/* ---------- Banner ---------- */

#banner.sustainabiltyBanner .banner-content h1 {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    animation: sustainabilityBannerTitle 1s cubic-bezier(.22, 1, .36, 1) 0.2s forwards;
}

@keyframes sustainabilityBannerTitle {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   SEARCH
   ========================================================= */

#searchSection {
    opacity: 0;
    transform: translateY(30px);
    animation: sustainabilitySearchReveal 0.8s ease-out 0.35s forwards;
}

#searchSection .search-box {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

#searchSection .search-box:focus-within {
    transform: translateY(-3px);
}

@keyframes sustainabilitySearchReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   UNDER CONSTRUCTION
   ========================================================= */

#underconstruction {
    overflow: hidden;
}

#underconstruction img {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
}


/* Reveal */

#underconstruction.animate-visible img {
    animation:
        sustainabilityImageReveal 1s cubic-bezier(.22, 1, .36, 1) 0.1s forwards,
        sustainabilityFloat 4s ease-in-out 1.2s infinite;
}


@keyframes sustainabilityImageReveal {

    from {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   FLOATING EFFECT
   ========================================================= */

@keyframes sustainabilityFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


/* =========================================================
   HOVER
   ========================================================= */

#underconstruction img {
    transition:
        transform 0.6s cubic-bezier(.22, 1, .36, 1),
        filter 0.5s ease;
}

#underconstruction img:hover {
    transform: scale(1.03);
    filter: brightness(1.03);
}


/* =========================================================
   CONTAINER SUBTLE REVEAL
   ========================================================= */

#underconstruction .container {
    transition: transform 0.5s ease;
}

#underconstruction:hover .container {
    transform: translateY(-3px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #underconstruction img {
        transform: translateY(40px) scale(0.94);
    }

    #underconstruction.animate-visible img {
        animation:
            sustainabilityImageRevealMobile 0.9s ease-out 0.1s forwards,
            sustainabilityFloatMobile 4s ease-in-out 1.1s infinite;
    }

    @keyframes sustainabilityImageRevealMobile {

        from {
            opacity: 0;
            transform: translateY(40px) scale(0.94);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

    }

    @keyframes sustainabilityFloatMobile {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-6px);
        }

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #banner.sustainabiltyBanner .banner-content h1,
    #searchSection,
    #underconstruction img {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #underconstruction .container,
    #underconstruction img,
    #searchSection .search-box {
        animation: none !important;
        transition: none !important;
    }

}
/* =========================================================
   CONTACT PAGE ANIMATIONS
   ========================================================= */

/* ---------- Banner ---------- */

#banner.contactBanner .banner-content h1 {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    animation: contactBannerTitle 1s cubic-bezier(.22, 1, .36, 1) 0.2s forwards;
}

@keyframes contactBannerTitle {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   CONTACT SECTION
   ========================================================= */

#contact1 {
    overflow: hidden;
}


/* ---------- Map ---------- */

#contact1 .col-lg-6:first-child {
    opacity: 0;
    transform: translateX(-80px);
}


/* ---------- Contact Information ---------- */

#contact1 .col-lg-6:last-child {
    opacity: 0;
    transform: translateX(80px);
}


/* Reveal */

#contact1.animate-visible .col-lg-6:first-child {
    animation: contactMapReveal 1s cubic-bezier(.22, 1, .36, 1) 0.1s forwards;
}

#contact1.animate-visible .col-lg-6:last-child {
    animation: contactInfoReveal 1s cubic-bezier(.22, 1, .36, 1) 0.3s forwards;
}


@keyframes contactMapReveal {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes contactInfoReveal {
    from {
        opacity: 0;
        transform: translateX(80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   MAP
   ========================================================= */

#contact1 iframe {
    opacity: 0;
    transform: scale(0.94);
    transition:
        transform 0.6s cubic-bezier(.22, 1, .36, 1),
        filter 0.5s ease;
}

#contact1.animate-visible iframe {
    animation: contactMapZoom 1s ease-out 0.2s forwards;
}

@keyframes contactMapZoom {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#contact1 iframe:hover {
    transform: scale(1.01);
}


/* =========================================================
   CONTACT HEADING
   ========================================================= */

#contact1 h2 {
    opacity: 0;
    transform: translateY(25px);
}

#contact1.animate-visible h2 {
    animation: contactHeadingReveal 0.8s cubic-bezier(.22, 1, .36, 1) 0.5s forwards;
}

@keyframes contactHeadingReveal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

#contact1 p {
    opacity: 0;
    transform: translateY(20px);
}

#contact1.animate-visible p:nth-of-type(1) {
    animation: contactDetailReveal 0.7s ease-out 0.65s forwards;
}

#contact1.animate-visible p:nth-of-type(2) {
    animation: contactDetailReveal 0.7s ease-out 0.8s forwards;
}

#contact1.animate-visible p:nth-of-type(3) {
    animation: contactDetailReveal 0.7s ease-out 0.95s forwards;
}

@keyframes contactDetailReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   CONTACT ICONS
   ========================================================= */

#contact1 p i {
    transition:
        transform 0.35s ease,
        scale 0.35s ease;
}

#contact1 p:hover i {
    transform: scale(1.15) translateY(-2px);
}


/* =========================================================
   PHONE / EMAIL LINKS
   ========================================================= */

#contact1 a {
    position: relative;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

#contact1 a:hover {
    opacity: 0.75;
}


/* =========================================================
   CONTACT INFO HOVER
   ========================================================= */

#contact1 .col-lg-6:last-child p {
    transition:
        transform 0.35s ease;
}

#contact1 .col-lg-6:last-child p:hover {
    transform: translateX(4px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #contact1 .col-lg-6:first-child,
    #contact1 .col-lg-6:last-child {
        transform: translateY(45px);
    }

    #contact1.animate-visible .col-lg-6:first-child,
    #contact1.animate-visible .col-lg-6:last-child {
        animation: contactMobileReveal 0.9s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    #contact1.animate-visible .col-lg-6:first-child {
        animation-delay: 0.1s;
    }

    #contact1.animate-visible .col-lg-6:last-child {
        animation-delay: 0.35s;
    }

    #contact1 iframe {
        transform: scale(0.96);
    }

    #contact1 iframe {
        height: 350px;
    }

    @keyframes contactMobileReveal {
        from {
            opacity: 0;
            transform: translateY(45px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #banner.contactBanner .banner-content h1,
    #contact1 .col-lg-6:first-child,
    #contact1 .col-lg-6:last-child,
    #contact1 iframe,
    #contact1 h2,
    #contact1 p {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #contact1 p i,
    #contact1 a,
    #contact1 .col-lg-6:last-child p,
    #contact1 iframe {
        transition: none !important;
    }
}