{"id":1341,"date":"2026-07-13T09:12:32","date_gmt":"2026-07-13T09:12:32","guid":{"rendered":"https:\/\/portfolio.advertigo.online\/?page_id=1341"},"modified":"2026-07-20T04:37:36","modified_gmt":"2026-07-20T04:37:36","slug":"home2","status":"publish","type":"page","link":"https:\/\/portfolio.advertigo.online\/","title":{"rendered":"HOME"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Standout Society | Agency for Visa & Education Brands<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;700&display=swap\" rel=\"stylesheet\" \/>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" \/>\r\n <style>\r\n \/* \u2500\u2500 RESET & BASE \u2500\u2500 *\/\r\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; -webkit-tap-highlight-color: transparent; }\r\n body { background-color: #070b08; color: #e2e8f0; line-height: 1.6; padding-top: 80px; overflow-x: hidden; -webkit-text-size-adjust: 100%;\r\n }\r\n .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }\r\n section { padding: 80px 0; border-bottom: 1px solid #1a221a; }\r\n }\r\n\r\n .video-carousel-track,\r\n .carousel-slide-container { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }\r\n .vslide,\r\n .cslide { flex: 0 0 100%; scroll-snap-align: start; }\r\n h2,\r\n h1 {\r\n margin-bottom: 30px;\r\n color: white;\r\n line-height: 50px;\r\n }\r\n h1 span,\r\n h2 span {\r\n color: #39FF14;\r\n }\r\n .grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\r\n gap: 20px;\r\n }\r\n .grid2 {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n #home {\r\n position: relative;\r\n background-image: url('http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/Untitled-design-1.png');\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n padding-top: 150px !important;\r\n padding-bottom: 150px !important;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n }\r\n #home::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: rgba(7, 11, 8, 0.50);\r\n z-index: 1;\r\n }\r\n #home .container {\r\n position: relative;\r\n z-index: 2;\r\n width: 100%;\r\n }\r\n #home .container>div {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n max-width: 700px;\r\n margin: 0;\r\n }\r\n #home .container>div .btn {\r\n width: fit-content;\r\n }\r\n #home h1 {\r\n font-size: 4rem !important;\r\n line-height: 1.2 !important;\r\n margin-bottom: 10px !important;\r\n font-weight: 700 !important;\r\n }\r\n \/* \u2605 \"Visa & Education Agency\" = SMALL \u2605 *\/\r\n #home h1 span {\r\n font-size: 2rem !important;\r\n display: block !important;\r\n margin-top: 4px !important;\r\n font-weight: 500 !important;\r\n line-height: 1.3 !important;\r\n }\r\n\r\n \/* \u2500\u2500 CARDS \u2500\u2500 *\/\r\n .card { background: #0f1811;\r\n padding: 20px 15px;\r\n border: 1px solid #0a2f1d;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: 0.3s;\r\n border-radius: 12px;\r\n position: relative;\r\n overflow: hidden; }\r\n .card:hover {\r\n border-color: #39FF14;\r\n transform: translateY(-5px);\r\n box-shadow: 0 8px 20px rgba(57, 255, 20, 0.08);\r\n }\r\n .card img {\r\n width: 100%;\r\n height: 180px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n margin-bottom: 10px;\r\n background: #1a2a1a;\r\n }\r\n .card i {\r\n font-size: 28px;\r\n color: #39FF14;\r\n margin-bottom: 8px;\r\n display: block;\r\n }\r\n .card h4 {\r\n font-weight: 500;\r\n margin-top: 4px;\r\n font-size: 1rem;\r\n color: white;\r\n }\r\n .card p {\r\n color: #a0a5a1;\r\n font-size: 0.85rem;\r\n }\r\n .see-more {\r\n display: inline-block;\r\n margin-top: 8px;\r\n color: #39FF14;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n border: 1px solid #39FF14;\r\n padding: 3px 12px;\r\n border-radius: 20px;\r\n transition: 0.3s;\r\n }\r\n .see-more:hover {\r\n background: #39FF14;\r\n color: #070b08;\r\n }\r\n\r\n \/* \u2500\u2500 BUTTONS \u2500\u2500 *\/\r\n .btn {\r\n padding: 15px 30px;\r\n background: #39FF14;\r\n color: #070b08;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n border: none;\r\n border-radius: 40px;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n letter-spacing: 0.5px;\r\n font-size: 0.95rem;\r\n }\r\n .btn:hover {\r\n background: #aaff99;\r\n box-shadow: 0 0 20px #39ff1470;\r\n }\r\n\r\n .badge-lime {\r\n background: #39FF14;\r\n color: #070b08;\r\n padding: 2px 10px;\r\n border-radius: 40px;\r\n font-weight: 600;\r\n font-size: 0.7rem;\r\n letter-spacing: 0.5px;\r\n display: inline-block;\r\n width: fit-content;\r\n }\r\n .slide {\r\n display: none;\r\n width: 100%;\r\n height: 100%;\r\n padding: 8px;\r\n background: #0f1811;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .slide.active {\r\n display: flex;\r\n }\r\n .slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n border-radius: 12px;\r\n }\r\n .slide video {\r\n width: 100%;\r\n max-height: 100%;\r\n border-radius: 12px;\r\n background: #0a1f0a;\r\n outline: none;\r\n }\r\n .slide .video-fallback {\r\n color: #6a8a6a;\r\n text-align: center;\r\n padding: 20px;\r\n }\r\n .slide .video-fallback i {\r\n font-size: 48px;\r\n color: #2a3a2a;\r\n display: block;\r\n margin-bottom: 10px;\r\n }\r\n .arrow {\r\n cursor: pointer;\r\n color: #39FF14;\r\n font-size: 40px;\r\n padding: 0 15px;\r\n user-select: none;\r\n transition: 0.2s;\r\n font-weight: 300;\r\n }\r\n .arrow:hover {\r\n color: #aaff99;\r\n transform: scale(1.1);\r\n }\r\n .modal .btn {\r\n width: 100%;\r\n margin-top: 10px;\r\n }\r\n .slide-counter {\r\n color: #a0a5a1;\r\n text-align: center;\r\n font-size: 0.9rem;\r\n margin-top: 5px;\r\n }\r\n\r\n \/* \u2500\u2500 MODAL (popup) - supports both images & videos \u2500\u2500 *\/\r\n .modal {\r\n display: none;\r\n position: fixed;\r\n z-index: 1000;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.94);\r\n backdrop-filter: blur(4px);\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .modal-content {\r\n position: relative;\r\n width: 90%;\r\n max-width: 700px;\r\n background: #0f1811;\r\n padding: 30px;\r\n border: 1px solid #39FF14;\r\n border-radius: 20px;\r\n margin: 20px;\r\n }\r\n .modal-content h3 {\r\n color: #39FF14;\r\n text-align: center;\r\n margin-bottom: 15px;\r\n font-size: 1.8rem;\r\n }\r\n .carousel-container {\r\n display: flex;\r\n overflow: hidden;\r\n height: 420px;\r\n align-items: center;\r\n justify-content: center;\r\n background: #0a1f0a;\r\n border-radius: 16px;\r\n margin: 15px 0;\r\n position: relative;\r\n }\r\n\r\n .slide-counter {\r\n color: #a0a5a1;\r\n text-align: center;\r\n font-size: 0.9rem;\r\n margin-top: 5px;\r\n }\r\n\r\n \/* \u2500\u2500 CREATIVE CAROUSEL 1 (slide) \u2500\u2500 *\/\r\n .creative-carousel-wrapper {\r\n position: relative;\r\n margin-top: 0px;\r\n background: #0f1811;\r\n border-radius: 16px;\r\n border: 1px solid #1a2a1a;\r\n overflow: hidden;\r\n }\r\n .creative-carousel {\r\n position: relative;\r\n overflow: hidden;\r\n background: #0a1f0a;\r\n }\r\n .carousel-slide-container {\r\n display: flex;\r\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n height: 480px;\r\n width: 100%;\r\n will-change: transform;\r\n }\r\n .carousel-slide-container .cslide {\r\n min-width: 100%;\r\n height: 100%;\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #0a1f0a;\r\n position: relative;\r\n padding: 12px;\r\n }\r\n .carousel-slide-container .cslide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n pointer-events: none;\r\n background: #0a1f0a;\r\n border-radius: 8px;\r\n }\r\n .carousel-slide-container .cslide .placeholder {\r\n color: #4a5a4a;\r\n font-size: 1.2rem;\r\n text-align: center;\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .carousel-slide-container .cslide .placeholder i {\r\n font-size: 48px;\r\n color: #2a3a2a;\r\n }\r\n .carousel-slide-container .cslide .placeholder span {\r\n background: #1a2a1a;\r\n padding: 8px 20px;\r\n border-radius: 8px;\r\n font-size: 0.9rem;\r\n color: #6a8a6a;\r\n }\r\n\r\n \/* \u2500\u2500 CREATIVE CAROUSEL 2 (fade, 3-up) \u2500\u2500 *\/\r\n .carousel-fade-container {\r\n position: relative;\r\n width: 100%;\r\n min-height: 340px;\r\n }\r\n .carousel-fade-container .fslide {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 14px;\r\n padding: 14px;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.2s ease, visibility 0.2s ease;\r\n pointer-events: none;\r\n background: #0a1f0a;\r\n align-items: stretch;\r\n min-height: 340px;\r\n }\r\n .carousel-fade-container .fslide.active {\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: auto;\r\n position: relative;\r\n }\r\n .carousel-fade-container .fslide .slide-item {\r\n background: #0f1811;\r\n border-radius: 1px;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid #1a2a1a;\r\n position: relative;\r\n min-height: 180px;\r\n }\r\n .carousel-fade-container .fslide .slide-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n background: #0a1f0a;\r\n border-radius: 1px;\r\n transition: 0.3s;\r\n }\r\n .carousel-fade-container .fslide .slide-item .placeholder {\r\n color: #4a5a4a;\r\n font-size: 0.9rem;\r\n text-align: center;\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .carousel-fade-container .fslide .slide-item .placeholder i {\r\n font-size: 36px;\r\n color: #2a3a2a;\r\n }\r\n .carousel-fade-container .fslide .slide-item .placeholder span {\r\n background: #1a2a1a;\r\n padding: 6px 16px;\r\n border-radius: 8px;\r\n font-size: 0.8rem;\r\n color: #6a8a6a;\r\n }\r\n\r\n \/* Carousel Arrows - shared *\/\r\n .carousel-arrow {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #39FF14;\r\n width: 48px;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n cursor: pointer;\r\n z-index: 20;\r\n transition: 0.3s;\r\n user-select: none;\r\n backdrop-filter: blur(4px);\r\n background: rgba(7, 11, 8, 0.5);\r\n border-radius: 50%;\r\n border: 1px solid rgba(57, 255, 20, 0.15);\r\n }\r\n .carousel-arrow:hover {\r\n color: #aaff99;\r\n transform: translateY(-50%) scale(1.08);\r\n background: rgba(7, 11, 8, 0.8);\r\n border-color: #39FF14;\r\n }\r\n .carousel-arrow-left {\r\n left: 12px;\r\n }\r\n .carousel-arrow-right {\r\n right: 12px;\r\n }\r\n\r\n .carousel-indicators {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n padding: 16px 0 12px 0;\r\n background: #0f1811;\r\n flex-wrap: wrap;\r\n border-top: 1px solid #1a2a1a;\r\n }\r\n .carousel-indicators span {\r\n display: inline-block;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: #2a3a2a;\r\n transition: 0.3s;\r\n cursor: pointer;\r\n border: 1px solid transparent;\r\n }\r\n .carousel-indicators span.active {\r\n background: #39FF14;\r\n width: 28px;\r\n border-radius: 12px;\r\n border-color: #39FF14;\r\n box-shadow: 0 0 12px rgba(57, 255, 20, 0.3);\r\n }\r\n .carousel-indicators span:hover {\r\n background: #3a5a3a;\r\n transform: scale(1.15);\r\n }\r\n .carousel-indicators span.active:hover {\r\n background: #39FF14;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* \u2500\u2500 VIDEO SHOWCASE \u2500\u2500 *\/\r\n .video-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n }\r\n .video-card {\r\n background: #0f1811;\r\n border-radius: 16px;\r\n border: 1px solid #1a2a1a;\r\n overflow: hidden;\r\n padding: 15px;\r\n text-align: center;\r\n position: relative;\r\n }\r\n .video-card h4 {\r\n color: #39FF14;\r\n margin-bottom: 10px;\r\n font-weight: 500;\r\n }\r\n\r\n \/* video carousel inside card *\/\r\n .video-carousel-wrapper {\r\n position: relative;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n background: #0a1f0a;\r\n margin-bottom: 8px;\r\n }\r\n .video-carousel-track {\r\n display: flex;\r\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n will-change: transform;\r\n }\r\n .video-carousel-track .vslide {\r\n min-width: 100%;\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #0a1f0a;\r\n padding: 4px;\r\n min-height: 200px;\r\n max-height: 300px;\r\n }\r\n .video-carousel-track .vslide video {\r\n width: 100%;\r\n max-height: 300px;\r\n border-radius: 10px;\r\n background: #0a1f0a;\r\n outline: none;\r\n display: block;\r\n }\r\n .video-carousel-track .vslide .video-placeholder {\r\n width: 100%;\r\n height: 200px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #0a1f0a;\r\n border-radius: 12px;\r\n color: #4a5a4a;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n .video-carousel-track .vslide .video-placeholder i {\r\n font-size: 40px;\r\n color: #2a3a2a;\r\n }\r\n .video-carousel-track .vslide .video-placeholder span {\r\n font-size: 0.9rem;\r\n color: #6a8a6a;\r\n }\r\n\r\n .video-card .carousel-arrow {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 16px;\r\n background: rgba(7, 11, 8, 0.7);\r\n border-color: rgba(57, 255, 20, 0.2);\r\n }\r\n .video-card .carousel-arrow:hover {\r\n background: rgba(7, 11, 8, 0.9);\r\n border-color: #39FF14;\r\n }\r\n .video-card .carousel-arrow-left {\r\n left: 6px;\r\n }\r\n .video-card .carousel-arrow-right {\r\n right: 6px;\r\n }\r\n\r\n .video-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: 6px 0 4px 0;\r\n flex-wrap: wrap;\r\n }\r\n .video-dots span {\r\n display: inline-block;\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: #2a3a2a;\r\n transition: 0.3s;\r\n cursor: pointer;\r\n border: 1px solid transparent;\r\n }\r\n .video-dots span.active {\r\n background: #39FF14;\r\n width: 22px;\r\n border-radius: 10px;\r\n border-color: #39FF14;\r\n box-shadow: 0 0 10px rgba(57, 255, 20, 0.25);\r\n }\r\n .video-dots span:hover {\r\n background: #3a5a3a;\r\n transform: scale(1.1);\r\n }\r\n .video-dots span.active:hover {\r\n background: #39FF14;\r\n transform: scale(1.05);\r\n }\r\n\r\n .video-card .see-more {\r\n margin-top: 4px;\r\n cursor: pointer;\r\n }\r\n\r\n \/* \u2500\u2500 TRANSFORMATION \u2500\u2500 *\/\r\n \/* FIXED: proper flexbox \u2014 row on desktop, column on mobile *\/\r\n .transform-grid {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 20px;\r\n align-items: stretch;\r\n }\r\n\r\n .transform-grid .transform-card {\r\n flex: 1;\r\n min-width: 0;\r\n background: #0f1811;\r\n padding: 20px 15px;\r\n border: 1px solid #0a2f1d;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: 0.3s;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .transform-grid .transform-card:hover {\r\n border-color: #39FF14;\r\n transform: translateY(-5px);\r\n box-shadow: 0 8px 20px rgba(57, 255, 20, 0.08);\r\n }\r\n\r\n .transform-grid .transform-card i {\r\n font-size: 28px;\r\n margin-bottom: 8px;\r\n display: block;\r\n }\r\n\r\n .transform-grid .transform-card h4 {\r\n font-weight: 500;\r\n margin-top: 8px;\r\n font-size: 1rem;\r\n color: white;\r\n }\r\n\r\n .transform-grid .transform-card p {\r\n color: #a0a5a1;\r\n font-size: 0.85rem;\r\n margin-top: 4px;\r\n }\r\n\r\n .transform-img-wrap {\r\n width: 100%;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n margin: 8px 0;\r\n background: #0a1f0a;\r\n }\r\n\r\n .transform-img-wrap img {\r\n\r\n }\r\n\r\n .transform-grid .transform-card .transform-img-wrap {\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* \u2500\u2500 CTA \u2500\u2500 *\/\r\n #cta {\r\n text-align: center;\r\n }\r\n\r\n\r\n \/* \u2500\u2500 FEEDBACK CAROUSEL (FIXED) \u2500\u2500 *\/\r\n #feedback {\r\n background: #070b08;\r\n border-bottom: 1px solid #1a221a;\r\n }\r\n #feedback .feedback-carousel-wrapper {\r\n position: relative;\r\n background: #0f1811;\r\n border-radius: 16px;\r\n border: 1px solid #1a2a1a;\r\n overflow: hidden;\r\n }\r\n #feedback .feedback-carousel {\r\n position: relative;\r\n overflow: hidden;\r\n background: #0a1f0a;\r\n min-height: 320px;\r\n }\r\n \/* The container that holds all slides \u2014 we position it relative so absolute children stay inside *\/\r\n .feedback-slide-container {\r\n position: relative;\r\n width: 100%;\r\n min-height: 320px;\r\n overflow: hidden;\r\n background: #0a1f0a;\r\n }\r\n \/* Each slide: absolutely positioned so all stack, but only active is visible *\/\r\n .feedback-slide-container .fslide-fb {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 14px;\r\n padding: 14px;\r\n align-items: stretch;\r\n background: #0a1f0a;\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.35s ease, visibility 0.35s ease;\r\n pointer-events: none;\r\n min-height: 280px;\r\n }\r\n .feedback-slide-container .fslide-fb.active {\r\n visibility: visible;\r\n opacity: 1;\r\n pointer-events: auto;\r\n position: relative;\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item {\r\n background: #0f1811;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid #1a2a1a;\r\n position: relative;\r\n min-height: 180px;\r\n transition: 0.3s;\r\n cursor: pointer;\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item:hover {\r\n border-color: #39FF14;\r\n transform: scale(1.02);\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item img {\r\n width: 100%;\r\n height: 100%;\r\n \r\n display: block;\r\n background: #0a1f0a;\r\n border-radius: 8px;\r\n transition: 0.3s;\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item .fb-placeholder {\r\n color: #4a5a4a;\r\n font-size: 0.9rem;\r\n text-align: center;\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item .fb-placeholder i {\r\n font-size: 36px;\r\n color: #2a3a2a;\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item .fb-placeholder span {\r\n background: #1a2a1a;\r\n padding: 6px 16px;\r\n border-radius: 8px;\r\n font-size: 0.8rem;\r\n color: #6a8a6a;\r\n }\r\n\r\n #feedback .carousel-arrow {\r\n \r\n \r\n }\r\n #feedback .carousel-arrow:hover {\r\n background: rgba(7, 11, 8, 0.9);\r\n border-color: #39FF14;\r\n }\r\n #feedback .carousel-arrow-left {\r\n left: 2px;\r\n }\r\n #feedback .carousel-arrow-right {\r\n right: 2px;\r\n }\r\n\r\n #feedback .feedback-indicators {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n padding: 16px 0 12px 0;\r\n background: #0f1811;\r\n flex-wrap: wrap;\r\n border-top: 1px solid #1a2a1a;\r\n }\r\n #feedback .feedback-indicators span {\r\n display: inline-block;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: #2a3a2a;\r\n transition: 0.3s;\r\n cursor: pointer;\r\n border: 1px solid transparent;\r\n }\r\n #feedback .feedback-indicators span.active {\r\n background: #39FF14;\r\n width: 28px;\r\n border-radius: 12px;\r\n border-color: #39FF14;\r\n box-shadow: 0 0 12px rgba(57, 255, 20, 0.3);\r\n }\r\n #feedback .feedback-indicators span:hover {\r\n background: #3a5a3a;\r\n transform: scale(1.15);\r\n }\r\n #feedback .feedback-indicators span.active:hover {\r\n background: #39FF14;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* ============================================================\r\n RESPONSIVE \u2014 MOBILE FIRST\r\n ============================================================ *\/\r\n\r\n \/* \u2500\u2500 Small phones (up to 480px) \u2500\u2500 *\/\r\n @media (max-width: 480px) {\r\n \/* Hero \u2014 taller + text size swap *\/\r\n #home {\r\n padding-top: 70px !important;\r\n padding-bottom: 70px !important;\r\n min-height: auto !important;\r\n background-size: cover !important;\r\n background-position: center 30% !important;\r\n }\r\n #home::before {\r\n background: rgba(7, 11, 8, 0.70);\r\n }\r\n #home .container {\r\n padding: 0 16px;\r\n }\r\n #home .container>div {\r\n max-width: 100% !important;\r\n align-items: center !important;\r\n text-align: center !important;\r\n gap: 12px;\r\n }\r\n #home .container>div .badge-lime {\r\n margin: 0 auto;\r\n }\r\n\r\n \/* \u2605 \"Scale Your\" = LARGE \u2605 *\/\r\n #home h1 {\r\n font-size: 3rem !important;\r\n line-height: 1.2 !important;\r\n margin-bottom: 10px !important;\r\n font-weight: 700 !important;\r\n }\r\n \/* \u2605 \"Visa & Education Agency\" = SMALL \u2605 *\/\r\n #home h1 span {\r\n font-size: rem !important;\r\n display: block !important;\r\n margin-top: 4px !important;\r\n font-weight: 500 !important;\r\n line-height: 1.3 !important;\r\n }\r\n\r\n #home .container>div p {\r\n font-size: 0.95rem !important;\r\n max-width: 100%;\r\n }\r\n #home .container>div .btn {\r\n width: 100% !important;\r\n padding: 14px 20px;\r\n font-size: 0.85rem;\r\n justify-content: center;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n \/* Section titles *\/\r\n section {\r\n padding: 50px 0;\r\n }\r\n h2 {\r\n text-align: center;\r\n }\r\n\r\n \/* Cards *\/\r\n .grid {\r\n grid-template-columns: 1fr;\r\n gap: 14px;\r\n }\r\n\r\n \/* TRANSFORMATION \u2014 column on mobile *\/\r\n .transform-grid {\r\n flex-direction: column !important;\r\n gap: 14px !important;\r\n }\r\n .transform-grid .transform-card {\r\n flex: none !important;\r\n width: 100% !important;\r\n padding: 16px 12px !important;\r\n }\r\n .transform-grid .transform-card i {\r\n font-size: 26px !important;\r\n margin-bottom: 6px !important;\r\n }\r\n .transform-grid .transform-card h4 {\r\n font-size: 0.95rem !important;\r\n margin-top: 6px !important;\r\n }\r\n .transform-grid .transform-card p {\r\n font-size: 0.8rem !important;\r\n }\r\n .transform-img-wrap {\r\n height: 120px;\r\n border-radius: px;\r\n\r\n\r\n background: #0a1f0a;\r\n }\r\n .transform-img-wrap img {\r\n\r\n height: auto;\r\n transition: 0.3s;\r\n margin-bottom: 100px;\r\n\r\n }\r\n\r\n \/* Carousels *\/\r\n .carousel-slide-container {\r\n height: 320px !important;\r\n }\r\n .carousel-slide-container .cslide {\r\n padding: 0 !important;\r\n margin-top: 5px;\r\n\r\n }\r\n .carousel-fade-container .fslide {\r\n grid-template-columns: 1fr 1fr 1fr;\r\n gap: 4px;\r\n padding: 4px;\r\n min-height: 120px;\r\n object-fit: cover;\r\n }\r\n .carousel-fade-container .fslide .slide-item {\r\n min-height: 80px;\r\n margin-top: 10px;\r\n object-fit: cover;\r\n }\r\n .carousel-fade-container .fslide .slide-item img {\r\n object-fit: contain !important;\r\n }\r\n .carousel-fade-container {\r\n min-height: 140px;\r\n object-fit: cover;\r\n }\r\n .carousel-arrow {\r\n width: 30px !important;\r\n height: 30px !important;\r\n font-size: 13px !important;\r\n }\r\n .carousel-arrow-left {\r\n left: 4px !important;\r\n }\r\n .carousel-arrow-right {\r\n right: 4px !important;\r\n }\r\n\r\n \/* Video *\/\r\n .video-grid {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n .video-carousel-track .vslide {\r\n min-height: 260px;\r\n max-height: 350px;\r\n }\r\n .video-carousel-track .vslide video {\r\n max-height: 300px;\r\n }\r\n .video-card .carousel-arrow {\r\n width: 28px;\r\n height: 28px;\r\n font-size: 12px;\r\n }\r\n .video-card .carousel-arrow-left {\r\n left: 4px;\r\n }\r\n .video-card .carousel-arrow-right {\r\n right: 4px;\r\n }\r\n .video-dots span {\r\n width: 6px;\r\n height: 6px;\r\n }\r\n .video-dots span.active {\r\n width: 16px;\r\n }\r\n\r\n \/* Modal *\/\r\n .modal-content {\r\n padding: 16px;\r\n margin: 10px;\r\n }\r\n .carousel-container {\r\n height: 240px;\r\n }\r\n .modal-content h3 {\r\n font-size: 1.3rem;\r\n }\r\n .arrow {\r\n font-size: 28px;\r\n padding: 0 8px;\r\n }\r\n\r\n \/* CTA *\/\r\n #cta h2 {\r\n font-size: 1.8rem !important;\r\n }\r\n #cta .btn {\r\n width: 100% !important;\r\n max-width: 280px;\r\n font-size: 0.95rem;\r\n padding: 14px 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Creative showcase cards *\/\r\n .creative-carousel-wrapper {\r\n border-radius: 10px;\r\n }\r\n .carousel-indicators {\r\n padding: 10px 0 8px 0;\r\n gap: 3px;\r\n }\r\n .carousel-indicators span {\r\n width: 5px;\r\n height: 5px;\r\n }\r\n .carousel-indicators span.active {\r\n width: 10px;\r\n }\r\n \/* Feedback Carousel mobile *\/\r\n .feedback-slide-container .fslide-fb {\r\n grid-template-columns: 1fr 1fr 1fr;\r\n gap: 6px;\r\n padding: 6px;\r\n min-height: 120px;\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item {\r\n min-height: 80px;\r\n }\r\n #feedback .feedback-carousel {\r\n min-height: 140px;\r\n }\r\n .feedback-slide-container {\r\n min-height: 140px;\r\n }\r\n #feedback .carousel-arrow {\r\n width: 30px !important;\r\n height: 30px !important;\r\n font-size: 10px !important;\r\n padding-bottom: 5px;\r\n }\r\n \r\n #feedback .feedback-indicators {\r\n padding: 10px 0 8px 0;\r\n gap: 3px;\r\n }\r\n #feedback .feedback-indicators span {\r\n width: 5px;\r\n height: 5px;\r\n }\r\n #feedback .feedback-indicators span.active {\r\n width: 10px;\r\n }\r\n #feedback.feedback-slide-container .fslide-fb .fb-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n background: #0a1f0a;\r\n border-radius: 8px;\r\n transition: 0.3s;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500 Phones (481px \u2013 600px) \u2500\u2500 *\/\r\n @media (min-width: 481px) and (max-width: 600px) {\r\n #home {\r\n padding-top: 130px !important;\r\n padding-bottom: 130px !important;\r\n min-height: 85vh !important;\r\n background-size: cover !important;\r\n background-position: center 30% !important;\r\n }\r\n #home::before {\r\n background: rgba(7, 11, 8, 0.70);\r\n }\r\n #home .container>div {\r\n max-width: 100% !important;\r\n align-items: center !important;\r\n text-align: center !important;\r\n }\r\n #home .container>div .badge-lime {\r\n margin: 0 auto;\r\n }\r\n\r\n \/* \u2605 \"Scale Your\" = LARGE \u2605 *\/\r\n #home h1 {\r\n font-size: 3rem !important;\r\n line-height: 1.2 !important;\r\n font-weight: 700 !important;\r\n }\r\n \/* \u2605 \"Visa & Education Agency\" = SMALL \u2605 *\/\r\n #home h1 span {\r\n font-size: 1.4rem !important;\r\n display: block !important;\r\n margin-top: 4px !important;\r\n font-weight: 500 !important;\r\n }\r\n\r\n #home .container>div .btn {\r\n width: 100% !important;\r\n max-width: 320px;\r\n justify-content: center;\r\n display: flex;\r\n align-items: center;\r\n margin: 0 auto;\r\n }\r\n section {\r\n padding: 60px 0;\r\n }\r\n h2 {\r\n text-align: center;\r\n }\r\n .grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 14px;\r\n }\r\n \/* TRANSFORMATION \u2014 column on mobile *\/\r\n .transform-grid {\r\n flex-direction: column !important;\r\n gap: 16px !important;\r\n }\r\n .transform-grid .transform-card {\r\n flex: none !important;\r\n width: 100% !important;\r\n padding: 16px 12px !important;\r\n }\r\n\r\n .carousel-slide-container {\r\n height: 280px !important;\r\n }\r\n\r\n .carousel-fade-container .fslide {\r\n min-height: 180px;\r\n }\r\n .carousel-fade-container .fslide .slide-item {\r\n min-height: 100px;\r\n }\r\n .carousel-fade-container {\r\n min-height: 180px;\r\n }\r\n .video-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .video-carousel-track .vslide {\r\n min-height: 250px;\r\n max-height: 350px;\r\n }\r\n .video-carousel-track .vslide video {\r\n max-height: 350px;\r\n }\r\n #cta .btn {\r\n width: 100% !important;\r\n max-width: 300px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto;\r\n }\r\n .feedback-slide-container .fslide-fb {\r\n grid-template-columns: 1fr 1fr 1fr;\r\n gap: 8px;\r\n padding: 8px;\r\n min-height: 160px;\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item {\r\n min-height: 100px;\r\n }\r\n #feedback .feedback-carousel {\r\n min-height: 180px;\r\n }\r\n .feedback-slide-container {\r\n min-height: 180px;\r\n }\r\n #feedback .carousel-arrow {\r\n width: 34px !important;\r\n height: 34px !important;\r\n font-size: 14px !important;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500 Tablets (601px \u2013 768px) \u2500\u2500 *\/\r\n @media (min-width: 601px) and (max-width: 768px) {\r\n body {\r\n padding-top: 70px;\r\n }\r\n #home {\r\n padding-top: 120px !important;\r\n padding-bottom: 120px !important;\r\n min-height: 80vh;\r\n background-size: cover !important;\r\n background-position: center !important;\r\n }\r\n #home::before {\r\n background: rgba(7, 11, 8, 0.70);\r\n }\r\n #home .container>div {\r\n max-width: 100% !important;\r\n align-items: center !important;\r\n text-align: center !important;\r\n }\r\n #home .container>div .badge-lime {\r\n margin: 0 auto;\r\n }\r\n #home h1 {\r\n font-size: 2.6rem !important;\r\n }\r\n #home .container>div .btn {\r\n margin: 0 auto;\r\n width: fit-content;\r\n }\r\n section {\r\n padding: 60px 0;\r\n }\r\n h2 {\r\n text-align: center;\r\n }\r\n .grid {\r\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\r\n gap: 16px;\r\n }\r\n \/* TRANSFORMATION \u2014 column on tablet (stacked) *\/\r\n .transform-grid {\r\n flex-direction: column !important;\r\n gap: 18px !important;\r\n }\r\n .transform-grid .transform-card {\r\n flex: none !important;\r\n width: 100% !important;\r\n padding: 18px 14px !important;\r\n }\r\n\r\n .video-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n }\r\n .carousel-slide-container {\r\n height: 340px !important;\r\n }\r\n .carousel-fade-container .fslide {\r\n min-height: 220px;\r\n }\r\n .carousel-fade-container .fslide .slide-item {\r\n min-height: 120px;\r\n }\r\n .carousel-fade-container {\r\n min-height: 220px;\r\n }\r\n .video-carousel-track .vslide {\r\n min-height: 280px;\r\n max-height: 380px;\r\n }\r\n .video-carousel-track .vslide video {\r\n max-height: 380px;\r\n }\r\n #cta .btn {\r\n margin: 0 auto;\r\n width: fit-content;\r\n }\r\n .feedback-slide-container .fslide-fb {\r\n min-height: 200px;\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item {\r\n min-height: 120px;\r\n }\r\n #feedback .feedback-carousel {\r\n min-height: 220px;\r\n }\r\n .feedback-slide-container {\r\n min-height: 220px;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500 Small Laptops (769px \u2013 1024px) \u2500\u2500 *\/\r\n @media (min-width: 769px) and (max-width: 1024px) {\r\n .carousel-slide-container {\r\n height: 420px;\r\n }\r\n .carousel-fade-container .fslide {\r\n min-height: 300px;\r\n }\r\n .carousel-fade-container .fslide .slide-item {\r\n min-height: 180px;\r\n }\r\n .carousel-fade-container {\r\n min-height: 300px;\r\n }\r\n .video-carousel-track .vslide {\r\n min-height: 200px;\r\n max-height: 280px;\r\n }\r\n .video-carousel-track .vslide video {\r\n max-height: 280px;\r\n }\r\n .transform-img-wrap {\r\n aspect-ratio: 16 \/ 10;\r\n }\r\n #home .container>div .btn {\r\n width: fit-content;\r\n }\r\n \/* TRANSFORMATION \u2014 row on desktop, keep as is *\/\r\n .transform-grid {\r\n flex-direction: row !important;\r\n }\r\n .transform-grid .transform-card {\r\n flex: 1 !important;\r\n width: auto !important;\r\n }\r\n .feedback-slide-container .fslide-fb {\r\n min-height: 260px;\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item {\r\n min-height: 160px;\r\n }\r\n #feedback .feedback-carousel {\r\n min-height: 280px;\r\n }\r\n .feedback-slide-container {\r\n min-height: 280px;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500 Desktop (1025px and up) \u2500\u2500 *\/\r\n @media (min-width: 1025px) {\r\n \/* TRANSFORMATION \u2014 row on desktop *\/\r\n .transform-grid {\r\n flex-direction: row !important;\r\n }\r\n .transform-grid .transform-card {\r\n flex: 1 !important;\r\n width: auto !important;\r\n }\r\n #feedback .feedback-carousel {\r\n min-height: 340px;\r\n }\r\n .feedback-slide-container {\r\n min-height: 340px;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500 Very small screens (under 380px) \u2500\u2500 *\/\r\n @media (max-width: 380px) {\r\n #home h1 {\r\n font-size: 1.5rem !important;\r\n }\r\n #home::before {\r\n background: rgba(7, 11, 8, 0.70);\r\n }\r\n #home .container>div p {\r\n font-size: 0.85rem !important;\r\n }\r\n #home .container>div .btn {\r\n font-size: 0.75rem;\r\n padding: 12px 16px;\r\n }\r\n .transform-grid {\r\n flex-direction: column !important;\r\n gap: 8px !important;\r\n }\r\n .transform-grid .transform-card {\r\n flex: none !important;\r\n width: 100% !important;\r\n padding: 10px 6px !important;\r\n }\r\n .transform-grid .transform-card h4 {\r\n font-size: 0.7rem !important;\r\n }\r\n .transform-grid .transform-card p {\r\n font-size: 0.6rem !important;\r\n }\r\n .transform-grid .transform-card i {\r\n font-size: 16px !important;\r\n }\r\n .transform-img-wrap {\r\n aspect-ratio: 16 \/ 15 !important;\r\n }\r\n h2 {\r\n font-size: 1.3rem;\r\n }\r\n .carousel-slide-container {\r\n height: 200px !important;\r\n margin-bottom: 20px;\r\n margin-top: 20px;\r\n }\r\n .carousel-fade-container .fslide {\r\n min-height: 120px;\r\n }\r\n .carousel-fade-container .fslide .slide-item {\r\n min-height: 80px;\r\n }\r\n .carousel-fade-container {\r\n min-height: 120px;\r\n\r\n }\r\n .video-carousel-track .vslide {\r\n min-height: 180px;\r\n max-height: 250px;\r\n }\r\n .video-carousel-track .vslide video {\r\n max-height: 250px;\r\n }\r\n .modal-content {\r\n padding: 12px;\r\n }\r\n .carousel-container {\r\n height: 200px;\r\n }\r\n .feedback-slide-container .fslide-fb {\r\n grid-template-columns: 1fr 1fr 1fr;\r\n gap: 4px;\r\n padding: 4px;\r\n min-height: 100px;\r\n }\r\n .feedback-slide-container .fslide-fb .fb-item {\r\n min-height: 60px;\r\n }\r\n #feedback .feedback-carousel {\r\n min-height: 100px;\r\n }\r\n .feedback-slide-container {\r\n min-height: 100px;\r\n }\r\n #feedback .carousel-arrow {\r\n width: 24px !important;\r\n height: 24px !important;\r\n font-size: 10px !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ===== HERO ===== -->\r\n <section id=\"home\">\r\n <div class=\"container\">\r\n <div>\r\n <span class=\"badge-lime\">#1 for Visa & Education<\/span>\r\n <h1 >Scale Your<br>\r\n <span >Visa & Education Agency<\/span>\r\n <\/h1>\r\n <p>Content that converts leads into enrollments. <br \/>Trusted by 100+ agencies.<\/p>\r\n <button class=\"btn\" onclick=\"scrollToSection('cta')\" style=\"width: 100%; max-width: 240px;\">\r\n <i class=\"fas fa-calendar-check\" style=\"margin-right:10px;\"><\/i> Book a Free Call\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== CASE STUDIES ===== -->\r\n <section id=\"case-studies\">\r\n <div class=\"container\">\r\n <h2>Featured <span>Case Studies<\/span><\/h2>\r\n <div class=\"grid\">\r\n <div class=\"card\" onclick=\"openModal('Case Study: +30% Enrollments', 0)\">\r\n <img decoding=\"async\" src=\"http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/9.png\" alt=\"case study 1\" \/>\r\n <h4>+30% Enrollments<\/h4>\r\n <p>Visa agency, UK<\/p>\r\n <span class=\"see-more\">Read More \u2192<\/span>\r\n <\/div>\r\n <div class=\"card\" onclick=\"openModal('Case Study: 2.4x ROAS', 1)\">\r\n <img decoding=\"async\" src=\"http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/7.png\" alt=\"case study 2\" \/>\r\n <h4>2.4x ROAS<\/h4>\r\n <p>Education brand, Canada<\/p>\r\n <span class=\"see-more\">Read More \u2192<\/span>\r\n <\/div>\r\n <div class=\"card\" onclick=\"openModal('Case Study: 120+ Leads\/mo', 2)\">\r\n <img decoding=\"async\" src=\"http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/2-1.png\" alt=\"case study 3\" \/>\r\n <h4>120+ Leads\/mo<\/h4>\r\n <p>Student recruitment<\/p>\r\n <span class=\"see-more\">Read More \u2192<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== CREATIVE SHOWCASE \u2014 TWO CAROUSELS ===== -->\r\n <section id=\"creative\">\r\n <div class=\"container\">\r\n <h2>Creative <span>Showcase<\/span><\/h2>\r\n <div class=\"grid2\" id=\"creativeGrid\">\r\n <!-- CAROUSEL 1: Slide transition -->\r\n <div class=\"card\" data-creative=\"3\" style=\"cursor:default;\">\r\n <div class=\"creative-carousel-wrapper\">\r\n <div class=\"creative-carousel\">\r\n <div class=\"carousel-slide-container\" id=\"creativeSlideContainer\">\r\n <!-- slides injected by JS -->\r\n <\/div>\r\n <div class=\"carousel-arrow carousel-arrow-left\" id=\"prevArrow\">\r\n <i class=\"fas fa-chevron-left\" style=\"font-size:17px; margin-top:5px\"><\/i>\r\n <\/div>\r\n <div class=\"carousel-arrow carousel-arrow-right\" id=\"nextArrow\">\r\n <i class=\"fas fa-chevron-right\" style=\"font-size:17px; margin-top:5px\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-indicators\" id=\"creativeIndicators\"><\/div>\r\n <\/div>\r\n <h4 style=\"margin-top:6px;\">FB Posts & Ad Creatives<\/h4>\r\n <p style=\"color:#6a8a6a; font-size:0.8rem; margin-top:2px;\">\r\n <i class=\"fas fa-arrows-alt-h\" style=\"margin-right:4px;\"><\/i> Slide through all creatives\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- CAROUSEL 2: Fade transition, 3 random images per slide -->\r\n <div class=\"card\" data-creative=\"3\" style=\"cursor:default;\">\r\n <div class=\"creative-carousel-wrapper\">\r\n <div class=\"creative-carousel\">\r\n <div class=\"carousel-fade-container\" id=\"creativeFadeContainer\">\r\n <!-- slides injected by JS -->\r\n <\/div>\r\n <div class=\"\" id=\"fadePrevArrow\">\r\n\r\n <\/div>\r\n <div class=\"\" id=\"fadeNextArrow\">\r\n\r\n <\/div>\r\n <\/div>\r\n <div class=\"\" id=\"fadeIndicators\"><\/div>\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== VIDEO SHOWCASE \u2014 with arrows ===== -->\r\n <section id=\"video\">\r\n <div class=\"container\">\r\n <h2>Video <span>Showcase<\/span><\/h2>\r\n <div class=\"video-grid\">\r\n <!-- Presenter Videos -->\r\n <div class=\"video-card\" id=\"presenterCard\">\r\n <h4><i class=\"fas fa-user-tie\" style=\"margin-right:10px;\"><\/i>Presenter Videos<\/h4>\r\n <div class=\"video-carousel-wrapper\">\r\n <div class=\"video-carousel-track\" id=\"presenterTrack\">\r\n <!-- slides injected by JS -->\r\n <\/div>\r\n <div class=\"carousel-arrow carousel-arrow-left\" id=\"presenterPrev\">\r\n <i class=\"fas fa-chevron-left\"><\/i>\r\n <\/div>\r\n <div class=\"carousel-arrow carousel-arrow-right\" id=\"presenterNext\">\r\n <i class=\"fas fa-chevron-right\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"video-dots\" id=\"presenterDots\"><\/div>\r\n <span class=\"see-more\" onclick=\"openModal('Presenter Videos', 8)\">See More \u2192<\/span>\r\n <\/div>\r\n\r\n <!-- Voice Over Videos -->\r\n <div class=\"video-card\" id=\"voiceoverCard\">\r\n <h4><i class=\"fas fa-microphone\" style=\"margin-right:10px;\"><\/i>Voice Over Videos<\/h4>\r\n <div class=\"video-carousel-wrapper\">\r\n <div class=\"video-carousel-track\" id=\"voiceoverTrack\">\r\n <!-- slides injected by JS -->\r\n <\/div>\r\n <div class=\"carousel-arrow carousel-arrow-left\" id=\"voiceoverPrev\">\r\n <i class=\"fas fa-chevron-left\"><\/i>\r\n <\/div>\r\n <div class=\"carousel-arrow carousel-arrow-right\" id=\"voiceoverNext\">\r\n <i class=\"fas fa-chevron-right\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"video-dots\" id=\"voiceoverDots\"><\/div>\r\n <span class=\"see-more\" onclick=\"openModal('Voice Over Videos', 9)\">See More \u2192<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== CLIENT RESULTS ===== -->\r\n <section id=\"results\">\r\n <div class=\"container\">\r\n <h2>Client <span>Results<\/span><\/h2>\r\n <div class=\"grid\">\r\n <div class=\"card\" onclick=\"openModal('Ad Campaign Results', 12)\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <img decoding=\"async\" src=\"http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/6-2.png\" alt=\"Dashboard\" \/>\r\n <h4>Leads Campaigns Results<\/h4>\r\n <span class=\"see-more\">See More \u2192<\/span>\r\n <\/div>\r\n <div class=\"card\" onclick=\"openModal('Messenger Results', 13)\">\r\n <i class=\"fas fa-comment-dots\"><\/i>\r\n <img decoding=\"async\" src=\"http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/1-2.png\" alt=\"Messenger\" \/>\r\n <h4>Messaging Conversation Results<\/h4>\r\n <span class=\"see-more\">See More \u2192<\/span>\r\n <\/div>\r\n <div class=\"card\" onclick=\"openModal('ROAS & Revenue', 14)\">\r\n <i class=\"fas fa-coins\"><\/i>\r\n <img decoding=\"async\" src=\"http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/2-2.png\" alt=\"ROAS\" \/>\r\n <h4>Brand Awareness Campaigns Results<\/h4>\r\n <span class=\"see-more\">See More \u2192<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== TRANSFORMATION \u2014 FIXED: row on desktop, column on mobile ===== -->\r\n <section id=\"transformation\">\r\n <div class=\"container\">\r\n <h2>The <span>Transformation<\/span><\/h2>\r\n\r\n <!-- Row 1 -->\r\n <div class=\"card\" style=\"margin-bottom:24px;\">\r\n <div class=\"transform-grid\">\r\n <div class=\"transform-card\" onclick=\"openModal('Before: Low Engagement', 16)\">\r\n <i class=\"fas fa-times-circle\" style=\"color:#ff6b6b;\"><\/i>\r\n <div class=\"transform-img-wrap\">\r\n <img decoding=\"async\" src=\"http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/IELTS-with-Malitha-Before.jpeg\" alt=\"Before\" \/>\r\n <\/div>\r\n <h4>Before<\/h4>\r\n <p>Low engagement & leads<\/p>\r\n <\/div>\r\n <div class=\"transform-card\" onclick=\"openModal('After: High Conversion', 17)\">\r\n <i class=\"fas fa-check-circle\" style=\"color:#39FF14;\"><\/i>\r\n <div class=\"transform-img-wrap\">\r\n <img decoding=\"async\" src=\"http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/IELTS-with-Malitha-After.jpeg\" alt=\"After\" \/>\r\n <\/div>\r\n <h4>After<\/h4>\r\n <p>3x leads, brand authority<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Row 2 -->\r\n <div class=\"card\">\r\n <div class=\"transform-grid\">\r\n <div class=\"transform-card\" onclick=\"openModal('Before: Low Engagement', 18)\">\r\n <i class=\"fas fa-times-circle\" style=\"color:#ff6b6b;\"><\/i>\r\n <div class=\"transform-img-wrap\">\r\n <img decoding=\"async\" src=\"http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/Visa-Path-Before.jpeg\" alt=\"Before\" \/>\r\n <\/div>\r\n <h4>Before<\/h4>\r\n <p>Low engagement & leads<\/p>\r\n <\/div>\r\n <div class=\"transform-card\" onclick=\"openModal('After: High Conversion', 19)\">\r\n <i class=\"fas fa-check-circle\" style=\"color:#39FF14;\"><\/i>\r\n <div class=\"transform-img-wrap\">\r\n <img decoding=\"async\" src=\"http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-08-at-15.38.35.jpeg\" alt=\"After\" \/>\r\n <\/div>\r\n <h4>After<\/h4>\r\n <p>3x leads, brand authority<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <!-- ===== FEEDBACK CAROUSEL (FIXED) ===== -->\r\n <section id=\"feedback\">\r\n <div class=\"container\">\r\n <h2>Client <span>Feedback<\/span><\/h2>\r\n <div class=\"feedback-carousel-wrapper\">\r\n <div class=\"feedback-carousel\">\r\n <div class=\"feedback-slide-container\" id=\"feedbackSlideContainer\">\r\n <!-- slides injected by JS -->\r\n <\/div>\r\n <div class=\"carousel-arrow carousel-arrow-left\" id=\"feedbackPrev\">\r\n <i class=\"fas fa-chevron-left\" style=\"font-size:17px; margin-top:5px;\"><\/i>\r\n <\/div>\r\n <div class=\"carousel-arrow carousel-arrow-right\" id=\"feedbackNext\">\r\n <i class=\"fas fa-chevron-right\" style=\"font-size:17px; margin-top:5px;\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"feedback-indicators\" id=\"feedbackIndicators\"><\/div>\r\n <\/div>\r\n <p style=\"color:#6a8a6a; text-align:center; font-size:0.85rem; margin-top:12px;\">\r\n <i class=\"fas fa-quote-left\" style=\"color:#39FF14; margin-right:6px;\"><\/i>\r\n Real feedback from our clients \u2014 swipe through\r\n <i class=\"fas fa-quote-right\" style=\"color:#39FF14; margin-left:6px;\"><\/i>\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== CTA ===== -->\r\n <section id=\"cta\" style=\"text-align:center;\">\r\n <h2 style=\"font-size:2.5rem;\">Ready to Grow Your <span>Visa Agency?<\/span><\/h2>\r\n <p style=\"color:#a0a5a1; max-width:500px; margin:0 auto 30px;\">Book a strategy session and let's build<br> your brand authority.<\/p>\r\n <button class=\"btn\" style=\"font-size:1.1rem; padding:18px 10px; width:230px\">\r\n <i class=\"fas fa-phone-alt\" style=\"margin-right:12px;\"><\/i> Book a Call\r\n <\/button>\r\n <\/section>\r\n\r\n\r\n\r\n\r\n <!-- ===== MODAL (popup) - supports images AND videos ===== -->\r\n <div id=\"modal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <h3 id=\"mTitle\">Creative<\/h3>\r\n <div style=\"display:flex; align-items:center; justify-content:center;\">\r\n <div class=\"arrow\" onclick=\"moveSlide(-1)\">❮<\/div>\r\n <div class=\"carousel-container\" id=\"carouselContainer\"><\/div>\r\n <div class=\"arrow\" onclick=\"moveSlide(1)\">❯<\/div>\r\n <\/div>\r\n <div class=\"slide-counter\" id=\"slideCounter\">1 \/ 3<\/div>\r\n <button class=\"btn\" onclick=\"closeModal()\"><i class=\"fas fa-times\"><\/i> Close<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ================================================================\r\n \/\/ IMAGE \/ VIDEO SETS\r\n \/\/ ================================================================\r\n const cardImages = {\r\n 0: [\r\n 'https:\/\/images.unsplash.com\/photo-1543286386-713bdd548da4?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1524178232363-1fb2b075b655?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1531482615713-2afd69097998?w=800&h=500&fit=crop&crop=center'\r\n ],\r\n 1: [\r\n 'https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1543286386-713bdd548da4?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1524178232363-1fb2b075b655?w=800&h=500&fit=crop&crop=center'\r\n ],\r\n 2: [\r\n 'https:\/\/images.unsplash.com\/photo-1524178232363-1fb2b075b655?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1543286386-713bdd548da4?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1531482615713-2afd69097998?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1516387938699-a93567ec168e?w=800&h=500&fit=crop&crop=center'\r\n ],\r\n 3: [\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.04-1.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.04.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.07.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.20-1.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.20.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.21-1.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.21-2.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.21.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.24.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.25-1.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.25-2.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.25-3.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.25-4.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.25-5.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.25.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.26-1.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.26-2.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.26-3.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.26.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.55.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.56-1.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-10.16.56.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-06-at-14.00.35-a.jpeg',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-06-at-14.00.35b.jpeg'\r\n ],\r\n 8: [\r\n 'https:\/\/portfolio.advertigo.online\/wp-includes\/images\/WhatsApp%20Video%202026-07-02%20at%2010.22.12.mp4',\r\n 'https:\/\/portfolio.advertigo.online\/wp-includes\/images\/WhatsApp%20Video%202026-07-02%20at%2017.21.21.mp4',\r\n 'https:\/\/portfolio.advertigo.online\/wp-includes\/images\/WhatsApp%20Video%202026-07-02%20at%2017.11.47.mp4',\r\n 'https:\/\/portfolio.advertigo.online\/wp-includes\/images\/WhatsApp%20Video%202026-07-02%20at%2017.20.30.mp4',\r\n 'https:\/\/portfolio.advertigo.online\/wp-includes\/images\/WhatsApp%20Video%202026-07-14%20at%2013.55.45.mp4'\r\n\r\n ],\r\n 9: [\r\n 'https:\/\/portfolio.advertigo.online\/wp-includes\/images\/WhatsApp%20Video%202026-07-02%20at%2017.30.25.mp4',\r\n 'https:\/\/portfolio.advertigo.online\/wp-includes\/images\/WhatsApp%20Video%202026-07-06%20at%2011.16.11.mp4'\r\n\r\n ],\r\n 12: [\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/1-3.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/2-5.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/3-4.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/4-4.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/5-4.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/6-2.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/7-1.png'\r\n\r\n ],\r\n 13: [\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/1-2.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/2-4.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/3-3.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/4-3.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/5-3.png'\r\n ],\r\n 14: [\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/2-2.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/1-1.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/3-2.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/4-2.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/5-2.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/6-1.png'\r\n ],\r\n 15: [\r\n 'https:\/\/images.unsplash.com\/photo-1524178232363-1fb2b075b655?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1516387938699-a93567ec168e?w=800&h=500&fit=crop&crop=center'\r\n ],\r\n 16: [\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/IELTS-with-Malitha-Before.jpeg'\r\n ],\r\n 17: [\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/IELTS-with-Malitha-After.jpeg'\r\n ],\r\n 18: [\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/Visa-Path-Before.jpeg'\r\n ],\r\n 19: [\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-08-at-15.38.35.jpeg'\r\n ],\r\n 20: [\r\n 'https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1543286386-713bdd548da4?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1524178232363-1fb2b075b655?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1516387938699-a93567ec168e?w=800&h=500&fit=crop&crop=center'\r\n ],\r\n \/\/ \u2500\u2500 FEEDBACK IMAGES \u2500\u2500\r\n feedback: [\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/2-6.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/4-5.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/6-3.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/7-2.png',\r\n 'http:\/\/portfolio.advertigo.online\/wp-content\/uploads\/2026\/07\/8-1.png'\r\n ]\r\n };\r\n\r\n function isVideoUrl(url) {\r\n if (!url) return false;\r\n const exts = ['.mp4', '.webm', '.mov', '.ogg', '.avi', '.mkv', '.m4v', '.3gp'];\r\n const lower = url.toLowerCase();\r\n return exts.some(e => lower.includes(e)) || lower.includes('video');\r\n }\r\n\r\n \/\/ ================================================================\r\n \/\/ MODAL\r\n \/\/ ================================================================\r\n let currentSlideIndex = 0;\r\n let currentModalSlides = [];\r\n\r\n function openModal(title, idx) {\r\n const modal = document.getElementById('modal');\r\n document.getElementById('mTitle').innerText = title;\r\n const slides = cardImages[idx] || [\r\n 'https:\/\/images.unsplash.com\/photo-1543286386-713bdd548da4?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?w=800&h=500&fit=crop&crop=center',\r\n 'https:\/\/images.unsplash.com\/photo-1524178232363-1fb2b075b655?w=800&h=500&fit=crop&crop=center'\r\n ];\r\n currentModalSlides = slides.slice();\r\n currentSlideIndex = 0;\r\n renderModalSlides();\r\n updateModalCounter();\r\n modal.style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n document.querySelectorAll('.video-carousel-track video').forEach(v => v.pause());\r\n }\r\n\r\n function closeModal() {\r\n document.getElementById('modal').style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n document.querySelectorAll('#carouselContainer video').forEach(v => v.pause());\r\n }\r\n\r\n function renderModalSlides() {\r\n const container = document.getElementById('carouselContainer');\r\n container.innerHTML = '';\r\n currentModalSlides.forEach((src, i) => {\r\n const div = document.createElement('div');\r\n div.className = 'slide' + (i === currentSlideIndex ? ' active' : '');\r\n if (isVideoUrl(src)) {\r\n const video = document.createElement('video');\r\n video.muted = false;\r\n video.controls = true;\r\n video.playsInline = true;\r\n video.preload = 'metadata';\r\n video.style.width = '100%';\r\n video.style.maxHeight = '100%';\r\n video.style.borderRadius = '12px';\r\n video.style.background = '#0a1f0a';\r\n const source = document.createElement('source');\r\n source.src = src;\r\n source.type = 'video\/mp4';\r\n video.appendChild(source);\r\n video.onerror = function() {\r\n this.style.display = 'none';\r\n const fb = document.createElement('div');\r\n fb.className = 'video-fallback';\r\n fb.innerHTML =\r\n `<i class=\"fas fa-video-slash\"><\/i><p>Video failed to load<\/p><small style=\"color:#4a5a4a;\">${src.split('\/').pop()}<\/small>`;\r\n div.appendChild(fb);\r\n };\r\n div.appendChild(video);\r\n } else {\r\n const img = document.createElement('img');\r\n img.src = src;\r\n img.alt = `Slide ${i+1}`;\r\n img.loading = 'lazy';\r\n img.onerror = function() {\r\n this.style.display = 'none';\r\n const fb = document.createElement('div');\r\n fb.className = 'video-fallback';\r\n fb.innerHTML = `<i class=\"fas fa-image\"><\/i><p>Image failed to load<\/p>`;\r\n div.appendChild(fb);\r\n };\r\n div.appendChild(img);\r\n }\r\n container.appendChild(div);\r\n });\r\n const firstVideo = container.querySelector('.slide.active video');\r\n if (firstVideo) firstVideo.play().catch(() => {});\r\n }\r\n\r\n function updateModalCounter() {\r\n document.getElementById('slideCounter').innerText =\r\n `${currentSlideIndex+1} \/ ${currentModalSlides.length}`;\r\n }\r\n\r\n function moveSlide(n) {\r\n if (currentModalSlides.length === 0) return;\r\n const total = currentModalSlides.length;\r\n currentSlideIndex = (currentSlideIndex + n + total) % total;\r\n const container = document.getElementById('carouselContainer');\r\n const slides = container.querySelectorAll('.slide');\r\n slides.forEach((slide, i) => {\r\n slide.classList.toggle('active', i === currentSlideIndex);\r\n });\r\n updateModalCounter();\r\n const activeVideo = container.querySelector('.slide.active video');\r\n if (activeVideo) activeVideo.play().catch(() => {});\r\n container.querySelectorAll('video').forEach(v => { if (v !== activeVideo) v.pause(); });\r\n }\r\n\r\n document.getElementById('modal').addEventListener('click', function(e) { if (e.target === this) closeModal(); });\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') closeModal();\r\n if (document.getElementById('modal').style.display === 'flex') {\r\n if (e.key === 'ArrowLeft') moveSlide(-1);\r\n if (e.key === 'ArrowRight') moveSlide(1);\r\n }\r\n });\r\n\r\n \/\/ ================================================================\r\n \/\/ CAROUSEL 1 \u2014 slide transition (main)\r\n \/\/ ================================================================\r\n let creativeImages = [];\r\n let creativeIndex = 0;\r\n const slideContainer = document.getElementById('creativeSlideContainer');\r\n const slideIndicators = document.getElementById('creativeIndicators');\r\n const prevArrow = document.getElementById('prevArrow');\r\n const nextArrow = document.getElementById('nextArrow');\r\n\r\n function loadSlideCarousel(idx) {\r\n const images = cardImages[idx] || cardImages[3];\r\n creativeImages = images.slice();\r\n creativeIndex = 0;\r\n renderSlideCarousel();\r\n }\r\n\r\n function renderSlideCarousel() {\r\n slideContainer.style.transform = 'translateX(0)';\r\n slideContainer.innerHTML = '';\r\n if (!creativeImages.length) {\r\n const div = document.createElement('div');\r\n div.className = 'cslide';\r\n div.innerHTML =\r\n `<div class=\"placeholder\"><i class=\"fas fa-image\"><\/i><span>No images<\/span><\/div>`;\r\n slideContainer.appendChild(div);\r\n slideIndicators.innerHTML = '';\r\n return;\r\n }\r\n creativeImages.forEach((src, i) => {\r\n const div = document.createElement('div');\r\n div.className = 'cslide';\r\n const img = document.createElement('img');\r\n img.src = src;\r\n img.alt = `Creative ${i+1}`;\r\n img.loading = 'lazy';\r\n img.onerror = function() {\r\n this.style.display = 'none';\r\n const ph = document.createElement('div');\r\n ph.className = 'placeholder';\r\n ph.innerHTML = `<i class=\"fas fa-image\"><\/i><span>Image ${i+1}<\/span>`;\r\n div.appendChild(ph);\r\n };\r\n div.appendChild(img);\r\n slideContainer.appendChild(div);\r\n });\r\n slideIndicators.innerHTML = '';\r\n creativeImages.forEach((_, i) => {\r\n const dot = document.createElement('span');\r\n dot.classList.toggle('active', i === creativeIndex);\r\n dot.addEventListener('click', () => moveSlideCarouselTo(i));\r\n slideIndicators.appendChild(dot);\r\n });\r\n moveSlideCarouselTo(creativeIndex);\r\n }\r\n\r\n function moveSlideCarouselTo(index) {\r\n const total = slideContainer.querySelectorAll('.cslide').length;\r\n if (total === 0) return;\r\n const target = Math.max(0, Math.min(index, total - 1));\r\n creativeIndex = target;\r\n slideContainer.style.transform = `translateX(-${target * 100}%)`;\r\n const dots = slideIndicators.querySelectorAll('span');\r\n dots.forEach((dot, i) => { dot.classList.toggle('active', i === target); });\r\n }\r\n\r\n function prevSlideCarousel() { if (creativeImages.length) moveSlideCarouselTo((creativeIndex - 1 + creativeImages\r\n .length) % creativeImages.length); }\r\n\r\n function nextSlideCarousel() { if (creativeImages.length) moveSlideCarouselTo((creativeIndex + 1) % creativeImages\r\n .length); }\r\n\r\n prevArrow.addEventListener('click', function(e) { e.stopPropagation();\r\n prevSlideCarousel(); });\r\n nextArrow.addEventListener('click', function(e) { e.stopPropagation();\r\n nextSlideCarousel(); });\r\n\r\n \/\/ ================================================================\r\n \/\/ CAROUSEL 2 \u2014 fade transition, 3 random images per slide\r\n \/\/ ================================================================\r\n let fadePool = [];\r\n let fadeSlides = [];\r\n let fadeIndex = 0;\r\n let fadeTimer = null;\r\n const FADE_INTERVAL = 1900;\r\n\r\n const fadeContainer = document.getElementById('creativeFadeContainer');\r\n const fadeIndicators = document.getElementById('fadeIndicators');\r\n const fadePrev = document.getElementById('fadePrevArrow');\r\n const fadeNext = document.getElementById('fadeNextArrow');\r\n\r\n function shuffleArray(arr) {\r\n for (let i = arr.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [arr[i], arr[j]] = [arr[j], arr[i]];\r\n }\r\n return arr;\r\n }\r\n\r\n function pickRandomThree(pool) {\r\n if (!pool || pool.length === 0) return [];\r\n const shuffled = shuffleArray([...pool]);\r\n return shuffled.slice(0, 3);\r\n }\r\n\r\n function buildFadeSlides(pool, count = 10) {\r\n if (!pool || pool.length === 0) return [];\r\n const slides = [];\r\n for (let i = 0; i < count; i++) {\r\n slides.push(pickRandomThree(pool));\r\n }\r\n return slides;\r\n }\r\n\r\n function loadFadeCarousel(idx) {\r\n const images = cardImages[idx] || cardImages[3];\r\n fadePool = images.slice();\r\n fadeSlides = buildFadeSlides(fadePool, 10);\r\n fadeIndex = 0;\r\n renderFadeCarousel();\r\n startFadeAuto();\r\n }\r\n\r\n function renderFadeCarousel() {\r\n fadeContainer.innerHTML = '';\r\n fadeIndicators.innerHTML = '';\r\n if (!fadeSlides.length) {\r\n const div = document.createElement('div');\r\n div.className = 'fslide active';\r\n div.innerHTML =\r\n `<div class=\"slide-item\"><div class=\"placeholder\"><i class=\"fas fa-image\"><\/i><span>No images<\/span><\/div><\/div>`;\r\n fadeContainer.appendChild(div);\r\n return;\r\n }\r\n fadeSlides.forEach((slideImages, slideIdx) => {\r\n const slideDiv = document.createElement('div');\r\n slideDiv.className = 'fslide' + (slideIdx === fadeIndex ? ' active' : '');\r\n for (let i = 0; i < 3; i++) {\r\n const itemDiv = document.createElement('div');\r\n itemDiv.className = 'slide-item';\r\n const imgSrc = slideImages[i] || slideImages[0] || '';\r\n if (imgSrc) {\r\n const img = document.createElement('img');\r\n img.src = imgSrc;\r\n img.alt = `Fade ${slideIdx+1}-${i+1}`;\r\n img.loading = 'lazy';\r\n img.onerror = function() {\r\n this.style.display = 'none';\r\n const ph = document.createElement('div');\r\n ph.className = 'placeholder';\r\n ph.innerHTML = `<i class=\"fas fa-image\"><\/i><span>${i+1}<\/span>`;\r\n itemDiv.appendChild(ph);\r\n };\r\n itemDiv.appendChild(img);\r\n } else {\r\n const ph = document.createElement('div');\r\n ph.className = 'placeholder';\r\n ph.innerHTML = `<i class=\"fas fa-image\"><\/i><span>${i+1}<\/span>`;\r\n itemDiv.appendChild(ph);\r\n }\r\n slideDiv.appendChild(itemDiv);\r\n }\r\n fadeContainer.appendChild(slideDiv);\r\n });\r\n fadeSlides.forEach((_, i) => {\r\n const dot = document.createElement('span');\r\n dot.classList.toggle('active', i === fadeIndex);\r\n dot.addEventListener('click', () => {\r\n stopFadeAuto();\r\n moveFadeTo(i);\r\n startFadeAuto();\r\n });\r\n fadeIndicators.appendChild(dot);\r\n });\r\n }\r\n\r\n function moveFadeTo(index) {\r\n const slides = fadeContainer.querySelectorAll('.fslide');\r\n if (slides.length === 0) return;\r\n const target = Math.max(0, Math.min(index, slides.length - 1));\r\n fadeIndex = target;\r\n slides.forEach((slide, i) => { slide.classList.toggle('active', i === target); });\r\n const dots = fadeIndicators.querySelectorAll('span');\r\n dots.forEach((dot, i) => { dot.classList.toggle('active', i === target); });\r\n }\r\n\r\n function nextFade() {\r\n if (fadeSlides.length === 0) return;\r\n const next = (fadeIndex + 1) % fadeSlides.length;\r\n moveFadeTo(next);\r\n if (next === 0) {\r\n fadeSlides = buildFadeSlides(fadePool, 10);\r\n renderFadeCarousel();\r\n moveFadeTo(0);\r\n }\r\n }\r\n\r\n function prevFade() {\r\n if (fadeSlides.length === 0) return;\r\n const prev = (fadeIndex - 1 + fadeSlides.length) % fadeSlides.length;\r\n moveFadeTo(prev);\r\n }\r\n\r\n function startFadeAuto() { stopFadeAuto();\r\n fadeTimer = setInterval(nextFade, FADE_INTERVAL); }\r\n\r\n function stopFadeAuto() { if (fadeTimer) { clearInterval(fadeTimer);\r\n fadeTimer = null; } }\r\n\r\n fadePrev.addEventListener('click', function(e) { e.stopPropagation();\r\n stopFadeAuto();\r\n prevFade();\r\n startFadeAuto(); });\r\n fadeNext.addEventListener('click', function(e) { e.stopPropagation();\r\n stopFadeAuto();\r\n nextFade();\r\n startFadeAuto(); });\r\n\r\n const fadeCarouselEl = document.getElementById('creativeFadeContainer').closest('.creative-carousel');\r\n fadeCarouselEl.addEventListener('mouseenter', stopFadeAuto);\r\n fadeCarouselEl.addEventListener('mouseleave', startFadeAuto);\r\n\r\n let fadeTouchStart = 0,\r\n fadeTouchEnd = 0;\r\n fadeCarouselEl.addEventListener('touchstart', function(e) { fadeTouchStart = e.changedTouches[0].screenX; }, { passive: true });\r\n fadeCarouselEl.addEventListener('touchend', function(e) {\r\n fadeTouchEnd = e.changedTouches[0].screenX;\r\n const diff = fadeTouchStart - fadeTouchEnd;\r\n if (Math.abs(diff) > 50) {\r\n stopFadeAuto();\r\n if (diff > 0) nextFade();\r\n else prevFade();\r\n startFadeAuto();\r\n }\r\n }, { passive: true });\r\n\r\n \/\/ ================================================================\r\n \/\/ VIDEO CAROUSELS (Presenter & VoiceOver)\r\n \/\/ ================================================================\r\n const videoCarousels = {};\r\n\r\n function initVideoCarousel(cardId, trackId, prevId, nextId, dotsId, imageKey) {\r\n const track = document.getElementById(trackId);\r\n const prevBtn = document.getElementById(prevId);\r\n const nextBtn = document.getElementById(nextId);\r\n const dotsContainer = document.getElementById(dotsId);\r\n const videos = cardImages[imageKey] || [];\r\n\r\n let currentIndex = 0;\r\n let autoTimer = null;\r\n const AUTO_INTERVAL = 3500;\r\n\r\n function render() {\r\n track.innerHTML = '';\r\n dotsContainer.innerHTML = '';\r\n if (!videos.length) {\r\n const div = document.createElement('div');\r\n div.className = 'vslide';\r\n div.innerHTML =\r\n `<div class=\"video-placeholder\"><i class=\"fas fa-video-slash\"><\/i><span>No videos<\/span><\/div>`;\r\n track.appendChild(div);\r\n return;\r\n }\r\n videos.forEach((src, i) => {\r\n const div = document.createElement('div');\r\n div.className = 'vslide';\r\n const video = document.createElement('video');\r\n video.muted = true;\r\n video.playsInline = true;\r\n video.preload = 'metadata';\r\n video.style.width = '100%';\r\n video.style.maxHeight = '300px';\r\n video.style.borderRadius = '10px';\r\n video.style.background = '#0a1f0a';\r\n const source = document.createElement('source');\r\n source.src = src;\r\n source.type = 'video\/mp4';\r\n video.appendChild(source);\r\n video.onerror = function() {\r\n this.style.display = 'none';\r\n const ph = document.createElement('div');\r\n ph.className = 'video-placeholder';\r\n ph.innerHTML = `<i class=\"fas fa-video-slash\"><\/i><span>Video ${i+1}<\/span>`;\r\n div.appendChild(ph);\r\n };\r\n div.appendChild(video);\r\n track.appendChild(div);\r\n\r\n const dot = document.createElement('span');\r\n dot.classList.toggle('active', i === 0);\r\n dot.addEventListener('click', () => { stopAuto();\r\n goTo(i);\r\n startAuto(); });\r\n dotsContainer.appendChild(dot);\r\n });\r\n goTo(0);\r\n }\r\n\r\n function goTo(index) {\r\n const slides = track.querySelectorAll('.vslide');\r\n if (!slides.length) return;\r\n const target = Math.max(0, Math.min(index, slides.length - 1));\r\n currentIndex = target;\r\n track.style.transform = `translateX(-${target * 100}%)`;\r\n const dots = dotsContainer.querySelectorAll('span');\r\n dots.forEach((dot, i) => { dot.classList.toggle('active', i === target); });\r\n const allVids = track.querySelectorAll('video');\r\n allVids.forEach((v, i) => {\r\n if (i === target) {\r\n v.play().catch(() => {});\r\n } else {\r\n v.pause();\r\n }\r\n });\r\n }\r\n\r\n function next() { if (videos.length) goTo((currentIndex + 1) % videos.length); }\r\n\r\n function prev() { if (videos.length) goTo((currentIndex - 1 + videos.length) % videos.length); }\r\n\r\n function startAuto() { stopAuto();\r\n autoTimer = setInterval(next, AUTO_INTERVAL); }\r\n\r\n function stopAuto() { if (autoTimer) { clearInterval(autoTimer);\r\n autoTimer = null; } }\r\n\r\n prevBtn.addEventListener('click', function(e) { e.stopPropagation();\r\n stopAuto();\r\n prev();\r\n startAuto(); });\r\n nextBtn.addEventListener('click', function(e) { e.stopPropagation();\r\n stopAuto();\r\n next();\r\n startAuto(); });\r\n\r\n const wrapper = track.closest('.video-carousel-wrapper');\r\n wrapper.addEventListener('mouseenter', stopAuto);\r\n wrapper.addEventListener('mouseleave', startAuto);\r\n\r\n let touchStartX = 0,\r\n touchEndX = 0;\r\n wrapper.addEventListener('touchstart', function(e) { touchStartX = e.changedTouches[0].screenX; }, { passive: true });\r\n wrapper.addEventListener('touchend', function(e) {\r\n touchEndX = e.changedTouches[0].screenX;\r\n const diff = touchStartX - touchEndX;\r\n if (Math.abs(diff) > 50) {\r\n stopAuto();\r\n if (diff > 0) next();\r\n else prev();\r\n startAuto();\r\n }\r\n }, { passive: true });\r\n\r\n render();\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n const vids = track.querySelectorAll('video');\r\n if (entry.isIntersecting) {\r\n vids.forEach((v, i) => { if (i === currentIndex) v.play().catch(() => {}); });\r\n startAuto();\r\n } else {\r\n vids.forEach(v => v.pause());\r\n stopAuto();\r\n }\r\n });\r\n }, { threshold: 0.3 });\r\n observer.observe(wrapper.closest('.video-card'));\r\n\r\n videoCarousels[cardId] = { track, goTo, stopAuto, startAuto, currentIndex: () => currentIndex, videos };\r\n\r\n return { goTo, next, prev, startAuto, stopAuto, render };\r\n }\r\n\r\n initVideoCarousel('presenterCard', 'presenterTrack', 'presenterPrev', 'presenterNext', 'presenterDots', 8);\r\n initVideoCarousel('voiceoverCard', 'voiceoverTrack', 'voiceoverPrev', 'voiceoverNext', 'voiceoverDots', 9);\r\n\r\n\r\n \/\/ ================================================================\r\n \/\/ FEEDBACK CAROUSEL \u2014 FIXED: images show on swipe, auto-slide works on mobile\r\n \/\/ ================================================================\r\n const feedbackContainer = document.getElementById('feedbackSlideContainer');\r\n const feedbackIndicators = document.getElementById('feedbackIndicators');\r\n const feedbackPrev = document.getElementById('feedbackPrev');\r\n const feedbackNext = document.getElementById('feedbackNext');\r\n\r\n let feedbackImages = [];\r\n let feedbackSlides = [];\r\n let feedbackIndex = 0;\r\n let feedbackTimer = null;\r\n let fbAutoPaused = false;\r\n const FEEDBACK_INTERVAL = 3000;\r\n\r\n \/\/ Preload images so they're in cache before carousel renders\r\n function preloadFeedbackImages(urls, callback) {\r\n if (!urls || urls.length === 0) { callback(); return; }\r\n let loaded = 0;\r\n const total = urls.length;\r\n urls.forEach(url => {\r\n const img = new Image();\r\n img.onload = () => { loaded++; if (loaded === total) callback(); };\r\n img.onerror = () => { loaded++; if (loaded === total) callback(); };\r\n img.src = url;\r\n });\r\n }\r\n\r\n function buildFeedbackSlides(pool, itemsPerSlide, count) {\r\n if (itemsPerSlide === void 0) itemsPerSlide = 3;\r\n if (count === void 0) count = 10;\r\n if (!pool || pool.length === 0) return [];\r\n const slides = [];\r\n const shuffled = shuffleArray([...pool]);\r\n for (let i = 0; i < count; i++) {\r\n const start = (i * itemsPerSlide) % shuffled.length;\r\n const chunk = [];\r\n for (let j = 0; j < itemsPerSlide; j++) {\r\n const idx = (start + j) % shuffled.length;\r\n chunk.push(shuffled[idx]);\r\n }\r\n slides.push(chunk);\r\n }\r\n return slides;\r\n }\r\n\r\n \/\/ Render feedback carousel \u2014 uses position:absolute stacking so ALL images load\r\n function renderFeedbackCarousel() {\r\n feedbackContainer.innerHTML = '';\r\n feedbackIndicators.innerHTML = '';\r\n\r\n \/\/ ensure container has position:relative so absolute children are contained\r\n feedbackContainer.style.position = 'relative';\r\n feedbackContainer.style.overflow = 'hidden';\r\n\r\n if (!feedbackSlides.length) {\r\n const div = document.createElement('div');\r\n div.className = 'fslide-fb active';\r\n div.innerHTML =\r\n `<div class=\"fb-item\"><div class=\"fb-placeholder\"><i class=\"fas fa-image\"><\/i><span>No feedback<\/span><\/div><\/div>`;\r\n feedbackContainer.appendChild(div);\r\n return;\r\n }\r\n\r\n feedbackSlides.forEach((slideImages, slideIdx) => {\r\n const slideDiv = document.createElement('div');\r\n slideDiv.className = 'fslide-fb';\r\n \/\/ All slides are absolutely positioned so they stack; only active is visible\r\n slideDiv.style.position = 'absolute';\r\n slideDiv.style.top = '0';\r\n slideDiv.style.left = '0';\r\n slideDiv.style.width = '100%';\r\n slideDiv.style.height = '100%';\r\n slideDiv.style.display = 'grid';\r\n slideDiv.style.visibility = (slideIdx === feedbackIndex) ? 'visible' : 'hidden';\r\n slideDiv.style.opacity = (slideIdx === feedbackIndex) ? '1' : '0';\r\n slideDiv.style.transition = 'opacity 0.4s ease, visibility 0.4s ease';\r\n slideDiv.style.pointerEvents = (slideIdx === feedbackIndex) ? 'auto' : 'none';\r\n slideDiv.classList.toggle('active', slideIdx === feedbackIndex);\r\n\r\n for (let i = 0; i < 3; i++) {\r\n const itemDiv = document.createElement('div');\r\n itemDiv.className = 'fb-item';\r\n const imgSrc = slideImages[i] || slideImages[0] || '';\r\n if (imgSrc) {\r\n const img = document.createElement('img');\r\n img.src = imgSrc;\r\n img.alt = `Feedback ${slideIdx+1}-${i+1}`;\r\n \/\/ no lazy loading \u2014 load immediately\r\n img.onerror = function() {\r\n this.style.display = 'none';\r\n const ph = document.createElement('div');\r\n ph.className = 'fb-placeholder';\r\n ph.innerHTML = `<i class=\"fas fa-image\"><\/i><span>${i+1}<\/span>`;\r\n itemDiv.appendChild(ph);\r\n };\r\n \/\/ Click -> open modal with that image\r\n img.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const flatIdx = (slideIdx * 3 + i) % feedbackImages.length;\r\n openModal('Client Feedback', 'feedback', flatIdx);\r\n });\r\n itemDiv.appendChild(img);\r\n } else {\r\n const ph = document.createElement('div');\r\n ph.className = 'fb-placeholder';\r\n ph.innerHTML = `<i class=\"fas fa-image\"><\/i><span>${i+1}<\/span>`;\r\n ph.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const flatIdx = (slideIdx * 3 + i) % feedbackImages.length;\r\n openModal('Client Feedback', 'feedback', flatIdx);\r\n });\r\n itemDiv.appendChild(ph);\r\n }\r\n slideDiv.appendChild(itemDiv);\r\n }\r\n feedbackContainer.appendChild(slideDiv);\r\n });\r\n\r\n \/\/ Build dots\r\n feedbackSlides.forEach((_, i) => {\r\n const dot = document.createElement('span');\r\n dot.classList.toggle('active', i === feedbackIndex);\r\n dot.addEventListener('click', () => {\r\n stopFeedbackAuto();\r\n moveFeedbackTo(i, true);\r\n startFeedbackAuto();\r\n });\r\n feedbackIndicators.appendChild(dot);\r\n });\r\n }\r\n\r\n function moveFeedbackTo(index, skipRebuild) {\r\n const slides = feedbackContainer.querySelectorAll('.fslide-fb');\r\n if (slides.length === 0) return;\r\n const target = Math.max(0, Math.min(index, slides.length - 1));\r\n feedbackIndex = target;\r\n\r\n slides.forEach((slide, i) => {\r\n const isActive = i === target;\r\n slide.style.visibility = isActive ? 'visible' : 'hidden';\r\n slide.style.opacity = isActive ? '1' : '0';\r\n slide.style.pointerEvents = isActive ? 'auto' : 'none';\r\n slide.classList.toggle('active', isActive);\r\n \/\/ keep display:grid always\r\n slide.style.display = 'grid';\r\n });\r\n\r\n const dots = feedbackIndicators.querySelectorAll('span');\r\n dots.forEach((dot, i) => { dot.classList.toggle('active', i === target); });\r\n }\r\n\r\n function nextFeedback() {\r\n if (feedbackSlides.length === 0) return;\r\n const next = (feedbackIndex + 1) % feedbackSlides.length;\r\n moveFeedbackTo(next, true);\r\n \/\/ When we wrap around, rebuild with fresh shuffle\r\n if (next === 0) {\r\n feedbackSlides = buildFeedbackSlides(feedbackImages, 3, 10);\r\n \/\/ preserve current index (0) but re-render\r\n const oldIndex = feedbackIndex;\r\n renderFeedbackCarousel();\r\n moveFeedbackTo(0, true);\r\n feedbackIndex = 0;\r\n }\r\n }\r\n\r\n function prevFeedback() {\r\n if (feedbackSlides.length === 0) return;\r\n const prev = (feedbackIndex - 1 + feedbackSlides.length) % feedbackSlides.length;\r\n moveFeedbackTo(prev, true);\r\n }\r\n\r\n function startFeedbackAuto() {\r\n stopFeedbackAuto();\r\n if (fbAutoPaused) return;\r\n feedbackTimer = setInterval(nextFeedback, FEEDBACK_INTERVAL);\r\n }\r\n\r\n function stopFeedbackAuto() {\r\n if (feedbackTimer) { clearInterval(feedbackTimer);\r\n feedbackTimer = null; }\r\n }\r\n\r\n function pauseFeedbackAuto() { fbAutoPaused = true;\r\n stopFeedbackAuto(); }\r\n\r\n function resumeFeedbackAuto() { fbAutoPaused = false;\r\n startFeedbackAuto(); }\r\n\r\n \/\/ Load and init feedback carousel with preload\r\n function loadFeedbackCarousel() {\r\n const images = cardImages.feedback || [];\r\n feedbackImages = images.slice();\r\n\r\n \/\/ Preload all images first, then render\r\n preloadFeedbackImages(feedbackImages, function() {\r\n feedbackSlides = buildFeedbackSlides(feedbackImages, 3, 10);\r\n feedbackIndex = 0;\r\n renderFeedbackCarousel();\r\n \/\/ ensure first slide is visible\r\n moveFeedbackTo(0, true);\r\n startFeedbackAuto();\r\n });\r\n }\r\n\r\n \/\/ Arrow events\r\n feedbackPrev.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n stopFeedbackAuto();\r\n prevFeedback();\r\n startFeedbackAuto();\r\n });\r\n\r\n feedbackNext.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n stopFeedbackAuto();\r\n nextFeedback();\r\n startFeedbackAuto();\r\n });\r\n\r\n \/\/ Hover pause\r\n const feedbackWrapper = document.querySelector('.feedback-carousel-wrapper');\r\n feedbackWrapper.addEventListener('mouseenter', function() {\r\n pauseFeedbackAuto();\r\n });\r\n feedbackWrapper.addEventListener('mouseleave', function() {\r\n resumeFeedbackAuto();\r\n });\r\n\r\n \/\/ Touch swipe \u2014 robust for mobile\r\n let fbTouchStartX = 0,\r\n fbTouchEndX = 0;\r\n let fbTouchStartY = 0,\r\n fbTouchEndY = 0;\r\n\r\n feedbackWrapper.addEventListener('touchstart', function(e) {\r\n const touch = e.changedTouches[0];\r\n fbTouchStartX = touch.screenX;\r\n fbTouchStartY = touch.screenY;\r\n \/\/ Pause auto while touching\r\n pauseFeedbackAuto();\r\n }, { passive: true });\r\n\r\n feedbackWrapper.addEventListener('touchmove', function(e) {\r\n \/\/ optional: prevent page scroll if swiping horizontally\r\n const touch = e.changedTouches[0];\r\n const dx = Math.abs(touch.screenX - fbTouchStartX);\r\n const dy = Math.abs(touch.screenY - fbTouchStartY);\r\n if (dx > dy && dx > 10) {\r\n e.preventDefault();\r\n }\r\n }, { passive: false });\r\n\r\n feedbackWrapper.addEventListener('touchend', function(e) {\r\n const touch = e.changedTouches[0];\r\n fbTouchEndX = touch.screenX;\r\n fbTouchEndY = touch.screenY;\r\n const diffX = fbTouchStartX - fbTouchEndX;\r\n const diffY = fbTouchStartY - fbTouchEndY;\r\n\r\n \/\/ Only trigger if horizontal swipe is dominant and long enough\r\n if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 40) {\r\n stopFeedbackAuto();\r\n if (diffX > 0) {\r\n nextFeedback();\r\n } else {\r\n prevFeedback();\r\n }\r\n \/\/ Resume auto after a short delay (prevents double-trigger)\r\n setTimeout(function() {\r\n resumeFeedbackAuto();\r\n }, 300);\r\n } else {\r\n \/\/ If not a swipe, just resume auto\r\n resumeFeedbackAuto();\r\n }\r\n }, { passive: true });\r\n\r\n \/\/ Also handle click on the container background (not on images) \u2014 resume auto if needed\r\n feedbackWrapper.addEventListener('click', function(e) {\r\n \/\/ if click is not on an image or placeholder, just resume\r\n if (!e.target.closest('.fb-item') && !e.target.closest('.carousel-arrow')) {\r\n resumeFeedbackAuto();\r\n }\r\n });\r\n\r\n \/\/ Visibility change: pause when tab hidden, resume when visible\r\n document.addEventListener('visibilitychange', function() {\r\n if (document.hidden) {\r\n pauseFeedbackAuto();\r\n \/\/ pause all videos in feedback if any\r\n feedbackContainer.querySelectorAll('video').forEach(v => v.pause());\r\n } else {\r\n resumeFeedbackAuto();\r\n }\r\n });\r\n\r\n \/\/ ================================================================\r\n \/\/ INIT both main carousels + feedback\r\n \/\/ ================================================================\r\n loadSlideCarousel(3);\r\n loadFadeCarousel(3);\r\n loadFeedbackCarousel();\r\n\r\n document.querySelectorAll('#creativeGrid .card').forEach(card => {\r\n card.addEventListener('click', function(e) {\r\n if (e.target.closest('.carousel-arrow') || e.target.closest('.carousel-indicators')) return;\r\n const idx = parseInt(this.dataset.creative, 10);\r\n if (!isNaN(idx)) {\r\n stopFadeAuto();\r\n loadSlideCarousel(idx);\r\n loadFadeCarousel(idx);\r\n }\r\n });\r\n });\r\n\r\n\r\n \/\/ ================================================================\r\n \/\/ VIDEO AUTOPLAY for page visibility\r\n \/\/ ================================================================\r\n document.addEventListener('visibilitychange', () => {\r\n if (document.hidden) {\r\n document.querySelectorAll('.video-carousel-track video').forEach(v => v.pause());\r\n Object.values(videoCarousels).forEach(c => c.stopAuto && c.stopAuto());\r\n } else {\r\n Object.values(videoCarousels).forEach(c => c.startAuto && c.startAuto());\r\n document.querySelectorAll('.video-carousel-track video').forEach((v, i, arr) => {\r\n const track = v.closest('.video-carousel-track');\r\n if (track) {\r\n const idx = Array.from(track.querySelectorAll('.vslide')).findIndex(s => s.querySelector(\r\n 'video') === v);\r\n const card = track.closest('.video-card');\r\n if (card && card.getBoundingClientRect().top < window.innerHeight) {\r\n v.play().catch(() => {});\r\n }\r\n }\r\n });\r\n }\r\n });\r\n\r\n \/\/ ================================================================\r\n \/\/ SCROLL HELPER\r\n \/\/ ================================================================\r\n function scrollToSection(id) { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth' }); }\r\n\r\n \/\/ ================================================================\r\n \/\/ PAUSE FADE AUTO when modal opens\r\n \/\/ ================================================================\r\n const modalEl = document.getElementById('modal');\r\n const modalObserver = new MutationObserver(() => {\r\n if (modalEl.style.display === 'flex') {\r\n stopFadeAuto();\r\n Object.values(videoCarousels).forEach(c => c.stopAuto && c.stopAuto());\r\n document.querySelectorAll('.video-carousel-track video').forEach(v => v.pause());\r\n pauseFeedbackAuto();\r\n } else {\r\n startFadeAuto();\r\n Object.values(videoCarousels).forEach(c => c.startAuto && c.startAuto());\r\n resumeFeedbackAuto();\r\n }\r\n });\r\n modalObserver.observe(modalEl, { attributes: true, attributeFilter: ['style'] });\r\n\r\n \/\/ Keyboard support for both carousels (when modal closed)\r\n document.addEventListener('keydown', function(e) {\r\n if (document.getElementById('modal').style.display !== 'flex') {\r\n if (e.key === 'ArrowLeft') { stopFadeAuto();\r\n prevFade();\r\n startFadeAuto(); }\r\n if (e.key === 'ArrowRight') { stopFadeAuto();\r\n nextFade();\r\n startFadeAuto(); }\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>Standout Society | Agency for Visa & Education Brands #1 for Visa & Education Scale Your Visa & Education Agency […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","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":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","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":""}},"footnotes":""},"class_list":["post-1341","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portfolio.advertigo.online\/index.php\/wp-json\/wp\/v2\/pages\/1341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portfolio.advertigo.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/portfolio.advertigo.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/portfolio.advertigo.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portfolio.advertigo.online\/index.php\/wp-json\/wp\/v2\/comments?post=1341"}],"version-history":[{"count":394,"href":"https:\/\/portfolio.advertigo.online\/index.php\/wp-json\/wp\/v2\/pages\/1341\/revisions"}],"predecessor-version":[{"id":1779,"href":"https:\/\/portfolio.advertigo.online\/index.php\/wp-json\/wp\/v2\/pages\/1341\/revisions\/1779"}],"wp:attachment":[{"href":"https:\/\/portfolio.advertigo.online\/index.php\/wp-json\/wp\/v2\/media?parent=1341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}