/*
Author: DARK-MASTER
By: DARK DIGITAL STUDIO
Site: dark-digital-studio.com
Email: Service.Dark.Digital.studio@gmail.com
WhatsApp: +905378664534

Copyright (c) 2018-2026 Dark Digital Studio. All Rights Reserved.

This source code and associated files are proprietary and confidential.
Unauthorized copying, distribution, or use of this software, in whole or
in part, is strictly prohibited without prior written permission from the author.

See LICENSE_PROPRIETARY.txt and THIRD_PARTY_LICENSES.txt for details.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
}

/* Navbar Styles */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent; /* Transparent initially */
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 0.5rem 0; /* Slightly smaller on scroll */
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}


    /* Proprietary: Dark Digital Studio (2018-2026). See LICENSE_PROPRIETARY.txt */

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    opacity: 1; /* Always visible */
    visibility: visible;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

.navbar.scrolled .logo {
    opacity: 1;
    visibility: visible;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.logo img {
    height: 60px; /* Increased size for better visibility */
    width: auto;
    transition: all 0.3s ease;
    animation: logoFloat 3s ease-in-out infinite;
}

.navbar.scrolled .logo img {
    height: 50px;
    filter: invert(1); /* Turns white logo to black on light background */
    animation: none; /* Disable floating on scroll */
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

.nav-links {
    display: flex;
    list-style: none;
    transition: all 0.3s ease;
}

.navbar.scrolled .nav-links {
    pointer-events: auto;
}

.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px;
    transition: all 0.3s ease;
}

.navbar.scrolled .hamburger div {
    background-color: #333;
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .nav-links {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: rgba(23, 32, 42, 0.95);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
        padding-top: 2rem;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .nav-links li {
        opacity: 0;
        margin: 1.5rem 0;
    }

    .hamburger {
        display: block;
    }

    .nav-active {
        transform: translateX(0%);
    }

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

    .toggle .line1 {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .toggle .line2 {
        opacity: 0;
    }

    .toggle .line3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }
    
    .nav-links a {
        color: #fff !important;
        font-size: 1.2rem;
    }
}

.nav-links li {
    margin-left: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: #e67e22;
}

/* Active Tab Special Effect (Underline) */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #e67e22;
    transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.hero-section {
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 80px 0; /* Add padding to prevent overlap */
}

.hero-video-bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-content {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 2rem; /* Reduced padding */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.523);
    max-width: 800px; /* Reduced width */
    width: 90%;
}

.hero-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.5rem 0;
    gap: 1rem;
}

.hero-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-box {
    text-align: center;
    padding: 0.8rem;
    background: rgba(0, 0, 0, 0.15); /* Lighter background */
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 120px;
    transition: transform 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
    background: rgba(0, 0, 0, 0.25); /* Lighter hover */
}

.stat-box h3 {
    font-size: 2rem; /* Slightly smaller */
    font-weight: bold;
    color: #e67e22;
    margin-bottom: 0.3rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.stat-box p {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.svg-animated {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.svg-animated svg {
    max-width: 150px; /* Constrain SVG size */
    height: auto;
    transition: max-width 0.3s ease;
}

/* Large Screens Dynamic Logo Size */
@media (min-width: 1920px) {
    .svg-animated svg {
        max-width: 250px;
    }
}

@media (min-width: 2560px) { /* 2K */
    .svg-animated svg {
        max-width: 350px;
    }
}

@media (min-width: 3840px) { /* 4K */
    .svg-animated svg {
        max-width: 500px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-layout {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .hero-side {
        width: 100%;
        margin: 0;
    }
    
    .svg-animated {
        order: -1; /* Move logo to top on mobile */
        margin-bottom: 0.5rem;
    }
    
    .stat-box {
        width: 80%;
        margin: 0 auto;
    }
    
    .hero-content h1 {
        font-size: 1.8rem; /* Smaller title on mobile */
        word-wrap: break-word; /* Prevent overflow */
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-logo {
    width: 150px;
    height: auto;
    margin-bottom: 1.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #d35400;
}

/* Projects Section */
.projects-section {
    padding: 5rem 2rem;
    background-color: #f4f4f4;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #333;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
}

.project-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.project-info {
    padding: 1.5rem;
}

.project-info h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.project-info p {
    color: #666;
}

/* About & Contact Section */
.about-section {
    padding: 5rem 2rem;
    background-color: white;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.about-text h3, .contact-form-container h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #2c3e50;
}

.about-text p {
    margin-bottom: 1rem;
    color: #555;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

.form-group textarea {
    resize: vertical;
}

@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Logo Animation */


.svg-animated {
    width: 150px;
    height: auto;
    margin: 0 auto 1.5rem auto;
    display: block;
}

.svg-animated svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

[class^="svg-elem-"] {
  fill: none;
  stroke: #ffffff !important;
}

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 212px;
    stroke-dasharray: 212px;
  }

  100% {
    stroke-dashoffset: 424px;
    stroke-dasharray: 212px;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 212px;
    stroke-dasharray: 212px;
  }

  100% {
    stroke-dashoffset: 424px;
    stroke-dasharray: 212px;
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s both;
          animation: animate-svg-stroke-1 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 352px;
    stroke-dasharray: 352px;
  }

  100% {
    stroke-dashoffset: 704px;
    stroke-dasharray: 352px;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 352px;
    stroke-dasharray: 352px;
  }

  100% {
    stroke-dashoffset: 704px;
    stroke-dasharray: 352px;
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.12s both;
          animation: animate-svg-stroke-2 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.12s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 252px;
    stroke-dasharray: 252px;
  }

  100% {
    stroke-dashoffset: 504px;
    stroke-dasharray: 252px;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 252px;
    stroke-dasharray: 252px;
  }

  100% {
    stroke-dashoffset: 504px;
    stroke-dasharray: 252px;
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.24s both;
          animation: animate-svg-stroke-3 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.24s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 130.06248474121094px;
    stroke-dasharray: 130.06248474121094px;
  }

  100% {
    stroke-dashoffset: 260.1249694824219px;
    stroke-dasharray: 130.06248474121094px;
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 130.06248474121094px;
    stroke-dasharray: 130.06248474121094px;
  }

  100% {
    stroke-dashoffset: 260.1249694824219px;
    stroke-dasharray: 130.06248474121094px;
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.36s both;
          animation: animate-svg-stroke-4 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.36s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 352px;
    stroke-dasharray: 352px;
  }

  100% {
    stroke-dashoffset: 704px;
    stroke-dasharray: 352px;
  }
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 352px;
    stroke-dasharray: 352px;
  }

  100% {
    stroke-dashoffset: 704px;
    stroke-dasharray: 352px;
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.48s both;
          animation: animate-svg-stroke-5 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.48s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 130.06248474121094px;
    stroke-dasharray: 130.06248474121094px;
  }

  100% {
    stroke-dashoffset: 260.1249694824219px;
    stroke-dasharray: 130.06248474121094px;
  }
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 130.06248474121094px;
    stroke-dasharray: 130.06248474121094px;
  }

  100% {
    stroke-dashoffset: 260.1249694824219px;
    stroke-dasharray: 130.06248474121094px;
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s both;
          animation: animate-svg-stroke-6 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 182px;
    stroke-dasharray: 182px;
  }

  100% {
    stroke-dashoffset: 364px;
    stroke-dasharray: 182px;
  }
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 182px;
    stroke-dasharray: 182px;
  }

  100% {
    stroke-dashoffset: 364px;
    stroke-dasharray: 182px;
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.72s both;
          animation: animate-svg-stroke-7 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.72s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 102px;
    stroke-dasharray: 102px;
  }

  100% {
    stroke-dashoffset: 204px;
    stroke-dasharray: 102px;
  }
}

@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 102px;
    stroke-dasharray: 102px;
  }

  100% {
    stroke-dashoffset: 204px;
    stroke-dasharray: 102px;
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.84s both;
          animation: animate-svg-stroke-8 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.84s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-stroke-9 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.96s both;
          animation: animate-svg-stroke-9 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.96s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-stroke-10 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.08s both;
          animation: animate-svg-stroke-10 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.08s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-stroke-11 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.2s both;
          animation: animate-svg-stroke-11 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.2s both;
}

@-webkit-keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-stroke-12 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.3199999999999998s both;
          animation: animate-svg-stroke-12 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.3199999999999998s both;
}

@-webkit-keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-13 {
  -webkit-animation: animate-svg-stroke-13 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.44s both;
          animation: animate-svg-stroke-13 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.44s both;
}

@-webkit-keyframes animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-14 {
  -webkit-animation: animate-svg-stroke-14 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.56s both;
          animation: animate-svg-stroke-14 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.56s both;
}

@-webkit-keyframes animate-svg-stroke-15 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-15 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-15 {
  -webkit-animation: animate-svg-stroke-15 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.68s both;
          animation: animate-svg-stroke-15 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.68s both;
}

@-webkit-keyframes animate-svg-stroke-16 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-16 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-16 {
  -webkit-animation: animate-svg-stroke-16 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.7999999999999998s both;
          animation: animate-svg-stroke-16 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.7999999999999998s both;
}

@-webkit-keyframes animate-svg-stroke-17 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-17 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-17 {
  -webkit-animation: animate-svg-stroke-17 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.92s both;
          animation: animate-svg-stroke-17 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.92s both;
}

@-webkit-keyframes animate-svg-stroke-18 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-18 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-18 {
  -webkit-animation: animate-svg-stroke-18 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.04s both;
          animation: animate-svg-stroke-18 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.04s both;
}

@-webkit-keyframes animate-svg-stroke-19 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-19 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-19 {
  -webkit-animation: animate-svg-stroke-19 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.16s both;
          animation: animate-svg-stroke-19 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.16s both;
}

@-webkit-keyframes animate-svg-stroke-20 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-20 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-20 {
  -webkit-animation: animate-svg-stroke-20 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.28s both;
          animation: animate-svg-stroke-20 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.28s both;
}

@-webkit-keyframes animate-svg-stroke-21 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-21 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-21 {
  -webkit-animation: animate-svg-stroke-21 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.4s both;
          animation: animate-svg-stroke-21 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.4s both;
}

@-webkit-keyframes animate-svg-stroke-22 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-22 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-22 {
  -webkit-animation: animate-svg-stroke-22 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.52s both;
          animation: animate-svg-stroke-22 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.52s both;
}

@-webkit-keyframes animate-svg-stroke-23 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-23 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-23 {
  -webkit-animation: animate-svg-stroke-23 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.6399999999999997s both;
          animation: animate-svg-stroke-23 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.6399999999999997s both;
}

@-webkit-keyframes animate-svg-stroke-24 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-24 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-24 {
  -webkit-animation: animate-svg-stroke-24 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.76s both;
          animation: animate-svg-stroke-24 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.76s both;
}

@-webkit-keyframes animate-svg-stroke-25 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-25 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-25 {
  -webkit-animation: animate-svg-stroke-25 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.88s both;
          animation: animate-svg-stroke-25 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.88s both;
}

@-webkit-keyframes animate-svg-stroke-26 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-26 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-26 {
  -webkit-animation: animate-svg-stroke-26 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3s both;
          animation: animate-svg-stroke-26 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3s both;
}

@-webkit-keyframes animate-svg-stroke-27 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-27 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-27 {
  -webkit-animation: animate-svg-stroke-27 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.12s both;
          animation: animate-svg-stroke-27 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.12s both;
}

@-webkit-keyframes animate-svg-stroke-28 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-28 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-28 {
  -webkit-animation: animate-svg-stroke-28 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.2399999999999998s both;
          animation: animate-svg-stroke-28 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.2399999999999998s both;
}

@-webkit-keyframes animate-svg-stroke-29 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-29 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-29 {
  -webkit-animation: animate-svg-stroke-29 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.36s both;
          animation: animate-svg-stroke-29 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.36s both;
}

@-webkit-keyframes animate-svg-stroke-30 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-30 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-30 {
  -webkit-animation: animate-svg-stroke-30 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.48s both;
          animation: animate-svg-stroke-30 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.48s both;
}

@-webkit-keyframes animate-svg-stroke-31 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-31 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-31 {
  -webkit-animation: animate-svg-stroke-31 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.5999999999999996s both;
          animation: animate-svg-stroke-31 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.5999999999999996s both;
}

@-webkit-keyframes animate-svg-stroke-32 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-32 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-32 {
  -webkit-animation: animate-svg-stroke-32 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.7199999999999998s both;
          animation: animate-svg-stroke-32 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.7199999999999998s both;
}

@-webkit-keyframes animate-svg-stroke-33 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-33 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-33 {
  -webkit-animation: animate-svg-stroke-33 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.84s both;
          animation: animate-svg-stroke-33 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.84s both;
}

@-webkit-keyframes animate-svg-stroke-34 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-34 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-34 {
  -webkit-animation: animate-svg-stroke-34 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.96s both;
          animation: animate-svg-stroke-34 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 3.96s both;
}

@-webkit-keyframes animate-svg-stroke-35 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-35 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-35 {
  -webkit-animation: animate-svg-stroke-35 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.08s both;
          animation: animate-svg-stroke-35 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.08s both;
}

@-webkit-keyframes animate-svg-stroke-36 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-36 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-36 {
  -webkit-animation: animate-svg-stroke-36 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.2s both;
          animation: animate-svg-stroke-36 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.2s both;
}

@-webkit-keyframes animate-svg-stroke-37 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-37 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-37 {
  -webkit-animation: animate-svg-stroke-37 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.32s both;
          animation: animate-svg-stroke-37 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.32s both;
}

@-webkit-keyframes animate-svg-stroke-38 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-38 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-38 {
  -webkit-animation: animate-svg-stroke-38 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.4399999999999995s both;
          animation: animate-svg-stroke-38 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.4399999999999995s both;
}

@-webkit-keyframes animate-svg-stroke-39 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-39 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-39 {
  -webkit-animation: animate-svg-stroke-39 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.56s both;
          animation: animate-svg-stroke-39 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.56s both;
}

@-webkit-keyframes animate-svg-stroke-40 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-40 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-40 {
  -webkit-animation: animate-svg-stroke-40 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.68s both;
          animation: animate-svg-stroke-40 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.68s both;
}

@-webkit-keyframes animate-svg-stroke-41 {
  0% {
    stroke-dashoffset: 194.09373474121094px;
    stroke-dasharray: 194.09373474121094px;
  }

  100% {
    stroke-dashoffset: 388.1874694824219px;
    stroke-dasharray: 194.09373474121094px;
  }
}

@keyframes animate-svg-stroke-41 {
  0% {
    stroke-dashoffset: 194.09373474121094px;
    stroke-dasharray: 194.09373474121094px;
  }

  100% {
    stroke-dashoffset: 388.1874694824219px;
    stroke-dasharray: 194.09373474121094px;
  }
}

.svg-elem-41 {
  -webkit-animation: animate-svg-stroke-41 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.8s both;
          animation: animate-svg-stroke-41 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.8s both;
}

@-webkit-keyframes animate-svg-stroke-42 {
  0% {
    stroke-dashoffset: 194.09373474121094px;
    stroke-dasharray: 194.09373474121094px;
  }

  100% {
    stroke-dashoffset: 388.1874694824219px;
    stroke-dasharray: 194.09373474121094px;
  }
}

@keyframes animate-svg-stroke-42 {
  0% {
    stroke-dashoffset: 194.09373474121094px;
    stroke-dasharray: 194.09373474121094px;
  }

  100% {
    stroke-dashoffset: 388.1874694824219px;
    stroke-dasharray: 194.09373474121094px;
  }
}

.svg-elem-42 {
  -webkit-animation: animate-svg-stroke-42 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.92s both;
          animation: animate-svg-stroke-42 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 4.92s both;
}

@-webkit-keyframes animate-svg-stroke-43 {
  0% {
    stroke-dashoffset: 194.09373474121094px;
    stroke-dasharray: 194.09373474121094px;
  }

  100% {
    stroke-dashoffset: 388.1874694824219px;
    stroke-dasharray: 194.09373474121094px;
  }
}

@keyframes animate-svg-stroke-43 {
  0% {
    stroke-dashoffset: 194.09373474121094px;
    stroke-dasharray: 194.09373474121094px;
  }

  100% {
    stroke-dashoffset: 388.1874694824219px;
    stroke-dasharray: 194.09373474121094px;
  }
}

.svg-elem-43 {
  -webkit-animation: animate-svg-stroke-43 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.04s both;
          animation: animate-svg-stroke-43 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.04s both;
}

@-webkit-keyframes animate-svg-stroke-44 {
  0% {
    stroke-dashoffset: 194.09373474121094px;
    stroke-dasharray: 194.09373474121094px;
  }

  100% {
    stroke-dashoffset: 388.1874694824219px;
    stroke-dasharray: 194.09373474121094px;
  }
}

@keyframes animate-svg-stroke-44 {
  0% {
    stroke-dashoffset: 194.09373474121094px;
    stroke-dasharray: 194.09373474121094px;
  }

  100% {
    stroke-dashoffset: 388.1874694824219px;
    stroke-dasharray: 194.09373474121094px;
  }
}

.svg-elem-44 {
  -webkit-animation: animate-svg-stroke-44 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.16s both;
          animation: animate-svg-stroke-44 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.16s both;
}

@-webkit-keyframes animate-svg-stroke-45 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-45 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-45 {
  -webkit-animation: animate-svg-stroke-45 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.279999999999999s both;
          animation: animate-svg-stroke-45 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.279999999999999s both;
}

@-webkit-keyframes animate-svg-stroke-46 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-46 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-46 {
  -webkit-animation: animate-svg-stroke-46 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.3999999999999995s both;
          animation: animate-svg-stroke-46 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.3999999999999995s both;
}

@-webkit-keyframes animate-svg-stroke-47 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-47 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-47 {
  -webkit-animation: animate-svg-stroke-47 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.52s both;
          animation: animate-svg-stroke-47 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.52s both;
}

@-webkit-keyframes animate-svg-stroke-48 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-48 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-48 {
  -webkit-animation: animate-svg-stroke-48 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.64s both;
          animation: animate-svg-stroke-48 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.64s both;
}

@-webkit-keyframes animate-svg-stroke-49 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-49 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-49 {
  -webkit-animation: animate-svg-stroke-49 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.76s both;
          animation: animate-svg-stroke-49 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.76s both;
}

@-webkit-keyframes animate-svg-stroke-50 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-50 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-50 {
  -webkit-animation: animate-svg-stroke-50 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.88s both;
          animation: animate-svg-stroke-50 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5.88s both;
}

@-webkit-keyframes animate-svg-stroke-51 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-51 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-51 {
  -webkit-animation: animate-svg-stroke-51 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6s both;
          animation: animate-svg-stroke-51 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6s both;
}

@-webkit-keyframes animate-svg-stroke-52 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-52 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-52 {
  -webkit-animation: animate-svg-stroke-52 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.12s both;
          animation: animate-svg-stroke-52 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.12s both;
}

@-webkit-keyframes animate-svg-stroke-53 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-53 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-53 {
  -webkit-animation: animate-svg-stroke-53 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.24s both;
          animation: animate-svg-stroke-53 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.24s both;
}

@-webkit-keyframes animate-svg-stroke-54 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-54 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-54 {
  -webkit-animation: animate-svg-stroke-54 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.359999999999999s both;
          animation: animate-svg-stroke-54 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.359999999999999s both;
}

@-webkit-keyframes animate-svg-stroke-55 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

@keyframes animate-svg-stroke-55 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

.svg-elem-55 {
  -webkit-animation: animate-svg-stroke-55 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.4799999999999995s both;
          animation: animate-svg-stroke-55 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.4799999999999995s both;
}

@-webkit-keyframes animate-svg-stroke-56 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-56 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-56 {
  -webkit-animation: animate-svg-stroke-56 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.6s both;
          animation: animate-svg-stroke-56 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.6s both;
}

@-webkit-keyframes animate-svg-stroke-57 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

@keyframes animate-svg-stroke-57 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

.svg-elem-57 {
  -webkit-animation: animate-svg-stroke-57 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.72s both;
          animation: animate-svg-stroke-57 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.72s both;
}

@-webkit-keyframes animate-svg-stroke-58 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

@keyframes animate-svg-stroke-58 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

.svg-elem-58 {
  -webkit-animation: animate-svg-stroke-58 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.84s both;
          animation: animate-svg-stroke-58 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.84s both;
}

@-webkit-keyframes animate-svg-stroke-59 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

@keyframes animate-svg-stroke-59 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

.svg-elem-59 {
  -webkit-animation: animate-svg-stroke-59 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.96s both;
          animation: animate-svg-stroke-59 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 6.96s both;
}

@-webkit-keyframes animate-svg-stroke-60 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

@keyframes animate-svg-stroke-60 {
  0% {
    stroke-dashoffset: 66.03124237060547px;
    stroke-dasharray: 66.03124237060547px;
  }

  100% {
    stroke-dashoffset: 132.06248474121094px;
    stroke-dasharray: 66.03124237060547px;
  }
}

.svg-elem-60 {
  -webkit-animation: animate-svg-stroke-60 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 7.08s both;
          animation: animate-svg-stroke-60 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 7.08s both;
}

@-webkit-keyframes animate-svg-stroke-61 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

@keyframes animate-svg-stroke-61 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

.svg-elem-61 {
  -webkit-animation: animate-svg-stroke-61 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 7.199999999999999s both;
          animation: animate-svg-stroke-61 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 7.199999999999999s both;
}

@-webkit-keyframes animate-svg-stroke-62 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

@keyframes animate-svg-stroke-62 {
  0% {
    stroke-dashoffset: 50.023433685302734px;
    stroke-dasharray: 50.023433685302734px;
  }

  100% {
    stroke-dashoffset: 100.04686737060547px;
    stroke-dasharray: 50.023433685302734px;
  }
}

.svg-elem-62 {
  -webkit-animation: animate-svg-stroke-62 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 7.319999999999999s both;
          animation: animate-svg-stroke-62 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 7.319999999999999s both;
}

/* Footer Styles */
.footer-section {
    /* Blueprint/Construction background image */
    background-image: url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.footer-glass {
    background: rgba(23, 32, 42, 0.85); /* Darker glass for better contrast with blueprint */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 4rem 0 2rem;
    color: white;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem; /* Added padding to prevent sticking */
}

@media (max-width: 768px) {
    .footer-content {
        gap: 3rem; /* Increased gap for mobile */
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .footer-col {
        margin-bottom: 1rem; /* Extra spacing between columns */
    }
}

.footer-col h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #e67e22;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col p, .footer-col a {
    color: #ecf0f1;
    text-decoration: none;
    line-height: 1.8;
    transition: color 0.3s ease;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.5rem;
}

.footer-col a:hover {
    color: #e67e22;
    padding-left: 5px; /* Subtle movement on hover */
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: #bdc3c7;
}

/* Engineer Drawing Text Effect */
#hero-subtitle-container {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.drawn-text {
    font-family: 'Courier New', Courier, monospace; /* Technical/Blueprint font */
    font-size: 32px; /* Increased size */
    font-weight: bold;
    letter-spacing: 2px;
    fill: transparent;
    stroke: #fff;
    stroke-width: 1px;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawText 10s ease-out forwards, fillText 0.001s 10s forwards;
}

@keyframes drawText {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fillText {
    to {
        fill: #fff;
        stroke: transparent;
    }
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50%; /* Perfect circle */
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    /* Removed font-size and text-align as we use flexbox */
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.1);
}

.whatsapp-icon {
    width: 35px;
    height: 35px;
    fill: #FFF; /* Ensure fill is white */
}

@media screen and (max-width: 768px) {
    .whatsapp-float {
        width: 60px;
        height: 60px;
        bottom: 30px;
        right: 30px;
    }
    .whatsapp-icon {
        width: 32px; /* Slightly smaller to ensure no cutting */
        height: 32px;
    }
}

/* Responsive Text Size */
@media (max-width: 768px) {
    .drawn-text {
        font-size: 36px; /* Significantly increased mobile size */
        font-weight: 800; /* Make it bolder */
    }
    
    #hero-subtitle-container {
        height: 80px; /* Increased container height for larger text */
    }
}


/* WhatsApp Menu Styles */
.whatsapp-container {
    z-index: 1000;
}

.whatsapp-options {
    position: fixed;
    bottom: 110px;
    right: 40px;
    width: 300px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
}

.whatsapp-options.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.whatsapp-header {
    background-color: #075e54;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.whatsapp-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.whatsapp-option:last-child {
    border-bottom: none;
}

.whatsapp-option:hover {
    background-color: #f5f5f5;
}

.wa-info {
    display: flex;
    flex-direction: column;
}

.wa-name {
    font-weight: bold;
    font-size: 16px;
    color: #075e54;
}

.wa-number {
    font-size: 14px;
    color: #666;
    margin-top: 2px;
}

.whatsapp-icon-small {
    width: 24px;
    height: 24px;
    color: #25d366;
}

.whatsapp-float {
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .whatsapp-options {
        right: 30px; /* Aligned with button */
        bottom: 100px; /* Adjusted for new button position */
        width: 280px;
    }
}