/* index.html - extracted from inline/internal styles */
/* ===== VIDEO MODAL (was in ) ===== */
#videoModal .modal-backdrop.show {
background-color: rgba(0, 0, 0, 0.95);
opacity: 1 !important;
}
#videoModal .modal-dialog {
max-width: 90vw;
margin: 1rem auto;
}
#videoModal .modal-content {
background: transparent !important;
}
#videoModal .ratio {
box-shadow: 0 0 50px rgba(0,0,0,0.8);
background: #000;
}
#videoFrame {
pointer-events: none;
}
/* ===== B2B INTERNET MARKETING AGENCY TEXT BLOCK ===== */
.b2b-section {
padding: 90px 0;
background: #ffffff;
font-family: 'Poppins', sans-serif;
}
.b2b-inner {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.b2b-inner h2 {
font-size: clamp(1.7rem, 3.5vw, 2.4rem);
font-weight: 800;
color: #0a0a3c;
line-height: 1.3;
margin-bottom: 26px;
}
.b2b-inner p {
font-size: 1.05rem;
color: #6b6b8a;
line-height: 1.85;
margin-bottom: 18px;
text-align: left;
}
.b2b-inner p:last-of-type {
margin: 28px 0 0;
padding: 22px 28px;
background: #fdf2f6;
border-left: 4px solid #ff2c6d;
border-radius: 0 12px 12px 0;
font-size: 1.1rem;
font-weight: 700;
color: #0a0a3c;
}
@media (max-width: 768px) {
.b2b-section { padding: 60px 0; }
.b2b-inner p:last-of-type { padding: 18px 20px; font-size: 1rem; }
}
/* ===== OUR STORY / CHALLENGE SECTION ===== */
.story-section {
padding: 90px 20px;
background: #ffffff;
}
.container {
max-width: 1100px;
margin: auto;
}
.story-box {
background: #ffffff;
padding: 50px;
}
.story-box h2 {
font-size: 42px;
line-height: 1.3;
margin-bottom: 30px;
color: #111;
font-weight: 700;
}
.story-box h2 span {
color: #0d6efd;
}
.story-box p {
font-size: 18px;
line-height: 1.9;
color: #444;
margin-bottom: 22px;
}
.quote {
background: #f0f5ff;
border-left: 5px solid #0d6efd;
padding: 20px 25px;
border-radius: 12px;
font-size: 22px !important;
font-weight: 600;
color: #111 !important;
}
.challenge-box {
margin-top: 40px;
padding: 35px;
background: #f9fbff;
border-radius: 18px;
}
.challenge-box h3 {
font-size: 28px;
margin-bottom: 25px;
color: #111;
line-height: 1.5;
}
.challenge-list {
list-style: none;
padding: 0;
margin: 0;
}
.challenge-list li {
position: relative;
padding-left: 38px;
margin-bottom: 18px;
font-size: 18px;
line-height: 1.7;
color: #444;
}
.challenge-list li::before {
content: "✔";
position: absolute;
left: 0;
top: 2px;
color: #0d6efd;
font-size: 18px;
font-weight: bold;
}
.ending-text {
margin-top: 35px;
font-size: 26px !important;
font-weight: 700;
color: #111 !important;
line-height: 1.6;
}
.ending-text span {
color: #0d6efd;
}
@media (max-width: 768px) {
.story-box {
padding: 30px 22px;
}
.story-box h2 {
font-size: 30px;
}
.story-box p,
.challenge-list li {
font-size: 16px;
}
.challenge-box h3 {
font-size: 22px;
}
.ending-text {
font-size: 22px !important;
}
.quote {
font-size: 18px !important;
}
}
/* ===== OUR APPROACH CARD ===== */
.approach-card {
width: 100%;
max-width: 820px;
margin: 40px auto 0;
background: #ffffff;
border-radius: 18px;
padding: 40px 44px;
box-shadow: 0 15px 40px rgba(10, 10, 60, 0.07);
font-family: 'Poppins', sans-serif;
text-align: center;
box-sizing: border-box;
}
.approach-card h3 {
font-size: 22px;
font-weight: 700;
color: #0a0a3c;
margin-bottom: 22px;
text-align: center;
}
.approach-list {
list-style: none;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 28px;
justify-content: center;
text-align: left;
}
.approach-list li {
display: flex;
align-items: center;
gap: 14px;
font-size: 1rem;
color: #3a3a55;
line-height: 1.5;
}
.approach-list li .approach-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
color: #ffffff;
font-size: 1.4rem;
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}
.approach-closing {
max-width: 820px;
margin: 56px auto 0;
padding-top: 40px;
border-top: 1px solid #eeeef4;
font-family: 'Poppins', sans-serif;
}
.approach-closing .agencyy-desc {
color: #6b6b8a;
font-size: 1.05rem;
line-height: 1.85;
text-align: center;
margin-bottom: 16px;
}
.approach-closing .agencyy-desc:last-child {
font-size: 1.15rem;
font-weight: 700;
color: #0a0a3c;
text-align: left;
padding: 20px 28px;
margin-bottom: 0;
background: #fdf2f6;
border-left: 4px solid #ff2c6d;
border-radius: 0 12px 12px 0;
}
@media (max-width: 768px) {
.approach-card { padding: 28px 22px; }
.approach-list { grid-template-columns: 1fr; }
}
/* ===== AI RANKINGS PORTFOLIO / LATEST PROJECTS (lp-*) ===== */
.lp-root {
font-family: 'Poppins', sans-serif;
padding: 90px 0 60px;
position: relative;
overflow: hidden;
background: #ffffff;
}
.lp-header {
text-align: center;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.lp-eyebrow {
font-size: 11px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #ff2c6d;
font-weight: 700;
margin-bottom: 8px;
}
.lp-header h2 {
font-size: 2.2rem;
font-weight: 800;
color: #0a0a3c;
margin: 0 0 10px;
}
.lp-header h2 em { font-style: italic; color: #ff2c6d; }
.lp-header p {
font-size: 1rem;
color: #6b6b8a;
max-width: 440px;
margin: 0 auto;
line-height: 1.7;
}
.lp-wrap { padding: 0 30px; position: relative; z-index: 1; }
.lp-carousel {
position: relative;
border-radius: 20px;
overflow: hidden;
background: #111;
width: 100%;
max-width: 1000px;
aspect-ratio: 16 / 9;
margin: 0 auto;
}
.lp-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.55s ease;
pointer-events: none;
}
.lp-slide.active { opacity: 1; pointer-events: auto; }
.lp-slide img {
width: 100%;
height: 100%;
object-fit: cover;
background: #111;
filter: brightness(0.92);
display: block;
cursor: zoom-in;
transition: filter 0.3s;
}
.lp-slide img:hover { filter: brightness(0.78); }
.lp-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 2.5rem 2.2rem 1.8rem;
background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
}
.lp-badge {
display: inline-block;
background: rgba(255,255,255,0.15);
color: #fff;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 20px;
border: 0.5px solid rgba(255,255,255,0.3);
margin-bottom: 9px;
}
.lp-caption h3 {
font-size: clamp(1.1rem, 2.2vw, 1.6rem);
font-weight: 600;
color: #fff;
margin: 0 0 7px;
}
.lp-caption p {
font-size: 12.5px;
color: rgba(255,255,255,0.84);
line-height: 1.65;
margin: 0 0 14px;
max-width: 440px;
}
.lp-action {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
color: #111;
border: none;
padding: 9px 20px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background 0.15s;
}
.lp-action:hover { background: rgba(255,255,255,0.86); color: #111; }
.lp-prev, .lp-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border: none;
border-radius: 50%;
background: rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
color: #fff;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: 0.25s ease;
}
.lp-prev:hover, .lp-next:hover { background: #fff; color: #111; }
.lp-prev { left: 18px; }
.lp-next { right: 18px; }
.lp-counter {
position: absolute;
top: 14px; right: 16px;
font-size: 11.5px;
color: rgba(255,255,255,0.75);
background: rgba(0,0,0,0.3);
padding: 3px 11px;
border-radius: 20px;
}
.lp-zoom-hint {
position: absolute;
top: 14px; left: 16px;
font-size: 11px;
color: rgba(255,255,255,0.6);
background: rgba(0,0,0,0.28);
padding: 3px 10px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 5px;
}
.lp-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; position: relative; z-index: 1; }
.lp-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ccc;
border: none;
cursor: pointer;
padding: 0;
transition: background 0.2s, transform 0.2s;
}
.lp-dot.active { background: #ff2c6d; transform: scale(1.3); }
.lp-popup {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.92);
z-index: 9999;
justify-content: center;
align-items: center;
padding: 20px;
}
.lp-popup.open { display: flex; }
.lp-popup img {
max-width: 92%;
max-height: 90vh;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
object-fit: contain;
}
.lp-popup-close {
position: absolute;
top: 18px; right: 26px;
color: #fff;
font-size: 36px;
cursor: pointer;
line-height: 1;
opacity: 0.8;
transition: opacity 0.2s;
}
.lp-popup-close:hover { opacity: 1; }
.lp-popup-info {
position: absolute;
bottom: 28px; left: 50%;
transform: translateX(-50%);
color: #fff;
text-align: center;
}
.lp-popup-info span { font-size: 13px; opacity: 0.7; }
.lp-popup-info strong { display: block; font-size: 15px; margin-bottom: 4px; }
@media (max-width: 991px) {
.lp-wrap { padding: 0 18px; }
.lp-header h2 { font-size: 1.9rem; }
.lp-caption { padding: 1.6rem 1.4rem 1.3rem; }
.lp-caption p { max-width: 100%; }
}
@media (max-width: 768px) {
.lp-root { padding: 60px 0 40px; }
.lp-wrap { padding: 0 15px; }
.lp-header { margin-bottom: 1.5rem; }
.lp-header h2 { font-size: 1.6rem; line-height: 1.3; }
.lp-header p { font-size: 14px; padding: 0 10px; }
.lp-carousel { background: #fff; aspect-ratio: 16/9; height: auto; overflow: visible; border-radius: 16px; }
.lp-slide { position: relative; display: none; width: 100%; height: auto; }
.lp-slide.active { display: block; }
.lp-slide img { width: 100%; height: auto; max-height: 50vh; object-fit: cover; filter: brightness(1); background: #fff; display: block; }
.lp-caption { position: relative; bottom: auto; left: auto; right: auto; background: #fff; padding: 1rem; text-align: center; }
.lp-caption h3 { color: #0a0a3c; font-size: 1rem; }
.lp-caption p { color: #6b6b8a; font-size: 12px; }
.lp-badge { background: rgba(10,10,60,0.08); color: #3a3a55; border: 1px solid rgba(10,10,60,0.15); }
.lp-action { background: #ff2c6d; color: #fff; }
.lp-prev, .lp-next { width: 36px; height: 36px; font-size: 16px; }
.lp-prev { left: 10px; }
.lp-next { right: 10px; }
.lp-zoom-hint, .lp-counter { font-size: 10px; padding: 3px 8px; }
}
/* ===== PAST PORTFOLIO (ppf-*) ===== */
.ppf-section{font-family:'Poppins',sans-serif;background:#f9f9fb;padding:90px 0;}
.ppf-container{max-width:1140px;margin:0 auto;padding:0 20px;}
.ppf-head{max-width:640px;margin:0 auto 48px;text-align:center;}
.ppf-label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7c3aed;margin-bottom:12px;}
.ppf-title{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#1f2937;margin:0 0 14px;}
.ppf-sub{color:#6b7280;font-size:1rem;line-height:1.7;margin:0;}
.ppf-grid{display:flex;flex-wrap:wrap;gap:28px;}
.ppf-card{flex:1 1 460px;background:#fff;border:1px solid rgba(99,102,241,.15);border-radius:20px;padding:22px;box-shadow:0 10px 30px rgba(17,24,39,.06);transition:transform .3s ease,box-shadow .3s ease;}
.ppf-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(99,102,241,.13);}
.ppf-card-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;}
.ppf-icon{flex-shrink:0;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;}
.ppf-col-title{font-size:1.1rem;font-weight:700;color:#1f2937;margin:0 0 4px;}
.ppf-col-sub{font-size:.85rem;color:#6b7280;line-height:1.5;margin:0;}
.ppf-wrap{position:relative;}
.ppf-carousel{position:relative;border-radius:16px;overflow:hidden;background:#111;width:100%;aspect-ratio:16/10;}
.ppf-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none;}
.ppf-slide.active{opacity:1;pointer-events:auto;}
.ppf-slide img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;filter:brightness(.92);transition:filter .3s;}
.ppf-slide img:hover{filter:brightness(.78);}
.ppf-caption{position:absolute;left:0;right:0;bottom:0;padding:1.8rem 1.3rem 1.1rem;background:linear-gradient(to top,rgba(0,0,0,.72),transparent);}
.ppf-badge{display:inline-block;background:rgba(255,255,255,.15);color:#fff;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;padding:4px 12px;border-radius:20px;border:.5px solid rgba(255,255,255,.3);margin-bottom:8px;}
.ppf-caption h4{font-size:1rem;font-weight:700;color:#fff;margin:0 0 4px;}
.ppf-caption p{font-size:12px;color:rgba(255,255,255,.85);line-height:1.55;margin:0;}
.ppf-prev,.ppf-next{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:.25s ease;}
.ppf-prev:hover,.ppf-next:hover{background:#fff;color:#111;}
.ppf-prev{left:14px;}
.ppf-next{right:14px;}
.ppf-counter{position:absolute;top:12px;right:14px;font-size:11px;color:rgba(255,255,255,.8);background:rgba(0,0,0,.32);padding:3px 10px;border-radius:20px;z-index:5;}
.ppf-hint{position:absolute;top:12px;left:14px;font-size:10.5px;color:rgba(255,255,255,.65);background:rgba(0,0,0,.28);padding:3px 9px;border-radius:20px;z-index:5;}
.ppf-dots{display:flex;justify-content:center;gap:7px;margin-top:14px;}
.ppf-dot{width:7px;height:7px;border-radius:50%;background:#ccc;border:none;cursor:pointer;padding:0;transition:background .2s,transform .2s;}
.ppf-dot.active{background:#7c3aed;transform:scale(1.3);}
.ppf-popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;justify-content:center;align-items:center;padding:20px;}
.ppf-popup.open{display:flex;}
.ppf-popup img{max-width:92%;max-height:90vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain;}
.ppf-popup-close{position:absolute;top:18px;right:26px;color:#fff;font-size:36px;cursor:pointer;line-height:1;opacity:.85;}
.ppf-popup-close:hover{opacity:1;}
@media(max-width:768px){.ppf-section{padding:60px 0;}.ppf-card{flex:1 1 100%;}.ppf-carousel{aspect-ratio:16/11;}}
/* ===== LIGHTWEIGHT YOUTUBE FACADE (yt-lite) ===== */
.yt-lite{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;border:0;cursor:pointer;background:#000;overflow:hidden;border-radius:inherit}
.yt-lite img{width:100%;height:100%;object-fit:cover;display:block}
.yt-lite::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:50px;border-radius:14px;background:rgba(0,0,0,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center;background-size:34px;transition:background-color .2s}
.yt-lite:hover::after,.yt-lite:focus-visible::after{background-color:#f00}
.yt-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ===== INLINE STYLES EXTRACTED FROM index.html ===== */
.fb-pixel-fallback { display: none; }
.hero-section-bg {
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)), url('/images/hero.jpg') no-repeat !important;
background-size: cover !important;
background-position: center !important;
min-height: 100vh;
}
.video-close-btn { font-size: 1.2rem; }
.text-navy { color: #0a0a3c !important; }
.hero-accent-italic { color: #ff2c6d !important; font-family: Georgia, serif !important; font-style: italic !important; }
.hero-text-muted { color: #6b6b8a !important; font-size: 1.2rem !important; }
.text-accent-pink { color: #ff2c6d; }
.pt-40 { padding-top: 40px; }
.video-section-bg { background: linear-gradient(135deg, rgba(108, 92, 231, 0.05), rgba(237, 110, 160, 0.05)); }
.video-heading-navy { color: #0a0a3c; font-weight: 700; }
.video-subtext { font-size: 1.1rem; }
.video-container-border { border: 2px solid rgba(108, 92, 231, 0.1); }