/* ========================
        ABOUT US 
======================== */
/* section 1 */

 /* ===== REVEAL ANIMATION ===== */
  .reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .reveal-item.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Stagger delays */
  #heading {
    transition-delay: 0.2s;
  }
  
  #breadcrumb {
    transition-delay: 0.4s;
  }




/* section 2 */

    /* ============================================================
           WELCOME ANIMATIONS
        ============================================================ */
    
    /* ===== Left Slide ===== */
    .slide-from-left {
        opacity: 0;
        transform: translateX(-50px) scale(0.95);
        transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .slide-from-left.active {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    
    /* ===== Right Slide ===== */
    .slide-from-right {
        opacity: 0;
        transform: translateX(50px) scale(0.95);
        transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .slide-from-right.active {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    
    /* ===== Fade Items ===== */
    .fade-item {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-from-right.active .fade-item {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* ===== Stagger Delays ===== */
    #list .mb-4, #list .mb-6 { transition-delay: 0.1s; }
    #list .mb-4:nth-child(2), #list .mb-6:nth-child(2) { transition-delay: 0.2s; }
    #list .mb-4:nth-child(3), #list .mb-6:nth-child(3) { transition-delay: 0.3s; }
    #list div:last-child { transition-delay: 0.4s; }
    #contact { transition-delay: 0.5s; }
    
    /* ============================================================
           RESPONSIVE: IMAGE POSITIONING
        ============================================================ */
    
    /* Small Mobile (320px - 480px) */
    @media (max-width: 480px) {
        .slide-from-left {
            transform: translateY(30px) scale(0.95);
        }
        .slide-from-left.active {
            transform: translateY(0) scale(1);
        }
        .slide-from-right {
            transform: translateY(30px) scale(0.95);
        }
        .slide-from-right.active {
            transform: translateY(0) scale(1);
        }
        
        /* Image positioning for very small screens */
        .slide-from-left img:first-child {
            left: 0 !important;
            top: 0 !important;
            width: 140px !important;
            height: 190px !important;
        }
        .slide-from-left img:last-child {
            right: 0 !important;
            bottom: 0 !important;
            width: 120px !important;
            height: 170px !important;
        }
    }
    
    /* Mobile (481px - 768px) */
    @media (max-width: 768px) {
        .slide-from-left img:first-child {
            left: 0 !important;
            top: 0 !important;
        }
        .slide-from-left img:last-child {
            right: 0 !important;
            bottom: 0 !important;
        }
    }
    
    /* Tablet (769px - 1024px) */
    @media (min-width: 769px) and (max-width: 1024px) {
        .slide-from-left img:first-child {
            left: 10px !important;
            top: 10px !important;
        }
        .slide-from-left img:last-child {
            right: 10px !important;
            bottom: 10px !important;
        }
    }

  /* section 3 */
  
 /* ===== CARD SLIDE UP ANIMATION ===== */
  .card-slide-up {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .card-slide-up.active {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* ===== STAGGER DELAYS ===== */
  #card1 { transition-delay: 0.1s; }
  #card2 { transition-delay: 0.2s; }
  #card3 { transition-delay: 0.3s; }
  #card4 { transition-delay: 0.4s; }

  /* ===== HOVER EFFECT ===== */
  .group {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .group:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  }


/* 
========================
        SERVICES
======================== */



  /* ===== HERO TITLE ANIMATION ===== */
  .hero-title {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .hero-title.active {
    opacity: 1;
    transform: translateY(0);
  }

  /* ===== HERO NAV ANIMATION ===== */
  .hero-nav {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .hero-nav.active {
    opacity: 1;
    transform: translateY(0);
  }

  /* ===== STAGGER DELAYS ===== */
  .hero-title { transition-delay: 0.2s; }
  .hero-nav { transition-delay: 0.4s; }





 /* ===== SERVICE CARD ANIMATION ===== */
  .service-card {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .service-card.active {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* ===== STAGGER DELAYS ===== */
  #service1 { transition-delay: 0.1s; }
  #service2 { transition-delay: 0.2s; }
  #service3 { transition-delay: 0.3s; }

  /* ===== HOVER EFFECT ===== */
  .group {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  
  .group:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  .group img {
    transition: transform 0.5s ease;
  }
  
  .group:hover img {
    transform: scale(1.05);
  }


/* 
========================
   CONTACT US
======================== */


  /* ===== CONTACT SECTION STYLES ===== */
  .contact-section {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  }

  /* Office Cards */
  .office-card {
    transition: all 0.3s ease;
  }

  .office-card .bg-gradient-to-br {
    transition: all 0.4s ease;
  }

  .office-card:hover .bg-gradient-to-br {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  }

  .office-card iframe {
    transition: all 0.3s ease;
    border: 2px solid transparent;
  }

  .office-card iframe:hover {
    border-color: #f97316;
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.2);
  }

  /* Office info items hover */
  .office-card .flex.items-start {
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .office-card .flex.items-start:hover {
    background: #fef3c7 !important;
    transform: translateX(4px);
  }

  /* Form Styling */
  #whatsappForm input,
  #whatsappForm textarea {
    background-color: #f9fafb;
    transition: all 0.3s ease;
  }

  #whatsappForm input:focus,
  #whatsappForm textarea:focus {
    background-color: white;
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
  }

  #whatsappForm input:hover,
  #whatsappForm textarea:hover {
    background-color: white;
  }

  /* Sticky elements */
  .sticky {
    position: sticky;
    top: 100px;
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .sticky {
      position: relative;
      top: 0;
    }
    
    .office-card .bg-gradient-to-br {
      transform: none !important;
    }
  }

  @media (max-width: 768px) {
    .contact-section {
      padding: 40px 16px;
    }
    
    .office-card iframe {
      height: 200px;
    }
    
    #contactForm .bg-white {
      padding: 24px;
    }
  }

  /* Form animation */
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .contact-form {
    animation: slideUp 0.6s ease forwards;
  }

  /* Custom scrollbar */
  #message::-webkit-scrollbar {
    width: 6px;
  }

  #message::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  #message::-webkit-scrollbar-thumb {
    background: #f97316;
    border-radius: 10px;
  }

  #message::-webkit-scrollbar-thumb:hover {
    background: #ea580c;
  }

  /* Icon pulse animation */
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .office-card .w-12.h-12 {
    animation: pulse 2s ease-in-out infinite;
  }

  /* Responsive text adjustments */
  @media (max-width: 480px) {
    .office-card h3 {
      font-size: 1.1rem;
    }
    
    .office-card p {
      font-size: 0.85rem;
    }
    
    #contactForm h2 {
      font-size: 1.5rem;
    }
  }
/* 
========================
        ABOUT US 
======================== */














/* 
========================
        APPLICATIONS 
======================== */





        /* ============================================================
               UNIQUE WELCOME ANIMATIONS FOR EACH CARD
            ============================================================ */
        
        /* Card 1: Slide & Rotate */
        #app1 {
            opacity: 0;
            transform: translateX(-80px) rotate(-3deg) scale(0.9);
            transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #app1.active {
            opacity: 1;
            transform: translateX(0) rotate(0deg) scale(1);
        }
        
        /* Card 2: Zoom & Bounce */
        #app2 {
            opacity: 0;
            transform: scale(0.3) translateY(50px);
            transition: all 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        #app2.active {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
        
        /* Card 3: Flip 3D */
        #app3 {
            opacity: 0;
            transform: perspective(800px) rotateY(50deg) translateX(-30px);
            transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #app3.active {
            opacity: 1;
            transform: perspective(800px) rotateY(0deg) translateX(0);
        }
        
        /* Card 4: Slide from Right */
        #app4 {
            opacity: 0;
            transform: translateX(80px) scale(0.9);
            transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #app4.active {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
        
        /* Card 5: Swing */
        #app5 {
            opacity: 0;
            transform: rotate(-8deg) translateY(40px) scale(0.8);
            transform-origin: top center;
            transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #app5.active {
            opacity: 1;
            transform: rotate(0deg) translateY(0) scale(1);
        }
        
        /* Card 6: Fade & Glow */
        #app6 {
            opacity: 0;
            transform: translateY(40px);
            box-shadow: 0 0 0px rgba(234, 88, 12, 0);
            transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #app6.active {
            opacity: 1;
            transform: translateY(0);
            box-shadow: 0 20px 40px rgba(234, 88, 12, 0.15);
        }
        
        /* ============================================================
               SECTION TITLE ANIMATION
            ============================================================ */
        .section-title {
            opacity: 0;
            transform: translateY(-30px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .section-title.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* ============================================================
               STAGGER DELAYS FOR CARDS
            ============================================================ */
        #app1 { transition-delay: 0.1s; }
        #app2 { transition-delay: 0.2s; }
        #app3 { transition-delay: 0.3s; }
        #app4 { transition-delay: 0.4s; }
        #app5 { transition-delay: 0.5s; }
        #app6 { transition-delay: 0.6s; }
        
        /* ============================================================
               MOBILE RESPONSIVE
            ============================================================ */
        @media (max-width: 1023px) {
            .app-card .relative {
                height: 200px;
            }
        }
        
        @media (max-width: 768px) {
            #app1 {
                transform: translateY(40px) rotate(0deg) scale(0.95);
            }
            #app1.active {
                transform: translateY(0) rotate(0deg) scale(1);
            }
            
            #app2 {
                transform: scale(0.8) translateY(40px);
            }
            #app2.active {
                transform: scale(1) translateY(0);
            }
            
            #app3 {
                transform: perspective(800px) rotateY(0deg) translateY(40px);
            }
            #app3.active {
                transform: perspective(800px) rotateY(0deg) translateY(0);
            }
            
            #app4 {
                transform: translateY(40px) scale(0.95);
            }
            #app4.active {
                transform: translateY(0) scale(1);
            }
            
            #app5 {
                transform: rotate(0deg) translateY(40px) scale(0.9);
            }
            #app5.active {
                transform: rotate(0deg) translateY(0) scale(1);
            }
            
            #app6 {
                transform: translateY(40px);
            }
            #app6.active {
                transform: translateY(0);
            }
            
            .app-card .relative {
                height: 180px;
            }
            .app-card h3 {
                font-size: 1rem;
            }
            .app-card .text-4xl {
                font-size: 2rem;
            }
            .app-card .p-5 {
                padding: 1rem;
            }
        }
        
        @media (max-width: 480px) {
            .app-card .relative {
                height: 160px;
            }
            .app-card h4 {
                font-size: 0.9rem;
            }
            .app-card p {
                font-size: 0.7rem;
            }
            .app-card .text-xs {
                font-size: 0.65rem;
            }
            .app-card .p-5 {
                padding: 0.75rem;
            }
            .app-card .rounded-lg {
                padding: 0.5rem;
            }
        }





  /* ===== SECTION ANIMATION ===== */
  .page-hero {
    opacity: 0;
    transform: scale(1.05);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .page-hero.active {
    opacity: 1;
    transform: scale(1);
  }

  /* ===== TITLE ANIMATION ===== */
  .page-title {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .page-hero.active .page-title {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
  }

  /* ===== BREADCRUMB ANIMATION ===== */
  .page-breadcrumb {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .page-hero.active .page-breadcrumb {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 768px) {
    .page-title {
      transform: translateY(20px);
    }
    .page-hero.active .page-title {
      transform: translateY(0);
    }
    
    .page-breadcrumb {
      transform: translateY(20px);
    }
    .page-hero.active .page-breadcrumb {
      transform: translateY(0);
    }
  }


/* 
========================
        ABOUT US 
======================== */














/* 
========================
        ABOUT US 
======================== */

















/* 
========================
        ABOUT US 
======================== */

















/* 
========================
        ABOUT US 
======================== */

















/* 
========================
        ABOUT US 
======================== */
















/* 
========================
        ABOUT US 
======================== */






















/* 
========================
        ABOUT US 
======================== */






















/* 
========================
        ABOUT US 
======================== */