Marketing Agency<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" \/>\r\n\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: Arial, sans-serif;\r\n overflow-x: hidden;\r\n background-color: #fff;\r\n }\r\n\r\n \/* Navbar Styles *\/\r\n .nav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n z-index: 1000;\r\n background: transparent;\r\n height: 100px;\r\n padding: 0 50px;\r\n will-change: transform, background;\r\n }\r\n\r\n .nav-menu {\r\n display: flex;\r\n gap: 20px;\r\n }\r\n\r\n .nav-menu .dropdown {\r\n position: relative;\r\n }\r\n\r\n \/*.nav-menu .dropdown-content {*\/\r\n \/* position: absolute;*\/\r\n \/* top: 100%;*\/\r\n \/* left: 0;*\/\r\n \/* min-width: 180px;*\/\r\n \/* background: rgba(255, 255, 255, 0.1);*\/\r\n \/* backdrop-filter: blur(15px);*\/\r\n \/* box-shadow: 0px 4px 20px rgba(0, 255, 255, 0.5);*\/\r\n \/* border-radius: 10px;*\/\r\n \/* padding: 10px 0;*\/\r\n \/* opacity: 0;*\/\r\n \/* visibility: hidden;*\/\r\n \/* transform: translateY(15px) scale(0.9);*\/\r\n \/* transition: transform 0.4s ease, opacity 0.3s ease-in-out;*\/\r\n \/* overflow: hidden;*\/\r\n \/*}*\/\r\n \r\n .nav-menu .dropdown-content {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n min-width: 180px;\r\n background: rgba(255, 255, 255, 0.05); \/* Light glassy background *\/\r\n backdrop-filter: blur(15px);\r\n box-shadow: 0px 4px 20px rgba(221, 4, 4, 0.4); \/* red glow *\/\r\n border-radius: 10px;\r\n padding: 10px 0;\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateY(15px) scale(0.9);\r\n transition: transform 0.4s ease, opacity 0.3s ease-in-out;\r\n overflow: hidden;\r\n}\r\n\r\n\r\n .nav-menu .dropdown:hover .dropdown-content {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0) scale(1);\r\n }\r\n\r\n .nav-menu .dropdown-content a {\r\n display: block;\r\n padding: 12px 20px;\r\n text-decoration: none;\r\n color: white;\r\n font-size: 16px;\r\n text-align: left;\r\n transition: all 0.3s;\r\n }\r\n\r\n \/*.nav-menu .dropdown-content a:hover {*\/\r\n \/* background: rgba(0, 255, 255, 0.3);*\/\r\n \/* color: cyan;*\/\r\n \/*}*\/\r\n \r\n .nav-menu .dropdown-content a:hover {\r\n background: rgba(221, 4, 4, 0.2); \/* light red background *\/\r\n color: #dd0404; \/* bold red text *\/\r\n}\r\n\r\n .nav a {\r\n text-decoration: none;\r\n color: white;\r\n font-size: 18px;\r\n transition: color 0.4s ease-in-out;\r\n }\r\n\r\n \/* Logo Animation *\/\r\n .nav-logo {\r\n position: absolute;\r\n top: 50vh;\r\n left: 50%;\r\n margin-top: -12px;\r\n transform: translate(-50%, -50%);\r\n transition: all 0.6s cubic-bezier(0.2, 0.8, 0.4, 1);\r\n z-index: 1001;\r\n will-change: transform;\r\n }\r\n\r\n .nav-logo img {\r\n width: 472px;\r\n transition: all 0.6s cubic-bezier(0.2, 0.8, 0.4, 1);\r\n will-change: width;\r\n }\r\n\r\n .contact-link {\r\n position: absolute;\r\n top: 20px;\r\n right: 50px;\r\n color: white;\r\n transition: color 0.4s ease-in-out;\r\n }\r\n\r\n \/* Scrolled State *\/\r\n .scrolled {\r\n background: white;\r\n padding: 10px 50px;\r\n height: 70px;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n }\r\n\r\n .scrolled .nav-logo {\r\n top: 35px;\r\n transform: translateX(-50%);\r\n }\r\n\r\n .scrolled .nav-logo img {\r\n width: 100px;\r\n }\r\n\r\n .scrolled a {\r\n color: #dd0404 !important;\r\n }\r\n\r\n \/* Hero Section - Now Fixed *\/\r\n \/* Hero Section *\/\r\n \r\n \/*new new hero hero end end*\/\r\n.hero {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: -1;\r\n overflow: hidden;\r\n}\r\n\r\n.hero-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.6); \/* 40% black overlay *\/\r\n z-index: 1;\r\n}\r\n\r\n.hero-bg {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n min-width: 100%;\r\n min-height: 100%;\r\n width: auto;\r\n height: auto;\r\n object-fit: cover;\r\n z-index: 0;\r\n}\r\n\r\n\/* Content Wrapper *\/\r\n.content-wrapper {\r\n position: relative;\r\n z-index: 100;\r\n background-color: white;\r\n margin-top: 100vh;\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n .hero {\r\n height: 60vh;\r\n }\r\n \r\n .hero-bg {\r\n width: 300%;\r\n height: 100%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n}\r\n \r\n \/*newnew endend*\/\r\n\r\n \/* Content Wrapper - Scrolls over hero *\/\r\n .content-wrapper {\r\n position: relative;\r\n z-index: 100;\r\n background-color: white;\r\n margin-top: 100vh; \/* Push content below hero *\/\r\n }\r\n\/* Services section statrs here *\/\r\n\r\n \/* Services Section *\/\r\n .services-section {\r\n padding: 100px 0;\r\n background-color: white;\r\n position: relative;\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n }\r\n \r\n .services-section h2 {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n font-size: 2.8rem;\r\n font-weight: 700;\r\n color: #222;\r\n padding: 0 20px;\r\n position: relative;\r\n }\r\n \r\n .services-section h2:after {\r\n content: '';\r\n position: absolute;\r\n width: 80px;\r\n height: 5px;\r\n background: linear-gradient(90deg, #dd0404, #ff4d4d);\r\n bottom: -20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n border-radius: 5px;\r\n }\r\n \r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 0;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n .service-card {\r\n padding: 50px 40px;\r\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4);\r\n position: relative;\r\n min-height: 320px;\r\n background: white;\r\n overflow: hidden;\r\n border: 1px solid rgba(221, 4, 4, 0.05);\r\n }\r\n \r\n \/* Vertical dividers *\/\r\n .service-card:not(:nth-child(3n)):after {\r\n content: \"\";\r\n position: absolute;\r\n right: 0;\r\n top: 40px;\r\n bottom: 40px;\r\n width: 1px;\r\n background: linear-gradient(to bottom, transparent, rgba(221, 4, 4, 0.2), transparent);\r\n }\r\n \r\n \/* Horizontal dividers *\/\r\n .service-card:nth-child(n+4):before {\r\n content: \"\";\r\n position: absolute;\r\n left: 40px;\r\n right: 40px;\r\n top: 0;\r\n height: 1px;\r\n background: linear-gradient(to right, transparent, rgba(221, 4, 4, 0.2), transparent);\r\n }\r\n \r\n .service-card:hover {\r\n transform: translateY(-15px) scale(1.02);\r\n box-shadow: 0 25px 50px rgba(221, 4, 4, 0.15);\r\n z-index: 10;\r\n border-color: rgba(221, 4, 4, 0.2);\r\n background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,245,245,0.98));\r\n }\r\n \r\n .service-card:hover .service-icon {\r\n animation: iconPulse 0.8s ease;\r\n color: #dd0404;\r\n text-shadow: 0 5px 15px rgba(221, 4, 4, 0.3);\r\n }\r\n \r\n .service-card:hover .service-title {\r\n color: #dd0404;\r\n text-shadow: 0 2px 5px rgba(221, 4, 4, 0.1);\r\n }\r\n \r\n .service-card:hover .service-desc {\r\n color: #555;\r\n }\r\n \r\n .service-card:before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(221,4,4,0.1) 0%, rgba(221,4,4,0) 70%);\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n z-index: -1;\r\n }\r\n \r\n .service-card:hover:before {\r\n opacity: 1;\r\n }\r\n \r\n .service-icon {\r\n font-size: 3.5rem;\r\n color: #444;\r\n margin-bottom: 30px;\r\n transition: all 0.4s ease;\r\n display: inline-block;\r\n }\r\n \r\n .service-title {\r\n font-size: 1.6rem;\r\n margin-bottom: 25px;\r\n color: #222;\r\n transition: all 0.3s ease;\r\n font-weight: 700;\r\n }\r\n \r\n .service-desc {\r\n color: #666;\r\n line-height: 1.8;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n @keyframes iconPulse {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.2); }\r\n 100% { transform: scale(1); }\r\n }\r\n \r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-10px); }\r\n }\r\n \r\n \/* Responsive Adjustments *\/\r\n @media (max-width: 1200px) {\r\n .service-card {\r\n padding: 40px 30px;\r\n min-height: 300px;\r\n }\r\n }\r\n \r\n @media (max-width: 1024px) {\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .service-card:after {\r\n display: none;\r\n }\r\n \r\n .service-card:nth-child(2n):after {\r\n display: block;\r\n }\r\n \r\n .service-card:nth-child(n+3):before {\r\n content: \"\";\r\n position: absolute;\r\n left: 40px;\r\n right: 40px;\r\n top: 0;\r\n height: 1px;\r\n background: linear-gradient(to right, transparent, rgba(221, 4, 4, 0.2), transparent);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .services-section {\r\n padding: 80px 0;\r\n }\r\n \r\n .services-section h2 {\r\n font-size: 2.4rem;\r\n margin-bottom: 50px;\r\n }\r\n \r\n .service-card {\r\n padding: 35px 25px;\r\n min-height: 280px;\r\n }\r\n \r\n .service-icon {\r\n font-size: 3rem;\r\n margin-bottom: 25px;\r\n }\r\n \r\n .service-title {\r\n font-size: 1.4rem;\r\n margin-bottom: 20px;\r\n }\r\n }\r\n \r\n @media (max-width: 640px) {\r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .service-card {\r\n padding: 40px 30px;\r\n min-height: auto;\r\n }\r\n \r\n .service-card:after, \r\n .service-card:before {\r\n display: none !important;\r\n }\r\n \r\n .service-card:not(:last-child) {\r\n border-bottom: 1px solid rgba(221, 4, 4, 0.1);\r\n }\r\n \r\n .service-card:hover {\r\n transform: none;\r\n box-shadow: 0 15px 30px rgba(221, 4, 4, 0.1);\r\n }\r\n } \r\n\/* services section rests here *\/\r\n \r\n\r\n \/* DNA section startas here *\/\r\n\r\n .fullwidth-section {\r\n width: 100vw; \/* Full viewport width *\/\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n }\r\n\r\n \/* Container for centered content *\/\r\n .section-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n text-align: center;\r\n width: 100vw;\r\n \r\n }\r\n\r\n \/* Heading styles *\/\r\n .animated-heading {\r\n font-size: 3rem;\r\n color: #333;\r\n font-weight: 600;\r\n display: inline-block;\r\n position: relative;\r\n padding-bottom: 10px;\r\n }\r\n\r\n \/* DNA word styling *\/\r\n .highlight-word {\r\n color: #cb0404;\r\n position: relative;\r\n }\r\n\r\n \/* Animated underline *\/\r\n .highlight-word::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -5px;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: #ff3366;\r\n transform: scaleX(0);\r\n transform-origin: right;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n \/* Animation on hover *\/\r\n .animated-heading:hover .highlight-word::after {\r\n transform: scaleX(1);\r\n transform-origin: left;\r\n }\r\n\r\n \/* Responsive adjustments *\/\r\n @media (max-width: 768px) {\r\n .fullwidth-section { padding: 60px 0; }\r\n .animated-heading { font-size: 2.5rem; }\r\n }\r\n @media (max-width: 480px) {\r\n .animated-heading { font-size: 2rem; }\r\n }\r\n\r\n \/* Original DNA Section Style *\/\r\n .scroll-sections {\r\n margin: auto;\r\n padding: 40px 54px;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n }\r\n \r\n .scroll-sections::before {\r\n content: '';\r\n position: absolute;\r\n left: 50%;\r\n top: 0;\r\n width: 6px;\r\n height: 100%;\r\n background: linear-gradient(180deg, #ff8c00, #ff0080);\r\n transform: translateX(-50%);\r\n border-radius: 3px;\r\n }\r\n .section {\r\n background: #af1010;\r\n padding: 30px;\r\n margin: 40px 140px;\r\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);\r\n position: relative;\r\n width: 40%;\r\n border-radius: 12px;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n color: white;\r\n }\r\n .section.show {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .section:nth-child(odd) {\r\n align-self: flex-start;\r\n }\r\n .section:nth-child(even) {\r\n align-self: flex-end;\r\n }\r\n .icon {\r\n position: absolute;\r\n top: -35px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 50px;\r\n height: 50px;\r\n background: linear-gradient(45deg, #ff8c00, #ff0080);\r\n color: white;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n font-size: 24px;\r\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);\r\n animation: bounce 1.5s infinite;\r\n }\r\n @keyframes bounce {\r\n 0%, 100% {\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n 50% {\r\n transform: translateX(-50%) translateY(-10px);\r\n }\r\n }\r\n h2 {\r\n color: #ffffff;\r\n margin: 10px 0;\r\n font-size: 22px;\r\n }\r\n p {\r\n color: #ddd;\r\n font-size: 16px;\r\n }\r\n \r\n \r\n .description {\r\n max-height: 0;\r\n overflow: hidden;\r\n opacity: 0;\r\n transition: all 0.4s ease-in-out;\r\n }\r\n\r\n .description.show {\r\n max-height: 300px; \/* Adjust as needed *\/\r\n opacity: 1;\r\n margin-top: 10px;\r\n }\r\n \r\n h2 {\r\n cursor: pointer;\r\n }\r\n \r\n \r\n @media (max-width: 768px) {\r\n .section{\r\n width: 125% !important;\r\n }\r\n } \r\n\r\n \/*DNA ends*\/\r\n \r\n \r\n \r\n \r\n \/* Team Collaboration Section *\/\r\n .collaboration-section {\r\n padding: 100px 0;\r\n background: white;\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n }\r\n\r\n .collaboration-container {\r\n display: flex;\r\n align-items: center;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n gap: 60px;\r\n }\r\n\r\n .collaboration-content {\r\n flex: 1;\r\n }\r\n\r\n .collaboration-gallery {\r\n flex: 1;\r\n }\r\n\r\n .collaboration-content h2 {\r\n font-size: 2.2rem;\r\n color: #333;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .collaboration-description {\r\n font-size: 1.1rem;\r\n color: #555;\r\n margin-bottom: 30px;\r\n line-height: 1.6;\r\n }\r\n\r\n .collaboration-features {\r\n list-style: none;\r\n }\r\n\r\n .feature-item {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 15px;\r\n font-size: 1.05rem;\r\n color: #444;\r\n }\r\n\r\n .check-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 24px;\r\n height: 24px;\r\n background-color: #dd0404;\r\n color: white;\r\n border-radius: 50%;\r\n margin-right: 15px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .photo-grid {\r\n display: grid;\r\n grid-template-areas:\r\n \"large large medium medium\"\r\n \"large large small tall\";\r\n gap: 15px;\r\n height: 500px;\r\n }\r\n\r\n .photo-large {\r\n grid-area: large;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n\r\n .photo-medium {\r\n grid-area: medium;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n\r\n .photo-small {\r\n grid-area: small;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n\r\n .photo-tall {\r\n grid-area: tall;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n\r\n .photo-grid img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .photo-grid div:hover img {\r\n transform: scale(1.05);\r\n }\r\n \r\n \r\n\r\n\/* Build Section - Full Width *\/\r\n .build-section {\r\n position: relative;\r\n min-height: 400px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #ffffff;\r\n background-size: cover;\r\n text-align: center;\r\n padding: 80px 0; \/* Vertical padding only *\/\r\n width: 100vw;\r\n margin-left: calc(-50vw + 50%);\r\n }\r\n \r\n \/* Content Box with Space *\/\r\n .build-content {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 800px;\r\n width: calc(100% - 40px); \/* Account for mobile padding *\/\r\n margin: 40px auto;\r\n padding: 50px 40px;\r\n background: rgba(255,255,255,0.95);\r\n border-radius: 8px;\r\n box-shadow: 0 5px 30px rgba(0,0,0,0.1);\r\n transform: translateY(20px);\r\n opacity: 0;\r\n transition: all 0.6s ease-out;\r\n }\r\n \r\n \/* Fade-in Animation *\/\r\n .build-content.animated {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n \/* Simple Overlay *\/\r\n .build-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(255,255,255,0.7);\r\n }\r\n \r\n .build-title {\r\n font-size: 2.5rem;\r\n margin-bottom: 20px;\r\n color: #333;\r\n }\r\n \r\n .build-text {\r\n font-size: 1.1rem;\r\n line-height: 1.6;\r\n margin-bottom: 30px;\r\n color: #555;\r\n max-width: 600px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n \r\n \/* Animated Button *\/\r\n .quote-button {\r\n position: relative;\r\n padding: 15px 35px;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n color: #fff;\r\n background: #333;\r\n border: none;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n }\r\n .button-arrow {\r\n margin-left: 10px;\r\n transition: transform 0.4s ease;\r\n }\r\n \r\n .quote-button::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(255,255,255,0.1);\r\n transition: all 0.4s ease;\r\n }\r\n \r\n .quote-button:hover {\r\n background: #222;\r\n }\r\n \r\n .quote-button:hover .button-arrow {\r\n transform: translateX(5px);\r\n }\r\n \r\n .quote-button:hover::before {\r\n left: 100%;\r\n }\r\n \/* Responsive Adjustments *\/\r\n @media (max-width: 768px) {\r\n .build-section {\r\n min-height: 350px;\r\n padding: 60px 20px;\r\n }\r\n \r\n .build-content {\r\n padding: 40px 30px;\r\n margin: 30px auto;\r\n }\r\n \r\n .build-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .build-text {\r\n font-size: 1rem;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .build-section {\r\n min-height: 300px;\r\n padding: 40px 20px;\r\n }\r\n \r\n .build-content {\r\n padding: 30px 20px;\r\n margin: 20px auto;\r\n width: calc(100% - 20px);\r\n }\r\n \r\n .build-title {\r\n font-size: 1.8rem;\r\n }\r\n }\r\n\r\n\r\n\r\n \/* Footer - Increased Height *\/\r\n \r\n footer {\r\n color: #fff;\r\n padding: 40px 20px 20px;\r\n font-family: 'Arial', sans-serif;\r\n position: relative;\r\n z-index: 1;\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n \r\n }\r\n\r\n\/*footer::before {*\/\r\n\/* content: '';*\/\r\n\/* position: absolute;*\/\r\n\/* top: 0;*\/\r\n\/* left: 0;*\/\r\n\/* width: 100%;*\/\r\n\/* height: 100%;*\/\r\n\/* background-color: rgba(15, 15, 15, 1);*\/\r\n\/* z-index: -1;*\/\r\n\/*}*\/\r\n\r\n\/* Animated Gradient Background *\/\r\nfooter::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(\r\n 45deg,\r\n #dd0404, \/* Red accent color *\/\r\n #1a1a1a,\r\n #2d2d2d,\r\n #dd0404,\r\n #1a1a1a\r\n );\r\n background-size: 400% 400%;\r\n animation: gradientFlow 12s ease infinite;\r\n z-index: -1;\r\n opacity: 0.9;\r\n}\r\n\r\n\/* Enhanced Floating Animation *\/\r\n@keyframes floating {\r\n 0% { \r\n transform: translateY(0) rotate(0deg) scale(1);\r\n opacity: 0.8;\r\n }\r\n 50% { \r\n transform: translateY(-40px) rotate(180deg) scale(1.2);\r\n opacity: 1;\r\n }\r\n 100% { \r\n transform: translateY(0) rotate(360deg) scale(1);\r\n opacity: 0.8;\r\n }\r\n}\r\n\r\n\/* Particle Animation *\/\r\n@keyframes particles {\r\n 0% {\r\n transform: translateY(0) translateX(0);\r\n opacity: 0;\r\n }\r\n 50% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n transform: translateY(-100vh) translateX(100px);\r\n opacity: 0;\r\n }\r\n}\r\n\r\n\/* New Floating Elements *\/\r\n.floating-element {\r\n position: absolute;\r\n background: rgba(221, 4, 4, 0.15);\r\n border-radius: 50%;\r\n animation: floating 6s ease-in-out infinite;\r\n filter: blur(1px);\r\n z-index: 0;\r\n}\r\n\r\n\/* Particle Elements *\/\r\n.particle {\r\n position: absolute;\r\n background: rgba(255, 255, 255, 0.3);\r\n width: 2px;\r\n height: 2px;\r\n border-radius: 50%;\r\n animation: particles 8s linear infinite;\r\n}\r\n\r\n\/* Geometric Shapes *\/\r\n.geometric-shape {\r\n position: absolute;\r\n animation: floating 8s ease-in-out infinite;\r\n opacity: 0.1;\r\n mix-blend-mode: screen;\r\n}\r\n\r\n\r\n\r\n\/* Logo centered at top *\/\r\n.footer-logo-wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n max-width: 1000px;\r\n margin: auto;\r\n gap: 40px;\r\n padding: 30px 6px;\r\n}\r\n\r\n.footer-logo {\r\n width: 150px;\r\n height: auto;\r\n}\r\n\r\n\/* Two sections in flex row *\/\r\n.footer-container {\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n max-width: 1000px;\r\n margin: auto;\r\n gap: 40px;\r\n padding: 0 20px;\r\n}\r\n\r\n\/* Each column *\/\r\n.footer-section {\r\n flex: 1 1 300px;\r\n min-width: 250px;\r\n}\r\n\r\n.footer-section h3 {\r\n margin-bottom: 15px;\r\n font-size: 20px;\r\n font-weight: 600;\r\ncolor:#dd0404;}\r\n\r\n.footer-description {\r\n line-height: 1.6;\r\n margin-bottom: 20px;\r\n}\r\n\r\n\/* Contact list *\/\r\n.footer-section ul {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\n.footer-section li {\r\n margin-bottom: 10px;\r\n}\r\n\r\n\/* Social *\/\r\n.footer-social-wrapper {\r\n margin-top: 10px;\r\n display: flex;\r\n align-items: start;\r\n gap: 10px;\r\n flex-direction: column;\r\n}\r\n\r\n.social-icon {\r\n background-color: white;\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 5px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.social-icon a i {\r\n color: black;\r\n font-size: 18px;\r\n}\r\n\r\n\/* Bottom text *\/\r\n.footer-bottom {\r\n text-align: center;\r\n padding-top: 30px;\r\n font-size: 14px;\r\n border-top: 1px solid #333;\r\n margin-top: 40px;\r\n}\r\n \/* Responsive Adjustments footer*\/\r\n@media (max-width: 768px) {\r\n .footer-container {\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n padding: 0 10px;\r\n }\r\n\r\n .footer-section {\r\n flex: 1 1 100%;\r\n min-width: unset;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .footer-logo-wrapper {\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 20px;\r\n padding: 20px 10px;\r\n }\r\n\r\n .footer-logo {\r\n width: 120px;\r\n }\r\n\r\n .footer-social-wrapper {\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .footer-description {\r\n font-size: 14px;\r\n line-height: 1.5;\r\n }\r\n\r\n .footer-section h3 {\r\n font-size: 18px;\r\n }\r\n\r\n .footer-bottom {\r\n font-size: 12px;\r\n margin-top: 30px;\r\n padding-top: 20px;\r\n }\r\n}\r\n\r\n\r\n\r\n \/* Responsive Adjustments *\/\r\n @media (max-width: 1024px) {\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .collaboration-container {\r\n flex-direction: column;\r\n }\r\n\r\n .photo-grid {\r\n height: 400px;\r\n }\r\n\r\n .scroll-sections {\r\n width: 80%;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .nav {\r\n padding: 0 20px;\r\n }\r\n \r\n .services-section {\r\n padding: 80px 20px;\r\n }\r\n \r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .service-card {\r\n padding: 40px 30px;\r\n }\r\n\r\n .section {\r\n width: 100%;\r\n margin: 30px 0;\r\n }\r\n\r\n .scroll-sections::before {\r\n left: 30px;\r\n }\r\n\r\n .section:nth-child(odd), \r\n .section:nth-child(even) {\r\n align-self: center;\r\n }\r\n\r\n .icon {\r\n left: 30px;\r\n transform: translateX(0);\r\n }\r\n\r\n .testimonials-section {\r\n padding: 80px 20px;\r\n }\r\n\r\n .build-section {\r\n padding: 80px 20px;\r\n }\r\n\r\n .build-title {\r\n font-size: 2rem;\r\n }\r\n\r\n footer {\r\n padding: 80px 20px 40px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .nav-logo img {\r\n width: 300px;\r\n }\r\n\r\n .photo-grid {\r\n grid-template-areas:\r\n \"large large\"\r\n \"large large\"\r\n \"medium small\"\r\n \"tall tall\";\r\n height: 600px;\r\n }\r\n\r\n .build-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .footer-column {\r\n width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"nav\" id=\"navbar\">\r\n <div class=\"nav-menu\">\r\n <a href=\"#services\">Services<\/a>\r\n <div class=\"dropdown\">\r\n <a href=\"#\">Media<\/a>\r\n <div class=\"dropdown-content\">\r\n <a href=\"https:\/\/yogeshbhandari7753.com.np\/?page_id=441\">Gallery<\/a>\r\n <a href=\"https:\/\/yogeshbhandari7753.com.np\/?page_id=655\">Blogs<\/a>\r\n <a href=\"#testi\">Testimonials<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"nav-logo\">\r\n <img decoding=\"async\" id=\"nav-logo-img\" src=\"https:\/\/yogeshbhandari7753.com.np\/wp-content\/uploads\/2025\/03\/cropped-Untitled_design-10-removebg-preview.png\" alt=\"Logo\">\r\n <\/div>\r\n\r\n <a href=\"https:\/\/yogeshbhandari7753.com.np\/#contact\" class=\"contact-link\">Contact<\/a>\r\n <\/div>\r\n\r\n <section class=\"hero\">\r\n <div class=\"hero-overlay\"><\/div>\r\n <video autoplay muted loop playsinline class=\"hero-bg\">\r\n <source src=\"https:\/\/yogeshbhandari7753.com.np\/wp-content\/uploads\/2025\/06\/WhatsApp-Video-2025-05-21-at-2.47.09-PM.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n<\/section>\r\n\r\n\r\n \r\n <div class=\"content-wrapper\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <section id=\"services\" class=\"services-section full-width-section\">\r\n <h2>Our Premium Services<\/h2>\r\n <div class=\"services-grid\">\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-magnifying-glass-chart fa-beat-fade\" style=\"--fa-animation-duration: 3s;\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">SEO & SEM Optimization<\/h3>\r\n <p class=\"service-desc\">Boost your online visibility and drive quality traffic through smart search strategies.\r\n<\/p>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-lightbulb fa-bounce\" style=\"--fa-animation-duration: 2s;\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Creative Branding<\/h3>\r\n <p class=\"service-desc\">Build a strong, memorable brand identity that truly connects with your audience.<\/p>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-bullhorn fa-flip\" style=\"--fa-animation-duration: 4s;\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Google Ads<\/h3>\r\n <p class=\"service-desc\">Maximize your reach and ROI with targeted, high-converting Google ad campaigns.<\/p>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-ad fa-shake\" style=\"--fa-animation-duration: 5s;\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Meta Ads<\/h3>\r\n <p class=\"service-desc\">Engage the right audience on Facebook and Instagram with powerful ad creatives.<\/p>\r\n <\/div>\r\n\r\n \r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n\r\n \r\n <section class=\"fullwidth-section\">\r\n <div class=\"section-container\">\r\n <h2 class=\"animated-heading\">Our <span class=\"highlight-word\">DNA<\/span><\/h2>\r\n <\/div>\r\n\u00a0\u00a0\u00a0\u00a0<\/section>\r\n\r\n \r\n <section class=\"dna-section\">\r\n <div class=\"scroll-sections\">\r\n <div class=\"section\">\r\n <div class=\"icon\"><i class=\"fas fa-lightbulb\"><\/i><\/div>\r\n <h2 onclick=\"toggleDesc(this)\">Creatively Led<\/h2>\r\n <div class=\"description hidden\">\r\n <p>Ambition for the best creative leads all of us. We care about the quality and integrity of our work above all else.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section\">\r\n <div class=\"icon\"><i class=\"fas fa-chart-line\"><\/i><\/div>\r\n <h2 onclick=\"toggleDesc(this)\">Strategically Driven<\/h2>\r\n <div class=\"description hidden\">\r\n <p>We believe the path to world-class work is through rigorous creative strategy that has clear and measurable objectives and is rooted in Brand Purpose.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section\">\r\n <div class=\"icon\"><i class=\"fas fa-cogs\"><\/i><\/div>\r\n <h2 onclick=\"toggleDesc(this)\">Systems Thinkers<\/h2>\r\n <div class=\"description hidden\">\r\n <p>From product innovation to performance marketing, we believe all our work needs to work in concert to connect every element at every phase of the customer journey.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section\">\r\n <div class=\"icon\"><i class=\"fas fa-users\"><\/i><\/div>\r\n <h2 onclick=\"toggleDesc(this)\">Humanity Obsessed<\/h2>\r\n <div class=\"description hidden\">\r\n <p>We strive to create work that adds value to people's lives, not noise. We believe our industry needs to be transformed to create things people actually want and welcome.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n \r\n <section class=\"collaboration-section\">\r\n <div class=\"collaboration-container\">\r\n <div class=\"collaboration-content\">\r\n <h2>Collaborate with your team anytime, anywhere<\/h2>\r\n <p class=\"collaboration-description\">See which work apps your team is working in, and join them with a click. Shared cursors equals better than screen-sharing.<\/p>\r\n \r\n <ul class=\"collaboration-features\">\r\n <li class=\"feature-item\">\r\n <span class=\"check-icon\">\u2713<\/span>\r\n <span>Organize your data<\/span>\r\n <\/li>\r\n <li class=\"feature-item\">\r\n <span class=\"check-icon\">\u2713<\/span>\r\n <span>Always in sync<\/span>\r\n <\/li>\r\n <li class=\"feature-item\">\r\n <span class=\"check-icon\">\u2713<\/span>\r\n <span>Work with any team<\/span>\r\n <\/li>\r\n <li class=\"feature-item\">\r\n <span class=\"check-icon\">\u2713<\/span>\r\n <span>Embedded analytics<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"collaboration-gallery\">\r\n <div class=\"photo-grid\">\r\n <div class=\"photo-large\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1579389083078-4e7018379f7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80\" alt=\"Team meeting\">\r\n <\/div>\r\n <div class=\"photo-medium\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80\" alt=\"Team working\">\r\n <\/div>\r\n <div class=\"photo-small\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\" alt=\"Team discussion\">\r\n <\/div>\r\n <div class=\"photo-tall\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1466692476868-aef1dfb1e735?ixlib=rb-1.2.1&auto=format&fit=crop&w=250&h=350&q=80\" alt=\"Team brainstorming\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n\r\n <section class=\"build-section\">\r\n <div class=\"build-overlay\"><\/div>\r\n \r\n <div class=\"build-content\">\r\n <h2 class=\"build-title\">Let's Build Something Together<\/h2>\r\n <p class=\"build-text\">We'll help bring your vision to life with our expert team and proven process.<\/p>\r\n \r\n <button class=\"quote-button\">\r\n Get a Free Quote\r\n <span class=\"button-arrow\">\u2192<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n\r\n<footer id=\"contact\">\r\n \r\n <div class=\"footer-logo-wrapper\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/yogeshbhandari7753.com.np\/wp-content\/uploads\/2025\/03\/cropped-Untitled_design-10-removebg-preview.png\"\r\n alt=\"Logo\"\r\n class=\"footer-logo\"\r\n \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-container\">\r\n \r\n <div class=\"footer-section\">\r\n <h3>Digital Marketing Agency<\/h3>\r\n <p class=\"footer-description\">\r\n We are experts in Search Engine Optimisation<br \/>\r\n and passionate about assisting businesses<br \/>\r\n in their digital growth.\r\n <\/p>\r\n <div class=\"footer-social-wrapper\">\r\n <span>Follow us on<\/span>\r\n <div class=\"social-icon\">\r\n <a href=\"#\"><i class=\"fab fa-linkedin\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-section\">\r\n <h3>Contact Us<\/h3>\r\n <ul>\r\n <li><strong>Phone:<\/strong> +61 450 406 450<\/li>\r\n <li><strong>Email:<\/strong> contact@agency.com<\/li>\r\n <li>\r\n <strong>Address:<\/strong> 161 Castlereagh St, Sydney, NSW 2000, AU\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-bottom\">\r\n © 2025 Marketing Agency. All rights reserved.\r\n <\/div>\r\n \r\n <div class=\"floating-element\" style=\"width: 80px; height: 80px; top: 20%; left: 5%; animation-delay: 0s; background: rgba(221,4,4,0.1);\"><\/div>\r\n <div class=\"geometric-shape\" style=\"width: 40px; height: 40px; top: 70%; left: 90%; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: rgba(255,255,255,0.1); animation-delay: -3s;\"><\/div>\r\n <div class=\"particle\" style=\"top: 100%; left: 10%; animation-duration: 6s;\"><\/div>\r\n <div class=\"particle\" style=\"top: 95%; left: 30%; animation-duration: 7s; animation-delay: -2s;\"><\/div>\r\n <div class=\"floating-element\" style=\"width: 60px; height: 60px; top: 40%; left: 80%; animation-delay: -1s; background: rgba(255,255,255,0.05);\"><\/div>\r\n <div class=\"geometric-shape\" style=\"width: 50px; height: 50px; top: 60%; left: 10%; background: rgba(221,4,4,0.15); animation-delay: -4s; clip-path: circle(50% at 50% 50%);\"><\/div>\r\n\r\n<\/footer>\r\n\r\n \r\n <script>\r\n \/\/ Smooth Logo Animation (unchanged from your original)\r\n window.addEventListener('scroll', function() {\r\n const navbar = document.getElementById('navbar');\r\n const navLogo = document.querySelector('.nav-logo');\r\n const navLogoImg = document.getElementById('nav-logo-img');\r\n const navLinks = document.querySelectorAll('.nav a, .contact-link');\r\n \r\n const scrollY = window.scrollY;\r\n const maxScroll = 300;\r\n const progress = Math.min(scrollY \/ maxScroll, 1);\r\n \r\n \/\/ Animate logo size and position\r\n const logoSize = 472 - (372 * progress);\r\n navLogoImg.style.width = `${logoSize}px`;\r\n \r\n const startPos = window.innerHeight \/ 2;\r\n const endPos = 35;\r\n const currentPos = startPos - ((startPos - endPos) * progress);\r\n navLogo.style.top = `${currentPos}px`;\r\n \r\n \/\/ Toggle navbar state\r\n if (progress >= 1) {\r\n navbar.classList.add('scrolled');\r\n navLinks.forEach(link => link.style.color = 'red');\r\n } else {\r\n navbar.classList.remove('scrolled');\r\n navLinks.forEach(link => link.style.color = 'white');\r\n }\r\n });\r\n\r\n \/\/ DNA Section Animation\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n const sections = document.querySelectorAll(\".section\");\r\n const observer = new IntersectionObserver(entries => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add(\"show\");\r\n }\r\n });\r\n }, { threshold: 0.5 });\r\n sections.forEach(section => observer.observe(section));\r\n });\r\n\r\n \/\/ General fade-in animations\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const elements = document.querySelectorAll('.service-card, .testimonial-card, .build-content');\r\n \r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.style.opacity = '1';\r\n entry.target.style.transform = 'translateY(0)';\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n \r\n elements.forEach(el => {\r\n el.style.opacity = '0';\r\n el.style.transform = 'translateY(20px)';\r\n el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n <script>\r\n function toggleDesc(header) {\r\n const desc = header.nextElementSibling;\r\n desc.classList.toggle('show');\r\n }\r\n <\/script>\r\n \r\n <script>\r\n function toggleDesc(header) {\r\n const allDescriptions = document.querySelectorAll('.description');\r\n allDescriptions.forEach(d => {\r\n if (d !== header.nextElementSibling) {\r\n d.classList.remove('show');\r\n }\r\n });\r\n header.nextElementSibling.classList.toggle('show');\r\n }\r\n <\/script>\r\n \r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Marketing Agency Services Media Gallery Blogs Testimonials Contact Your browser does not support the video tag. Our Premium Services SEO […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-974","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/pages\/974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=974"}],"version-history":[{"count":976,"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/pages\/974\/revisions"}],"predecessor-version":[{"id":2224,"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/pages\/974\/revisions\/2224"}],"wp:attachment":[{"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Marketing Agency<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" \/>\r\n\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: Arial, sans-serif;\r\n overflow-x: hidden;\r\n background-color: #fff;\r\n }\r\n\r\n \/* Navbar Styles *\/\r\n .nav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n z-index: 1000;\r\n background: transparent;\r\n height: 100px;\r\n padding: 0 50px;\r\n will-change: transform, background;\r\n }\r\n\r\n .nav-menu {\r\n display: flex;\r\n gap: 20px;\r\n }\r\n\r\n .nav-menu .dropdown {\r\n position: relative;\r\n }\r\n\r\n \/*.nav-menu .dropdown-content {*\/\r\n \/* position: absolute;*\/\r\n \/* top: 100%;*\/\r\n \/* left: 0;*\/\r\n \/* min-width: 180px;*\/\r\n \/* background: rgba(255, 255, 255, 0.1);*\/\r\n \/* backdrop-filter: blur(15px);*\/\r\n \/* box-shadow: 0px 4px 20px rgba(0, 255, 255, 0.5);*\/\r\n \/* border-radius: 10px;*\/\r\n \/* padding: 10px 0;*\/\r\n \/* opacity: 0;*\/\r\n \/* visibility: hidden;*\/\r\n \/* transform: translateY(15px) scale(0.9);*\/\r\n \/* transition: transform 0.4s ease, opacity 0.3s ease-in-out;*\/\r\n \/* overflow: hidden;*\/\r\n \/*}*\/\r\n \r\n .nav-menu .dropdown-content {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n min-width: 180px;\r\n background: rgba(255, 255, 255, 0.05); \/* Light glassy background *\/\r\n backdrop-filter: blur(15px);\r\n box-shadow: 0px 4px 20px rgba(221, 4, 4, 0.4); \/* red glow *\/\r\n border-radius: 10px;\r\n padding: 10px 0;\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateY(15px) scale(0.9);\r\n transition: transform 0.4s ease, opacity 0.3s ease-in-out;\r\n overflow: hidden;\r\n}\r\n\r\n\r\n .nav-menu .dropdown:hover .dropdown-content {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0) scale(1);\r\n }\r\n\r\n .nav-menu .dropdown-content a {\r\n display: block;\r\n padding: 12px 20px;\r\n text-decoration: none;\r\n color: white;\r\n font-size: 16px;\r\n text-align: left;\r\n transition: all 0.3s;\r\n }\r\n\r\n \/*.nav-menu .dropdown-content a:hover {*\/\r\n \/* background: rgba(0, 255, 255, 0.3);*\/\r\n \/* color: cyan;*\/\r\n \/*}*\/\r\n \r\n .nav-menu .dropdown-content a:hover {\r\n background: rgba(221, 4, 4, 0.2); \/* light red background *\/\r\n color: #dd0404; \/* bold red text *\/\r\n}\r\n\r\n .nav a {\r\n text-decoration: none;\r\n color: white;\r\n font-size: 18px;\r\n transition: color 0.4s ease-in-out;\r\n }\r\n\r\n \/* Logo Animation *\/\r\n .nav-logo {\r\n position: absolute;\r\n top: 50vh;\r\n left: 50%;\r\n margin-top: -12px;\r\n transform: translate(-50%, -50%);\r\n transition: all 0.6s cubic-bezier(0.2, 0.8, 0.4, 1);\r\n z-index: 1001;\r\n will-change: transform;\r\n }\r\n\r\n .nav-logo img {\r\n width: 472px;\r\n transition: all 0.6s cubic-bezier(0.2, 0.8, 0.4, 1);\r\n will-change: width;\r\n }\r\n\r\n .contact-link {\r\n position: absolute;\r\n top: 20px;\r\n right: 50px;\r\n color: white;\r\n transition: color 0.4s ease-in-out;\r\n }\r\n\r\n \/* Scrolled State *\/\r\n .scrolled {\r\n background: white;\r\n padding: 10px 50px;\r\n height: 70px;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n }\r\n\r\n .scrolled .nav-logo {\r\n top: 35px;\r\n transform: translateX(-50%);\r\n }\r\n\r\n .scrolled .nav-logo img {\r\n width: 100px;\r\n }\r\n\r\n .scrolled a {\r\n color: #dd0404 !important;\r\n }\r\n\r\n \/* Hero Section - Now Fixed *\/\r\n \/* Hero Section *\/\r\n \r\n \/*new new hero hero end end*\/\r\n.hero {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100vh;\r\n z-index: -1;\r\n overflow: hidden;\r\n}\r\n\r\n.hero-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.6); \/* 40% black overlay *\/\r\n z-index: 1;\r\n}\r\n\r\n.hero-bg {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n min-width: 100%;\r\n min-height: 100%;\r\n width: auto;\r\n height: auto;\r\n object-fit: cover;\r\n z-index: 0;\r\n}\r\n\r\n\/* Content Wrapper *\/\r\n.content-wrapper {\r\n position: relative;\r\n z-index: 100;\r\n background-color: white;\r\n margin-top: 100vh;\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n .hero {\r\n height: 60vh;\r\n }\r\n \r\n .hero-bg {\r\n width: 300%;\r\n height: 100%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n}\r\n \r\n \/*newnew endend*\/\r\n\r\n \/* Content Wrapper - Scrolls over hero *\/\r\n .content-wrapper {\r\n position: relative;\r\n z-index: 100;\r\n background-color: white;\r\n margin-top: 100vh; \/* Push content below hero *\/\r\n }\r\n\/* Services section statrs here *\/\r\n\r\n \/* Services Section *\/\r\n .services-section {\r\n padding: 100px 0;\r\n background-color: white;\r\n position: relative;\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n }\r\n \r\n .services-section h2 {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n font-size: 2.8rem;\r\n font-weight: 700;\r\n color: #222;\r\n padding: 0 20px;\r\n position: relative;\r\n }\r\n \r\n .services-section h2:after {\r\n content: '';\r\n position: absolute;\r\n width: 80px;\r\n height: 5px;\r\n background: linear-gradient(90deg, #dd0404, #ff4d4d);\r\n bottom: -20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n border-radius: 5px;\r\n }\r\n \r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 0;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n .service-card {\r\n padding: 50px 40px;\r\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4);\r\n position: relative;\r\n min-height: 320px;\r\n background: white;\r\n overflow: hidden;\r\n border: 1px solid rgba(221, 4, 4, 0.05);\r\n }\r\n \r\n \/* Vertical dividers *\/\r\n .service-card:not(:nth-child(3n)):after {\r\n content: \"\";\r\n position: absolute;\r\n right: 0;\r\n top: 40px;\r\n bottom: 40px;\r\n width: 1px;\r\n background: linear-gradient(to bottom, transparent, rgba(221, 4, 4, 0.2), transparent);\r\n }\r\n \r\n \/* Horizontal dividers *\/\r\n .service-card:nth-child(n+4):before {\r\n content: \"\";\r\n position: absolute;\r\n left: 40px;\r\n right: 40px;\r\n top: 0;\r\n height: 1px;\r\n background: linear-gradient(to right, transparent, rgba(221, 4, 4, 0.2), transparent);\r\n }\r\n \r\n .service-card:hover {\r\n transform: translateY(-15px) scale(1.02);\r\n box-shadow: 0 25px 50px rgba(221, 4, 4, 0.15);\r\n z-index: 10;\r\n border-color: rgba(221, 4, 4, 0.2);\r\n background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,245,245,0.98));\r\n }\r\n \r\n .service-card:hover .service-icon {\r\n animation: iconPulse 0.8s ease;\r\n color: #dd0404;\r\n text-shadow: 0 5px 15px rgba(221, 4, 4, 0.3);\r\n }\r\n \r\n .service-card:hover .service-title {\r\n color: #dd0404;\r\n text-shadow: 0 2px 5px rgba(221, 4, 4, 0.1);\r\n }\r\n \r\n .service-card:hover .service-desc {\r\n color: #555;\r\n }\r\n \r\n .service-card:before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(221,4,4,0.1) 0%, rgba(221,4,4,0) 70%);\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n z-index: -1;\r\n }\r\n \r\n .service-card:hover:before {\r\n opacity: 1;\r\n }\r\n \r\n .service-icon {\r\n font-size: 3.5rem;\r\n color: #444;\r\n margin-bottom: 30px;\r\n transition: all 0.4s ease;\r\n display: inline-block;\r\n }\r\n \r\n .service-title {\r\n font-size: 1.6rem;\r\n margin-bottom: 25px;\r\n color: #222;\r\n transition: all 0.3s ease;\r\n font-weight: 700;\r\n }\r\n \r\n .service-desc {\r\n color: #666;\r\n line-height: 1.8;\r\n font-size: 1.1rem;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n @keyframes iconPulse {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.2); }\r\n 100% { transform: scale(1); }\r\n }\r\n \r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-10px); }\r\n }\r\n \r\n \/* Responsive Adjustments *\/\r\n @media (max-width: 1200px) {\r\n .service-card {\r\n padding: 40px 30px;\r\n min-height: 300px;\r\n }\r\n }\r\n \r\n @media (max-width: 1024px) {\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .service-card:after {\r\n display: none;\r\n }\r\n \r\n .service-card:nth-child(2n):after {\r\n display: block;\r\n }\r\n \r\n .service-card:nth-child(n+3):before {\r\n content: \"\";\r\n position: absolute;\r\n left: 40px;\r\n right: 40px;\r\n top: 0;\r\n height: 1px;\r\n background: linear-gradient(to right, transparent, rgba(221, 4, 4, 0.2), transparent);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .services-section {\r\n padding: 80px 0;\r\n }\r\n \r\n .services-section h2 {\r\n font-size: 2.4rem;\r\n margin-bottom: 50px;\r\n }\r\n \r\n .service-card {\r\n padding: 35px 25px;\r\n min-height: 280px;\r\n }\r\n \r\n .service-icon {\r\n font-size: 3rem;\r\n margin-bottom: 25px;\r\n }\r\n \r\n .service-title {\r\n font-size: 1.4rem;\r\n margin-bottom: 20px;\r\n }\r\n }\r\n \r\n @media (max-width: 640px) {\r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .service-card {\r\n padding: 40px 30px;\r\n min-height: auto;\r\n }\r\n \r\n .service-card:after, \r\n .service-card:before {\r\n display: none !important;\r\n }\r\n \r\n .service-card:not(:last-child) {\r\n border-bottom: 1px solid rgba(221, 4, 4, 0.1);\r\n }\r\n \r\n .service-card:hover {\r\n transform: none;\r\n box-shadow: 0 15px 30px rgba(221, 4, 4, 0.1);\r\n }\r\n } \r\n\/* services section rests here *\/\r\n \r\n\r\n \/* DNA section startas here *\/\r\n\r\n .fullwidth-section {\r\n width: 100vw; \/* Full viewport width *\/\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n }\r\n\r\n \/* Container for centered content *\/\r\n .section-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n text-align: center;\r\n width: 100vw;\r\n \r\n }\r\n\r\n \/* Heading styles *\/\r\n .animated-heading {\r\n font-size: 3rem;\r\n color: #333;\r\n font-weight: 600;\r\n display: inline-block;\r\n position: relative;\r\n padding-bottom: 10px;\r\n }\r\n\r\n \/* DNA word styling *\/\r\n .highlight-word {\r\n color: #cb0404;\r\n position: relative;\r\n }\r\n\r\n \/* Animated underline *\/\r\n .highlight-word::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -5px;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: #ff3366;\r\n transform: scaleX(0);\r\n transform-origin: right;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n \/* Animation on hover *\/\r\n .animated-heading:hover .highlight-word::after {\r\n transform: scaleX(1);\r\n transform-origin: left;\r\n }\r\n\r\n \/* Responsive adjustments *\/\r\n @media (max-width: 768px) {\r\n .fullwidth-section { padding: 60px 0; }\r\n .animated-heading { font-size: 2.5rem; }\r\n }\r\n @media (max-width: 480px) {\r\n .animated-heading { font-size: 2rem; }\r\n }\r\n\r\n \/* Original DNA Section Style *\/\r\n .scroll-sections {\r\n margin: auto;\r\n padding: 40px 54px;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n }\r\n \r\n .scroll-sections::before {\r\n content: '';\r\n position: absolute;\r\n left: 50%;\r\n top: 0;\r\n width: 6px;\r\n height: 100%;\r\n background: linear-gradient(180deg, #ff8c00, #ff0080);\r\n transform: translateX(-50%);\r\n border-radius: 3px;\r\n }\r\n .section {\r\n background: #af1010;\r\n padding: 30px;\r\n margin: 40px 140px;\r\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);\r\n position: relative;\r\n width: 40%;\r\n border-radius: 12px;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n color: white;\r\n }\r\n .section.show {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .section:nth-child(odd) {\r\n align-self: flex-start;\r\n }\r\n .section:nth-child(even) {\r\n align-self: flex-end;\r\n }\r\n .icon {\r\n position: absolute;\r\n top: -35px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 50px;\r\n height: 50px;\r\n background: linear-gradient(45deg, #ff8c00, #ff0080);\r\n color: white;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n font-size: 24px;\r\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);\r\n animation: bounce 1.5s infinite;\r\n }\r\n @keyframes bounce {\r\n 0%, 100% {\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n 50% {\r\n transform: translateX(-50%) translateY(-10px);\r\n }\r\n }\r\n h2 {\r\n color: #ffffff;\r\n margin: 10px 0;\r\n font-size: 22px;\r\n }\r\n p {\r\n color: #ddd;\r\n font-size: 16px;\r\n }\r\n \r\n \r\n .description {\r\n max-height: 0;\r\n overflow: hidden;\r\n opacity: 0;\r\n transition: all 0.4s ease-in-out;\r\n }\r\n\r\n .description.show {\r\n max-height: 300px; \/* Adjust as needed *\/\r\n opacity: 1;\r\n margin-top: 10px;\r\n }\r\n \r\n h2 {\r\n cursor: pointer;\r\n }\r\n \r\n \r\n @media (max-width: 768px) {\r\n .section{\r\n width: 125% !important;\r\n }\r\n } \r\n\r\n \/*DNA ends*\/\r\n \r\n \r\n \r\n \r\n \/* Team Collaboration Section *\/\r\n .collaboration-section {\r\n padding: 100px 0;\r\n background: white;\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n }\r\n\r\n .collaboration-container {\r\n display: flex;\r\n align-items: center;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n gap: 60px;\r\n }\r\n\r\n .collaboration-content {\r\n flex: 1;\r\n }\r\n\r\n .collaboration-gallery {\r\n flex: 1;\r\n }\r\n\r\n .collaboration-content h2 {\r\n font-size: 2.2rem;\r\n color: #333;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .collaboration-description {\r\n font-size: 1.1rem;\r\n color: #555;\r\n margin-bottom: 30px;\r\n line-height: 1.6;\r\n }\r\n\r\n .collaboration-features {\r\n list-style: none;\r\n }\r\n\r\n .feature-item {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 15px;\r\n font-size: 1.05rem;\r\n color: #444;\r\n }\r\n\r\n .check-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 24px;\r\n height: 24px;\r\n background-color: #dd0404;\r\n color: white;\r\n border-radius: 50%;\r\n margin-right: 15px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .photo-grid {\r\n display: grid;\r\n grid-template-areas:\r\n \"large large medium medium\"\r\n \"large large small tall\";\r\n gap: 15px;\r\n height: 500px;\r\n }\r\n\r\n .photo-large {\r\n grid-area: large;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n\r\n .photo-medium {\r\n grid-area: medium;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n\r\n .photo-small {\r\n grid-area: small;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n\r\n .photo-tall {\r\n grid-area: tall;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n\r\n .photo-grid img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .photo-grid div:hover img {\r\n transform: scale(1.05);\r\n }\r\n \r\n \r\n\r\n\/* Build Section - Full Width *\/\r\n .build-section {\r\n position: relative;\r\n min-height: 400px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #ffffff;\r\n background-size: cover;\r\n text-align: center;\r\n padding: 80px 0; \/* Vertical padding only *\/\r\n width: 100vw;\r\n margin-left: calc(-50vw + 50%);\r\n }\r\n \r\n \/* Content Box with Space *\/\r\n .build-content {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 800px;\r\n width: calc(100% - 40px); \/* Account for mobile padding *\/\r\n margin: 40px auto;\r\n padding: 50px 40px;\r\n background: rgba(255,255,255,0.95);\r\n border-radius: 8px;\r\n box-shadow: 0 5px 30px rgba(0,0,0,0.1);\r\n transform: translateY(20px);\r\n opacity: 0;\r\n transition: all 0.6s ease-out;\r\n }\r\n \r\n \/* Fade-in Animation *\/\r\n .build-content.animated {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n \/* Simple Overlay *\/\r\n .build-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(255,255,255,0.7);\r\n }\r\n \r\n .build-title {\r\n font-size: 2.5rem;\r\n margin-bottom: 20px;\r\n color: #333;\r\n }\r\n \r\n .build-text {\r\n font-size: 1.1rem;\r\n line-height: 1.6;\r\n margin-bottom: 30px;\r\n color: #555;\r\n max-width: 600px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n \r\n \/* Animated Button *\/\r\n .quote-button {\r\n position: relative;\r\n padding: 15px 35px;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n color: #fff;\r\n background: #333;\r\n border: none;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n }\r\n .button-arrow {\r\n margin-left: 10px;\r\n transition: transform 0.4s ease;\r\n }\r\n \r\n .quote-button::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(255,255,255,0.1);\r\n transition: all 0.4s ease;\r\n }\r\n \r\n .quote-button:hover {\r\n background: #222;\r\n }\r\n \r\n .quote-button:hover .button-arrow {\r\n transform: translateX(5px);\r\n }\r\n \r\n .quote-button:hover::before {\r\n left: 100%;\r\n }\r\n \/* Responsive Adjustments *\/\r\n @media (max-width: 768px) {\r\n .build-section {\r\n min-height: 350px;\r\n padding: 60px 20px;\r\n }\r\n \r\n .build-content {\r\n padding: 40px 30px;\r\n margin: 30px auto;\r\n }\r\n \r\n .build-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .build-text {\r\n font-size: 1rem;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .build-section {\r\n min-height: 300px;\r\n padding: 40px 20px;\r\n }\r\n \r\n .build-content {\r\n padding: 30px 20px;\r\n margin: 20px auto;\r\n width: calc(100% - 20px);\r\n }\r\n \r\n .build-title {\r\n font-size: 1.8rem;\r\n }\r\n }\r\n\r\n\r\n\r\n \/* Footer - Increased Height *\/\r\n \r\n footer {\r\n color: #fff;\r\n padding: 40px 20px 20px;\r\n font-family: 'Arial', sans-serif;\r\n position: relative;\r\n z-index: 1;\r\n width: 100vw;\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw;\r\n margin-right: -50vw;\r\n background: white;\r\n \r\n }\r\n\r\n\/*footer::before {*\/\r\n\/* content: '';*\/\r\n\/* position: absolute;*\/\r\n\/* top: 0;*\/\r\n\/* left: 0;*\/\r\n\/* width: 100%;*\/\r\n\/* height: 100%;*\/\r\n\/* background-color: rgba(15, 15, 15, 1);*\/\r\n\/* z-index: -1;*\/\r\n\/*}*\/\r\n\r\n\/* Animated Gradient Background *\/\r\nfooter::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(\r\n 45deg,\r\n #dd0404, \/* Red accent color *\/\r\n #1a1a1a,\r\n #2d2d2d,\r\n #dd0404,\r\n #1a1a1a\r\n );\r\n background-size: 400% 400%;\r\n animation: gradientFlow 12s ease infinite;\r\n z-index: -1;\r\n opacity: 0.9;\r\n}\r\n\r\n\/* Enhanced Floating Animation *\/\r\n@keyframes floating {\r\n 0% { \r\n transform: translateY(0) rotate(0deg) scale(1);\r\n opacity: 0.8;\r\n }\r\n 50% { \r\n transform: translateY(-40px) rotate(180deg) scale(1.2);\r\n opacity: 1;\r\n }\r\n 100% { \r\n transform: translateY(0) rotate(360deg) scale(1);\r\n opacity: 0.8;\r\n }\r\n}\r\n\r\n\/* Particle Animation *\/\r\n@keyframes particles {\r\n 0% {\r\n transform: translateY(0) translateX(0);\r\n opacity: 0;\r\n }\r\n 50% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n transform: translateY(-100vh) translateX(100px);\r\n opacity: 0;\r\n }\r\n}\r\n\r\n\/* New Floating Elements *\/\r\n.floating-element {\r\n position: absolute;\r\n background: rgba(221, 4, 4, 0.15);\r\n border-radius: 50%;\r\n animation: floating 6s ease-in-out infinite;\r\n filter: blur(1px);\r\n z-index: 0;\r\n}\r\n\r\n\/* Particle Elements *\/\r\n.particle {\r\n position: absolute;\r\n background: rgba(255, 255, 255, 0.3);\r\n width: 2px;\r\n height: 2px;\r\n border-radius: 50%;\r\n animation: particles 8s linear infinite;\r\n}\r\n\r\n\/* Geometric Shapes *\/\r\n.geometric-shape {\r\n position: absolute;\r\n animation: floating 8s ease-in-out infinite;\r\n opacity: 0.1;\r\n mix-blend-mode: screen;\r\n}\r\n\r\n\r\n\r\n\/* Logo centered at top *\/\r\n.footer-logo-wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n max-width: 1000px;\r\n margin: auto;\r\n gap: 40px;\r\n padding: 30px 6px;\r\n}\r\n\r\n.footer-logo {\r\n width: 150px;\r\n height: auto;\r\n}\r\n\r\n\/* Two sections in flex row *\/\r\n.footer-container {\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n max-width: 1000px;\r\n margin: auto;\r\n gap: 40px;\r\n padding: 0 20px;\r\n}\r\n\r\n\/* Each column *\/\r\n.footer-section {\r\n flex: 1 1 300px;\r\n min-width: 250px;\r\n}\r\n\r\n.footer-section h3 {\r\n margin-bottom: 15px;\r\n font-size: 20px;\r\n font-weight: 600;\r\ncolor:#dd0404;}\r\n\r\n.footer-description {\r\n line-height: 1.6;\r\n margin-bottom: 20px;\r\n}\r\n\r\n\/* Contact list *\/\r\n.footer-section ul {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\n.footer-section li {\r\n margin-bottom: 10px;\r\n}\r\n\r\n\/* Social *\/\r\n.footer-social-wrapper {\r\n margin-top: 10px;\r\n display: flex;\r\n align-items: start;\r\n gap: 10px;\r\n flex-direction: column;\r\n}\r\n\r\n.social-icon {\r\n background-color: white;\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 5px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.social-icon a i {\r\n color: black;\r\n font-size: 18px;\r\n}\r\n\r\n\/* Bottom text *\/\r\n.footer-bottom {\r\n text-align: center;\r\n padding-top: 30px;\r\n font-size: 14px;\r\n border-top: 1px solid #333;\r\n margin-top: 40px;\r\n}\r\n \/* Responsive Adjustments footer*\/\r\n@media (max-width: 768px) {\r\n .footer-container {\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n padding: 0 10px;\r\n }\r\n\r\n .footer-section {\r\n flex: 1 1 100%;\r\n min-width: unset;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .footer-logo-wrapper {\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 20px;\r\n padding: 20px 10px;\r\n }\r\n\r\n .footer-logo {\r\n width: 120px;\r\n }\r\n\r\n .footer-social-wrapper {\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .footer-description {\r\n font-size: 14px;\r\n line-height: 1.5;\r\n }\r\n\r\n .footer-section h3 {\r\n font-size: 18px;\r\n }\r\n\r\n .footer-bottom {\r\n font-size: 12px;\r\n margin-top: 30px;\r\n padding-top: 20px;\r\n }\r\n}\r\n\r\n\r\n\r\n \/* Responsive Adjustments *\/\r\n @media (max-width: 1024px) {\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .collaboration-container {\r\n flex-direction: column;\r\n }\r\n\r\n .photo-grid {\r\n height: 400px;\r\n }\r\n\r\n .scroll-sections {\r\n width: 80%;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .nav {\r\n padding: 0 20px;\r\n }\r\n \r\n .services-section {\r\n padding: 80px 20px;\r\n }\r\n \r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .service-card {\r\n padding: 40px 30px;\r\n }\r\n\r\n .section {\r\n width: 100%;\r\n margin: 30px 0;\r\n }\r\n\r\n .scroll-sections::before {\r\n left: 30px;\r\n }\r\n\r\n .section:nth-child(odd), \r\n .section:nth-child(even) {\r\n align-self: center;\r\n }\r\n\r\n .icon {\r\n left: 30px;\r\n transform: translateX(0);\r\n }\r\n\r\n .testimonials-section {\r\n padding: 80px 20px;\r\n }\r\n\r\n .build-section {\r\n padding: 80px 20px;\r\n }\r\n\r\n .build-title {\r\n font-size: 2rem;\r\n }\r\n\r\n footer {\r\n padding: 80px 20px 40px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .nav-logo img {\r\n width: 300px;\r\n }\r\n\r\n .photo-grid {\r\n grid-template-areas:\r\n \"large large\"\r\n \"large large\"\r\n \"medium small\"\r\n \"tall tall\";\r\n height: 600px;\r\n }\r\n\r\n .build-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .footer-column {\r\n width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"nav\" id=\"navbar\">\r\n <div class=\"nav-menu\">\r\n <a href=\"#services\">Services<\/a>\r\n <div class=\"dropdown\">\r\n <a href=\"#\">Media<\/a>\r\n <div class=\"dropdown-content\">\r\n <a href=\"https:\/\/yogeshbhandari7753.com.np\/?page_id=441\">Gallery<\/a>\r\n <a href=\"https:\/\/yogeshbhandari7753.com.np\/?page_id=655\">Blogs<\/a>\r\n <a href=\"#testi\">Testimonials<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"nav-logo\">\r\n <img decoding=\"async\" id=\"nav-logo-img\" src=\"https:\/\/yogeshbhandari7753.com.np\/wp-content\/uploads\/2025\/03\/cropped-Untitled_design-10-removebg-preview.png\" alt=\"Logo\">\r\n <\/div>\r\n\r\n <a href=\"https:\/\/yogeshbhandari7753.com.np\/#contact\" class=\"contact-link\">Contact<\/a>\r\n <\/div>\r\n\r\n <section class=\"hero\">\r\n <div class=\"hero-overlay\"><\/div>\r\n <video autoplay muted loop playsinline class=\"hero-bg\">\r\n <source src=\"https:\/\/yogeshbhandari7753.com.np\/wp-content\/uploads\/2025\/06\/WhatsApp-Video-2025-05-21-at-2.47.09-PM.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n<\/section>\r\n\r\n\r\n \r\n <div class=\"content-wrapper\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <section id=\"services\" class=\"services-section full-width-section\">\r\n <h2>Our Premium Services<\/h2>\r\n <div class=\"services-grid\">\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-magnifying-glass-chart fa-beat-fade\" style=\"--fa-animation-duration: 3s;\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">SEO & SEM Optimization<\/h3>\r\n <p class=\"service-desc\">Boost your online visibility and drive quality traffic through smart search strategies.\r\n<\/p>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-lightbulb fa-bounce\" style=\"--fa-animation-duration: 2s;\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Creative Branding<\/h3>\r\n <p class=\"service-desc\">Build a strong, memorable brand identity that truly connects with your audience.<\/p>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-bullhorn fa-flip\" style=\"--fa-animation-duration: 4s;\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Google Ads<\/h3>\r\n <p class=\"service-desc\">Maximize your reach and ROI with targeted, high-converting Google ad campaigns.<\/p>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <i class=\"fas fa-ad fa-shake\" style=\"--fa-animation-duration: 5s;\"><\/i>\r\n <\/div>\r\n <h3 class=\"service-title\">Meta Ads<\/h3>\r\n <p class=\"service-desc\">Engage the right audience on Facebook and Instagram with powerful ad creatives.<\/p>\r\n <\/div>\r\n\r\n \r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n\r\n \r\n <section class=\"fullwidth-section\">\r\n <div class=\"section-container\">\r\n <h2 class=\"animated-heading\">Our <span class=\"highlight-word\">DNA<\/span><\/h2>\r\n <\/div>\r\n\u00a0\u00a0\u00a0\u00a0<\/section>\r\n\r\n \r\n <section class=\"dna-section\">\r\n <div class=\"scroll-sections\">\r\n <div class=\"section\">\r\n <div class=\"icon\"><i class=\"fas fa-lightbulb\"><\/i><\/div>\r\n <h2 onclick=\"toggleDesc(this)\">Creatively Led<\/h2>\r\n <div class=\"description hidden\">\r\n <p>Ambition for the best creative leads all of us. We care about the quality and integrity of our work above all else.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section\">\r\n <div class=\"icon\"><i class=\"fas fa-chart-line\"><\/i><\/div>\r\n <h2 onclick=\"toggleDesc(this)\">Strategically Driven<\/h2>\r\n <div class=\"description hidden\">\r\n <p>We believe the path to world-class work is through rigorous creative strategy that has clear and measurable objectives and is rooted in Brand Purpose.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section\">\r\n <div class=\"icon\"><i class=\"fas fa-cogs\"><\/i><\/div>\r\n <h2 onclick=\"toggleDesc(this)\">Systems Thinkers<\/h2>\r\n <div class=\"description hidden\">\r\n <p>From product innovation to performance marketing, we believe all our work needs to work in concert to connect every element at every phase of the customer journey.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section\">\r\n <div class=\"icon\"><i class=\"fas fa-users\"><\/i><\/div>\r\n <h2 onclick=\"toggleDesc(this)\">Humanity Obsessed<\/h2>\r\n <div class=\"description hidden\">\r\n <p>We strive to create work that adds value to people's lives, not noise. We believe our industry needs to be transformed to create things people actually want and welcome.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n \r\n <section class=\"collaboration-section\">\r\n <div class=\"collaboration-container\">\r\n <div class=\"collaboration-content\">\r\n <h2>Collaborate with your team anytime, anywhere<\/h2>\r\n <p class=\"collaboration-description\">See which work apps your team is working in, and join them with a click. Shared cursors equals better than screen-sharing.<\/p>\r\n \r\n <ul class=\"collaboration-features\">\r\n <li class=\"feature-item\">\r\n <span class=\"check-icon\">\u2713<\/span>\r\n <span>Organize your data<\/span>\r\n <\/li>\r\n <li class=\"feature-item\">\r\n <span class=\"check-icon\">\u2713<\/span>\r\n <span>Always in sync<\/span>\r\n <\/li>\r\n <li class=\"feature-item\">\r\n <span class=\"check-icon\">\u2713<\/span>\r\n <span>Work with any team<\/span>\r\n <\/li>\r\n <li class=\"feature-item\">\r\n <span class=\"check-icon\">\u2713<\/span>\r\n <span>Embedded analytics<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"collaboration-gallery\">\r\n <div class=\"photo-grid\">\r\n <div class=\"photo-large\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1579389083078-4e7018379f7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80\" alt=\"Team meeting\">\r\n <\/div>\r\n <div class=\"photo-medium\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80\" alt=\"Team working\">\r\n <\/div>\r\n <div class=\"photo-small\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80\" alt=\"Team discussion\">\r\n <\/div>\r\n <div class=\"photo-tall\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1466692476868-aef1dfb1e735?ixlib=rb-1.2.1&auto=format&fit=crop&w=250&h=350&q=80\" alt=\"Team brainstorming\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n\r\n <section class=\"build-section\">\r\n <div class=\"build-overlay\"><\/div>\r\n \r\n <div class=\"build-content\">\r\n <h2 class=\"build-title\">Let's Build Something Together<\/h2>\r\n <p class=\"build-text\">We'll help bring your vision to life with our expert team and proven process.<\/p>\r\n \r\n <button class=\"quote-button\">\r\n Get a Free Quote\r\n <span class=\"button-arrow\">\u2192<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n \r\n\r\n<footer id=\"contact\">\r\n \r\n <div class=\"footer-logo-wrapper\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/yogeshbhandari7753.com.np\/wp-content\/uploads\/2025\/03\/cropped-Untitled_design-10-removebg-preview.png\"\r\n alt=\"Logo\"\r\n class=\"footer-logo\"\r\n \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-container\">\r\n \r\n <div class=\"footer-section\">\r\n <h3>Digital Marketing Agency<\/h3>\r\n <p class=\"footer-description\">\r\n We are experts in Search Engine Optimisation<br \/>\r\n and passionate about assisting businesses<br \/>\r\n in their digital growth.\r\n <\/p>\r\n <div class=\"footer-social-wrapper\">\r\n <span>Follow us on<\/span>\r\n <div class=\"social-icon\">\r\n <a href=\"#\"><i class=\"fab fa-linkedin\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-section\">\r\n <h3>Contact Us<\/h3>\r\n <ul>\r\n <li><strong>Phone:<\/strong> +61 450 406 450<\/li>\r\n <li><strong>Email:<\/strong> contact@agency.com<\/li>\r\n <li>\r\n <strong>Address:<\/strong> 161 Castlereagh St, Sydney, NSW 2000, AU\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer-bottom\">\r\n © 2025 Marketing Agency. All rights reserved.\r\n <\/div>\r\n \r\n <div class=\"floating-element\" style=\"width: 80px; height: 80px; top: 20%; left: 5%; animation-delay: 0s; background: rgba(221,4,4,0.1);\"><\/div>\r\n <div class=\"geometric-shape\" style=\"width: 40px; height: 40px; top: 70%; left: 90%; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: rgba(255,255,255,0.1); animation-delay: -3s;\"><\/div>\r\n <div class=\"particle\" style=\"top: 100%; left: 10%; animation-duration: 6s;\"><\/div>\r\n <div class=\"particle\" style=\"top: 95%; left: 30%; animation-duration: 7s; animation-delay: -2s;\"><\/div>\r\n <div class=\"floating-element\" style=\"width: 60px; height: 60px; top: 40%; left: 80%; animation-delay: -1s; background: rgba(255,255,255,0.05);\"><\/div>\r\n <div class=\"geometric-shape\" style=\"width: 50px; height: 50px; top: 60%; left: 10%; background: rgba(221,4,4,0.15); animation-delay: -4s; clip-path: circle(50% at 50% 50%);\"><\/div>\r\n\r\n<\/footer>\r\n\r\n \r\n <script>\r\n \/\/ Smooth Logo Animation (unchanged from your original)\r\n window.addEventListener('scroll', function() {\r\n const navbar = document.getElementById('navbar');\r\n const navLogo = document.querySelector('.nav-logo');\r\n const navLogoImg = document.getElementById('nav-logo-img');\r\n const navLinks = document.querySelectorAll('.nav a, .contact-link');\r\n \r\n const scrollY = window.scrollY;\r\n const maxScroll = 300;\r\n const progress = Math.min(scrollY \/ maxScroll, 1);\r\n \r\n \/\/ Animate logo size and position\r\n const logoSize = 472 - (372 * progress);\r\n navLogoImg.style.width = `${logoSize}px`;\r\n \r\n const startPos = window.innerHeight \/ 2;\r\n const endPos = 35;\r\n const currentPos = startPos - ((startPos - endPos) * progress);\r\n navLogo.style.top = `${currentPos}px`;\r\n \r\n \/\/ Toggle navbar state\r\n if (progress >= 1) {\r\n navbar.classList.add('scrolled');\r\n navLinks.forEach(link => link.style.color = 'red');\r\n } else {\r\n navbar.classList.remove('scrolled');\r\n navLinks.forEach(link => link.style.color = 'white');\r\n }\r\n });\r\n\r\n \/\/ DNA Section Animation\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n const sections = document.querySelectorAll(\".section\");\r\n const observer = new IntersectionObserver(entries => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add(\"show\");\r\n }\r\n });\r\n }, { threshold: 0.5 });\r\n sections.forEach(section => observer.observe(section));\r\n });\r\n\r\n \/\/ General fade-in animations\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const elements = document.querySelectorAll('.service-card, .testimonial-card, .build-content');\r\n \r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.style.opacity = '1';\r\n entry.target.style.transform = 'translateY(0)';\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n \r\n elements.forEach(el => {\r\n el.style.opacity = '0';\r\n el.style.transform = 'translateY(20px)';\r\n el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n <script>\r\n function toggleDesc(header) {\r\n const desc = header.nextElementSibling;\r\n desc.classList.toggle('show');\r\n }\r\n <\/script>\r\n \r\n <script>\r\n function toggleDesc(header) {\r\n const allDescriptions = document.querySelectorAll('.description');\r\n allDescriptions.forEach(d => {\r\n if (d !== header.nextElementSibling) {\r\n d.classList.remove('show');\r\n }\r\n });\r\n header.nextElementSibling.classList.toggle('show');\r\n }\r\n <\/script>\r\n \r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Marketing Agency Services Media Gallery Blogs Testimonials Contact Your browser does not support the video tag. Our Premium Services SEO […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-974","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/pages\/974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=974"}],"version-history":[{"count":976,"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/pages\/974\/revisions"}],"predecessor-version":[{"id":2224,"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=\/wp\/v2\/pages\/974\/revisions\/2224"}],"wp:attachment":[{"href":"https:\/\/yogeshbhandari7753.com.np\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}