/********** Template CSS **********/
body {
      box-sizing: border-box;
      font-family: 'Inter', sans-serif;
    }
    
    /* Enhanced Animation Keyframes */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(50px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-50px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-50px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(50px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes zoomIn {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
    }
    
    @keyframes zoomInUp {
      from { opacity: 0; transform: scale(0.8) translateY(30px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-100px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(100px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes slideInUp {
      from { opacity: 0; transform: translateY(100px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes slideInDown {
      from { opacity: 0; transform: translateY(-100px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes rotateIn {
      from { opacity: 0; transform: rotate(-180deg) scale(0.5); }
      to { opacity: 1; transform: rotate(0deg) scale(1); }
    }
    
    @keyframes flipInX {
      from { opacity: 0; transform: perspective(400px) rotateX(-90deg); }
      to { opacity: 1; transform: perspective(400px) rotateX(0deg); }
    }
    
    @keyframes flipInY {
      from { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
      to { opacity: 1; transform: perspective(400px) rotateY(0deg); }
    }
    
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    
    @keyframes heartbeat {
      0%, 14%, 28%, 42%, 70% { transform: scale(1); }
      7%, 21%, 35% { transform: scale(1.1); }
    }
    
    @keyframes bounce {
      0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
      40%, 43% { transform: translateY(-15px); }
      70% { transform: translateY(-7px); }
      90% { transform: translateY(-3px); }
    }
    
    @keyframes swing {
      0%, 100% { transform: rotate(0deg); }
      20% { transform: rotate(15deg); }
      40% { transform: rotate(-10deg); }
      60% { transform: rotate(5deg); }
      80% { transform: rotate(-5deg); }
    }
    
    @keyframes wobble {
      0%, 100% { transform: translateX(0); }
      15% { transform: translateX(-25px) rotate(-5deg); }
      30% { transform: translateX(20px) rotate(3deg); }
      45% { transform: translateX(-15px) rotate(-3deg); }
      60% { transform: translateX(10px) rotate(2deg); }
      75% { transform: translateX(-5px) rotate(-1deg); }
    }
    
    @keyframes rubberBand {
      0% { transform: scale(1); }
      30% { transform: scaleX(1.25) scaleY(0.75); }
      40% { transform: scaleX(0.75) scaleY(1.25); }
      50% { transform: scaleX(1.15) scaleY(0.85); }
      65% { transform: scaleX(0.95) scaleY(1.05); }
      75% { transform: scaleX(1.05) scaleY(0.95); }
      100% { transform: scale(1); }
    }
    
    @keyframes jello {
      0%, 11.1%, 100% { transform: translate3d(0, 0, 0); }
      22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
      33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
      44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
      55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
      66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
      77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
      88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
    }
    
    @keyframes flash {
      0%, 50%, 100% { opacity: 1; }
      25%, 75% { opacity: 0; }
    }
    
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
      20%, 40%, 60%, 80% { transform: translateX(10px); }
    }
    
    @keyframes tada {
      0% { transform: scale(1); }
      10%, 20% { transform: scale(0.9) rotate(-3deg); }
      30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
      40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
      100% { transform: scale(1) rotate(0); }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }
    
    @keyframes glow {
      0%, 100% { box-shadow: 0 0 5px rgba(249, 115, 22, 0.5); }
      50% { box-shadow: 0 0 20px rgba(249, 115, 22, 0.8), 0 0 30px rgba(249, 115, 22, 0.6); }
    }
    
    @keyframes typewriter {
      from { width: 0; }
      to { width: 100%; }
    }
    
    @keyframes blink {
      0%, 50% { border-color: transparent; }
      51%, 100% { border-color: #00674F; }
    }
    
    /* Animation Classes */
    .animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; }
    .animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }
    .animate-fadeInDown { animation: fadeInDown 0.8s ease-out forwards; }
    .animate-fadeInLeft { animation: fadeInLeft 0.8s ease-out forwards; }
    .animate-fadeInRight { animation: fadeInRight 0.8s ease-out forwards; }
    .animate-zoomIn { animation: zoomIn 0.6s ease-out forwards; }
    .animate-zoomInUp { animation: zoomInUp 0.8s ease-out forwards; }
    .animate-slideInLeft { animation: slideInLeft 0.8s ease-out forwards; }
    .animate-slideInRight { animation: slideInRight 0.8s ease-out forwards; }
    .animate-slideInUp { animation: slideInUp 0.8s ease-out forwards; }
    .animate-slideInDown { animation: slideInDown 0.8s ease-out forwards; }
    .animate-rotateIn { animation: rotateIn 0.8s ease-out forwards; }
    .animate-flipInX { animation: flipInX 0.8s ease-out forwards; }
    .animate-flipInY { animation: flipInY 0.8s ease-out forwards; }
    .animate-pulse-custom { animation: pulse 2s infinite; }
    .animate-heartbeat { animation: heartbeat 1.5s infinite; }
    .animate-bounce-custom { animation: bounce 2s infinite; }
    .animate-swing { animation: swing 1s ease-in-out; }
    .animate-wobble { animation: wobble 1s ease-in-out; }
    .animate-rubberBand { animation: rubberBand 1s ease-in-out; }
    .animate-jello { animation: jello 1s ease-in-out; }
    .animate-flash { animation: flash 1s infinite; }
    .animate-shake { animation: shake 0.5s ease-in-out; }
    .animate-tada { animation: tada 1s ease-in-out; }
    .animate-spin { animation: spin 1s linear infinite; }
    .animate-float { animation: float 3s ease-in-out infinite; }
    .animate-glow { animation: glow 2s ease-in-out infinite; }
    
    /* Staggered Animation Delays */
    .animate-delay-100 { animation-delay: 0.1s; }
    .animate-delay-200 { animation-delay: 0.2s; }
    .animate-delay-300 { animation-delay: 0.3s; }
    .animate-delay-400 { animation-delay: 0.4s; }
    .animate-delay-500 { animation-delay: 0.5s; }
    .animate-delay-600 { animation-delay: 0.6s; }
    .animate-delay-700 { animation-delay: 0.7s; }
    .animate-delay-800 { animation-delay: 0.8s; }
    .animate-delay-900 { animation-delay: 0.9s; }
    .animate-delay-1000 { animation-delay: 1s; }
    
    /* Intersection Observer Animation Classes */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease-out;
    }
    
    .animate-on-scroll.animate-in {
      opacity: 1;
      transform: translateY(0);
    }
    
    .animate-on-scroll-left {
      opacity: 0;
      transform: translateX(-50px);
      transition: all 0.8s ease-out;
    }
    
    .animate-on-scroll-left.animate-in {
      opacity: 1;
      transform: translateX(0);
    }
    
    .animate-on-scroll-right {
      opacity: 0;
      transform: translateX(50px);
      transition: all 0.8s ease-out;
    }
    
    .animate-on-scroll-right.animate-in {
      opacity: 1;
      transform: translateX(0);
    }
    
    .animate-on-scroll-zoom {
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.8s ease-out;
    }
    
    .animate-on-scroll-zoom.animate-in {
      opacity: 1;
      transform: scale(1);
    }
    
    .animate-on-scroll-rotate {
      opacity: 0;
      transform: rotate(-10deg) scale(0.9);
      transition: all 0.8s ease-out;
    }
    
    .animate-on-scroll-rotate.animate-in {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }
    
    .gradient-text {
      background: linear-gradient(180deg, #00674F,  #00674F);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(180deg, #00674F,  #00674F);
      transition: width 0.3s ease;
    }
    
    .nav-link:hover::after,
    .nav-link.active::after {
      width: 100%;
    }
    
    .nav-link.active {  
      color: #00674F;
      font-weight: 600;
    }
    
    .mobile-nav-link.active {
      background-color: #fff7ed;
      color: #00674F;
      font-weight: 600;
      border-left: 3px solid #00674F;
    }
    
    .glass-effect {
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .notification {
      transform: translateX(100%);
      transition: transform 0.3s ease-in-out;
    }
    
    .notification.show {
      transform: translateX(0);
    }
    
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }
    
    .modal.active {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .loading-spinner {
      border: 3px solid #f3f3f3;
      border-top: 3px solid #00674F;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }