/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Catamaran', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
line-height: 1.6;
overflow-x: hidden;
}
/* Ensure the root html also hides horizontal overflow (covers scrollbar timing) */
html { overflow-x: hidden; }
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-secondary);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
}
h2 {
font-size: clamp(2rem, 4vw, 3rem);
}
h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
}
p {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 1rem;
}
.section-padding {
padding: var(--section-padding);
}
/* Buttons */
.btn {
font-family: var(--font-secondary);
font-weight: 600;
padding: 10px 10px;
border-radius: var(--radius-md);
}
.btn-primary {
font-family: var(--font-secondary);
font-weight: 600;
padding: 15px 15px;
border-radius: 50px;
background-color: red;
border: none;
}
.btn-primary:hover {
color: red;
background-color: #fff;
border: 3px solid red;
}
/* Smooth scroll for the whole page */
html {
scroll-behavior: smooth;
}
/* Section spacing to prevent overlap */
section {
padding: 80px 0 80px 0;
position: relative;
z-index: 1;
}
.btn-premium {
background: #fff;
color: red;
font-weight: bold;
/* box-shadow: var(--shadow-premium); */
border: 2px solid transparent;
/* ensure decorative pseudo-element is clipped to the button and positioned against it */
position: relative;
overflow: hidden;
}
.btn-premium:hover {
background: red;
transform: translateY(-2px);
/* box-shadow: 0 20px 40px -12px rgba(220, 20, 60, 0.4); */
color: #fff;
}
.btn-premium::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-slow);
pointer-events: none; /* ensure pseudo-element doesn't capture pointer events */
}
.btn-premium:hover::before {
left: 100%;
}
.btn-outline-light {
background: transparent;
color: var(--primary-white);
border: 2px solid var(--primary-white);
}
.btn-outline-light:hover {
background: var(--primary-white);
color: var(--primary-red);
transform: translateY(-2px);
}
.btn-lg {
padding: 18px 36px;
font-size: 1.1rem;
}
/* Navigation Styles */
.custom-navbar {
padding: 15px 0;
transition: all 0.3s ease;
z-index: 1000;
background: transparent;
}
.custom-navbar.scrolled {
background: #fff !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 10px 0;
}
/* Page-specific override: Speed Test page
Show navbar with white background and red text on the speedtest page
regardless of scroll state. This targets only pages that add
`speedtest-page` on the . Other pages keep the existing behavior. */
body.speedtest-page .custom-navbar {
background: #fff !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
padding: 10px 0;
}
body.speedtest-page .custom-navbar .navbar-brand,
body.speedtest-page .custom-navbar .logo-text,
body.speedtest-page .custom-navbar .navbar-nav .nav-link {
color: #ff3535 !important; /* red links/text */
}
/* Toggler (mobile) use red icon/lines for visibility on white bg */
body.speedtest-page .custom-navbar .navbar-toggler {
border: none;
color: #ff3535 !important;
}
/* Ensure active/hover states remain red and don't invert to white */
body.speedtest-page .custom-navbar .navbar-nav .nav-link:hover,
body.speedtest-page .custom-navbar .navbar-nav .nav-link.active {
color: #ff3535 !important;
background: transparent !important;
}
/* CTA button: keep original look but ensure it's visible on white bg */
body.speedtest-page .custom-navbar .btn-cta {
box-shadow: none;
}
.navbar-brand {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: bold;
color: #fff !important;
text-decoration: none;
margin-left: 1rem;
margin-right: 0;
transition: color 0.3s ease;
}
.custom-navbar.scrolled .navbar-brand {
color: #ff3535 !important;
}
.logo-img {
margin-right: 8px;
height: 60px;
width: auto;
}
.logo-text {
color: #fff;
font-weight: 600;
font-size: 2.5rem;
letter-spacing: 1px;
margin-left: 1rem;
font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
transition: color 0.3s ease;
}
.logo-text:hover {
color: #ff3535;
}
.custom-navbar.scrolled .logo-text {
color: #ff3535;
}
.navbar-nav .nav-link {
color: #fff !important;
font-weight: 500;
font-size: 0.95rem;
margin: 0 10px;
padding: 8px 15px !important;
position: relative;
transition: all 0.3s ease;
letter-spacing: 0.5px;
border-radius: 5px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: #ff3535 !important;
}
.custom-navbar.scrolled .navbar-nav .nav-link {
color: #ff3535 !important;
}
.custom-navbar.scrolled .navbar-nav .nav-link:hover,
.custom-navbar.scrolled .navbar-nav .nav-link.active {
background: #ff3535 !important;
color: #fff !important;
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #ff3535, #ff2626);
transition: width 0.3s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
width: 100%;
}
.custom-navbar.scrolled .navbar-nav .nav-link::after {
display: none;
}
/* Navbar Layout */
.custom-navbar .container-fluid {
padding-left: 0;
padding-right: 0;
}
.navbar-nav {
flex-direction: row !important;
}
.navbar-cta {
margin-right: 1rem;
}
/* Desktop navbar layout */
@media (min-width: 992px) {
.custom-navbar .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
/* Remove large left offsets and center content on tablet */
.movie-feature-container { margin-left: 0 !important; padding-left: 16px; padding-right: 16px; }
.movie-feature-slider-row { margin-left: 0 !important; width: auto; padding-left: 16px; padding-right: 16px; display:flex; justify-content:center; }
.movie-feature-slider { justify-content: center; }
.navbar-nav {
margin: 0 auto;
}
/* Mobile: center all movie feature content and ensure background covers whole area */
.movie-feature-container { padding: 28px 16px 16px 16px; margin-left: 0 !important; margin-right: 0 !important; }
.movie-feature-content { padding-top: 20px; padding-bottom: 20px; text-align: center; }
.movie-feature-meta { justify-content: center; }
.movie-feature-slider-row { margin-left: 0 !important; width: auto; padding-left: 12px; padding-right: 12px; display:flex; justify-content:center; }
.movie-feature-slider { gap: 12px; }
.movie-feature-slider-img { width: 120px; height: auto; }
.movie-feature-badge { justify-content: center; }
.movie-feature-watch-btn { margin-left: auto; margin-right: auto; }
}
.btn-cta {
background: linear-gradient(135deg, #ff3535, #ff2626);
color: white;
padding: 10px 25px;
border: none;
border-radius: 25px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
.btn-cta:hover {
background: linear-gradient(135deg, #ff2222, #ff0000);
color: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 53, 53, 0.4);
}
/* Hero Section */
.hero-section {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 100px;
}
/* Hero Video Background */
.hero-video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(26, 26, 26, 0.7) 0%, rgba(45, 45, 45, 0.7) 50%, rgba(255, 53, 53, 0.3) 100%);
pointer-events: none;
z-index: 1;
}
.hero-section .container {
position: relative;
z-index: 2;
}
.connect-today {
color: #ff4444;
font-weight: 700;
letter-spacing: 4px;
font-size: 1rem;
margin-top: 2rem;
margin-bottom: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 68, 68, 0.2);
}
to {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 68, 68, 0.4);
}
}
.hero-title {
font-size: 4rem;
font-weight: 300;
color: #ffffff;
line-height: 1.2;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.highlight-text {
display: inline-block;
/* Ensure in-page anchors inside the Services section land the top of the
service card under the fixed header. This avoids JS changes to the
navbar/scroll behavior and works when the browser jumps to an anchor.
Adjust the value if your header is taller than ~110px. */
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
max-width: 0ch;
vertical-align: middle;
}
.hero-section.in-view .highlight-text {
color: #ff4444;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 68, 68, 0.3);
display: inline-block;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
/* starts from 0ch (see base .highlight-text) and expands via typing animation */
line-height: 1.5;
vertical-align: middle;
padding-right: 0;
transform: translateY(-0.04em);
animation: typing 2.4s steps(12, end) forwards;
}
@keyframes typing {
from { max-width: 0ch; }
to { max-width: 12ch; }
}
/* caret animation removed (cursor disabled) */
.hero-description {
color: rgba(255, 255, 255, 0.95);
font-size: 1.1rem;
line-height: 1.8;
max-width: 900px;
margin: 0 auto;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
font-weight: 400;
}
.highlight-hero {
color: #ff4444;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 68, 68, 0.3);
}
.hero-form-wrapper {
margin: 0 auto;
max-width: 900px;
background: transparent;
border-radius: 1rem;
box-shadow: 0 8px 32px rgba(249, 20, 20, 0.12);
padding: 0;
overflow: hidden;
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nav-tabs {
border-bottom: 4px solid #f91414;
justify-content: center;
margin: 0;
padding: 0;
background: transparent;
border-radius: 1rem 1rem 0 0;
}
.nav-tabs .nav-link {
border: none;
border-radius: 0.5rem 0.5rem 0 0;
font-weight: 600;
color: #f91414;
background: #fff;
margin-right: 0.5rem;
font-size: 1.1rem;
padding: 0.75rem 2.5rem;
transition: background 0.2s, color 0.2s;
}
.nav-tabs .nav-link.active {
background: #f91414;
color: #fff;
z-index: 2;
}
.tab-content {
padding: 2rem 2rem 1.5rem 2rem;
background: rgba(255,255,255,0.98);
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
box-shadow: 0 8px 32px rgba(249, 20, 20, 0.12);
}
.form-control, .form-select {
border-radius: 0.75rem;
border: 1px solid #eee;
font-size: 1rem;
margin-bottom: 1rem;
}
.form-control:focus, .form-select:focus {
border-color: #f91414;
box-shadow: 0 0 0 0.2rem rgba(249,20,20,0.15);
}
.btn-submit {
background: linear-gradient(90deg, #f91414 0%, #f64949 100%);
color: #fff;
font-weight: 600;
border: none;
border-radius: 1rem !important;
height: 40px;
padding: 0 2.5rem;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
box-shadow: 0 2px 8px rgba(249,20,20,0.12);
transition: background 0.2s;
}
.btn-submit:hover {
background: linear-gradient(90deg, #ed1010 0%, #f91414 100%);
}
@media (max-width: 768px) {
.hero-title { font-size: 2rem; }
.hero-form-wrapper { padding: 1rem; }
.nav-tabs .nav-link { padding: 0.5rem 1rem; font-size: 1rem; }
}
/* Scroll Down Arrow */
.scroll-down {
color: rgba(255, 255, 255, 0.7);
font-size: 1.5rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-title {
font-size: 2.8rem;
}
.hero-description {
font-size: 1rem;
padding: 0 20px;
}
.navbar-nav .nav-link {
margin: 5px 0;
}
.navbar-nav {
flex-direction: column !important;
text-align: center;
}
.navbar-cta {
text-align: center;
margin: 10px 0;
}
.connect-today {
font-size: 0.9rem;
letter-spacing: 3px;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 2.2rem;
}
.hero-description {
font-size: 0.95rem;
}
.connect-today {
font-size: 0.8rem;
letter-spacing: 2px;
}
}
/* Additional animations and effects */
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center bottom, rgba(255, 53, 53, 0.1) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
}
@keyframes fieldFocus {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
/* Our Services Section Styles */
.our-services-section [id] {
scroll-margin-top: 400px;
}
.consult-card-modern {
/* Use the consult image as the full-card background and add a semi-transparent
red gradient on top to preserve brand color while keeping image visible. */
background: linear-gradient(90deg, rgba(249,19,19,0.62) 0%, rgba(255,19,19,0.48) 50%, rgba(255,19,19,0.36) 100%), url('../images/home/consult.png') center/cover no-repeat;
border-radius: 24px;
min-height: 220px;
box-shadow: 0 0 32px #f9141422;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
overflow: hidden;
padding: 32px 32px;
}
.consult-icon-modern {
width: 110px;
height: 110px;
border-radius: 50%;
background: #fff;
color: #ff1313;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
margin-right: 32px;
box-shadow: 0 0 16px #ff131344;
flex-shrink: 0;
z-index: 3;
}
.consult-card-content {
position: relative;
z-index: 3;
}
.consult-title-modern {
font-size: 2rem;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
}
.consult-desc-modern {
font-size: 1.5rem;
color: #fff;
font-weight: 400;
}
.consult-phone {
font-weight: 700;
letter-spacing: 1px;
}
.consult-link-modern {
color: #fff;
text-decoration: underline;
font-weight: 500;
font-size: 1.5rem;
margin-left: 8px;
}
.consult-bg-img {
/* The background image is now applied to the parent card. Hide this element
to avoid displaying the image twice while keeping markup intact. */
display: none;
}
@media (max-width: 992px) {
.consult-card-modern {
flex-direction: column;
padding: 24px 16px;
}
.consult-bg-img {
width: 100%;
height: 120px;
position: absolute;
top: auto;
bottom: 0;
right: 0;
left: 0;
border-radius: 0 0 24px 24px;
background-position: center bottom;
}
.consult-icon-modern {
margin-right: 0;
margin-bottom: 16px;
}
}
.our-services-section {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
background: #fff;
}
/* Reduce outer left/right gutters for the Our Services section only.
This narrows the horizontal whitespace around the main services content
without changing padding/margins of inner cards or components. */
.our-services-section .container,
.our-services-section .container-fluid {
max-width: 100vw; /* widen a bit so content uses more horizontal space */
width: 100%;
margin: 0 auto;
padding-left: 48px; /* smaller outer gutter */
padding-right: 48px; /* smaller outer gutter */
box-sizing: border-box;
}
@media (max-width: 991px) {
.our-services-section .container,
.our-services-section .container-fluid {
padding-left: 12px;
padding-right: 12px;
}
}
.our-services-section .row.justify-content-center.mb-5 {
max-width: 100vw;
margin-left: 3rem;
margin-right: auto;
/* gap: 12px; */
justify-content: center;
}
/* Responsive overrides for small screens: center service cards, equal left/right gutters,
allow card height to be determined by content and reduce card width for compact layout. */
@media (max-width: 768px) {
/* Make the outer row truly centered with equal left/right margins */
.our-services-section .row.justify-content-center.mb-5 {
margin-left: auto !important;
margin-right: auto !important;
padding-left: 12px;
padding-right: 12px;
width: 100%;
box-sizing: border-box;
}
/* Ensure each bootstrap column centers its contents so cards sit in the middle */
.our-services-section .col-6,
.our-services-section .col-12,
.our-services-section .col-md-3 {
display: flex;
justify-content: center;
}
/* Make cards shrink to fit their content and reduce fixed width/height */
.our-services-section .service-card {
width: 100% !important; /* allow card to use available column width */
max-width: 360px; /* limit max width so margins on both sides are visible */
margin-left: auto !important;
margin-right: auto !important;
height: auto !important; /* let height follow content */
min-height: 0; /* remove forced min height on small screens */
padding: 1.25rem; /* slightly larger inner padding for breathing room */
margin-top: 2rem; /* keep vertical spacing between stacked cards */
margin-bottom: 1.5rem;
}
/* Slightly scale down the service icon on small screens to avoid overflow */
.our-services-section .service-icon {
width: 72px;
height: 72px;
margin-top: -56px; /* keep icon overlapping the card header but smaller */
}
/* Reduce list spacing so short cards look compact */
.our-services-section .service-list {
font-size: 0.95rem !important;
margin-top: 8px !important;
}
}
/* Center QR and Consult cards and make them equal width on small screens */
@media (max-width: 768px) {
/* center the columns containing the QR and consult cards */
.our-services-section .row.mt-4.justify-content-center,
.our-services-section .row.mt-4 {
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
.our-services-section .row.mt-4 .col-lg-5,
.our-services-section .row.mt-4 .col-lg-7,
.our-services-section .row.mt-4 .col-md-6 {
display: flex;
justify-content: center;
}
/* Make both cards use the same responsive sizing and allow height to follow content */
.our-services-section .qr-card,
.our-services-section .consult-card-modern {
width: 100% !important;
max-width: 360px; /* same max width as service cards for visual parity */
margin-left: auto !important;
margin-right: auto !important;
height: auto !important;
min-height: 0;
padding: 1.5rem !important;
border-radius: 18px;
}
/* Ensure the consult icon doesn't force excessive height */
.our-services-section .consult-icon-modern {
width: 88px;
height: 88px;
margin-right: 0;
margin-bottom: 12px;
flex-shrink: 0;
}
/* Tweak the QR image so it fits nicely inside the constrained card */
.our-services-section .qr-img {
width: 140px;
height: 140px;
}
/* Keep text readable and contained */
.our-services-section .qr-card-content,
.our-services-section .consult-card-content {
padding: 0 !important;
}
}
.services-badge {
color: #f91414;
font-size: 1rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
}
/* .services-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 32px;
} */
.services-title-highlight {
color: #f91414;
}
.triple-play-highlight {
background-color: red;
padding: 12px 24px;
color: #fff;
border-radius: 36px;
font-weight: 700;
font-size: 1.3rem;
text-align: center !important;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
display: block;
}
.service-card {
background: #fff7f2;
border-radius: 24px;
box-shadow: 0 0 32px #f9141422;
transition: box-shadow 0.2s;
padding: 0.5rem;
text-align: center;
margin-top: 4rem;
margin-bottom: 0;
width: 300px;
height: 450px;
animation: fadeInUp 1s ease-out;
}
.service-card:hover {
box-shadow: 0 8px 32px #f9141444;
}
.service-icon {
background: #f91414;
border-radius: 50%;
width: 90px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 32px #f9141444;
margin-left: auto;
margin-right: auto;
margin-top: -70px;
margin-bottom: 2rem;
position: relative;
left: 0;
right: 0;
transform: none;
}
.service-icon i {
color: #fff;
font-size: 2.2rem;
}
.service-title {
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 6px;
}
.service-desc {
color: #222;
font-size: 1rem;
opacity: 0.8;
}
.service-list {
margin-top: 10px !important;
margin-left: 0 !important;
margin-right: 0 !important;
list-style: none !important;
font-size: 1rem !important;
text-align: left;
}
/* Services Section Card Styles */
.qr-card {
background: #ff1313;
border-radius: 24px;
min-height: 220px;
box-shadow: 0 0 32px #f9141422;
display: flex;
flex-direction: row;
align-items: center;
padding: 32px 32px;
margin-left: 2rem;
}
.qr-card-content {
flex-grow: 1;
padding-right: 32px;
}
.qr-title {
font-size: 1.6rem;
font-weight: 600;
color: #fff;
}
.qr-desc {
font-size: 1.1rem;
color: #fff;
margin-top: 10px;
}
.qr-card-img {
display: flex;
align-items: center;
/* ensure the image container does not shrink inside the flex row */
flex-shrink: 0;
}
/* QR image container (may be the ![]()
itself or a wrapper) */
.qr-img {
width: 150px;
height: 150px;
border-radius: 12px;
/* background: #fff; */
padding: 8px;
box-shadow: 0 0 16px #ff131344;
display: block; /* prevent inline image whitespace issues */
flex-shrink: 0; /* prevent flex from reducing the box */
overflow: hidden; /* clip any overflow from inner img */
}
/* If the QR is an ![]()
inside the container, make it fill the box without distortion */
.qr-img img {
width: 100%;
height: 100%;
object-fit: contain; /* preserve aspect ratio, no cropping */
display: block;
image-rendering: -webkit-optimize-contrast; /* improve crispness on some browsers */
image-rendering: crisp-edges;
image-rendering: pixelated;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--gradient-primary);
color: var(--primary-white);
border: none;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
transition: all var(--transition-medium);
opacity: 0;
visibility: hidden;
z-index: 1000;
box-shadow: var(--shadow-premium);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--gradient-secondary);
transform: translateY(-3px);
}
/* Animations */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes fiber-flow {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes particle-float {
0% { transform: translateY(0px); }
100% { transform: translateY(-100px); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); box-shadow: var(--shadow-premium); }
50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(220, 20, 60, 0.6); }
}
@keyframes connection-flow {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
@keyframes scroll-bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
/* 3D Card & Glassmorphism Effects */
.card-3d {
background: var(--primary-white);
border-radius: var(--radius-xl);
box-shadow: 0 16px 40px -12px rgba(220,20,60,0.18), 0 2px 8px -2px rgba(31,41,55,0.10);
border: 1.5px solid rgba(220,20,60,0.08);
position: relative;
overflow: hidden;
transition: transform 0.4s cubic-bezier(.25,.8,.25,1), box-shadow 0.4s cubic-bezier(.25,.8,.25,1);
will-change: transform, box-shadow;
}
.card-3d:hover {
transform: translateY(-12px) scale(1.03) rotateX(2deg);
box-shadow: 0 32px 64px -16px rgba(220,20,60,0.22), 0 4px 16px -4px rgba(31,41,55,0.12);
}
/* Floating Vector Shapes */
.floating-shape {
position: absolute;
z-index: 0;
opacity: 0.18;
animation: floatShape 18s ease-in-out infinite;
}
@keyframes floatShape {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(-30px) scale(1.08); }
100% { transform: translateY(0) scale(1); }
}
/* Parallax Backgrounds */
.parallax-bg {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(135deg, #DC143C 0%, #B91C3C 100%);
opacity: 0.07;
z-index: 0;
pointer-events: none;
will-change: transform;
animation: parallaxMove 30s linear infinite;
}
@keyframes parallaxMove {
0% { transform: translateY(0); }
50% { transform: translateY(-40px); }
100% { transform: translateY(0); }
}
/* Animated Entrance */
.animate-fadein {
opacity: 0;
transform: translateY(40px);
animation: fadeInUp 1.2s cubic-bezier(.25,.8,.25,1) forwards;
}
@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(40px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Mobile: stack network feature images on top (one-per-row full width with gutters)
and center the right-side text content below them with equal margins. */
@media (max-width: 768px) {
.network-highlight-section {
padding-top: 20px;
padding-bottom: 24px;
}
/* Make the left column (images) full width and ensure each image card
becomes a full-width row with side margins */
.network-highlight-section .network-highlight-left {
width: 100%;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
margin-bottom: 12px;
}
.network-highlight-section .network-feature-card {
width: 100%;
max-width: calc(100% - 24px);
margin: 12px auto;
border-radius: 12px;
overflow: hidden;
display: block;
padding: 0;
box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
.network-feature-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 12px;
}
/* Right column (text) goes below and is centered with margins */
.network-highlight-section .network-highlight-right {
width: 100%;
padding-left: 18px;
padding-right: 18px;
box-sizing: border-box;
text-align: center;
margin-top: 10px;
}
/* Make the overall container use symmetric gutters on mobile to prevent
the right-side content from overflowing the viewport. */
.network-highlight-container,
.network-highlight-section > .container.network-highlight-container {
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* Ensure each feature image has equal left/right gutters and doesn't touch the page edge */
.network-highlight-section .network-feature-card {
margin-left: 12px;
margin-right: 12px;
border-radius: 12px;
}
/* Center the platform image (device art) and prevent negative right offset from pushing content off-screen */
.network-highlight-image {
position: static !important;
margin: 18px auto 8px auto !important;
width: 100% !important;
text-align: center !important;
max-width: 820px;
box-sizing: border-box;
}
.network-highlight-image .network-platform-img,
.network-platform-img {
display: block;
margin: 0 auto;
width: 320px;
max-width: 100%;
}
.network-highlight-section .network-highlight-content {
margin: 0 auto;
max-width: 820px;
padding: 0 4px 8px 4px;
}
.network-highlight-badge,
.network-highlight-title,
.network-highlight-desc,
.network-highlight-stats,
.network-highlight-devices {
text-align: center !important;
}
.network-highlight-stats {
justify-content: center;
gap: 18px;
}
.network-highlight-devices .network-devices-icons {
display: flex;
justify-content: center;
gap: 12px;
}
/* Ensure the feature cards stack in the same order and don't float beside text */
.network-highlight-section .row.align-items-center {
flex-direction: column;
align-items: stretch;
}
}
/* Counter Animation */
.counter {
font-size: 2.2rem;
font-weight: 800;
color: var(--primary-red-light);
font-family: var(--font-secondary);
animation: counterGrow 1.5s cubic-bezier(.25,.8,.25,1);
}
@keyframes counterGrow {
0% { font-size: 1rem; opacity: 0.5; }
100% { font-size: 2.2rem; opacity: 1; }
}
/* Animated Icon Hover */
.icon-animated {
transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}
.icon-animated:hover {
transform: scale(1.15) rotate(-8deg);
box-shadow: 0 8px 24px -8px rgba(220,20,60,0.18);
}
/* Preloader Styles (centered logo + animated MTCL word) */
#preloader {
position: fixed;
inset: 0;
background: #fff; /* white curtain for a clean branded look */
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.45s ease;
}
.preloader-inner {
display: flex;
align-items: center;
gap: 1rem;
padding: 8px 14px;
}
.preloader-logo img {
width: 64px;
height: auto;
display: block;
transform-origin: center;
animation: preloader-logo-pop 1.2s ease-in-out infinite;
}
.preloader-word {
font-family: var(--font-secondary, 'Catamaran', sans-serif);
font-weight: 800;
font-size: 2.1rem;
color: #ff3535; /* brand red */
letter-spacing: 2px;
transform-origin: left center;
opacity: 0;
animation: preloader-word-in 0.9s cubic-bezier(.2,.9,.3,1) forwards 0.18s;
}
@keyframes preloader-logo-pop {
0% { transform: translateY(0) scale(0.94); }
50% { transform: translateY(-6px) scale(1.06); }
100% { transform: translateY(0) scale(0.98); }
}
@keyframes preloader-word-in {
0% { transform: translateY(6px) scaleY(0.98); opacity: 0; }
60% { transform: translateY(-2px) scaleY(1.02); opacity: 1; }
100% { transform: translateY(0) scaleY(1); opacity: 1; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.preloader-logo img,
.preloader-word { animation: none !important; }
}
/* Ensure movie feature content is left-aligned on medium and large screens
while preserving small-screen behavior. This keeps animations intact but
aligns the title/desc/meta and the watch button to the left side. */
@media (min-width: 768px) {
.movie-feature-section .movie-feature-container,
.movie-feature-section .movie-feature-content {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important; /* left align children */
text-align: left !important;
padding-left: 0 !important; /* provide consistent left gutter */
padding-right: 0 !important;
}
/* Make sure titles and meta align left (do not alter transforms to keep animations) */
.movie-feature-section .movie-feature-title,
.movie-feature-section .movie-feature-meta,
.movie-feature-section .movie-feature-desc {
text-align: left !important;
margin-left: 0 !important;
}
/* Align the Watch Now button to the left of the content column */
.movie-feature-section .movie-feature-watch-btn {
margin-left: 0 !important;
margin-right: auto !important;
align-self: flex-start !important;
}
/* Ensure slider row doesn't push content; keep width constrained */
.movie-feature-slider-row {
margin-left: 0 !important;
padding-left: 0 !important;
}
}
/* Desktop-only: remove left gutter for movie feature section so title/desc
and Watch Now button are flush with the left edge of the feature area.
This targets only the movie-feature section's container and content and
is applied at large screens (>=992px) so mobile remains unchanged. */
@media (min-width: 992px) {
.movie-feature-section .container,
.movie-feature-section .movie-feature-container,
.movie-feature-section .movie-feature-content {
padding-left: 0 !important;
margin-left: 0 !important;
padding-right: 0 !important; /* keep right padding unchanged visually */
box-sizing: border-box;
}
/* Ensure Watch Now button is flush-left with the content column */
.movie-feature-section .movie-feature-watch-btn {
margin-left: 0 !important;
margin-right: auto !important;
align-self: flex-start !important;
}
}
/* Footer Section Styles */
.footer-section {
background: #232323;
color: #fff;
font-family: 'Inter', Arial, sans-serif;
padding: 0;
margin-top: 60px;
position: relative;
z-index: 2;
}
.footer-main-container {
max-width: 1400px;
margin: 0 auto;
padding: 48px 24px 0 24px;
}
.footer-top-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 32px;
}
.footer-brand-col {
flex: 1 1 260px;
min-width: 220px;
}
.footer-logo {
width: 56px;
height: auto;
margin-bottom: 16px;
}
.footer-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 8px;
color: #fff;
}
.footer-title:hover {
color: #ff0000;
}
.footer-desc {
font-size: 1rem;
margin-bottom: 16px;
color: #bdbdbd;
}
.footer-pta-badge {
display: inline-block;
background: #ff0000;
color: #fff;
font-size: 0.95rem;
font-weight: 600;
padding: 6px 16px;
border-radius: 20px;
margin-top: 8px;
}
.footer-heading {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 12px;
color: #ff0000;
}
.footer-links-col,
.footer-services-col,
.footer-contact-col {
flex: 1 1 180px;
min-width: 160px;
}
.footer-links-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links-list li {
margin-bottom: 10px;
}
.footer-links-list a {
color: #bdbdbd;
text-decoration: none;
font-size: 1rem;
transition: color 0.2s;
}
.footer-links-list a:hover {
color: #ff0000;
}
.footer-contact-list {
list-style: none;
padding: 0;
margin: 0 0 12px 0;
font-size: 1rem;
}
.footer-contact-list li {
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
color: #bdbdbd;
}
.footer-contact-list i {
color: #ff0000;
font-size: 1.1em;
}
/* Ensure anchors inside the footer contact list use the same muted footer link color
and hover behavior as other footer links (avoid browser default blue). */
.footer-contact-list a {
color: #bdbdbd;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-contact-list a:hover {
color: #ff0000;
text-decoration: none;
}
.footer-social-links {
display: flex;
gap: 12px;
margin-top: 8px;
}
.footer-social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #333;
color: #fff;
border-radius: 50%;
font-size: 1.2em;
transition: background 0.2s, color 0.2s;
text-decoration: none;
}
.footer-social-links a:hover {
background: #ff0000;
color: #fff;
}
.footer-divider {
border: none;
border-top: 1px solid #444;
margin: 32px 0 0 0;
}
.footer-bottom-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 18px 0 24px 0;
font-size: 0.98rem;
color: #bdbdbd;
}
.footer-copyright-col {
flex: 1 1 300px;
}
.footer-legal-col {
flex: 1 1 300px;
text-align: right;
}
.footer-legal-link {
color: #bdbdbd;
text-decoration: none;
margin: 0 6px;
transition: color 0.2s;
}
.footer-legal-link:hover {
color: #ff0000;
}
.footer-pta-approved {
color: #ff0000;
font-weight: 600;
margin-left: 6px;
}
@media (max-width: 900px) {
.footer-top-row {
flex-direction: column;
gap: 24px;
}
.footer-bottom-row {
flex-direction: column;
text-align: center;
gap: 8px;
}
.footer-legal-col {
text-align: center;
}
}
/* Additional responsive tightening for Footer section */
@media (max-width: 768px) {
.footer-main-container {
padding: 32px 16px 0 16px; /* reduce horizontal padding */
}
.footer-top-row {
gap: 16px;
align-items: center;
}
.footer-brand-col { text-align: center; }
.footer-logo { width: 48px; margin-bottom: 12px; }
.footer-title { font-size: 1.6rem; margin-bottom: 6px; }
.footer-desc { font-size: 0.98rem; margin-bottom: 0 !important; }
.footer-pta-badge { padding: 5px 12px; font-size: 0.9rem; }
.footer-links-col,
.footer-services-col,
.footer-contact-col {
flex: 1 1 100%;
min-width: 0;
text-align: center;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* ensure headings don't add unexpected top margin when stacked */
.footer-heading { margin-top: 0; margin-bottom: 8px; }
.footer-links-list li { margin-bottom: 8px; }
.footer-links-list a { font-size: 0.95rem; }
.footer-contact-list { margin-bottom: 8px; }
.footer-contact-list li { margin-bottom: 6px; justify-content: center; }
.footer-social-links { justify-content: center; margin-top: 8px; }
.footer-social-links a { width: 38px; height: 38px; }
.footer-divider { margin: 20px 0 0 0; }
.footer-bottom-row { padding: 12px 0 16px 0; font-size: 0.95rem; }
.footer-legal-col { text-align: center; }
}
@media (max-width: 576px) {
.footer-main-container {
padding: 40px 12px 0 12px;
}
/* tighten vertical gap between brand block and columns */
.footer-top-row {
gap: 8px;
}
.footer-logo {
width: 46px;
/* margin-top: 1rem; */
}
.footer-title {
font-size: 1.25rem;
margin-top: 2rem;
margin-bottom: 4px;
}
/* reduce bottom spacing of description on mobile to tighten layout */
.footer-desc {
font-size: 0.95rem;
margin-bottom: 2rem !important;
padding-bottom: 0 !important;
}
.footer-pta-badge {
font-size: 0.85rem;
}
.footer-links-list a {
font-size: 0.95rem;
}
.footer-links-list li {
margin-bottom: 6px;
}
/* remove any top spacing on links column for mobile so lists sit closer to the
brand block above (tighten vertical rhythm) */
.footer-links-col {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 2rem;
}
/* heading may introduce default top margin in user agent styles */
.footer-heading { margin-top: 0; margin-bottom: 6px; }
.footer-social-links { gap: 10px; }
.footer-social-links a { width: 36px; height: 36px; font-size: 1.05rem; }
.footer-divider { margin: 16px 0 0 0; }
.footer-bottom-row { padding: 10px 0 12px 0; font-size: 0.92rem; gap: 6px; }
.footer-copyright-col,
.footer-legal-col { flex: 1 1 100%; text-align: center; }
.footer-legal-link { margin: 0 4px; }
/* Layout: place Company and Services side-by-side in two columns on very small screens
Ensure we override earlier `flex-direction: column` from larger breakpoints by
explicitly setting row direction here and make the brand column full-width. */
/* Center the two menu columns as a single block using inline-blocks so
they get equal left/right margins inside the footer on small screens. */
.footer-top-row {
display: block;
box-sizing: border-box;
text-align: center; /* center inline-block children */
}
/* Brand column full width on its own row */
.footer-brand-col {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
padding-left: 8px;
padding-right: 8px;
margin-bottom: 6px;
}
/* Make Company and Services display inline-block so the pair centers
within the parent; keep the link text left-aligned for readability. */
.footer-links-col,
.footer-services-col {
display: inline-block;
vertical-align: top;
float: none;
width: 45%;
max-width: 320px;
box-sizing: border-box;
padding-left: 8px;
padding-right: 8px;
text-align: left;
margin-bottom: 2rem; /* small gutter between columns */
}
/* Contact column stays full width and appears below the centered columns */
.footer-contact-col {
display: block;
width: 100%;
box-sizing: border-box;
padding-left: 8px;
padding-right: 8px;
margin-top: 6px;
clear: both;
}
}
.contact-content-row-2 {
display: flex;
gap: 64px;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
}
.contact-form-col-left {
flex: 2;
min-width: 340px;
max-width: 600px;
margin-right: 0;
}
.contact-info-col-row {
flex: 2;
display: flex;
flex-direction: row;
gap: 24px;
min-width: 440px;
max-width: 600px;
justify-content: flex-start;
align-items: stretch;
}
.contact-info-col-row .contact-info-card {
flex: 1 1 0;
min-width: 260px;
max-width: 340px;
margin-bottom: 0;
}
@media (max-width: 900px) {
.contact-content-row-2 {
flex-direction: column;
gap: 32px;
}
.contact-info-col-row {
flex-direction: column;
gap: 18px;
max-width: 100%;
}
}
/* Improved Contact Section Styles */
.contact-container {
max-width: 1200px;
margin: 0 auto;
padding: 64px 0 48px 0;
box-sizing: border-box;
padding-left: 32px;
padding-right: 32px;
}
.contact-header {
text-align: center;
margin-bottom: 32px;
}
.contact-badge {
color: #ff2121;
font-weight: 700;
letter-spacing: 2px;
font-size: 1rem;
display: block;
margin-bottom: 8px;
}
.contact-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0;
}
.contact-divider {
width: 70%;
height: 4px;
background: linear-gradient(90deg, #ff2121 40%, #eaeaea 100%);
margin: 16px auto 0 auto;
border-radius: 2px;
}
.contact-desc {
color: #222;
font-size: 1.15rem;
margin: 24px auto 0 auto;
max-width: 600px;
}
.contact-content-row {
display: flex;
gap: 48px;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
.contact-form-col {
flex: 2;
min-width: 320px;
max-width: 520px;
}
.contact-info-col {
flex: 1;
min-width: 260px;
max-width: 340px;
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-form-wrapper {
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 12px #0001;
padding: 32px 28px;
}
.contact-form-row {
display: flex;
gap: 22px;
margin-bottom: 18px;
}
.contact-form-group {
flex: 1;
display: flex;
flex-direction: column;
}
.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
border-radius: 8px;
border: 1px solid #eaeaea;
padding: 12px 16px;
font-size: 1rem;
margin-bottom: 0;
background: #fafafa;
transition: border-color 0.2s;
}
.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
border-color: #ff2121;
outline: none;
}
.contact-form-action {
text-align: center;
margin-top: 18px;
}
.contact-info-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 12px #0001;
padding: 24px 20px;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.contact-info-icon {
font-size: 2rem;
color: #ff2121;
margin-bottom: 10px;
}
.contact-info-card h5 {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 8px;
color: #222;
}
.contact-info-card p {
color: #444;
font-size: 1rem;
margin-bottom: 0;
}
/* Clients Section Styles */
.clients-section {
background: #fff;
padding: 64px 0 48px 0;
position: relative;
}
.clients-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
position: relative;
box-sizing: border-box;
padding-left: 32px;
padding-right: 32px;
}
.clients-header {
margin-bottom: 32px;
}
.clients-badge {
color: #ff2121;
font-weight: 700;
letter-spacing: 2px;
font-size: 1rem;
display: block;
margin-bottom: 8px;
}
.clients-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0;
}
.clients-title span {
color: #ff2121;
}
.clients-divider {
width: 80%;
height: 4px;
background: linear-gradient(90deg, #ff2121 40%, #eaeaea 100%);
margin: 16px auto 0 auto;
border-radius: 2px;
}
.clients-logos-wrapper {
margin-top: 48px;
display: flex;
flex-direction: column;
gap: 32px;
overflow-x: hidden;
}
.clients-logos-row {
display: flex;
gap: 32px;
/* align items to the start so the animated track begins at the left edge
— centering causes empty gaps when the row translates during the loop */
justify-content: flex-start;
align-items: center;
overflow: hidden;
position: relative;
min-height: 100px;
will-change: transform;
}
.clients-logo {
/* background: #fff; */
border-radius: 12px;
/* box-shadow: 0 2px 12px #0001; */
padding: 18px 32px;
display: flex;
align-items: center;
min-width: 140px;
min-height: 70px;
transition: box-shadow 0.2s;
/* make each logo a fixed-size flex item so percent-based transforms are predictable */
flex: 0 0 auto;
}
.clients-logo img {
max-height: 60px;
max-width: auto;
object-fit: contain;
}
.clients-logo:hover {
box-shadow: 0 4px 24px #ff7a2122;
}
.clients-logos-row-1,
.clients-logos-row-2 {
/* Use the same seamless slide animation for both rows; the second
row runs the animation in reverse to create the opposite direction
visual while keeping percentage transforms aligned with duplicated content. */
animation: clients-slide 28s linear infinite;
width: max-content;
}
.clients-logos-row-2 {
animation-direction: reverse;
}
@keyframes clients-slide {
0% { transform: translateX(0); }
/* move left by half the track so the duplicated set appears seamless */
100% { transform: translateX(-50%); }
}
/* Responsive tweaks for Clients section
- keep desktop animation intact, but make logos wrap or become horizontally
scrollable on small screens, reduce padding and logo sizes so the section
remains visually balanced on mobile devices. */
@media (max-width: 992px) {
.clients-container {
padding-left: 20px;
padding-right: 20px;
max-width: 100%;
}
.clients-logos-wrapper {
gap: 20px;
}
.clients-logos-row {
gap: 16px;
justify-content: center;
}
.clients-logo {
padding: 12px 20px;
min-width: 120px;
min-height: 60px;
flex: 0 0 auto;
}
.clients-logo img { max-height: 56px; }
}
@media (max-width: 768px) {
.clients-section { padding: 40px 0 24px 0; }
.clients-container { padding-left: 16px; padding-right: 16px; }
/* Allow logos to wrap into multiple rows for narrower screens */
.clients-logos-row {
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.clients-logo {
flex: 0 0 30%; /* three across where space allows */
min-width: 90px;
padding: 10px;
}
.clients-logo img { max-height: 48px; }
.clients-logos-wrapper { gap: 16px; }
}
@media (max-width: 576px) {
.clients-section { padding: 28px 0 18px 0; }
.clients-container { padding-left: 12px; padding-right: 12px; }
/* On very small screens keep a single horizontal scroller for logos to
avoid tiny thumbnails when wrapping; this provides the best legibility. */
.clients-logos-row {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 12px;
padding-bottom: 8px;
}
.clients-logo {
flex: 0 0 auto;
min-width: 84px;
padding: 8px 12px;
}
.clients-logo img { max-height: 44px; }
/* reduce visual gap for stacked wrapper */
.clients-logos-wrapper { gap: 12px; }
.clients-title { font-size: 1.4rem; }
}
/* Reviews Section Styles */
.reviews-section {
background: linear-gradient(135deg, #f8f3ed 0%, #f8f3ed 100%);
padding: 64px 0 48px 0;
position: relative;
}
.reviews-container {
max-width: 900px;
margin: 0 auto;
text-align: center;
position: relative;
box-sizing: border-box;
padding-left: 32px;
padding-right: 32px;
}
.reviews-header {
margin-bottom: 32px;
}
.reviews-badge {
color: #ff2121;
font-weight: 700;
letter-spacing: 2px;
font-size: 1rem;
display: block;
margin-bottom: 8px;
}
.reviews-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0;
}
.reviews-title span {
color: #ff2121;
}
.reviews-divider {
width: 70%;
height: 4px;
background: linear-gradient(90deg, #ff2121 40%, #eaeaea 100%);
margin: 16px auto 0 auto;
border-radius: 2px;
}
.reviews-slider-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-top: 32px;
position: relative;
}
.reviews-arrow {
background: none;
border: none;
font-size: 2.5rem;
color: #222;
cursor: pointer;
transition: color 0.2s;
padding: 0 24px;
z-index: 2;
}
.reviews-arrow:hover {
color: #ff2121;
}
.reviews-slider {
flex: 1;
min-width: 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.review-slide {
display: none;
flex-direction: column;
align-items: center;
width: 100%;
animation: fadeIn 0.7s;
}
.review-slide.active {
display: flex;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateX(40px); }
to { opacity: 1; transform: translateX(0); }
}
.review-avatars {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
margin-bottom: 16px;
}
.review-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 2px 12px #0001;
opacity: 0.7;
border: 4px solid #fff;
transition: opacity 0.2s, box-shadow 0.2s;
}
.review-avatar.main {
width: 100px;
height: 100px;
opacity: 1;
box-shadow: 0 4px 24px #ff212122;
border: 4px solid #ff2121;
}
.review-meta {
margin-bottom: 12px;
}
.review-name {
font-weight: 700;
font-size: 1.1rem;
margin-right: 8px;
}
.review-role {
color: #ff2121;
font-weight: 600;
font-size: 1.1rem;
}
.review-stars {
color: #ff2121;
font-size: 1.5rem;
margin-bottom: 16px;
}
.review-text {
font-size: 1.1rem;
color: #222;
margin-bottom: 24px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.reviews-progress {
width: 320px;
height: 8px;
background: #eaeaea;
border-radius: 4px;
margin: 32px auto 0 auto;
position: relative;
}
.reviews-progress-bar {
height: 8px;
background: #ff2121;
border-radius: 4px;
width: 33%;
position: absolute;
left: 0;
top: 0;
transition: width 0.5s;
}
/* Mobile / Tablet responsive tweaks for Reviews section only
- Adjust paddings, reduce avatar sizes, scale title/text, and make the
slider stack on narrow screens while keeping desktop rules intact. */
@media (max-width: 768px) {
.reviews-section {
padding: 40px 0 24px 0;
}
.reviews-container {
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.reviews-title { font-size: 2rem; }
.reviews-slider-wrapper {
flex-direction: column;
gap: 16px;
align-items: center;
}
.reviews-arrow {
padding: 0 12px;
font-size: 2rem;
}
.reviews-slider { width: 100%; }
.review-slide { padding: 0 8px; }
.review-avatars { gap: 18px; margin-bottom: 12px; }
.review-avatar { width: 64px; height: 64px; }
.review-avatar.main { width: 82px; height: 82px; }
.review-name, .review-role { font-size: 1rem; }
.review-text { font-size: 1rem; max-width: 100%; padding: 0 8px; }
.reviews-progress { width: 260px; margin-top: 20px; }
}
@media (max-width: 576px) {
.reviews-section { padding: 28px 0 18px 0; }
.reviews-container { padding-left: 12px; padding-right: 12px; }
.reviews-title { font-size: 1.6rem; }
.reviews-arrow { font-size: 1.6rem; padding: 0 8px; }
.reviews-slider-wrapper { gap: 12px; }
.review-avatars { gap: 12px; margin-bottom: 10px; }
.review-avatar { width: 56px; height: 56px; border-width: 3px; }
.review-avatar.main { width: 72px; height: 72px; }
.review-name, .review-role { font-size: 0.98rem; }
.review-text { font-size: 0.98rem; margin-bottom: 16px; }
.reviews-progress { width: 80%; max-width: 220px; margin-top: 18px; }
.reviews-slider { padding: 0; }
.review-slide { align-items: center; }
}
/* Pricing Packages Section Styles */
.pricing-section {
background: #fafafa;
padding: 40px 0;
/* use 100% to avoid horizontal overflow from 100vw + scrollbars */
width: 100%;
}
.pricing-container {
position: relative;
max-width: 100%;
margin: 0 auto;
display: flex;
gap: 32px;
}
.pricing-main {
flex: 3;
margin-left: 2rem;
}
.pricing-badge {
color: #ff2121;
letter-spacing: 2px;
font-weight: 600;
text-align: center;
margin-bottom: 8px;
margin-left: auto;
margin-right: auto;
padding-top: 5rem;
}
.pricing-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 32px;
padding-top: 5rem;
}
.pricing-title span {
color: #ff2121;
}
.pricing-list {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 7rem;
}
/* Mobile pricing adjustments: tighter badge/title spacing, single column cards,
and extra padding on the side card for better breathing on small screens */
@media (max-width: 576px) {
.pricing-section .pricing-badge {
margin-bottom: 6px !important;
padding-top: 8px !important;
padding-bottom: 4px !important;
font-size: 0.95rem !important;
}
.pricing-section .pricing-title {
margin-top: 6px !important;
margin-bottom: 10px !important;
font-size: 1.6rem !important;
padding-top: 0 !important;
}
.pricing-section .pricing-list {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin-top: 1rem !important;
padding: 0 12px !important;
align-items: center !important;
}
.pricing-section .pricing-list .pricing-card {
width: 100% !important;
max-width: 340px !important; /* match screenshot card width */
margin: 0 auto !important;
box-sizing: border-box !important;
padding: 18px 16px !important;
border-radius: 12px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 12px !important;
background: #fff !important;
box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;
}
/* Ensure side card appears below pricing cards with top/bottom padding */
.pricing-section .pricing-side-card {
width: calc(100% - 32px) !important;
margin: 12px auto !important;
padding: 20px !important;
box-sizing: border-box !important;
border-radius: 12px !important;
}
/* Adjust inner elements to mirror screenshot: small badge, plan title, description and features centered */
.pricing-section .pricing-card .pricing-card-info {
padding: 8px 6px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.pricing-section .pricing-card .pricing-card-type {
font-size: 0.85rem !important;
letter-spacing: 2px !important;
color: #ff2121 !important;
margin-bottom: 6px !important;
}
.pricing-section .pricing-card .pricing-card-name {
font-size: 1.25rem !important;
font-weight: 700 !important;
margin: 6px 0 !important;
}
.pricing-section .pricing-card .pricing-card-desc {
font-size: 0.98rem !important;
color: #444 !important;
margin: 6px 0 8px 0 !important;
line-height: 1.5 !important;
padding: 0 6px !important;
}
.pricing-section .pricing-card .pricing-card-features {
justify-content: center !important;
gap: 16px !important;
padding: 4px 0 8px 0 !important;
}
.pricing-section .pricing-card .pricing-card-features .feature img {
height: 36px !important;
}
/* Center the 'Ask for Price' label and style the CTA button inside the card */
.pricing-section .pricing-card .ask-for-price,
.pricing-section .pricing-card .pricing-ask {
font-size: 1.1rem !important;
font-weight: 700 !important;
margin-top: 6px !important;
margin-bottom: 6px !important;
}
.pricing-section .pricing-card .pricing-cta,
.pricing-section .pricing-card .btn-contact {
display: inline-block !important;
padding: 10px 18px !important;
border-radius: 10px !important;
background: #ff2b2b !important;
color: #fff !important;
border: none !important;
font-weight: 700 !important;
box-shadow: 0 6px 18px rgba(255,43,43,0.12) !important;
text-decoration: none !important;
}
.pricing-section .pricing-cta {
margin-top: 14px !important;
margin-bottom: 14px !important;
}
}
/* Ensure the pricing container uses symmetric left/right gutters on small screens
and that the main column has no left offset so cards are centered equally. */
@media (max-width: 576px) {
.pricing-container {
padding-left: 16px !important;
padding-right: 16px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Remove the desktop left margin and ensure the main column uses full width */
.pricing-main {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Prevent the badge/title from using absolute positioning on small screens */
.pricing-container .pricing-badge,
.pricing-container .pricing-title {
position: static !important;
left: auto !important;
transform: none !important;
top: auto !important;
width: 100% !important;
text-align: center !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Ensure the pricing-list occupies full available width but keeps cards centered */
.pricing-section .pricing-list {
width: 100% !important;
max-width: 380px !important;
align-items: center !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
@media (min-width: 992px) {
/* Visually center the badge+title across the full pricing container
by absolutely positioning them in the container center while
reserving vertical space via padding-top so cards don't overlap. */
.pricing-container { padding-top: 120px; }
.pricing-container .pricing-badge {
position: absolute;
top: 18px;
left: 40%;
transform: translateX(-50%);
text-align: center;
z-index: 5;
width: auto;
margin: 0;
}
.pricing-container .pricing-title {
position: absolute;
top: 48px;
left: 20%;
transform: translateX(-50%);
text-align: center;
z-index: 5;
width: 100%;
max-width: 900px;
margin: 0;
}
/* Ensure the main content sits below the reserved heading area */
.pricing-main { padding-top: 0; }
}
.pricing-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px #0001;
display: flex;
align-items: center;
}
.pricing-card-info {
flex: 2;
padding: 32px 24px;
}
.pricing-card-type {
font-weight: 700;
letter-spacing: 2px;
display: block;
margin-bottom: 8px;
}
.pricing-card-type.basic { color: #ff2121; }
.pricing-card-type.premium { color: #ff2121; }
.pricing-card-type.advanced { color: #ff2121; }
.pricing-card-name {
margin: 8px 0 12px 0;
font-weight: 700;
}
.pricing-card-desc {
color: #444;
}
.pricing-card-features {
flex: 3;
display: flex;
gap: 32px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.feature {
text-align: center;
}
.feature img {
height: 40px;
}
.feature div {
font-size: 14px;
margin-top: 8px;
}
.pricing-card-action {
flex: 1;
text-align: center;
padding: 32px 24px;
}
.price {
font-size: 1.5rem;
font-weight: 600;
color: #222;
}
.per {
font-size: 1rem;
color: #888;
}
.pricing-btn {
margin-top: 16px;
background: #ff2121;
color: #fff;
border: none;
border-radius: 6px;
padding: 10px 18px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.pricing-btn:hover {
background: #e01818;
}
.pricing-side-card {
flex: 1;
background: #ff2121;
border-radius: 16px;
padding: 32px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 320px;
max-width: 340px;
margin-right: 2rem;
margin-top: 7rem;
}
.pricing-side-card h3 {
color: #fff;
font-size: 1.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 12px;
}
.pricing-side-card p {
color: #fff;
opacity: 0.85;
text-align: center;
margin-bottom: 24px;
}
.side-btn {
background: #fff;
color: #ff2121;
font-weight: 600;
border: none;
border-radius: 6px;
padding: 10px 32px;
cursor: pointer;
margin-bottom: 32px;
transition: background 0.2s;
}
.side-btn:hover {
background: #ffe2d0;
}
.side-router {
height: 180px;
}
.side-wifi {
height: 96px;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Modal pricing layout - ensure one card per row and clear horizontal layout */
.modal .pricing-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px #0001;
display: flex;
align-items: center;
}
.modal .pricing-card-info {
flex: 2;
padding: 32px 24px;
}
.modal .pricing-card-features {
flex: 3;
display: flex;
gap: 32px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.modal .pricing-card-action {
flex: 1;
text-align: center;
padding: 32px 24px;
}
@media (max-width: 576px) {
.modal .pricing-card { flex-direction: column !important; align-items: stretch !important; }
.modal .pricing-card-features { justify-content: center !important; }
}
/* Force pricing cards inside a modal to present as stacked cards where each
card uses a horizontal (row) internal layout similar to the page design.
Keep this modal-scoped so page-level pricing rules are unaffected. */
.modal .pricing-list {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
box-sizing: border-box;
}
.modal .pricing-container,
.modal .pricing-list,
.modal .pricing-main {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.modal .pricing-list .pricing-card,
.modal .pricing-container .pricing-card,
.modal .pricing-card {
width: 100% !important;
max-width: none !important;
margin: 0 0 18px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
padding: 18px !important;
box-sizing: border-box !important;
}
.modal .pricing-card .pricing-card-info {
flex: 2 !important;
padding: 0 12px 0 0 !important;
width: auto !important;
}
.modal .pricing-card .pricing-card-features {
flex: 3 !important;
display: flex !important;
gap: 24px !important;
justify-content: center !important;
align-items: center !important;
}
.modal .pricing-card .pricing-card-action {
flex: 1 !important;
text-align: right !important;
padding: 0 0 0 12px !important;
}
/* Modal grid fixes: Bootstrap-like columns are overridden globally in this project
so force modal grid rows/cols to stack full-width so each .pricing-card occupies
one horizontal card per row (matches design). Scoped to modal only. */
.modal .modal-body .row {
flex-direction: column !important;
gap: 16px !important;
}
.modal .modal-body .row > [class*="col-"] {
flex: 0 0 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Tighten modal gutters and card spacing specifically for the pricing modal
Reduce left/right padding and bottom spacing so cards sit closer to the
modal edges like the reference design. Scoped to #allPlansModal to avoid
affecting other modals. */
#allPlansModal .modal-content {
padding: 8px 12px !important;
}
#allPlansModal .modal-header {
padding: 10px 14px !important;
}
#allPlansModal .modal-body {
padding: 12px 14px 18px !important;
}
#allPlansModal .modal-body .container {
padding-left: 6px !important;
padding-right: 6px !important;
max-width: 100% !important;
}
#allPlansModal .pricing-card {
margin: 0 0 12px !important;
padding: 14px 16px !important;
border-radius: 12px !important;
}
#allPlansModal .pricing-card .pricing-card-info { padding: 8px 10px !important; }
#allPlansModal .pricing-card .pricing-card-action { padding: 8px 10px !important; }
/* Reduce bottom space inside modal footer area */
#allPlansModal .modal-footer { padding: 10px 12px !important; }
/* Reduce overall modal max width for the pricing modal so it doesn't span
edge-to-edge on very large screens. This keeps content focused and matches
the reference design. It is scoped to the pricing modal only. */
#allPlansModal .modal-dialog {
max-width: 1100px !important;
width: calc(100% - 48px) !important;
}
@media (max-width: 1200px) {
/* keep small/medium screens using the default narrower dialog sizing */
#allPlansModal .modal-dialog { width: calc(100% - 32px) !important; max-width: calc(100% - 32px) !important; }
}
/* Movie Feature Section Styles */
.movie-feature-section {
position: relative;
min-height: 600px;
background: #111;
color: #fff;
padding: 0;
margin: 0;
/* use 100% so added paddings/margins don't push past viewport width */
width: 100%;
height: 100vh;
overflow: hidden;
}
.movie-feature-bg {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 0;
overflow: hidden;
}
.movie-feature-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: brightness(0.7) contrast(1.1);
}
/* ensure the background image fills and is positioned correctly */
.movie-feature-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.movie-feature-container {
position: relative;
z-index: 2;
padding: 80px 0 0 0;
margin-left: 30px;
}
.movie-feature-content {
padding-top: 40px;
padding-bottom: 40px;
}
.movie-feature-badge {
display: flex;
align-items: center;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 18px;
}
.movie-feature-badge-icon {
color: #ff2a2a;
font-size: 1.2rem;
margin-right: 8px;
}
.movie-feature-badge-label {
color: #fff;
font-weight: 700;
}
.movie-feature-badge-sub {
color: #ff2a2a;
font-weight: 700;
margin-left: 4px;
}
.movie-feature-title {
font-family: 'Merriweather', 'Montserrat', sans-serif;
font-size: 3rem;
font-weight: 900;
letter-spacing: 2px;
margin-bottom: 18px;
color: #fff;
text-shadow: 0 2px 16px #000a;
}
.movie-feature-meta {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 18px;
font-size: 1.1rem;
}
.movie-feature-match {
color: #ff2a2a;
font-weight: 700;
}
.movie-feature-year, .movie-feature-lang {
color: #fff;
font-weight: 500;
}
.movie-feature-badge-meta {
background: #222;
color: #fff;
border-radius: 16px;
padding: 4px 14px;
font-size: 1rem;
font-weight: 700;
margin-right: 4px;
}
.movie-feature-desc {
font-size: 1rem;
color: #fff;
margin-bottom: 32px;
max-width: 700px;
text-shadow: 0 2px 8px #000a;
}
.movie-feature-title,
.movie-feature-meta,
.movie-feature-desc,
.movie-feature-watch-btn {
transform: translateX(-36px);
opacity: 0;
will-change: transform, opacity;
}
/* Slide-in from left when section receives .in-view (added by JS IntersectionObserver) */
.movie-feature-section.in-view .movie-feature-title {
animation: slideInLeft 0.7s cubic-bezier(.22,.9,.3,1) forwards;
animation-delay: 0.12s;
}
.in-drawer-toggler { display: none; }
/* Mobile: show the original navbar-toggler by default on narrow screens.
The in-drawer toggler is hidden until the collapse is open (so we avoid
duplicate icons). When the collapse has the `show` class we surface the
in-drawer toggler and hide the external one. This prevents the visual
duplication reported by users while keeping a clear close control inside
the drawer. */
@media (max-width: 991.98px) {
/* show the standard toggler so users always have a visible button */
.navbar-toggler {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: transparent;
color: #fff;
margin: 8px 0 18px 8px;
z-index: 1060;
}
/* keep the in-drawer clone hidden until the drawer opens */
.in-drawer-toggler { display: none !important; }
/* position the collapse as a right-side drawer */
.navbar-collapse {
position: fixed !important;
top: 0;
right: 0;
bottom: 0;
width: 320px;
max-width: 85%;
background: rgba(0,0,0,0.95);
padding: 72px 20px 20px 20px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: transform 0.28s ease, visibility 0.28s ease;
transform: translateX(0);
}
.navbar-collapse .navbar-nav { flex-direction: column !important; gap: 18px; align-items: flex-start; }
.navbar-collapse .nav-link { color: #fff !important; font-size: 1.05rem; padding: 8px 12px !important; }
.navbar-collapse .btn-cta { display: none; }
/* when the drawer is open, hide the outside toggler and surface the inside one */
.navbar-collapse.show .in-drawer-toggler { display: inline-flex !important; align-items: center; justify-content: center; width:44px; height:44px; border:none; background: transparent; color: #fff; margin: 8px 0 18px 8px; z-index: 1060; }
.navbar-collapse.show ~ .navbar-toggler, .custom-navbar.nav-open .navbar-toggler { display: none !important; }
/* make sure any toggler icon inside the drawer is visible (invert if necessary) */
.in-drawer-toggler .navbar-toggler-icon { filter: invert(1) hue-rotate(180deg) !important; }
}
/* Ensure the in-drawer toggler is positioned and visible within the opened drawer
on mobile. Use high specificity so this rule overrides other layout rules. */
@media (max-width: 991.98px) {
.navbar-collapse.show .in-drawer-toggler {
display: inline-flex !important;
/* Use fixed positioning so the toggler sits above the drawer content
and isn't affected by the collapse's stacking context. */
position: fixed !important;
top: 12px !important;
right: 12px !important;
width: 44px !important;
height: 44px !important;
padding: 6px !important;
border-radius: 8px !important;
background: rgba(255,255,255,0.06) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
align-items: center !important;
justify-content: center !important;
z-index: 9999999 !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
cursor: pointer !important;
pointer-events: auto !important;
}
.navbar-collapse.show .in-drawer-toggler .navbar-toggler-icon {
width: 22px !important;
height: 22px !important;
display: block !important;
filter: invert(1) !important;
opacity: 1 !important;
}
}
.movie-feature-section.in-view .movie-feature-meta {
animation: slideInLeft 0.8s cubic-bezier(.22,.9,.3,1) forwards;
animation-delay: 0.22s;
}
.movie-feature-section.in-view .movie-feature-desc {
animation: slideInLeft 0.9s cubic-bezier(.22,.9,.3,1) forwards;
animation-delay: 0.34s;
}
.movie-feature-section.in-view .movie-feature-watch-btn {
animation: slideInLeft 0.9s cubic-bezier(.22,.9,.3,1) forwards;
animation-delay: 0.46s;
}
@media (prefers-reduced-motion: reduce) {
.movie-feature-title,
.movie-feature-meta,
.movie-feature-desc,
.movie-feature-watch-btn,
.movie-feature-section.in-view .movie-feature-title,
.movie-feature-section.in-view .movie-feature-meta,
.movie-feature-section.in-view .movie-feature-desc,
.movie-feature-section.in-view .movie-feature-watch-btn {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
.movie-feature-watch-btn {
background: #ff2a2a;
color: #fff;
font-weight: 700;
border-radius: 24px;
font-size: 1.1rem;
padding: 12px 32px;
box-shadow: 0 2px 8px rgba(220,20,60,0.12);
transition: background 0.2s;
margin-top: 12px;
display: inline-block;
}
.movie-feature-watch-btn:hover {
background: #f91414;
color: #fff;
}
.movie-feature-slider-row {
position: relative;
z-index: 3;
margin-top: 32px;
padding-bottom: 32px;
margin-left: 20rem;
width: 100vw;
}
.movie-feature-slider {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
.movie-feature-slider-arrow {
color: #fff;
background: #222a;
border-radius: 50%;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
cursor: pointer;
transition: background 0.2s;
}
.movie-feature-slider-arrow:hover {
background: #ff2a2a;
color: #fff;
}
.movie-feature-slider-images {
display: flex;
gap: 18px;
}
.movie-feature-slider-img {
width: 200px;
height: auto;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 2px 8px #000a;
opacity: 0.7;
cursor: pointer;
transition: opacity 0.2s, box-shadow 0.2s;
}
/* Prevent images from causing horizontal overflow */
img { max-width: 100%;
height: auto;
display: block;
}
.movie-feature-slider-img.active {
opacity: 1;
box-shadow: 0 4px 16px #ff2a2a88;
}
@media (max-width: 991px) {
.movie-feature-title { font-size: 2.2rem; }
.movie-feature-container { padding: 40px 0 0 0; }
.movie-feature-slider-img { width: 80px; height: 48px; }
}
@media (max-width: 767px) {
.movie-feature-title { font-size: 1.2rem; }
.movie-feature-desc { font-size: 1rem; }
.movie-feature-slider-img { width: 48px; height: 28px; }
}
/* Network Service Highlight Section Styles */
.network-highlight-section {
background: #fff7f2;
padding: 80px 0;
position: relative;
z-index: 2;
}
.network-highlight-container,
.network-highlight-section > .container.network-highlight-container {
/* limit overall content width so the right side doesn't stretch to full viewport
while keeping the left edge of this container flush with the page */
max-width: 100vw;
width: 100%;
margin: 0; /* keep left aligned to page */
padding-left: 0;
padding-right: 20px; /* small breathing room on the right */
display: flex;
flex-direction: row;
align-items: flex-start;
}
/* give the container a stable gap between the two columns */
.network-highlight-container {
gap: 24px;
}
/* remove default row/column gutters only inside this section so left images touch the page edge */
.network-highlight-section .row {
margin-left: 0;
margin-right: 0;
}
.network-highlight-left {
display: flex;
flex-direction: column;
gap: 12px; /* reduced vertical spacing between left images */
/* fixed-ish left column so images stack vertically and text stays to the right */
flex: 0 0 500px; /* don't grow, don't shrink, base 380px */
width: 500px;
min-width: 400px;
max-width: 500px;
/* keep right-side spacing via the container gap; override Bootstrap column padding */
margin-right: 0;
align-items: flex-start;
padding-left: 0 !important;
}
.network-highlight-right {
/* allow the right column to take remaining horizontal space */
flex: 1 1 auto;
padding-left: 28px; /* breathing room between images and text */
padding-right: 0;
margin-right: 0;
margin-left: 1rem;
}
/* Ensure the cards themselves don't add unexpected left spacing */
.network-highlight-left .network-feature-card {
margin-left: 0;
}
.network-feature-card {
position: relative;
border-radius: 0 18px 18px 0; /* top-left, top-right, bottom-right, bottom-left */
overflow: hidden;
box-shadow: 0 4px 24px rgba(220,20,60,0.10);
/* rely on parent gap for spacing; remove per-card margin */
margin-bottom: 0;
width: 100%;
}
/* Attach the first card to the top of the section and last to the bottom using negative offsets
to counter the section's vertical padding (80px desktop, 40px tablet). */
.network-highlight-left .network-feature-card:first-child {
margin-top: -48px;
}
.network-highlight-left .network-feature-card:last-child {
margin-bottom: -48px;
}
.network-feature-img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
/* Ensure the image itself has matching right-side rounding (overrides any global img rules) */
.network-feature-img {
border-radius: 0 18px 18px 0;
}
/* Remove top-right rounding for the very first left-card image and
remove bottom-right rounding for the very last left-card image
without changing image size or other styles. */
.network-highlight-left .network-feature-card:first-child {
border-top-right-radius: 0;
}
.network-highlight-left .network-feature-card:first-child .network-feature-img {
border-top-right-radius: 0;
}
.network-highlight-left .network-feature-card:last-child {
border-bottom-right-radius: 0;
}
.network-highlight-left .network-feature-card:last-child .network-feature-img {
border-bottom-right-radius: 0;
}
.network-feature-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(90deg, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.2) 100%);
color: #fff;
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* subtle red overlay over the feature image so the image remains visible
but gets a warm/red tint; placed between image and overlay text */
.network-feature-card {
z-index: 0; /* ensure stacking context for pseudo overlay */
}
.network-feature-img {
position: relative;
z-index: 0;
}
.network-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(249,20,20,0.12); /* low-opacity red tint */
pointer-events: none;
z-index: 1; /* sits above the image but below overlay text */
}
.network-feature-overlay {
z-index: 2; /* keep overlay text/icons above the tint */
}
.network-feature-title {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.5px;
margin-top: 0;
}
.network-feature-arrow {
font-size: 1.3rem;
background: #fff;
color: #f91414;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(220,20,60,0.12);
}
.network-highlight-badge {
color: #f91414;
font-size: 1rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
}
.network-highlight-title {
font-size: 2.5rem;
font-weight: 700;
margin-top: 0 !important;
margin-bottom: 18px;
line-height: 1.1;
}
.network-highlight-title-accent {
color: #f91414;
font-weight: 700;
font-size: 2.5rem;
}
.network-highlight-desc {
font-size: 1.1rem;
color: #444;
margin-bottom: 24px;
max-width: 600px;
}
.network-highlight-stats {
gap: 48px;
margin-bottom: 18px;
}
.network-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 100px;
}
.network-stat-value {
font-size: 2.2rem;
font-weight: 800;
color: #f91414;
margin-bottom: 2px;
}
.network-stat-label {
font-size: 1rem;
color: #222;
font-weight: 500;
}
.network-highlight-devices {
margin-bottom: 24px;
}
.network-devices-label {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 8px;
}
.network-devices-icons {
display: flex;
gap: 18px;
}
.network-device img {
height: 32px;
width: auto;
filter: drop-shadow(0 2px 8px rgba(220,20,60,0.10));
}
.network-highlight-actions {
margin-top: 18px;
gap: 24px;
}
.network-discover-btn {
background: #f91414;
color: #fff;
font-weight: 700;
border-radius: 24px;
font-size: 1.1rem;
padding: 12px 32px;
/* box-shadow: 0 2px 8px rgba(220,20,60,0.12); */
transition: background 0.2s;
}
.network-discover-btn:hover {
background: #DC143C;
color: #fff;
}
.network-mail-box {
display: flex;
align-items: left;
gap: 10px;
background: #fff7f2;
border-radius: 18px;
padding-top: 18px;
padding-left: 0;
margin-left: 0;
/* box-shadow: 0 2px 8px rgba(220,20,60,0.08); */
}
.network-mail-icon {
color: #f91414;
font-size: 1.3rem;
margin-right: 6px;
}
.network-mail-label {
font-size: 0.95rem;
font-weight: 700;
color: #f91414;
margin-right: 6px;
}
.network-mail-value {
font-size: 1rem;
color: #222;
font-weight: 500;
}
.network-highlight-image {
position: absolute;
right: 0;
/* increased top offset to move the platform image further down on desktop */
top: 360px;
width: 540px;
max-width: 100%;
/* raise stacking so image appears above right-column text and stats */
z-index: 60;
text-align: right;
margin-right: -6rem;
}
.network-platform-img {
width: 450px;
max-width: 100%;
border-radius: 18px;
box-shadow: 0 4px 24px rgba(220,20,60,0.10);
}
/* Remove any blurred/soft background behind the platform image so it appears crisp
and sits cleanly above the content. This clears filters, backdrop-filters and
any background or shadow on the image wrapper that may be creating a blurred
rounded panel behind the device artwork. */
.network-highlight-image,
.network-highlight-image::before,
.network-highlight-right > .network-highlight-image,
.network-highlight-right > .network-highlight-image::before {
background: transparent !important;
filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
.network-platform-img {
/* keep the device image crisp — remove any filter and ensure a transparent bg */
background: transparent !important;
filter: none !important;
box-shadow: none !important;
}
.network-highlight-right > .network-highlight-image {
position: absolute !important;
width: auto !important;
max-width: 420px;
margin-left: auto;
top: 560px !important;
z-index: 80 !important;
text-align: right;
}
.network-highlight-right > .network-highlight-image .network-platform-img {
width: 320px; /* keep original visual size */
max-width: 100%;
border-radius: 18px;
}
.network-connect-circle {
position: absolute;
top: 18px;
right: 38px;
background: #fff;
color: #f91414;
border-radius: 50%;
padding: 10px 18px;
font-size: 1rem;
font-weight: 700;
box-shadow: 0 2px 8px rgba(220,20,60,0.10);
transform: rotate(-18deg);
}
.network-connect-arrow {
position: absolute;
top: 60px;
right: 18px;
background: #f91414;
color: #fff;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 2px 8px rgba(220,20,60,0.12);
}
@media (max-width: 1200px) {
.network-highlight-image {
position: static;
width: 100%;
text-align: center;
/* move down more on large tablets / small desktops */
margin-top: 5rem;
}
.network-platform-img {
width: 260px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-width: 0;
}
@media (max-width: 991px) {
.network-highlight-section {
padding: 40px 0;
}
.network-highlight-left {
gap: 18px;
}
.network-highlight-title, .network-highlight-title-accent {
font-size: 1.5rem;
}
.network-highlight-image {
/* move down more on narrow tablets / large phones */
margin-top: 5rem;
}
}
@media (max-width: 767px) {
.network-highlight-container {
padding: 0 8px;
}
.network-highlight-left, .network-highlight-right {
padding: 0;
}
.network-highlight-title, .network-highlight-title-accent {
font-size: 1.2rem;
}
.network-feature-img {
height: 110px;
}
.network-platform-img {
width: 180px;
}
}
}
@media (max-width: 991px) {
/* section padding reduced to 40px in earlier rules; match negative offsets */
.network-highlight-left .network-feature-card:first-child {
margin-top: -40px;
}
.network-highlight-left .network-feature-card:last-child {
margin-bottom: -40px;
}
}
@media (max-width: 767px) {
/* smaller devices: the left column stacks with right content; clear offsets */
.network-highlight-left .network-feature-card:first-child,
.network-highlight-left .network-feature-card:last-child {
margin-top: 0;
margin-bottom: 0;
}
.network-highlight-left {
gap: 10px;
}
}
/* Speed Test Hero styles - self contained */
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;600;800&family=Montserrat:wght@700;900&display=swap');
/* Font Awesome (bolt icon) - required if not already loaded */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
/* Section container and background */
.speed-test-hero{
width: 100%;
background: linear-gradient(135deg, #ff2a2a 0%, #ff1a1a 100%);
position: relative;
overflow: hidden;
padding: 64px 0 96px 0;
color: #ffffff;
font-family: 'Catamaran', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
/* Decorative network nodes & faint lines created using layered radial gradients */
.speed-test-hero::before{
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 88% 28%, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 48px, transparent 49px),
radial-gradient(circle at 96% 60%, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 32px, transparent 33px),
radial-gradient(circle at 70% 10%, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 40px, transparent 41px),
radial-gradient(circle at 80% 80%, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 70px, transparent 71px),
linear-gradient(120deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
opacity: 0.55;
pointer-events: none;
transform: translateZ(0);
z-index: 0;
}
/* subtle criss-cross network lines (pseudo-element with rotated linear-gradients) */
.speed-test-hero::after{
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(140deg, rgba(0, 0, 0, 0.389) 1px, transparent 1px),
linear-gradient(40deg, rgba(0, 0, 0, 0.327) 1px, transparent 1px);
background-size: 600px 600px;
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
/* inner content wrapper */
.speed-test-inner{
max-width: 100vw;
position: relative;
z-index: 2; /* sit above decorative layers */
display: flex;
align-items: center;
gap: 40px;
/* keep internal padding but ensure the left content sits ~1rem from the page edge */
/* padding: 24px; */
/* reduce left/right gutter so section content sits closer to page edges */
padding-left: 0;
padding-right: 0;
margin-left: 2rem;
margin-right: 0;
}
/* left column */
.speed-left{
flex: 1 1 60%;
max-width: 720px;
padding-right: 12px;
text-align: left; /* enforce left alignment for all text in this column */
}
.speed-badge{
display: inline-block;
letter-spacing: 6px;
font-weight: 700;
color: rgba(255,255,255,0.95);
font-size: 0.85rem;
margin-bottom: 18px;
opacity: 0.95;
}
.speed-title{
font-family: 'Catamaran', 'Montserrat', sans-serif;
/* Catamaran Bold */
font-weight: 700;
font-size: clamp(1.4rem, 5vw, 2.2rem);
margin: 0 0 18px 0;
line-height: 1.02;
color: #fff;
text-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.speed-desc{
color: rgba(255,255,255,0.95);
font-size: 1rem;
line-height: 1.8;
max-width: 820px;
margin-bottom: 28px;
opacity: 0.95;
}
/* thin separator */
.speed-sep{
border: none;
height: 1px;
/* make separator fully solid white */
background-color: #ffffff !important;
opacity: 1 !important;
margin: 28px 0;
width: 100%;
max-width: 880px;
}
/* meta rows */
.speed-meta{
margin-top: 6px;
color: rgb(255, 255, 255);
font-weight: 600;
letter-spacing: 2px;
font-size: 0.95rem;
}
.speed-meta-row{
display:flex;
gap: 12px;
align-items:center;
color: rgb(255, 255, 255);
margin-bottom: 10px;
flex-wrap: wrap; /* allow date/time/zone to sit on one line or wrap gracefully */
justify-content: flex-start; /* default: left-align meta rows on medium/large screens */
font-size: 0.88rem;
}
/* Browser label element (only shown on small screens) */
.meta-browser{
display: none;
font-weight: 700;
letter-spacing: 1px;
}
/* small separators inside meta */
.meta-sep{
color: rgb(255, 255, 255);
margin: 0 6px;
}
/* IP row */
.speed-ip{
margin-top: 6px;
font-weight: 700;
color: rgb(255, 255, 255);
letter-spacing: 2px;
}
/* IP + Browser line (row 2) and ISP row (row 3) */
.speed-ip-line{
display: flex;
gap: 8px;
align-items: center;
}
.speed-ip-address{
font-weight: 700;
letter-spacing: 2px;
}
.speed-ip-browser{
font-weight: 700;
opacity: 0.95;
}
.speed-isp{
margin-top: 8px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
/* Ensure speed meta and IP/browser/ISP lines remain visible and centered
(prevent accidental hiding by other animation rules). */
.speed-test-hero .speed-left .speed-badge,
.speed-test-hero .speed-left .speed-title,
.speed-test-hero .speed-left .speed-desc,
.speed-test-hero .speed-left .speed-sep,
.speed-test-hero .speed-left .speed-meta,
.speed-test-hero .speed-left .speed-meta *,
.speed-test-hero .speed-left .speed-ip {
opacity: 1 !important;
transform: none !important;
}
/* Smaller font sizing for the meta row on small screens to keep single-line layout */
@media (max-width: 480px) {
.speed-meta-row { font-size: 0.78rem !important; gap: 8px; }
.speed-ip { font-size: 0.9rem !important; }
}
/* right column - the animated circular speed button */
.speed-right{
flex: 0 0 360px;
display:flex;
justify-content:center;
align-items:center;
position: relative;
min-height: 320px;
}
/* outer animated rings + central button */
.speed-button{
position: relative;
width: 280px;
height: 280px;
display:flex;
align-items:center;
justify-content:center;
cursor: pointer;
transform: translateY(0);
z-index: 3;
pointer-events: auto;
margin-left: 0; /* remove large left offset so button centers correctly */
}
/* anchor-style reset to remove default underline/focus ring when .speed-button is an */
.speed-button {
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
}
.speed-button:focus,
.speed-button:active {
outline: none;
box-shadow: none;
text-decoration: none;
}
.speed-button::-moz-focus-inner { /* remove inner focus border in some browsers */
border: 0;
}
/* outer subtle ring */
.speed-button::before{
content: "";
position: absolute;
inset: 10px;
border-radius: 50%;
border: 6px solid rgba(255, 255, 255, 0.352);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.329);
animation: ring-pulse 2.8s ease-out infinite;
opacity: 0.9;
}
/* second ring - pulsing */
.speed-button::after{
content: "";
position: absolute;
inset: 18px; /* scale relative to parent so rings don't get clipped or shrunk */
border-radius: 50%;
border: 10px solid rgba(255, 255, 255, 0.403);
box-shadow: 0 0 0 rgba(255, 255, 255, 0.341);
animation: ring-pulse 2.8s ease-out infinite;
opacity: 0.85;
}
/* central circle with white border and inner red */
.speed-btn-core{
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
display:flex;
align-items:center;
justify-content:center;
border: 10px solid rgba(255,255,255,0.9);
box-shadow: 0 12px 36px rgba(0,0,0,0.14);
transition: transform 0.28s ease;
}
/* inner red disk */
.speed-btn-core i{
display:inline-block;
width: 64px;
height: 64px;
line-height: 64px;
border-radius: 50%;
text-align: center;
color: #ffffff;
font-size: 34px;
background: linear-gradient(180deg, #ff2a2a, #ff1a1a);
box-shadow: inset 0 -6px 18px rgba(0,0,0,0.18), 0 10px 30px rgba(0,0,0,0.12);
}
/* hover/active effects */
.speed-button:hover .speed-btn-core{
transform: translateY(-8px) scale(1.02);
box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
/* keyframes */
@keyframes ring-pulse{
0%{ transform: scale(0.9); opacity:0.9; }
50%{ transform: scale(1.06); opacity:0.35; }
100%{ transform: scale(0.9); opacity:0.9; }
}
@keyframes ring-rotate{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
/* responsive adjustments */
@media (max-width: 1100px){
.speed-test-inner{
flex-direction: column;
align-items: center; /* center content on narrow screens */
gap: 24px;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* center meta row for narrow screens so date/time/zone visually centers */
.speed-meta-row { justify-content: center; }
/* show browser right after timezone on narrower screens */
.meta-browser { display: inline-block; }
/* center IP/ISP rows on narrow screens */
.speed-ip-line { justify-content: center; }
.speed-isp { text-align: center; }
.speed-right{ width:100%; display:flex; justify-content:center; }
.speed-button{ width:220px; height:220px; }
.speed-btn-core{ width:120px; height:120px; border-width:8px; }
.speed-btn-core i{ width:52px; height:52px; line-height:52px; font-size:26px; }
}
@media (max-width: 640px){
.speed-left{ padding-right: 0; }
.speed-title{ font-size: 2rem; }
.speed-desc{ font-size: 0.98rem; }
/* keep a larger, touch-friendly button on smaller phones */
.speed-button{ width:220px !important; height:220px !important; }
.speed-btn-core{ width:120px; height:120px; border-width:8px; }
.speed-btn-core i{ width:52px; height:52px; line-height:52px; font-size:26px; }
/* tighten ring inset on small phones so outer ring scales proportionally */
.speed-button::after { inset: 14px; border-width: 8px; }
.speed-button::before { inset: 8px; border-width: 6px; }
}
/* Inline Speed Test Panel Styles */
.speed-right { position: relative; }
.speed-inline-panel {
position: absolute;
/* top: 12px; */
/* right: -8px; */
width: 520px;
height: 460px;
z-index: 10;
display: flex;
flex-direction: column;
background: transparent;
border-radius: 6px;
overflow: hidden;
box-shadow: none;
margin-left: 0;
margin-right: 0;
margin-top: 1.25rem;
}
.speed-inline-iframe {
width: 100%;
height: calc(100% - 56px);
border: none;
background: transparent;
flex: 1 1 auto;
}
.speed-inline-result {
height: 56px;
background: transparent;
color: #fff;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
justify-content: center;
}
@media (max-width: 1100px){
.speed-inline-panel { right: 8px; width: 420px; height: 330px; }
}
@media (max-width: 640px){
.speed-inline-panel { position: static; width: 100%; height: 320px; margin-top: 12px; }
.speed-right { position: static; }
}
/* TV Promo Section with Background Image and Overlay */
.tv-promo-section {
position: relative;
width: 100vw;
height: 120vh; /* increased from 100vh to give taller promo area */
display: flex;
align-items: stretch;
justify-content: center;
font-family: 'Montserrat', 'Catamaran', 'Open Sans', sans-serif;
color: #fff;
background: url('/assets/images/home/tv-promo-bg.jpg') center center/cover no-repeat;
overflow: hidden;
padding: 0;
}
.tv-promo-section::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.82); /* Black overlay, adjust opacity as needed */
z-index: 1;
}
/* Layout: 50% left, 50% right */
.tv-promo-inner {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
max-width: 100vw;
margin: 0;
padding: 0;
height: 120vh; /* keep inner container height consistent with section */
z-index: 2;
}
/* Left Column: Display 3 images in 3 columns horizontally */
.promo-rail {
width: 50%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 32px;
padding-top: 0;
padding-right: 0;
margin-top: 0;
background: none;
}
.poster {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
/* box-shadow: 0 8px 32px 0 rgba(0,0,0,0.45); */
overflow: hidden;
/* background: #222; */
margin: 0;
height: 100%;
}
.poster img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin-top: 0;
margin-bottom: 0;
}
/* No gap between posters, flush top and bottom */
.promo-rail .poster:first-child { margin-top: 0; }
.promo-rail .poster:last-child { margin-bottom: 0; }
/* Add margin to right and left of posters */
.promo-rail {
padding-right: 32px;
padding-left: 48px;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.poster {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Right Column: Content */
.promo-content {
width: 50%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 64px 48px 32px;
background: none;
position: relative;
z-index: 2;
}
/* Poster vertical animation keyframes */
@keyframes poster-move-up {
0% { transform: translateY(100%); }
100% { transform: translateY(-100%); }
}
@keyframes poster-move-down {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
/* Animate posters in left column */
.promo-rail .poster {
position: relative;
overflow: hidden;
}
.promo-rail .poster img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
position: relative;
/* No change to width/height */
}
/* Animation for each poster */
.promo-rail .poster:nth-child(1) img {
animation: poster-move-up 18s linear infinite;
}
.promo-rail .poster:nth-child(2) img {
animation: poster-move-down 18s linear infinite;
}
.promo-rail .poster:nth-child(3) img {
animation: poster-move-up 20s linear infinite;
}
/* TV Promo Right Column: precise styling to match provided design */
.promo-topline {
font-size: 0.9rem;
letter-spacing: 3px;
color: #ff4545; /* light orange for the small badge text */
font-weight: 700;
margin-bottom: 12px;
}
.promo-title {
font-family: 'Catamaran', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
font-weight: 800;
font-size: 46px; /* large heading */
line-height: 1.3;
margin: 0 0 18px 0;
color: #ffffff;
}
.promo-title span {
display: inline-block;
color: #ff2a2a; /* orange 'Anytime' */
font-weight: 900;
}
.promo-desc {
color: rgba(255,255,255,0.9);
max-width: 640px;
font-size: 1rem;
margin-bottom: 22px;
line-height: 1.6;
}
.promo-features {
list-style: none;
margin: 0;
padding: 0;
color: rgba(255,255,255,0.95);
}
/* Feature list: circular red badge with white check */
.promo-features li {
margin-left: 50px;
margin-bottom: 12px;
position: relative;
font-weight: 700;
padding-left: 46px; /* room for circular badge */
align-items: center;
display: flex;
}
.promo-features li::before{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(180deg,#ff2a2a,#ff2626);
box-shadow: 0 8px 18px rgba(255, 34, 34, 0.18);
}
.promo-features li::after{
content: '\2713';
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-weight: 900;
font-size: 16px;
}
.pack-chooser {
display: flex;
gap: 18px;
margin-bottom: 28px;
}
.pack-pill {
background-color: #fff; /* inactive: white */
color: #ff2a2a; /* inactive: red text */
padding: 12px 26px;
border-radius: 30px;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
border: 2px solid rgba(255,42,42,0.12);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.pack-pill:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}
.pack-pill.active {
background: linear-gradient(90deg,#ff2a2a,#ff2626); /* active: red */
color: #fff; /* active: white text */
box-shadow: 0 10px 30px rgba(255, 34, 34, 0.18);
border-color: transparent;
}
.promo-body {
gap: 36px;
}
/* Pack content visibility: hide all packs by default and show only the active one.
Use !important to override utility classes like .d-flex so layout doesn't break. */
.promo-content .pack-content {
display: none !important;
}
.promo-content .pack-content.active {
display: flex !important;
align-items: center;
}
.price-card {
background: #ffffff;
color: #ff2a2a;
width: 160px;
height: 120px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 12px 30px rgba(0,0,0,0.45);
flex-shrink: 0;
}
.price-card::after{
/* thin decorative slash across card to match screenshot */
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
background: rgba(0,0,0,0.06);
}
.price-dollar{
position: absolute;
left: 18px;
top: 10px;
font-size: 18px;
color: #333;
font-weight: 800;
}
.price-value{
font-size: 72px;
line-height: 0.9;
font-weight: 900;
color: #ff2a2a;
margin-left: 6px;
}
.price-period{
position: absolute;
right: 12px;
bottom: 12px;
font-size: 14px;
color: #333;
font-weight: 700;
}
/* -- end promo-features -- */
.streaming-badges {
display: flex;
gap: 18px;
margin: 28px 0 26px 0;
align-items: center;
}
.streaming-badges img.stream-logo {
width: auto;
height: 50px;
object-fit: contain;
border-radius: 10px;
}
.promo-cta .btn-tv {
display: inline-block;
background: red;
color: #fff;
text-decoration: none;
padding: 12px 28px;
border-radius: 10px;
font-weight: 800;
}
.promo-cta .btn-tv:hover {
background: #fff;
color: red;
}
/* Responsive adjustments specific to this section only */
@media (max-width: 992px){
.tv-promo-section { height: auto; padding: 40px 0; }
.promo-rail { display: none; }
.promo-content { width: 100%; padding: 28px; }
.promo-title { font-size: 38px; }
.price-card { width: 140px; height: 110px; }
}
/* Strong mobile overrides for TV promo section only (<=420px) - do NOT change other sections */
@media (max-width: 420px) {
html body .tv-promo-section {
height: auto !important;
min-height: auto !important;
padding-top: 68px !important;
padding-bottom: 48px !important; /* reduce bottom gap */
overflow: visible !important;
margin-bottom: 0 !important;
}
html body .tv-promo-section .tv-promo-inner {
flex-direction: column !important;
align-items: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Content block spacing */
html body .tv-promo-section .promo-content {
padding: 12px 16px !important;
width: 100% !important;
box-sizing: border-box !important;
}
html body .tv-promo-section .promo-topline {
line-height: 1.05 !important;
text-align: center !important;
}
/* Title and subtitle: much smaller and centered to try to keep single line */
html body .tv-promo-section .promo-title {
font-size: 1.4rem !important; /* ~22px */
line-height: 1.05 !important;
text-align: center !important;
margin: 0 6px 8px 6px !important;
white-space: normal !important;
font-weight: 800 !important;
}
html body .tv-promo-section .promo-title span {
display: inline !important;
font-size: 1.4rem !important;
color: #ff2a2a !important;
font-weight: 900 !important;
}
/* Subtitle/description: single-line friendly and centered */
html body .tv-promo-section .promo-desc {
font-size: 0.92rem !important;
max-width: 100% !important;
text-align: center !important;
margin: 0 8px 12px 8px !important;
line-height: 1.3 !important;
}
/* Pack chooser: center, shrink pills and keep in one visible row (allow horizontal scroll) */
html body .tv-promo-section .pack-chooser {
justify-content: center !important;
gap: 8px !important;
margin-bottom: 12px !important;
padding: 6px 4px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
html body .tv-promo-section .pack-pill {
padding: 8px 12px !important;
font-size: 0.84rem !important;
text-align: center;
border-radius: 14px !important;
min-width: 72px !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important;
}
html body .tv-promo-section .pack-pill.active {
padding: 8px 12px !important;
}
/* Pack content: stack vertically, price card smaller, features below */
html body .tv-promo-section .promo-body .pack-content.active {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
}
html body .tv-promo-section .price-card {
width: 120px !important;
height: 72px !important;
border-radius: 12px !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
}
html body .tv-promo-section .price-card .price-dollar {
left: 10px !important;
top: 6px !important;
font-size: 12px !important;
}
html body .tv-promo-section .price-card .price-value {
font-size: 24px !important;
margin-left: 4px !important;
}
html body .tv-promo-section .price-card .price-period {
font-size: 11px !important;
right: 8px !important;
bottom: 8px !important;
}
/* Features: one item per row, reduce badge size and left padding */
html body .tv-promo-section .promo-features {
margin-top: 6px !important;
padding-left: 0 !important;
width: 100% !important;
max-width: 320px !important;
box-sizing: border-box !important;
}
html body .tv-promo-section .promo-features li {
margin-left: 0 !important;
margin-bottom: 10px !important;
padding-left: 30px !important;
display: block !important;
font-weight: 500 !important;
line-height: 1.25 !important;
text-align: left !important;
}
html body .tv-promo-section .promo-features li::before{
width: 18px !important;
height: 18px !important;
left: 4px !important;
}
html body .tv-promo-section .promo-features li::after{
left: 8px !important;
font-size: 12px !important;
}
/* Streaming logos: shrink more so more fit in a row */
html body .tv-promo-section .streaming-badges img.stream-logo {
height: 36px !important;
margin: 0 6px !important;
gap: 6px !important;
border-radius: 6px !important;
margin: 0 !important;
}
/* Reduce streaming badges container bottom spacing to limit extra space */
html body .tv-promo-section .streaming-badges {
margin: 8px 0 8px 0 !important;
padding-bottom: 0 !important;
}
/* Ensure transforms don't hide things */
html body .tv-promo-section .promo-title,
html body .tv-promo-section .promo-desc,
html body .tv-promo-section .pack-chooser,
html body .tv-promo-section .promo-body,
html body .tv-promo-section .price-card,
html body .tv-promo-section .promo-features {
transform: none !important;
opacity: 1 !important;
}
}
/* Tighten bottom spacing specifically for small screens to remove residual gap */
@media (max-width: 576px) {
.tv-promo-section {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
min-height: auto !important;
height: auto !important;
overflow: visible !important;
}
.tv-promo-section .tv-promo-inner { padding-bottom: 0 !important; }
.tv-promo-section .promo-content { padding-bottom: 4px !important; }
.tv-promo-section .streaming-badges { margin: 6px 0 0 0 !important; padding-bottom: 0 !important; }
.tv-promo-section .poster { margin-bottom: 0 !important; }
.tv-promo-section .promo-rail { padding-bottom: 0 !important; }
}
/* Collapse poster image area on small screens to remove leftover height */
@media (max-width: 576px) {
.tv-promo-section .tv-promo-inner {
height: auto !important;
min-height: auto !important;
}
.tv-promo-section .promo-rail,
.tv-promo-section .poster {
display: none !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.tv-promo-section .poster img,
.tv-promo-section .promo-rail img {
display: none !important;
height: 0 !important;
max-height: 0 !important;
width: 0 !important;
overflow: hidden !important;
}
}
/* Special Offer Banner styles (matches attached screenshot) */
.special-offer-section {
background: linear-gradient(90deg,#ff2b2b 0%, #ff1a1a 100%);
padding: 28px 0;
color: #fff;
height: 300px;
}
.special-offer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 12px 40px;
}
.offer-left {
flex: 0 0 auto;
}
.offer-bubble {
display: block;
width: 160px;
height: auto;
}
.offer-center {
flex: 1 1 50%;
text-align: left;
}
.offer-heading {
font-size: 52px;
font-weight: 600;
padding-left: 30px;
margin: 0;
line-height: 1.3;
color: #fff;
font-family: 'Catamaran', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
.offer-sub {
display: block;
font-size: 52px;
font-weight: 600;
font-family: 'Catamaran', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
.offer-right {
flex: 0 0 auto;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
.countdown { display: flex; align-items: center; gap: 18px; }
.countdown-item { text-align: center; min-width: 120px; }
.countdown-value { font-size: 56px; font-weight: 900; color: #fff; }
.countdown-label { font-size: 16px; color: rgba(255,255,255,0.9); margin-top: 6px; }
.countdown-sep { width: 2px; height: 60px; background: rgba(255,255,255,0.12); }
@media (max-width: 992px) {
.special-offer-inner { flex-direction: column; text-align: center; padding: 18px; }
.offer-center { order: 2; }
.offer-left { order: 1; }
.offer-right { order: 3; }
.countdown { justify-content: center; gap: 12px; }
.countdown-item { min-width: 72px; }
.countdown-value { font-size: 36px; }
.offer-heading, .offer-sub { font-size: 28px; }
}
.offer-badge {
width: 230px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
/* Mobile-only: tighten special-offer layout, shrink badge and countdown so
the timer doesn't overflow on phones. Scope <= 768px only so larger
breakpoints are unaffected. */
@media (max-width: 768px) {
html body .special-offer-section {
height: auto !important;
padding: 14px 0 !important;
overflow: visible !important;
}
html body .special-offer-inner {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
padding: 10px 14px !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* shrink the decorative/badge image so it doesn't dominate the row */
html body .special-offer-inner .offer-left,
html body .special-offer-inner .offer-left .offer-bubble,
html body .special-offer-inner .offer-badge {
width: 100px !important;
max-width: 36vw !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
}
/* center heading and reduce size to fit single line on small screens */
html body .special-offer-inner .offer-center {
text-align: center !important;
padding: 0 !important;
}
/* Keep heading and subtitle compact; show them inline on a single row */
html body .special-offer-inner .offer-heading,
html body .special-offer-inner .offer-sub {
display: inline-block !important;
white-space: nowrap !important; /* force single row */
vertical-align: middle !important;
font-size: 18px !important;
line-height: 1.02 !important;
padding-left: 0 !important;
margin: 0 6px !important;
overflow: visible !important;
}
/* Force the center block to layout its two lines inline without wrapping
and scale the font to fit narrower phones. Using clamp() gives smooth
scaling between very small and larger phones. */
html body .special-offer-inner .offer-center {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
flex-wrap: nowrap !important; /* prevent break onto two lines */
}
html body .special-offer-inner .offer-heading,
html body .special-offer-inner .offer-sub {
/* responsive sizing: don't exceed 18px, but shrink on tiny viewports */
font-size: clamp(14px, 4.5vw, 18px) !important;
line-height: 1 !important;
margin: 0 6px !important;
}
/* Remove hard
line-breaks inside the special-offer on small screens so
the two phrases display inline on one row. Targets any
inside the
center/heading elements used in the HTML. */
html body .special-offer-inner .offer-center br,
html body .special-offer-inner .offer-heading br,
html body .special-offer-inner .offer-sub br {
display: none !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Tighten countdown blocks so they wrap and don't overflow */
html body .special-offer-inner .countdown {
justify-content: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
width: 100% !important;
}
html body .special-offer-inner .countdown-item {
min-width: 56px !important;
padding: 4px 6px !important;
box-sizing: border-box !important;
}
html body .special-offer-inner .countdown-value {
font-size: 28px !important;
line-height: 1 !important;
}
html body .special-offer-inner .countdown-label {
font-size: 12px !important;
margin-top: 4px !important;
}
html body .special-offer-inner .countdown-sep {
display: block !important;
width: 2px !important;
height: 38px !important;
margin: 0 6px !important;
background: rgba(255,255,255,0.12) !important;
}
/* right side (if present) should stack and center */
html body .special-offer-inner .offer-right {
width: 100% !important;
text-align: center !important;
}
}
/* FAQ Section Styles */
.faq-section {
padding: 60px 0;
background: #fff;
width: 100vw;
padding: 0;
font-family: 'Catamaran', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
.faq-container {
display: flex;
gap: 40px;
align-items: stretch;
/* max-width: 100vw; */
margin: 0;
}
.faq-left {
flex: 1 1 56%;
padding-top: 10rem;
padding-bottom: 10rem;
padding-left: 32px;
}
.faq-right { flex: 1 1 44%;
position: relative;
min-height: 520px; }
.faq-intro .faq-badge {
display: inline-block;
color: #ff2b2b;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 12px;
}
.faq-title {
font-size: 40px;
font-weight: 800;
margin: 6px 0 26px; }
.faq-title span {
color: #ff2b2b;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 18px; }
.faq-item { background: #fff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.04);
}
.faq-head {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 22px 28px;
background: transparent;
border: none;
cursor: pointer;
font-size: 18px;
text-align: left;
}
.faq-question {
font-weight: 700;
color: #111;
max-width: 92%;
}
.faq-arrow {
color: #ff2b2b;
font-size: 20px;
transform: rotate(90deg);
transition: transform 0.28s ease;
}
.faq-item.open .faq-arrow {
transform: rotate(0deg);
}
.faq-body {
padding: 0 28px 22px 28px;
color: #555;
font-size: 15px;
display: none;
}
.faq-item.open .faq-body {
display: block;
}
.faq-cta {
margin-top: 26px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 26px rgba(0,0,0,0.06);
width: 100%;
position: relative;
background-image: linear-gradient(rgb(255, 26, 26), rgba(255, 26, 26, 0.3)), url('../images/home/faq-pattern.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.faq-cta::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 1, 1, 0.12);
pointer-events: none;
border-radius: 18px;
}
.faq-cta-left {
flex: 1;
padding: 28px 32px;
color: #fff;
position: relative;
z-index: 2;
}
.faq-cta-left h3 {
margin: 0;
font-size: 20px;
font-weight: 700;
}
.faq-cta-right {
padding: 0 24px;
display: flex;
align-items: center;
z-index: 2;
}
.faq-cta .btn-cta.small {
padding: 12px 20px;
border-radius: 8px;
background: #fff; /* white button */
color: #ff2a2a; /* red text */
font-weight: 700;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
border: none;
}
.faq-right-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
align-items: right;
padding: 0;
margin: 0;
right: -12px;
/* width: calc(100% + 24px); */
z-index: 0; /* keep image beneath overlay and content */
background-image:url('../images/home/faq-bg.jpg');
}
/* subtle overlay placed above the background image to improve contrast
while still allowing the image to be visible */
.faq-right-bg::after {
content: '';
position: absolute;
inset: 0;
/* Low-opacity colored overlay - tweak rgba value to change color/strength */
background: rgba(10, 2, 4, 0.297); /* faint red tint matching theme */
pointer-events: none;
z-index: 1;
}
.faq-socials {
position: absolute;
bottom: 40px;
text-align: center;
left: 50%;
transform: translateX(-50%);
margin: 0 auto;
z-index: 2; /* keep social icons above overlay */
color: #fff; /* ensure title/icon contrast over the overlay */
}
.social-title {
margin-bottom: 12px;
opacity: 0.95;
}
.social-icons {
display: flex;
gap: 12px;
justify-content: center;
}
.social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 8px;
background: rgb(255, 0, 0);
color: #fff;
font-size: 16px;
text-decoration: none;
}
@media (max-width: 992px) {
.faq-container { flex-direction: column; }
.faq-left, .faq-right { flex: 1 1 auto; }
.faq-right { min-height: 320px; }
.faq-title { font-size: 28px; }
/* restore bg sizing on stacked layout to avoid overflow */
.faq-right-bg {
right: 0;
width: 100%;
}
}
/* Mobile-specific FAQ tweaks (only affect small screens):
- center all FAQ items horizontally
- reduce top/bottom padding for the section and left/right gutters
- shrink the "Still Have Questions" CTA card and reduce its bottom spacing
These overrides are intentionally scoped to max-width: 576px so desktop/tablet
styling remains unchanged. */
@media (max-width: 576px) {
.faq-section {
padding-top: 18px;
padding-bottom: 18px;
}
.faq-container {
flex-direction: column;
align-items: center;
gap: 16px;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
/* Reduce the large vertical paddings coming from .faq-left/.faq-right */
.faq-left,
.faq-right {
flex: 1 1 auto;
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 12px;
padding-right: 12px;
}
/* ensure the right column keeps enough height so the background image is visible
and scale the background larger so the subject appears clearly on small screens */
.faq-right {
min-height: 280px;
min-width: 90vw;
}
.faq-right-bg {
background-size: 160% auto; /* enlarge image horizontally */
background-position: center right; /* bias the image to the right so subject shows */
background-repeat: no-repeat;
right: 0;
}
/* Make accordion and each item centered and constrained for equal left/right spacing */
.faq-accordion {
width: 100%;
max-width: 420px;
margin: 0 auto;
gap: 12px;
box-sizing: border-box;
}
.faq-item {
width: 100%;
max-width: 420px;
margin-left: auto;
margin-right: auto;
border-radius: 12px;
}
/* Center the question and arrow so each item appears equally centered horizontally */
.faq-head {
justify-content: center;
gap: 12px;
padding: 14px 18px;
}
.faq-question {
text-align: center;
max-width: calc(100% - 48px);
}
.faq-arrow { /* keep arrow visible next to the question */
transform: rotate(90deg);
}
.faq-body { padding: 0 18px 16px 18px; }
/* Shrink the 'Still Have Questions' CTA card and reduce its bottom spacing */
.faq-cta {
margin-top: 16px;
margin-bottom: 12px;
padding: 12px;
border-radius: 12px;
background-size: cover;
width: 90vw;
height: 150px;
}
.faq-cta-left h3 {
font-size: 1rem;
padding-top: 1rem;
}
.faq-cta-left p {
font-size: 0.8rem;
padding-top: 1rem;
}
.faq-cta-left { padding: 12px; }
.faq-cta-right { padding: 8px; }
.faq-cta .btn-cta.small {
padding: 10px 14px;
font-size: 0.8rem;
border-radius: 8px;
}
/* Keep social icons centered and slightly higher so they remain visible */
.faq-socials { bottom: 18px; left: 50%; transform: translateX(-50%); }
}
/* Animations for Our Services section */
@keyframes slideInLeft {
from { transform: translateX(-30px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes cardIn {
from { transform: translateX(-24px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* typing keyframes specific to the Services word (8 characters) */
@keyframes typing-8 {
from { max-width: 0ch; }
to { max-width: 8ch; }
}
/* Badge slides in first */
.our-services-section.in-view .services-badge {
display: inline-block;
transform: translateX(-30px);
opacity: 0;
animation: slideInLeft 0.56s cubic-bezier(.2,.9,.2,1) forwards;
animation-delay: 0.18s;
}
/* Title slides in after the badge */
.our-services-section.in-view .services-title {
transform: translateX(-30px);
opacity: 0;
animation: slideInLeft 0.6s cubic-bezier(.2,.9,.2,1) forwards;
animation-delay: 0.36s;
}
/* Typing reveal for the single word inside the title */
/* .our-services-section.in-view .services-title-highlight {
color: #f91414;
font-weight: 800;
display: inline-block;
overflow: hidden;
white-space: nowrap;
max-width: 0ch;
box-sizing: border-box;
vertical-align: baseline;
animation: typing-8 1.2s steps(8,end) forwards;
animation-delay: 0.9s;
transform: translateY(-0.04em);
vertical-align: middle;
padding-right: 0;
} */
/* Service cards: staggered slide-in from left */
.our-services-section.in-view .row.justify-content-center.mb-5 .service-card {
transform: translateX(-24px);
opacity: 0;
animation: cardIn 0.6s cubic-bezier(.2,.9,.2,1) forwards;
}
.our-services-section.in-view .row.justify-content-center.mb-5 > .col-md-3:nth-child(1) .service-card { animation-delay: 0.85s; }
.our-services-section.in-view .row.justify-content-center.mb-5 > .col-md-3:nth-child(2) .service-card { animation-delay: 0.98s; }
.our-services-section.in-view .row.justify-content-center.mb-5 > .col-md-3:nth-child(3) .service-card { animation-delay: 1.12s; }
.our-services-section.in-view .row.justify-content-center.mb-5 > .col-md-3:nth-child(4) .service-card { animation-delay: 1.26s; }
@media (prefers-reduced-motion: reduce) {
.our-services-section .services-badge,
.our-services-section .services-title,
.our-services-section .services-title-highlight,
.our-services-section .service-card {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* QR card (left) and Consult card (right) animations */
@keyframes slideInRight {
from { transform: translateX(30px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Bounce-in from left for accented network title */
@keyframes bounceInLeft {
0% { transform: translateX(-60px) scaleX(0.99); opacity: 0; }
60% { transform: translateX(12px) scaleX(1.02); opacity: 1; }
80% { transform: translateX(-6px) scaleX(0.995); }
100% { transform: translateX(0) scaleX(1); opacity: 1; }
}
.our-services-section.in-view .qr-card {
transform: translateX(-28px);
opacity: 0;
animation: slideInLeft 0.64s cubic-bezier(.2,.9,.2,1) forwards;
animation-delay: 1.05s; /* start slightly after service cards */
}
.our-services-section.in-view .consult-card-modern {
transform: translateX(28px);
opacity: 0;
animation: slideInRight 0.64s cubic-bezier(.2,.9,.2,1) forwards;
animation-delay: 1.18s; /* start slightly after qr-card */
}
@media (prefers-reduced-motion: reduce) {
.our-services-section .qr-card,
.our-services-section .consult-card-modern {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* Network Highlight Entrance Animations */
/* Left images: start off-screen to the left and come in together */
.network-feature-card,
.network-feature-card .network-feature-img {
transform: translateX(-40px);
opacity: 0;
will-change: transform, opacity;
}
.network-highlight-section.in-view .network-feature-card,
.network-highlight-section.in-view .network-feature-card .network-feature-img {
animation: slideInLeft 0.8s cubic-bezier(.2,.9,.2,1) forwards;
/* same delay so they all come in together */
animation-delay: 0.18s;
}
/* Right platform image slides in from the right */
.network-highlight-right .network-highlight-image {
transform: translateX(40px);
opacity: 0;
will-change: transform, opacity;
}
.network-highlight-section.in-view .network-highlight-right .network-highlight-image {
animation: slideInRight 0.9s cubic-bezier(.2,.9,.2,1) forwards;
animation-delay: 0.24s;
}
/* Text content on the right animates left-to-right in a gentle stagger */
.network-highlight-right .network-highlight-badge,
.network-highlight-right .network-highlight-title,
.network-highlight-right .network-highlight-desc,
.network-highlight-right .network-highlight-stats,
.network-highlight-right .network-highlight-devices,
.network-highlight-right .network-highlight-actions {
transform: translateX(-24px);
opacity: 0;
will-change: transform, opacity;
}
/* Accent word inside the network title: prepare for bounce-in from left */
.network-highlight-title-accent {
display: inline-block;
transform: translateX(-18px);
opacity: 0;
will-change: transform, opacity;
}
.network-highlight-section.in-view .network-highlight-title-accent {
animation: bounceInLeft 0.9s cubic-bezier(.34,1.56,.64,1) forwards;
animation-delay: 0.22s; /* small stagger after title */
}
@media (prefers-reduced-motion: reduce) {
.network-highlight-title-accent {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
.network-highlight-section.in-view .network-highlight-badge {
animation: slideInLeft 0.6s ease-out forwards;
animation-delay: 0.12s;
}
.network-highlight-section.in-view .network-highlight-title {
animation: slideInLeft 0.7s ease-out forwards;
animation-delay: 0.20s;
}
.network-highlight-section.in-view .network-highlight-desc {
animation: slideInLeft 0.7s ease-out forwards;
animation-delay: 0.34s;
}
.network-highlight-section.in-view .network-highlight-stats {
animation: slideInLeft 0.7s ease-out forwards;
animation-delay: 0.46s;
}
.network-highlight-section.in-view .network-highlight-devices {
animation: slideInLeft 0.7s ease-out forwards;
animation-delay: 0.60s;
}
.network-highlight-section.in-view .network-highlight-actions {
animation: slideInLeft 0.7s ease-in forwards;
animation-delay: 0.76s;
}
/* Smooth reveal for stat numbers (will be filled by JS counter) */
.network-stat-value {
transition: transform .6s ease, opacity .6s ease;
opacity: 0;
transform: translateY(6px);
}
.network-highlight-section.in-view .network-stat-value {
opacity: 1;
transform: translateY(0);
animation: counterGrow .9s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
.network-feature-card,
.network-feature-card .network-feature-img,
.network-highlight-right .network-highlight-image,
.network-highlight-right .network-highlight-badge,
.network-highlight-right .network-highlight-title,
.network-highlight-right .network-highlight-desc,
.network-highlight-right .network-highlight-stats,
.network-highlight-right .network-highlight-devices,
.network-highlight-right .network-highlight-actions {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* Speed Test Hero: left column entrance animations (staggered slide-in from left) */
.speed-left .speed-badge,
.speed-left .speed-title,
.speed-left .speed-desc,
.speed-left .speed-sep,
.speed-left .speed-meta{
transform: translateX(-20px);
opacity: 0;
will-change: transform, opacity;
}
.speed-test-hero.in-view .speed-left .speed-badge{
animation: slideInLeft 0.90s cubic-bezier(.22,.9,.3,1) both;
animation-delay: 0.08s;
}
.speed-test-hero.in-view .speed-left .speed-title{
animation: slideInLeft 1.00s cubic-bezier(.22,.9,.3,1) both;
animation-delay: 0.18s;
}
.speed-test-hero.in-view .speed-left .speed-desc{
animation: slideInLeft 1.12s cubic-bezier(.22,.9,.3,1) both;
animation-delay: 0.28s;
}
.speed-test-hero.in-view .speed-left .speed-sep{
animation: slideInLeft 1.00s cubic-bezier(.22,.9,.3,1) both;
animation-delay: 0.36s;
}
.speed-test-hero.in-view .speed-left .speed-meta{
animation: slideInLeft 1.12s cubic-bezier(.22,.9,.3,1) both;
animation-delay: 0.44s;
}
@media (prefers-reduced-motion: reduce) {
.speed-left .speed-badge,
.speed-left .speed-title,
.speed-left .speed-desc,
.speed-left .speed-sep,
.speed-left .speed-meta{
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* TV Promo (right column) — animate children only when section receives .in-view
Keep content visible by default; apply a slide-in animation when .in-view is present.
Uses the existing @keyframes slideInLeft to match site timing and feel. */
/* Ensure children are visible by default (do not hide when JS hasn't added .in-view) */
.tv-promo-section .promo-content > * {
opacity: 1;
transform: none;
transition: none;
}
/* When section is revealed, run slide-in animation with staggered delays */
.tv-promo-section.in-view .promo-content > * {
opacity: 0;
transform: translateX(-30px);
animation: slideInLeft 560ms cubic-bezier(.22,.9,.35,1) forwards;
}
.tv-promo-section.in-view .promo-content > :nth-child(1) { animation-delay: 0ms; }
.tv-promo-section.in-view .promo-content > :nth-child(2) { animation-delay: 80ms; }
.tv-promo-section.in-view .promo-content > :nth-child(3) { animation-delay: 160ms; }
.tv-promo-section.in-view .promo-content > :nth-child(4) { animation-delay: 240ms; }
.tv-promo-section.in-view .promo-content > :nth-child(5) { animation-delay: 320ms; }
.tv-promo-section.in-view .promo-content > :nth-child(6) { animation-delay: 400ms; }
.tv-promo-section.in-view .promo-content > :nth-child(7) { animation-delay: 480ms; }
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.tv-promo-section.in-view .promo-content > * {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* Per-character split heading animation (for the 'Anytime' word) */
@keyframes sideSlide {
from { transform: translateX(-10px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.wdt-split-heading-wrapper { display: inline-block; line-height: 1; }
.wdt-split-heading-title { display: inline-block; will-change: transform, opacity; }
/* Run animation only when the section is revealed */
.tv-promo-section.in-view .wdt-split-heading-title {
/* slowed so each character is visible */
animation: sideSlide 1s cubic-bezier(.22,.9,.35,1) forwards;
animation-delay: var(--delay, 200ms);
}
@media (prefers-reduced-motion: reduce) {
.tv-promo-section.in-view .wdt-split-heading-title {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* FAQ Section entrance animations */
.faq-section .faq-left,
.faq-section .faq-right,
.faq-section .faq-right .faq-socials {
opacity: 0;
transform: translateY(20px);
transition: transform 0.7s cubic-bezier(.22,.9,.3,1), opacity 0.6s ease-out;
will-change: transform, opacity;
}
/* Animate the background image of the right column separately so it slides in from the right */
.faq-right .faq-right-bg {
/* start slightly off to the right and hidden */
transform: translateX(48px);
opacity: 0;
transition: transform 0.9s cubic-bezier(.22,.9,.3,1), opacity 0.7s ease-out;
will-change: transform, opacity;
}
/* When the right column is revealed, bring the bg image into view */
.faq-right.animated .faq-right-bg,
.faq-right.animated > .faq-right-bg {
transform: translateX(0);
opacity: 1;
}
/* Social area should rise from bottom on top of the background image */
.faq-right .faq-socials {
transform: translateY(36px) translateX(-50%);
opacity: 0;
transition: transform 0.7s cubic-bezier(.22,.9,.3,1) 0.28s, opacity 0.6s ease-out 0.28s;
}
.faq-right.animated .faq-socials {
transform: translateY(0) translateX(-50%);
opacity: 1;
}
/* from-left / from-right / from-up helpers */
.animate-from-left { transform: translateX(-48px); }
.animate-from-right { transform: translateX(48px); }
.animate-from-up { transform: translateY(36px); }
/* when our scroll observer adds .animated these reset to visible */
.animate-from-left.animated,
.animate-from-right.animated,
.animate-from-up.animated {
transform: translateX(0) translateY(0);
opacity: 1;
}
/* small stagger for content inside the left column */
.faq-left .stagger-item { transition: transform 0.7s cubic-bezier(.22,.9,.3,1), opacity 0.6s ease-out; opacity: 0; transform: translateX(-12px); }
.faq-left.animated .stagger-item { opacity: 1; transform: translateX(0); }
/* reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
.faq-section .faq-left,
.faq-section .faq-right,
.faq-section .faq-right .faq-socials,
.faq-left .stagger-item {
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* Typing animation for the FAQ heading word/phrase
Triggered when the left column receives .animated (so it doesn't run until in-view)
This targets only the span with class .faq-typing so it doesn't affect other text. */
.faq-typing {
display: inline-block;
overflow: hidden;
white-space: nowrap;
max-width: 0ch; /* hidden until animation runs */
box-sizing: border-box;
vertical-align: middle;
padding-right: 0;
transform: translateY(-0.03em);
animation: typing 2.4s steps(12, end) forwards;
}
@keyframes faqTyping {
0% { max-width: 0ch; }
to { max-width: 18ch; }
}
/* caret (pseudo-element) — subtle blinking caret to accompany typing */
.faq-typing::after {
/* hidden by default per request to hide typing cursor */
display: none !important;
content: '';
}
@keyframes faqCaret {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* Run the typing animation only when the left column is animated (in view)
Use steps with a character count roughly matching the phrase length so it looks like typing. */
.faq-left.animated .faq-typing {
animation: faqTyping 1.2s steps(18, end) 120ms forwards;
}
@media (prefers-reduced-motion: reduce) {
.faq-typing,
.faq-typing::after {
animation: none !important;
max-width: none !important;
opacity: 1 !important;
}
.faq-typing::after { display: none !important; }
}
.review-typing {
display: inline-block;
overflow: hidden;
white-space: nowrap;
max-width: 0ch; /* hidden until animation runs */
box-sizing: border-box;
vertical-align: middle;
padding-right: 0;
transform: translateY(-0.03em);
animation: typing 2.4s steps(12, end) forwards;
}
@keyframes review-typing {
from { max-width: 0ch; }
to { max-width: 18ch; }
}
/* caret (pseudo-element) — subtle blinking caret to accompany typing */
.review-typing::after {
/* hidden by default per request to hide typing cursor */
display: none !important;
content: '';
}
/* Slide-down helper for header areas (reviews header) */
.animate-from-top {
transform: translateY(-18px);
opacity: 0;
transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 420ms ease;
will-change: transform, opacity;
}
.animate-from-top.animated,
.animate-from-top.in-view {
transform: translateY(0);
opacity: 1;
}
/* Hint the browser to optimize the review-typings header animation (non-invasive) */
.clients-header.animate-on-scroll {
will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.animate-from-top {
transform: none !important;
opacity: 1 !important;
transition: none !important;
}
}
.price-typing {
display: inline-block;
overflow: hidden;
white-space: nowrap;
max-width: 0ch; /* hidden until animation runs */
box-sizing: border-box;
vertical-align: middle;
padding-right: 0.5rem; /* small breathing room so last glyph isn't clipped */
transform: translateY(-0.03em);
animation: typing 2.4s steps(12, end) forwards;
}
@keyframes price-typing {
from { max-width: 0ch; }
to { max-width: 18ch; }
}
/* caret (pseudo-element) — subtle blinking caret to accompany typing */
.price-typing::after {
/* hidden by default per request to hide typing cursor */
display: none !important;
content: '';
}
.tv-promo-typing {
display: inline-block;
overflow: hidden;
white-space: nowrap;
max-width: 0ch; /* hidden until animation runs */
box-sizing: border-box;
vertical-align: middle;
padding-right: 0.5rem; /* small breathing room so last glyph isn't clipped */
transform: translateY(-0.03em);
animation: tv-promo-typing 2.4s steps(12, end) forwards;
}
@keyframes tv-promo-typing {
from { max-width: 0ch; }
/* expand to a generous max so the full phrase is revealed without clipping */
to { max-width: 30ch; }
}
@media (prefers-reduced-motion: reduce) {
.tv-promo-typing {
animation: none !important;
max-width: none !important;
overflow: visible !important;
}
}
/* caret (pseudo-element) — subtle blinking caret to accompany typing */
.tv-promo-typing::after {
/* hidden by default per request to hide typing cursor */
display: none !important;
content: '';
}
.services-typing {
display: inline-block;
overflow: hidden;
white-space: nowrap;
max-width: 0ch; /* hidden until animation runs */
box-sizing: border-box;
vertical-align: middle;
padding-right: 0.5rem; /* small breathing room so last glyph isn't clipped */
transform: translateY(-0.03em);
animation: services-typing 4.4s steps(24, end) forwards;
}
@keyframes services-typing {
from { max-width: 0ch; }
/* expand to a generous max so the full phrase is revealed without clipping */
to { max-width: 30ch; }
}
@media (prefers-reduced-motion: reduce) {
.services-typing {
animation: none !important;
max-width: none !important;
overflow: visible !important;
}
}
/* caret (pseudo-element) — subtle blinking caret to accompany typing */
.services-typing::after {
/* hidden by default per request to hide typing cursor */
display: none !important;
content: '';
}
.speedtest-page {
width: 100vw;
height: 100vh;
padding-top: 4rem;
padding-bottom: 0;
margin: 0;
}
/* =========================
Responsive helpers (append)
========================= */
/* Core fluid rules */
:root {
--site-max-width: 1200px;
--gutter: 16px;
}
*,
*::before,
*::after { box-sizing: border-box; }
/* Make media scale down neatly */
img, picture, video, svg, iframe {
max-width: 100%;
height: auto;
display: block;
}
/* Ensure content containers have consistent padding on small screens */
.container,
.about-container,
.footer-main-container,
.speedtest-page .container {
padding-left: var(--gutter);
padding-right: var(--gutter);
margin-left: auto;
margin-right: auto;
}
/* Limit extremely wide containers on large screens */
@media (min-width: 1200px) {
.container { max-width: var(--site-max-width); }
}
/* Flexible rows/columns: allow wrapping and sensible min widths */
.row { display: flex; flex-wrap: wrap; gap: 16px; }
[class*="col-"] { flex: 1 1 0%; min-width: 220px; }
/* Cards & utility blocks become full width inside small columns */
.pricing-card,
.network-feature-card,
.speed-test-hero,
.pricing-card-info,
.pricing-card-features,
.contact-form-col-left,
.contact-info-card {
width: 100%;
box-sizing: border-box;
}
/* Hero & text scaling for small/very-large screens */
.hero-title {
font-size: clamp(1.8rem, 4.2vw, 3.6rem);
line-height: 1.05;
word-break: break-word;
}
.hero-description {
font-size: clamp(.95rem, 2.4vw, 1.15rem);
}
/* Modal dialogs: fit small screens */
.modal-dialog {
max-width: calc(100% - 32px);
margin: 1.5rem auto;
}
/* Preloader center + sizing */
#preloader .preloader-inner {
max-width: 360px;
margin: 0 auto;
padding: 12px;
}
/* Header / nav small-screen fallback (works with JS in includes-loader.js -> initHeader) */
.main-header { width: 100%; }
.header-menu { transition: none; }
.nav-toggle { display: none; }
@media (max-width: 900px) {
.nav-toggle { display: block; }
.header-menu { width: 100%; display: none; }
.header-menu.open { display: block; }
.navbar-nav { flex-direction: column; gap: 8px; }
}
/* Footer: stack columns cleanly on small screens (reinforce existing rules) */
.footer-main-container { width: 100%; }
@media (max-width: 900px) {
.footer-top-row, .footer-bottom-row { flex-direction: column; align-items: stretch; gap: 18px; text-align: left; }
.footer-legal-col, .footer-copyright-col { text-align: left; }
}
/* Tables & code blocks: make scrollable on small screens */
table { width: 100%; table-layout: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }
/* Small-screen fine-tuning */
@media (max-width: 768px) {
.hero-title { font-size: clamp(1.6rem, 6vw, 2.6rem); text-align: center; padding: 0 6px; }
.hero-description { text-align: center; padding: 0 10px; }
.connect-today { letter-spacing: 1px; }
.pricing-card { padding: 12px; }
.footer-social-links { justify-content: flex-start; }
}
/* Preserve spacing for components that animate on scroll */
.animate-on-scroll { will-change: opacity, transform; }
/* End responsive helpers */
/* ==========================
Additional targeted mobile fixes
(small-screen centering, one-per-row cards, nav toggle color)
==========================
*/
/* Toggler icon: use simple 3-bar icon using currentColor so we can switch color via .scrolled */
.custom-navbar { z-index: 1035; }
.navbar-toggler { z-index: 1060; border: none;
/* color: #ffffff; */
}
/* On small screens place the toggler to the right so it never overlaps the logo */
@media (max-width: 991.98px) {
/* Place CTA at the far right */
.navbar-cta { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
/* By default reserve ~140px for CTA so toggler doesn't overlap; when .nav-open is set we move toggler back */
.navbar-toggler { position: absolute; right: calc(12px + 140px); top: 50%; transform: translateY(-50%); }
.custom-navbar.nav-open .navbar-toggler { right: 12px; }
.custom-navbar.nav-open .navbar-cta { display: none !important; }
.navbar-brand { margin-left: 1rem; margin-right: 160px; }
}
/* Right-side slide-out menu on mobile when open. Place toggler to the left of it and align from top. */
@media (max-width: 991.98px) {
:root { --mobile-menu-width: 300px; }
/* Hide collapse by default (mobile) and show as slide-out when nav-open */
.custom-navbar .navbar-collapse {
display: none !important;
}
.custom-navbar.nav-open .navbar-collapse {
position: fixed;
top: 0;
right: 0;
width: var(--mobile-menu-width);
height: 100vh;
background: rgba(0,0,0,0.88);
padding-top: 80px; /* leave space for header area */
display: block !important;
overflow-y: auto;
z-index: 1050;
-webkit-overflow-scrolling: touch;
}
/* style nav list inside the slide-out for good spacing */
.custom-navbar.nav-open .navbar-nav {
flex-direction: column !important;
gap: 20px;
padding: 12px 18px;
align-items: flex-start;
}
/* Move toggler to the left of the menu drawer and align from top */
.custom-navbar.nav-open .navbar-toggler {
/* when moved inside the drawer this rule won't apply; keep a fallback for placement */
right: calc(var(--mobile-menu-width) + 14px) !important;
top: 18px !important;
transform: none !important;
}
/* Ensure the toggler remains visible above the drawer */
.custom-navbar .navbar-toggler { z-index: 1100; }
}
/* When the toggler is moved into the collapse (drawer), ensure it is positioned inside the drawer
We target an instance where the .navbar-toggler is a child of .navbar-collapse. */
.navbar-collapse > .navbar-toggler {
position: absolute !important;
left: 16px !important;
top: 12px !important;
transform: none !important;
color: #fff !important;
background: transparent !important;
border: none !important;
z-index: 1110 !important;
}
/* Reduce logo size on small screens so toggler doesn't overlap */
@media (max-width: 576px) {
.logo-img { height: 44px; }
.logo-text { font-size: 1.4rem; margin-left: 0.5rem; }
}
.custom-navbar .navbar-toggler-icon {
background-image: none !important;
width: 28px;
height: 18px;
display: inline-block;
position: relative;
background-repeat: no-repeat;
background-position: center;
/* draw the middle bar using a centered 2px-high background strip */
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 2px;
}
.custom-navbar .navbar-toggler-icon::before,
.custom-navbar .navbar-toggler-icon::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: currentColor;
}
.custom-navbar .navbar-toggler-icon::before { top: 0; }
.custom-navbar .navbar-toggler-icon::after { bottom: 0; }
.custom-navbar.scrolled .navbar-toggler { color: #c62828; } /* red when scrolled */
/* Ensure collapse sits behind the toggler when open */
.navbar-collapse { z-index: 1020; }
/* Services: show 1 card per row on small/mobile and center content */
@media (max-width: 576px) {
.our-services-section .col-md-3,
.our-services-section .col-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.service-card { padding: 14px; text-align: center; }
.service-list { display: none; } /* hide long lists on very small screens for compactness */
/* QR and Consult cards: stack, full width, compact height */
.qr-card, .consult-card {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 14px !important;
gap: 10px;
}
.qr-card .qr-card-img img.qr-img {
max-width: 260px; width: 100%; height: auto; margin: 0 auto; display: block;
}
.consult-card .consult-bg-img { width: 100%; height: 160px; background-size: cover; background-position: center; display: block; }
.consult-card .consult-card-content { width: 100%; }
/* Network highlight: left images taller, stack columns */
.network-highlight-section .network-highlight-left { display: flex; flex-direction: column; gap: 12px; }
.network-feature-card .network-feature-img { width: 100%; height: 160px; object-fit: cover; display: block; }
.network-highlight-right .network-highlight-content { text-align: center; display: flex; flex-direction: column; align-items: center; }
.network-platform-img { max-width: 220px; width: 60%; margin: 12px auto 0; }
/* Speed test: center button */
.speed-test-hero .speed-test-inner { flex-direction: column; gap: 18px; align-items: center; }
.speed-test-hero .speed-right { order: 2; display: flex; justify-content: center; }
.speed-button { width: 84px; height: 84px; display: inline-flex; align-items: center; justify-content: center; }
/* Movie feature: center text and reduce background height to avoid overflow */
.movie-feature-content { margin: 0 auto; text-align: center; padding: 18px; }
.movie-feature-bg-img { width: 100%; height: auto; max-height: 260px; object-fit: cover; }
/* Pricing: one card per row, reduce size */
.pricing-container .pricing-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pricing-card { padding: 12px; font-size: 0.95rem; }
.pricing-card .pricing-card-name { font-size: 1.05rem; }
.pricing-side-card { display: none; }
/* TV Promo: stack pack contents and center */
.promo-body { flex-direction: column !important; align-items: center !important; gap: 12px; }
.pack-content { width: 100%; justify-content: center; }
.price-card { margin: 0 auto; }
.promo-features { text-align: center; }
/* Special offer: stack and center countdown */
.special-offer-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.countdown { display:flex; gap:10px; justify-content:center; }
/* FAQ: stack columns and center */
.faq-container { display: flex; flex-direction: column; gap: 18px; }
.faq-right { order: 2; }
/* Reviews & Clients: ensure images don't overflow */
.review-avatar, .clients-logo img { max-width: 100%; height: auto; display: block; }
/* Footer: stack and center */
footer, .footer-main-container, .footer-top-row { text-align: center; }
}
/* Moderate small screens (tablet) tweaks */
@media (min-width: 577px) and (max-width: 991.98px) {
.our-services-section .col-md-3 { flex: 0 0 50% !important; max-width: 50% !important; }
.qr-card, .consult-card { flex-direction: row; align-items: center; }
.qr-card .qr-card-img img.qr-img { max-width: 180px; }
.network-feature-card .network-feature-img { height: 180px; }
.pricing-container .pricing-list { grid-template-columns: repeat(2, 1fr); }
}
/* Utility: prevent horizontal overflow from large images */
img, video { max-width: 100%; height: auto; }
/* End targeted mobile fixes */
/* Ensure navbar is transparent when NOT scrolled (enforce specificity last) */
.custom-navbar:not(.scrolled) {
background: transparent !important;
box-shadow: none !important;
}
.custom-navbar:not(.scrolled) .navbar-brand,
.custom-navbar:not(.scrolled) .logo-text,
.custom-navbar:not(.scrolled) .navbar-nav .nav-link {
color: #fff !important;
}
/* Keep CTA visible on transparent background */
.custom-navbar:not(.scrolled) .btn-cta {
box-shadow: 0 5px 15px rgba(255, 53, 53, 0.18);
}
/* Final mobile-safe overrides for Network Highlight to prevent earlier rules
from causing right-side overflow and to force centered layout on small screens. */
@media (max-width: 768px) {
/* container: symmetric gutters and centered */
.network-highlight-container,
.network-highlight-section > .container.network-highlight-container {
padding-left: 12px !important;
padding-right: 12px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* make left images full width but inset by gutters so they don't touch edges */
.network-highlight-left {
width: 100% !important;
flex: 0 0 auto !important;
max-width: 100% !important;
min-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.network-highlight-left .network-feature-card,
.network-highlight-section .network-feature-card {
margin-left: 12px !important;
margin-right: 12px !important;
width: calc(100% - 24px) !important;
max-width: calc(100% - 24px) !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.network-feature-img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
display: block !important;
border-radius: 12px !important;
}
/* right column: full width and centered text; remove any left margin */
.network-highlight-right {
width: 100% !important;
flex: 1 1 auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 12px !important;
padding-right: 12px !important;
box-sizing: border-box !important;
text-align: center !important;
}
.network-highlight-content {
margin: 0 auto !important;
padding: 0 6px !important;
max-width: 820px !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* center stats and devices */
.network-highlight-stats,
.network-devices-icons {
justify-content: center !important;
display: flex !important;
gap: 18px !important;
}
/* ensure platform image is centered and doesn't use negative offsets */
.network-highlight-image {
position: static !important;
margin: 18px auto !important;
width: 100% !important;
max-width: 820px !important;
text-align: center !important;
box-sizing: border-box !important;
}
.network-highlight-image .network-platform-img,
.network-platform-img {
display: block !important;
margin: 0 auto !important;
width: 320px !important;
max-width: 100% !important;
}
/* remove any absolute-positioned connect elements that might overflow */
.network-connect-circle,
.network-connect-arrow {
display: none !important;
}
}
/* Strong final overrides for Movie Feature section to ensure background
fills the whole section and slider/content are centered on small screens.
These rules are narrowly targeted and use !important to win over earlier
conflicting declarations without changing other sections. */
.movie-feature-section, html body .movie-feature-section {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
}
.movie-feature-section .movie-feature-bg,
html body .movie-feature-section .movie-feature-bg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
overflow: hidden !important;
}
.movie-feature-section .movie-feature-bg-img,
html body .movie-feature-section .movie-feature-bg-img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
opacity: 1 !important;
filter: none !important;
}
.movie-feature-section .movie-feature-container,
html body .movie-feature-section .movie-feature-container {
position: relative !important;
z-index: 2 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
max-width: 1200px !important;
margin: 0 auto !important;
}
.movie-feature-section .movie-feature-slider-row,
html body .movie-feature-section .movie-feature-slider-row {
margin-left: 0 !important;
width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
box-sizing: border-box !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
@media (max-width: 991px) {
.movie-feature-section .movie-feature-content,
html body .movie-feature-section .movie-feature-content {
text-align: center !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.movie-feature-section .movie-feature-slider-img,
html body .movie-feature-section .movie-feature-slider-img {
width: 120px !important;
height: auto !important;
}
}
/* Ensure slider thumbnails never cause horizontal overflow on small screens
— center them and allow wrapping so they fit within viewport. */
@media (max-width: 991px) {
.movie-feature-section .movie-feature-slider-row,
html body .movie-feature-section .movie-feature-slider-row {
overflow: hidden !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
.movie-feature-section .movie-feature-slider-images,
html body .movie-feature-section .movie-feature-slider-images {
justify-content: center !important;
flex-wrap: wrap !important; /* allow thumbnails to wrap to next row */
max-width: 100% !important;
margin: 0 auto !important;
gap: 12px !important;
}
.movie-feature-section .movie-feature-slider-img,
html body .movie-feature-section .movie-feature-slider-img {
width: 120px !important;
max-width: 33% !important;
box-sizing: border-box !important;
}
}
@media (max-width: 576px) {
.movie-feature-section .movie-feature-slider-img,
html body .movie-feature-section .movie-feature-slider-img {
width: 96px !important;
max-width: 48% !important;
}
}
/* Pricing / Packages — small screen improvements
- Reduce badge/title spacing
- Show pricing cards in a horizontal, center-aligned scroller
- Place the side card after the pricing cards and center it
- Keep changes scoped to very small screens to avoid disturbing desktop */
@media (max-width: 576px) {
.pricing-section { padding-top: 18px !important; padding-bottom: 28px !important; }
.pricing-badge { margin-top: 6px !important; margin-bottom: 6px !important; font-size: 0.95rem !important; }
.pricing-title { margin-top: 6px !important; margin-bottom: 12px !important; font-size: 1.8rem !important; }
/* make container stack and center content with equal side gutters */
.pricing-container { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: center !important; padding-left: 12px !important; padding-right: 12px !important; }
.pricing-main { width: 100% !important; order: 1 !important; }
/* horizontal scroller for pricing cards (touch friendly) */
.pricing-list { display: flex !important; flex-direction: row !important; gap: 12px !important; overflow-x: auto !important; padding: 12px 4px !important; width: 100% !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch !important; justify-content: center !important; }
.pricing-list::-webkit-scrollbar { height: 8px; }
.pricing-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }
/* make each card compact so multiple can show horizontally */
.pricing-card { flex: 0 0 300px !important; max-width: 300px !important; margin: 0 !important; padding: 16px !important; box-sizing: border-box !important; }
.pricing-card-info { padding: 12px !important; }
.pricing-card-features { gap: 12px !important; }
/* ensure price CTA area stays aligned and compact */
.pricing-card-action { padding: 12px !important; text-align: center !important; }
/* show the right-side card after pricing cards and center it */
.pricing-side-card { order: 2 !important; width: calc(100% - 24px) !important; max-width: 360px !important; margin: 8px auto !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 18px !important; }
.pricing-side-card h3 { font-size: 1.1rem !important; margin-bottom: 8px !important; }
.pricing-side-card p { font-size: 0.95rem !important; margin-bottom: 8px !important; }
/* center the View all plans button and give breathing room */
.text-center.mt-4.w-100 { padding: 12px 0 28px 0 !important; }
.btn-view-all { margin: 8px auto 18px auto !important; }
}
/* Desktop-only: pin movie feature text content and Watch Now button to the
left edge of the section/browser without changing mobile behavior. This
override comes after the file's final movie-feature rules and uses high
specificity + !important so it only affects the movie feature on wide
screens (>=992px). It only removes the left gutters and keeps other
layout, slider and animations intact. */
@media (min-width: 992px) {
html body .movie-feature-section .movie-feature-container {
max-width: 100% !important; /* allow full bleed */
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
html body .movie-feature-section .movie-feature-content {
padding-left: 3rem !important;
padding-right: 0 !important;
margin-left: 0 !important;
box-sizing: border-box !important;
/* keep position:relative so content flows vertically as before */
position: relative !important;
width: min(720px, 60%); /* limit content width so it doesn't span too far */
}
/* Ensure Watch Now button sits flush to the left of the content block */
html body .movie-feature-section .movie-feature-watch-btn {
margin-left: 0 !important;
margin-right: auto !important;
align-self: flex-start !important;
}
}
/* Medium+ and large screens: push the speed button farther to the right and
show IP | ISP | Browser in one row (JS handles the ISP insertion). This
only affects screens wider than 640px so mobile is unchanged. */
@media (min-width: 641px) {
.speed-test-inner{
justify-content: space-between; /* push right column to the far right */
margin-left: 2rem;
margin-right: 2rem;
}
.speed-right{
display:flex;
justify-content:flex-end; /* ensure the big button hugs the right */
flex: 0 0 420px; /* slightly wider area for the button on larger screens */
margin-right: 8rem;
}
/* nudge inline panel a bit more to the right if present */
.speed-inline-panel { right: 16px !important; }
}
/* Mobile-only tweaks for Movie Feature: reduce meta size and add bottom space
so slider thumbnails are visible without overlapping. This targets only
small screens (<=768px) and does not change desktop behaviour. */
@media (max-width: 768px) {
.movie-feature-section {
padding-bottom: 700px !important; /* give room for slider thumbnails */
}
.movie-feature-section .movie-feature-meta {
font-size: 0.9rem !important;
gap: 10px !important;
margin-bottom: 22px !important;
align-items: flex-start !important;
}
.movie-feature-section .movie-feature-badge-meta {
padding: 6px 10px !important;
font-size: 0.85rem !important;
border-radius: 12px !important;
}
.movie-feature-section .movie-feature-match {
font-size: 0.95rem !important;
}
.movie-feature-section .movie-feature-desc {
font-size: 0.95rem !important;
max-width: 90% !important;
}
}
/* Speed Test iframe responsive rules (scoped to .speedtest-page)
Ensures the embedded speed test fits nicely on all screen sizes while
preserving existing global styles. These rules only target the
.speedtest-page iframe and are intentionally conservative. */
.speedtest-page iframe {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
height: 650px; /* default desktop height */
min-height: 320px;
border: 0;
box-sizing: border-box;
border-radius: 8px;
background: #fff;
}
/* Large desktops */
@media (min-width: 1400px) {
.speedtest-page iframe {
max-width: 1300px;
height: 720px;
padding-top: 3rem;
}
}
/* Desktops / Laptops */
@media (min-width: 992px) and (max-width: 1399px) {
.speedtest-page iframe {
max-width: 1100px;
height: 650px;
padding-top: 3rem;
}
}
/* Small laptops / large tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
.speedtest-page {
margin-top: 0;
margin-bottom: 0;
}
.speedtest-page iframe {
max-width: 920px;
height: 760px;
}
}
/* Tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
.speedtest-page iframe {
max-width: 760px;
height: 760px;
}
}
/* Mobile phones */
@media (max-width: 575.98px) {
.speedtest-page iframe {
width: calc(100% - 24px);
max-width: none;
margin: 0 12px;
height: 760px;
border-radius: 6px;
}
}
/* Very small phones / portrait-phones */
@media (max-width: 420px) {
.speedtest-page iframe {
height: 700px;
}
}