/* Glass Morphism Effect */
 .glass-effect {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 /* Timeline Styles */
 .timeline::after {
     content: '';
     position: absolute;
     width: 6px;
     background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
     top: 0;
     bottom: 0;
     left: 50%;
     margin-left: -3px;
 }

 .timeline-item::after {
     content: '';
     position: absolute;
     width: 25px;
     height: 25px;
     right: -12px;
     background-color: white;
     border: 4px solid var(--primary-color);
     top: 15px;
     border-radius: 50%;
     z-index: 1;
     transition: all 0.3s ease;
 }

 .right::after {
     left: -12px;
 }

 .left::before {
     content: " ";
     height: 0;
     position: absolute;
     top: 18px;
     width: 0;
     z-index: 1;
     right: 30px;
     border: medium solid var(--primary-color);
     border-width: 10px 0 10px 10px;
     border-color: transparent transparent transparent var(--primary-color);
 }

 .right::before {
     content: " ";
     height: 0;
     position: absolute;
     top: 18px;
     width: 0;
     z-index: 1;
     left: 30px;
     border: medium solid var(--primary-color);
     border-width: 10px 10px 10px 0;
     border-color: transparent var(--primary-color) transparent transparent;
 }

 /* Testimonial Quote Mark */
 .testimonial-card::before {
     content: '"';
     position: absolute;
     top: 20px;
     left: 20px;
     font-size: 5rem;
     opacity: 0.1;
     font-family: Georgia, serif;
     line-height: 1;
     z-index: 0;
 }

 /* Contact Info Card Accent */
 .contact-info-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 5px;
     height: 100%;
     background: var(--primary-color);
 }

 /* Animation Classes */
 .animate-on-scroll {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.6s ease;
 }

 .animate-on-scroll.animated {
     opacity: 1;
     transform: translateY(0);
 }

 .delay-1 {
     transition-delay: 0.2s;
 }

 .delay-2 {
     transition-delay: 0.4s;
 }

 .delay-3 {
     transition-delay: 0.6s;
 }

 .delay-4 {
     transition-delay: 0.8s;
 }

 /* Theme Variables */
 .theme-1 {
     --primary-color: #0066cc;
     --secondary-color: #4a4a4a;
     --accent-color: #00a8e8;
     --glass-color: #1e88e5;
 }

 .theme-2 {
     --primary-color: #059669;
     --secondary-color: #374151;
     --accent-color: #10b981;
     --glass-color: #059669;
 }

 /* Responsive Timeline */
 @media (max-width: 768px) {
     .timeline::after {
         left: 13px;
     }

     .timeline-item {
         width: 100%;
         padding-left: 46px;
         padding-right: 0px;
     }

     .timeline-item::before {
         left: 35px;
         border: medium solid var(--primary-color);
         border-width: 10px 10px 10px 0;
         border-color: transparent var(--primary-color) transparent transparent;
     }

     .left::after,
     .right::after {
         left: 0px;
     }

     .right {
         left: 0%;
     }
 }

 /* Modal Styles */
 .modal {
     transition: opacity 0.3s ease, visibility 0.3s ease;
 }

 .modal-content {
     transition: transform 0.3s ease, opacity 0.3s ease;
 }

 .modal-hidden {
     opacity: 0;
     visibility: hidden;
 }

 .modal-hidden .modal-content {
     transform: translateY(20px);
     opacity: 0;
 }