html, body { margin: 0; padding: 0;}
/* =============================
GLOBAL HEADER STYLES
============================= */
header { position: sticky; top: 0; width: 100%;
z-index: 1100; /* raised above mobile menu */
background: rgba(173, 216, 230, 0.9);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.1);}
header .wrap.nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 8%; margin: 0 auto; max-width: 1300px;}
/* =============================
LOGO
============================= */
header .logo img { height: 50px; cursor: pointer;}
/* =============================
DESKTOP NAVIGATION
============================= */
header nav { display: block;}
header nav ul { display: flex; flex-direction: row; align-items: center; list-style: none; gap: 28px; margin: 0; padding: 0;}
header nav ul li a { text-decoration: none; font-weight: 500; color: #003366; transition: 0.3s; padding: 8px 6px;}
header nav ul li a:hover { color: #001f4d;}
/* CTA button */
header nav ul li .cta-small { padding: 8px 16px; background: #0B61D6; color: #fff !important; border-radius: 6px; font-weight: 600;}
header nav ul li .cta-small:hover { background: #0849a8;}
/* =============================
DESKTOP DROPDOWN
============================= */
header nav ul li.dropdown { position: relative;}
header nav ul li .dropdown-menu { display: none; position: absolute; top: 100%; left: 0;
background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 6px;
list-style: none; padding: 10px 0; min-width: 220px; z-index: 1000;}
header nav ul li .dropdown-menu li a { display: block; padding: 10px 16px; color: #003366; text-decoration: none; transition: 0.3s;}
header nav ul li .dropdown-menu li a:hover { background: #0B61D6; color: #fff;}
/* Show dropdown on hover (desktop only) */
@media (min-width: 992px) { header nav ul li.dropdown:hover .dropdown-menu { display: block; }}
/* =============================
MOBILE NAVIGATION
============================= */
.mobile-nav { display: block; position: fixed; top: 0;
left: -100%; /* hidden */
width: 75%; height: 100vh;
background: rgba(173, 216, 230, 0.97); backdrop-filter: blur(10px); transition: left 0.3s ease-in-out;padding: 80px 20px 20px;
z-index: 1201; /* higher than overlay */
visibility: hidden; opacity: 0; overflow-y: auto;}
/* When open */
.mobile-nav.open { left: 0; visibility: visible; opacity: 1;}
/* Overlay backdrop */
.mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);
opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out; z-index: 1200; /* lower than mobile-nav */}
.mobile-overlay.active { opacity: 1; visibility: visible;}
/* Mobile menu items */
.mobile-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px;}
.mobile-nav ul li a { text-decoration: none; color: #003366; font-size: 18px; font-weight: 500;
padding: 10px 6px; display: flex; justify-content: space-between; align-items: center;
pointer-events: auto; /* ensure clickable */
z-index: 1300;}
.mobile-nav ul li .cta-small {
background: #0B61D6; color: #fff !important; padding: 12px 20px; border-radius: 6px; text-align: center;}
/* Close button inside mobile nav */
.mobile-nav .close-nav {
position: absolute;
top: 20px;
right: 20px;
font-size: 28px;
background: none;
border: none;
color: #003366;
cursor: pointer;
z-index: 1301;
}
/* =============================
MOBILE DROPDOWN (animated)
============================= */
.mobile-nav .dropdown > a {
cursor: pointer;
}
.mobile-nav .dropdown-toggle {
font-size: 14px;
margin-left: 8px;
transition: transform 0.3s ease;
}
.mobile-nav .dropdown-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease, opacity 0.35s ease;
opacity: 0;
padding-left: 15px;
display: none; /* hidden by default */
}
/* When dropdown is open */
.mobile-nav .dropdown.open > .dropdown-menu {
max-height: 500px; /* enough space for submenu */
opacity: 1;
display: block; /* visible when open */
}
.mobile-nav .dropdown.open > a .dropdown-toggle {
transform: rotate(180deg);
}
/* =============================
RESPONSIVE RULES
============================= */
@media (max-width: 992px) {
header nav { display: none; /* hide desktop nav */ }}
.nav-toggle {
display: none; /* hidden on desktop */
font-size: 24px; background: none; border: none; cursor: pointer;
color: #003366; /* match header */}
@media (max-width: 992px) { nav {
display: none; /* hide desktop nav */ }
.nav-toggle {
display: block; /* show button on mobile */}}
/* =============================
ACTIVE PAGE HIGHLIGHT
============================= */
header nav ul li a.active {
color: #0B61D6;font-weight: 600; border-bottom: 2px solid #0B61D6;}
/* ========== HERO SECTION ========== */
body.home-page .hero {display: flex;align-items: center;justify-content: space-between;gap: 2rem;padding: 80px 5%;background: linear-gradient(to right, #e6f4ff, #f9fcff);}
body.home-page .hero-left { flex: 1; max-width: 600px;}
body.home-page .hero-left .eyebrow { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;}
body.home-page .hero-left h1 { font-size: 2.8rem; line-height: 1.2; margin-bottom: 20px; color: #111;}
body.home-page .hero-left p {font-size: 1rem; line-height: 1.6; color: var(--muted); margin-bottom: 25px;}
body.home-page .hero-left .actions { display: flex; gap: 15px;}
body.home-page .hero-left .btn { padding: 12px 24px; border-radius: 8px; background: #0B61D6; color: #f8f7f7; font-weight: 600; transition: 0.3s ease;}
body.home-page .hero-left .btn:hover { background: #1f2124;}
body.home-page .hero-left .btn:nth-child(2) { background: transparent; border: 1px solid #0b61d6; color: #0b61d6;}
body.home-page .hero-left .btn:nth-child(2):hover { background: #0b61d6; color: #1a5a74;}
/* Right Side */
body.home-page .hero-right { flex: 1; display: flex; justify-content: center; align-items: center;}
body.home-page .hero-card { width: 100%; max-width: 450px; background: #fff; border-radius: 15px; padding: 15px;
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.08); position: relative; /* make sure .blue-edge stays relative to card */}
body.home-page .hero-card model-viewer {
display: block; /* make sure it behaves like a block element */
width: 100% !important; /* force full width */
min-width: 280px; /* stop collapsing too narrow */
height: 300px;
border-radius: 10px;
background: #111;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
body.home-page .hero { flex-direction: column; text-align: center; padding: 60px 5%;}
body.home-page .hero-left { max-width: 100%; }
body.home-page .hero-left h1 { font-size: 2.2rem;}
body.home-page .hero-left .actions { justify-content: center;}
body.home-page .hero-right { margin-top: 40px; }
body.home-page .hero-card {
width: 100%; /* ensure card is full width */
max-width: 100%; }
body.home-page .hero-card model-viewer { height: 250px;}}
@media (max-width: 576px) {
body.home-page .hero-left h1 {font-size: 1.8rem;}
body.home-page .hero-left p { font-size: 0.95rem;}
body.home-page .hero-left .btn { padding: 10px 20px; font-size: 0.9rem;}
body.home-page .hero-card {
width: 100%;
max-width: 100%;
}
body.home-page .hero-card model-viewer {
height: 220px;
}
}
/* ========== ABOUT SECTION ========== */
body.home-page #about {
padding: 80px 5%;
background: linear-gradient(to right, #e6f4ff, #f9fcff);
}
body.home-page .stats-row {
display: flex;
align-items: stretch;
justify-content: center;
gap: 3rem;
flex-wrap: wrap; /* for mobile */
}
/* Left Side (Image + Circle Stat) */
body.home-page .stat-image {
position: relative;
flex: 1;
max-width: 450px;
display: flex;
}
body.home-page .stat-image img {
width: 100%;
height: 100%;
border-radius: 15px;
object-fit: cover;
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
}
/* Circle Stat Badge */
body.home-page .stat-circle {
position: absolute;
top: 0;
left: 0;
transform: translate(-30%, -50%); /* half inside, half outside (desktop) */
background: #fff;
border-radius: 50%;
width: 110px;
height: 110px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
}
body.home-page .stat-circle .num {
font-size: 1.6rem;
font-weight: 700;
color:black;
}
body.home-page .stat-circle .stat-text {
font-size: 12px;
color: #0a0a0a;
}
/* Right Side (Text) */
body.home-page .about-plain {
flex: 1;
max-width: 550px;
}
body.home-page .about-plain .section-title {
font-size: 16px;
font-weight: 600;
color: var(--accent);
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
body.home-page .about-plain p {
font-size: 1rem;
line-height: 1.6;
color: var(--muted);
}
/* Button */
body.home-page .about-plain .btn {
display: inline-block;
margin-top: 0;
padding: 12px 24px;
border-radius: 8px;
background: #084ba7;
color: #fff;
font-weight: 600;
text-decoration: none;
transition: 0.3s ease;
}
body.home-page .about-plain .btn:hover {
background: #59d6f5;
color: #111;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
body.home-page .stats-row {
flex-direction: column;
text-align: center;
gap: 2rem;
}
body.home-page .about-plain {
max-width: 100%;
}
body.home-page .stat-circle {
width: 90px;
height: 90px;
transform: translate(-20%, -35%); /* thoda bahar, cut off nahi hoga */
}
}
@media (max-width: 576px) {
body.home-page #about {
padding: 60px 5%;
}
body.home-page .about-plain p {
font-size: 0.95rem;
}
body.home-page .stat-circle {
width: 70px;
height: 70px;
transform: translate(-15%, -30%); /* chhota aur thoda bahar */
}
body.home-page .stat-circle .num {
font-size: 1.1rem;
}
body.home-page .stat-circle .stat-text {
font-size: 9px;
}
}
/* ========== TRACK RECORD SECTION ========== */
#track-record { padding: 80px 5%; background: #000000; /* dark blackish background */ color: #fff; text-align: center;}
#track-record .section-heading { font-size: 2rem; font-weight: 700; margin-bottom: 40px;color: #fff;}
/* Grid */
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px;}
/* Box */
.benefit { background: #1a1a1a; padding: 24px 18px; border-radius: 12px; transition: transform 0.3s ease, background 0.3s ease;}
.benefit:hover {transform: translateY(-6px);background: #222;}
/* Numbers */
.benefit h3 { margin: 0; font-size: 1.8rem; font-weight: 700; color: var(--accent);}
.benefit h3 .light { color: #fff; font-weight: 400;}
.benefit p { margin-top: 8px; font-size: 0.95rem; color: #bbb;}
/* Responsive */
@media (max-width: 768px) { #track-record { padding: 60px 5%; }
.benefit h3 { font-size: 1.5rem;}
.benefit p { font-size: 0.9rem;}}
/* ==========================
MODELS SHOWCASE SECTION
========================== */
#models {
padding: 80px 20px;
background: #dff5fc;
text-align: center;
}
#models h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 25px; /* ✅ more space under section heading */
color: #0B61D6;
}
#models p {
max-width: 700px;
margin: 0 auto 40px;
font-size: 1rem;
line-height: 1.6;
color: #111;
}
/* ✅ Equal height grid */
.models-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto 40px;
align-items: stretch; /* ✅ makes all cards equal height */
}
/* Responsive: Tablets */
@media (max-width: 1024px) {
.models-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Responsive: Mobiles */
@media (max-width: 600px) {
.models-grid {
grid-template-columns: 1fr;
}
}
/* ==========================
MODEL CARD
========================== */
.model-card {
background: #fff;
border-radius: 16px;
padding: 20px;
box-shadow: 0px 6px 16px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
display: flex;
flex-direction: column;
justify-content: space-between; /* ✅ content spreads evenly */
text-align: center;
height: 100%; /* ✅ stretch to equal height */
box-sizing: border-box;
}
.model-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
background: #b6d8f5;
}
/* model-viewer styling */
model-viewer {
width: 100%;
height: 250px;
border-radius: 12px;
background: #000;
margin-bottom: 20px;
display: block;
}
/* Text Styling */
.model-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin: 20px 0 12px; /* ✅ more spacing around heading */
}
.model-card h3 a {
color: #0B61D6;
text-decoration: none;
transition: color 0.3s;
}
.model-card h3 a:hover {
text-decoration: underline;
color: #0847a6;
}
.model-card p {
font-size: 0.95rem;
color: #000;
line-height: 1.5;
flex-grow: 1; /* ✅ fills space evenly for equal height */
}
/* Button */
.btn-wrap {
text-align: center;
margin-top: 80px;
}
.btn {
display: inline-block;
padding: 12px 28px;
background: #0B61D6;
color: #fff;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
transition: background 0.3s;
text-decoration: none;
}
.btn:hover {
background: #0949a4;
}
/* ==========================
PORTFOLIO SECTION
========================== */
body.home-page #portfolio {
padding: 60px 20px;
background: #fff;
}
body.home-page #portfolio h2 {
font-size: 2rem;
font-weight: 700;
color: #111;
text-align: center;
margin-bottom: 30px;
}
body.home-page .portfolio-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
max-width: 1300px;
margin: 0 auto;
align-items: stretch; /* equal-height cards */
}
body.home-page .portfolio-card {
background: #f9f9f9;
border-radius: 12px;
padding: 16px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
body.home-page .portfolio-card img {
width: 100%;
border-radius: 10px;
object-fit: cover;
margin-bottom: 16px;
height: 200px; /* consistent image height */
}
body.home-page .portfolio-card h4 {
font-size: 1.1rem;
margin: 8px 0;
color: #111;
}
/* 🔹 Portfolio Links */
body.home-page .portfolio-card h4 a {
color: #111; /* black text */
text-decoration: none; /* remove underline */
transition: color 0.3s ease, text-decoration 0.3s ease;
}
body.home-page .portfolio-card h4 a:hover {
color: #0B61D6; /* hover pe blue */}
body.home-page .portfolio-card p {
font-size: 0.95rem;
color: #0c0c0c;
line-height: 1.4;
}
body.home-page .portfolio-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
background: #e6f0ff; /* subtle hover effect */
}
/* Button */
body.home-page .portfolio .btn-wrap {
text-align: center;
margin-top: 20px;
}
body.home-page .portfolio .btn {
display: inline-block;
padding: 12px 28px;
background: #0B61D6;
color: #fff;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
transition: background 0.3s;
text-decoration: none;
}
body.home-page .portfolio .btn:hover {
background: #0949a4;
}
/* Responsive */
/* Tablet: 2 per row */
@media (max-width: 1024px) {
body.home-page .portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile: 1 per row */
@media (max-width: 600px) {
body.home-page .portfolio-grid { grid-template-columns: 1fr; }
body.home-page .portfolio-card img {height: 180px; }
}
/* ==========================
BLOG SECTION
========================== */
body.home-page #blog {
padding: 60px 20px;
background: #e1e7e9; /* Light blue background */
text-align: center;
}
body.home-page #blog h2 {
font-size: 2rem;
margin: 0 0 12px;
color: #000000; /* Blue heading */
}
body.home-page #blog .section-subtitle {
font-size: 1rem;
line-height: 1.6;
color: #0a0a0a;
margin-bottom: 40px;
}
/* Blog Grid */
body.home-page #blog .blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
/* Blog Card */
body.home-page #blog .blog-card {
background: #ffffff;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid #d7e6f0;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
body.home-page #blog .blog-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
body.home-page #blog .blog-card .blog-content {
padding: 20px;
}
body.home-page #blog .blog-card h3 {
font-size: 1.2rem;
color: #000000;
margin-bottom: 10px;
}
body.home-page #blog .blog-card p {
color: #000000;
font-size: 0.95rem;
margin-bottom: 0;
}
/* Hover Effect */
body.home-page #blog .blog-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 20px rgba(83, 135, 231, 0.9);
}
/* Blog Button */
body.home-page #blog .blog-btn-wrap {
margin-top: 40px;
text-align: center;
}
body.home-page #blog .btn {
display: inline-block;
padding: 10px 24px;
background: var(--accent, #0B61D6);
color: #fff;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: background 0.3s ease, transform 0.3s ease;
}
body.home-page #blog .btn:hover {
background: #0748a2;
transform: translateY(-3px);
}
/* Responsive */
@media (max-width: 1024px) {
body.home-page #blog .blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
body.home-page #blog .blog-grid {
grid-template-columns: 1fr;
}
}
/* INDUSTRIES SECTION */
body.home-page #industries {
padding: 80px 20px;
text-align: center;
background: #ffffff; /* White background */
}
body.home-page #industries .section-heading {
font-size: 2.5rem;
margin-bottom: 10px;
color: #000000;
}
body.home-page #industries .section-subtitle {
color: #000000; /* Soft Blue */
font-size: 1.1rem;
margin-bottom: 50px;
}
/* Grid Layout - 3 per row on Desktop */
body.home-page #industries .industries-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Always 3 columns on desktop */
gap: 25px;
max-width: 1200px;
margin: 0 auto;
}
/* Industry Card */
body.home-page #industries .industry-card {
background: #f8fbff; /* Light blue-white */
border-radius: 12px;
padding: 30px 20px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
border: 1px solid #e2eaf5;
}
body.home-page #industries .industry-card i {
font-size: 2rem;
color: #0066cc;
margin-bottom: 15px;
}
body.home-page #industries .industry-card h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: #0c0c0c;
}
body.home-page #industries .industry-card p {
font-size: 0.95rem;
color: #000000;
}
/* Hover Effect */
body.home-page #industries .industry-card:hover {
transform: translateY(-6px);
background: #eaf3ff; /* Slightly deeper blue on hover */
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* -------------------
Responsive Design
------------------- */
/* Tablet (2 per row) */
@media (max-width: 992px) {
body.home-page #industries .industries-grid { grid-template-columns: repeat(2, 1fr); }}
/* Mobile (1 per row) */
@media (max-width: 576px) { body.home-page #industries .industries-grid { grid-template-columns: 1fr; }}
/* ==========================
TESTIMONIALS SECTION
========================== */
.testimonials {
padding: 60px 20px;
background: #fff;
text-align: center;
}
.testimonials .section-title {
font-size: 2rem;
font-weight: 700;
color: #111;
margin-bottom: 8px;
}
.testimonials .section-subtitle {
font-size: 1rem;
color: #555;
margin-bottom: 40px;
}
/* Testimonials Grid */
.testimonials-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
align-items: stretch; /* equal height cards */
}
/* Individual Card */
.testimonial-card {
position: relative;
background: #f9f9f9;
border-radius: 12px;
padding: 60px 16px 24px; /* top space for logo */
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
background: #e6f0ff; /* subtle hover */
}
/* Logo Circle */
.testimonial-logo {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.testimonial-logo img {
max-width: 70%;
max-height: 70%;
object-fit: contain;
}
/* Client Name */
.testimonial-card h3 {
font-size: 1.2rem;
margin: 8px 0;
color: #111;
}
/* Client Role */
.testimonial-card .role {
font-size: 0.95rem;
color: #666;
margin-bottom: 16px;
}
/* Quote */
.testimonial-card .quote {
font-size: 0.95rem;
color: #444;
line-height: 1.5;
font-style: italic;
}
/* Responsive */
/* Tablet: 2 per row */
@media (max-width: 1024px) {
.testimonials-row {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile: 1 per row */
@media (max-width: 600px) {
.testimonials-row {
grid-template-columns: 1fr;
}
}
/* ==========================
CTA SECTION (Updated)
========================== */
.cta-section {
background: linear-gradient(135deg, #0B61D6, #0748a2);
padding: 60px 20px;
text-align: center;
color: #fff;
position: relative;
max-width: 1000px; /* keeps it from stretching full width */
margin: 60px auto; /* centers it */
border-radius: 12px; /* smooth rounded edges */
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.cta-section h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
}
.cta-section p {
font-size: 1rem;
margin-bottom: 30px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
color: rgba(255, 255, 255, 0.95);
}
.cta-btn {
display: inline-block;
background: #fff;
color: #0B61D6;
padding: 12px 30px;
text-decoration: none;
font-weight: 700;
border-radius: 6px;
font-size: 1rem;
letter-spacing: 1px;
transition: 0.25s ease;
}
.cta-btn:hover {
background: #f1f1f1;
color: #0748a2;
}
/* ==========================
Responsive CTA
========================== */
@media (max-width: 768px) {
.cta-section {
padding: 40px 20px;
margin: 40px 15px;
}
.cta-section h1 {
font-size: 1.8rem;
}
.cta-section p {
font-size: 0.95rem;
}
.cta-btn {
padding: 10px 24px;
font-size: 0.9rem;
}
}
/* ==========================
FAQ SECTION
========================== */
#faq {
padding: 60px 20px;
background: #fff;
max-width: 800px;
margin: 0 auto;
}
#faq h2 {
font-size: 2rem;
font-weight: 700;
color: #111;
text-align: center;
margin-bottom: 40px;
}
/* FAQ Item */
.faq-item {
border-radius: 10px;
background: #f9f9f9;
margin-bottom: 16px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
padding: 16px;
}
.faq-item:hover {
background: #e6f0ff;
}
.faq-q {
font-size: 1.05rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
color: #0B61D6;
}
.faq-q span {
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.faq-item.active .faq-q span {
transform: rotate(45deg);}
body.home-page .faq-a {max-height: 0;overflow: hidden;font-size: 0.95rem;color: #555;line-height: 1.5;margin-top: 8px;
transition: max-height 0.4s ease, padding 0.4s ease;padding: 0 0;}
body.home-page .faq-item.active .faq-a { max-height: 500px; padding: 12px 0 0 0;}
/* Responsive */
@media (max-width: 600px) {
#faq { padding: 40px 15px; }
#faq h2 { font-size: 1.6rem; margin-bottom: 30px; }
body.home-page .faq-q { font-size: 1rem; }
body.home-page .faq-a { font-size: 0.9rem; }}
/* Homepage End */
/* ==========================
HERO SLIDER SECTION (About Page)
========================== */
body.about-page .hero-slider-section {
position: relative;
width: 100%;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0;
background: #ffffff;
overflow: hidden;
}
/* Hero slides as background */
body.about-page .hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1;
}
/* Dark overlay for readability */
body.about-page .hero-slide::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
rgba(0,0,0,0.4),
rgba(0,0,0,0.4)
);
z-index: 2;
}
body.about-page .hero-slide.active {
opacity: 1;
}
body.about-page .hero-slider-content {
position: relative;
z-index: 3; /* above overlay */
max-width: 700px;
padding: 0 15px;
color: #fff;
}
body.about-page .hero-slider-content h1 {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 20px;
color: #fff;
}
body.about-page .hero-slider-content p {
font-size: 1.2rem;
line-height: 1.6;
color: #f1f1f1;
margin-bottom: 25px;
}
/* Button */
body.about-page .hero-slider-content .btn-primary {
display: inline-block;
padding: 12px 28px;
background: var(--accent, #0B61D6);
color: #fff;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: 0.3s ease;
}
body.about-page .hero-slider-content .btn-primary:hover {
background: #0748a2;
}
/* ==========================
Dots (Default / Desktop)
========================== */
body.about-page .hero-slider-dots { position: absolute;
bottom: 0%; /* more space from bottom on desktop */
left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4;}
body.about-page .hero-slider-dots span { width: 14px; height: 14px; background: #ddd; border-radius: 50%; cursor: pointer; transition: 0.3s;}
body.about-page .hero-slider-dots span:hover { transform: scale(1.2);}
body.about-page .hero-slider-dots span.active { background: var(--accent, #0B61D6);}
/* ==========================
Mobile Responsive Fixes
========================== */
@media (max-width: 768px) {
body.about-page .hero-slider-section { height: 75vh;}
body.about-page .hero-slider-content h1 { font-size: 2rem;}
body.about-page .hero-slider-content p { font-size: 1rem; margin-bottom: 20px;}
body.about-page .hero-slider-content .btn-primary { padding: 10px 22px; font-size: 0.95rem;}
body.about-page .hero-slider-dots { bottom: 15px; /* closer to bottom */ gap: 6px;}
body.about-page .hero-slider-dots span { width: 10px; height: 10px;}}
@media (max-width: 480px) {
body.about-page .hero-slider-section {
height: 80vh;
}
body.about-page .hero-slider-content h1 {
font-size: 1.6rem;
}
body.about-page .hero-slider-content p {
font-size: 0.9rem;
}
body.about-page .hero-slider-content .btn-primary {
width: 100%;
max-width: 250px;
}
body.about-page .hero-slider-dots {
bottom: 12px;
}
}
/* ================================
ABOUT PAGE – VISION & MISSION
================================ */
body.about-page .vision-mission-section {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
padding: 80px 5%;
}
body.about-page .vision-mission-img,
body.about-page .vision-mission-text { flex: 1;}
body.about-page .vision-mission-img img {
width: 100%;
height: 100%;
max-height: 420px;
border-radius: 14px;
object-fit: cover;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
body.about-page .vision-mission-text h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
color: var(--primary, #0B61D6);
}
body.about-page .vision-mission-text p {
font-size: 1.1rem;
line-height: 1.8;
color: #080808;
}
body.about-page .vision-mission-section.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 1024px) {
body.about-page .vision-mission-section {
gap: 30px;
padding: 60px 5%;
}
}
@media (max-width: 768px) {
body.about-page .vision-mission-section {
flex-direction: column;
text-align: center;
gap: 40px;
}
body.about-page .vision-mission-text h2 {
font-size: 2rem;
}
body.about-page .vision-mission-text p {
font-size: 1rem;
}
}
/* ==========================
ABOUT PAGE – FAQ SECTION
========================== */
body.about-page #faq {
padding: 60px 20px;
background: #fff;
max-width: 800px;
margin: 0 auto;
}
body.about-page #faq h2 {
font-size: 2rem;
font-weight: 700;
color: #111;
text-align: center;
margin-bottom: 40px;
}
/* FAQ Item */
body.about-page .faq-item {
border-radius: 10px;
background: #f9f9f9;
margin-bottom: 16px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
padding: 16px;
}
body.about-page .faq-item:hover {
background: #e6f0ff;
}
body.about-page .faq-q {
font-size: 1.05rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
color: #0B61D6;
}
body.about-page .faq-q span {
font-size: 1.5rem;
transition: transform 0.3s ease;
}
body.about-page .faq-item.active .faq-q span {
transform: rotate(45deg);
}
/* FAQ Answer */
body.about-page .faq-a {
max-height: 0;
overflow: hidden;
font-size: 0.95rem;
color: #000000;
line-height: 1.5;
margin-top: 8px;
transition: max-height 0.4s ease, padding 0.4s ease;
padding: 0 0;
}
body.about-page .faq-item.active .faq-a {
max-height: 500px;
padding: 12px 0 0 0;
}
/* Responsive */
@media (max-width: 600px) {
body.about-page #faq {
padding: 40px 15px;
}
body.about-page #faq h2 {
font-size: 1.6rem;
margin-bottom: 30px;
}
body.about-page .faq-q {
font-size: 1rem;
}
body.about-page .faq-a {
font-size: 0.9rem;
}
}
/* ================================
ABOUT PAGE – TEAM SECTION
================================ */
body.about-page .team {
padding: 80px 5%;
text-align: center;
background: #fff;
}
body.about-page .team h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
color: #0B61D6;
}
body.about-page .team > p {
font-size: 1.1rem;
color: #070707;
margin-bottom: 50px;
}
body.about-page .team-members {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
body.about-page .team-member {
background: #ffffff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease;
cursor: pointer; /* feels interactive */
}
body.about-page .team-member:hover {
transform: translateY(-15px) scale(1.03);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.705);
}
body.about-page .team-member img {
width: 100%;
height: 280px; /* Equal height for all images */
object-fit: cover;
border-radius: 10px;
margin-bottom: 15px;
}
body.about-page .team-member h4 {
margin: 10px 0 5px;
font-size: 1.2rem;
font-weight: 600;
}
body.about-page .team-member h4 a {
color: #111;
text-decoration: none;
transition: color 0.3s ease;
}
body.about-page .team-member h4 a:hover {
color: #0B61D6;
}
body.about-page .team-member p {
font-size: 0.95rem;
color: #080808;
}
body.about-page .team-btn {
text-align: center;
}
body.about-page .team-btn .btn-primary {
display: inline-block;
padding: 12px 28px;
font-size: 1rem;
font-weight: 600;
color: #fff;
background: #0B61D6;
border-radius: 8px;
text-decoration: none;
transition: background 0.3s ease, transform 0.3s ease;
}
body.about-page .team-btn .btn-primary:hover {
background: #0849a8;
transform: translateY(-3px);
}
/* Responsive */
@media (max-width: 1024px) {
body.about-page .team-members {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
body.about-page .team h2 {
font-size: 2rem;
}
body.about-page .team-members {
grid-template-columns: 1fr;
}
body.about-page .team-member img {
height: 240px;
}
}
/* ================================
SERVICE PAGE – HERO SECTION
================================ */
body.service-page .hero-slider-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 80px 5%;
background: #fff;
position: relative;
overflow: hidden;
}
body.service-page .hero-slider-content {
flex: 1;
max-width: 50%;
z-index: 2;
}
body.service-page .hero-slider-content h1 {
font-size: 2.8rem;
font-weight: 700;
line-height: 1.2;
color: #0B61D6;
margin-bottom: 20px;
}
body.service-page .hero-slider-content p {
font-size: 1.1rem;
color: #444;
margin-bottom: 25px;
max-width: 480px;
}
body.service-page .hero-slider-content .btn-primary {
display: inline-block;
padding: 12px 28px;
font-size: 1rem;
background: #0B61D6;
color: #fff;
border-radius: 6px;
transition: background 0.3s ease;
text-decoration: none;
}
body.service-page .hero-slider-content .btn-primary:hover {
background: #0847a8;
}
/* Slider Images */
body.service-page .hero-slider-images {
flex: 1;
position: relative;
height: 400px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
body.service-page .hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
}
body.service-page .hero-slide.active {
opacity: 1;
}
/* Slider Controls */
body.service-page .slider-controls {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
body.service-page .slider-dot {
width: 12px;
height: 12px;
background: #ddd;
border-radius: 50%;
cursor: pointer;
transition: background 0.3s ease;
}
body.service-page .slider-dot.active {
background: #0B61D6;
}
/* Responsive */
@media (max-width: 992px) {
body.service-page .hero-slider-section {
flex-direction: column;
text-align: center;
padding: 60px 5%;
}
body.service-page .hero-slider-content {
max-width: 100%;
margin-bottom: 30px;
}
body.service-page .hero-slider-images {
width: 100%;
height: 300px;
}
}
@media (max-width: 600px) {
body.service-page .hero-slider-content h1 {
font-size: 2rem;
}
body.service-page .hero-slider-content p {
font-size: 1rem;
}
}
/* ================================
SERVICE PAGE – VISION & MISSION
================================ */
body.service-page .vision-mission-section {
display: flex;
align-items: center;
gap: 40px;
padding: 80px 5%;
background: linear-gradient(135deg, #f0f4ff, #ffffff);
border-radius: 16px;
box-shadow: 0 6px 18px rgba(0,0,0,0.05);
margin: 60px auto;
}
body.service-page .vision-mission-img,
body.service-page .vision-mission-text {
flex: 1;
}
body.service-page .vision-mission-img img {
width: 100%;
height: 100%;
max-height: 420px;
object-fit: cover;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
body.service-page .vision-mission-text h2 {
font-size: 2.4rem;
font-weight: 700;
color: #0B61D6;
margin-bottom: 20px;
}
body.service-page .vision-mission-text p {
font-size: 1.1rem;
line-height: 1.7;
color: #070707;
}
/* Responsive */
@media (max-width: 992px) {
body.service-page .vision-mission-section {
flex-direction: column;
text-align: center;
gap: 25px;
}
body.service-page .vision-mission-img img {
max-height: 300px;
}
body.service-page .vision-mission-text h2 {
font-size: 2rem;
}
}
/* ==========================
HOW WE WORK SECTION
========================== */
body.service-page .how-we-work-section {
padding: 60px 20px;
background: #f9f9f9;
text-align: center;
}
body.service-page .how-we-work-section h2 {
font-size: 2rem;
font-weight: 700;
color: #111;
margin-bottom: 40px;
}
body.service-page .how-we-work-steps {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
body.service-page .how-step {
background: #fff;
flex: 1 1 calc(25% - 20px);
padding: 30px 20px;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
cursor: pointer;
}
body.service-page .how-step h3 {
font-size: 1.25rem;
color: #0B61D6;
margin-bottom: 15px;
transition: color 0.3s ease;
}
body.service-page .how-step p {
font-size: 1rem;
color: #555;
line-height: 1.6;
transition: color 0.3s ease;
}
/* Hover effect */
body.service-page .how-step:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
background: #0B61D6; /* subtle color change */
}
body.service-page .how-step:hover h3,
body.service-page .how-step:hover p {
color: #fff; /* text turns white on hover */
}
/* Responsive */
@media (max-width: 992px) {
body.service-page .how-step {
flex: 1 1 calc(50% - 20px);
}
}
@media (max-width: 600px) {
body.service-page .how-step {
flex: 1 1 100%;
}
body.service-page .how-we-work-section h2 {
font-size: 1.6rem;
margin-bottom: 30px;
}
body.service-page .how-step h3 {
font-size: 1.1rem;
}
body.service-page .how-step p {
font-size: 0.95rem;
}
}
/* HERO SLIDER - Portfolio Page */
body.portfolio-page .hero-slider-section {
position: relative;
width: 100%;
height: 60vh;
overflow: hidden;
}
/* Slide */
body.portfolio-page .hero-slide {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
/* Active Slide */
body.portfolio-page .hero-slide.active {
opacity: 1;
}
/* Slide Text */
body.portfolio-page .hero-slider-content {
text-align: center;
padding: 20px;
animation: fadeInUp 1s ease forwards;
opacity: 0;
}
/* Headings & Paragraphs */
body.portfolio-page .hero-slider-content h1 {
font-size: 3rem;
margin-bottom: 15px;
color: #ffffff;
}
body.portfolio-page .hero-slider-content p {
font-size: 1.2rem;
margin-bottom: 20px;
color: #fcfcfc;
}
body.portfolio-page .hero-slider-content .btn-primary {
padding: 10px 25px;
font-size: 1rem;
background-color: #0099ff;
color: #000000;
text-decoration: none;
border-radius: 6px;
transition: background 0.3s ease;
}
body.portfolio-page .hero-slider-content .btn-primary:hover {
background-color: #00c3ff;
}
/* Fade-in Animation */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Dots */
body.portfolio-page .hero-dots {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
z-index: 10;
}
body.portfolio-page .hero-dots .dot {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 6px;
background: rgba(255,255,255,0.5);
border-radius: 50%;
cursor: pointer;
transition: background 0.3s ease;
}
body.portfolio-page .hero-dots .dot.active {
background: #000000;
}
/* Responsive */
@media (max-width: 1024px) {
body.portfolio-page .hero-slider-content h1 {
font-size: 2.5rem;
}
body.portfolio-page .hero-slider-content p {
font-size: 1.1rem;
}
}
@media (max-width: 768px) {
body.portfolio-page .hero-slider-content h1 {
font-size: 2rem;
}
body.portfolio-page .hero-slider-content p {
font-size: 1rem;
}
body.portfolio-page .hero-slider-section {
height: 60vh;
}
}
/* PORTFOLIO SECTION */
body.portfolio-page .portfolio-section {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
text-align: center;
}
body.portfolio-page .portfolio-section h2 {
font-size: 2.2rem;
margin-bottom: 40px;
color: #111;
}
body.portfolio-page .portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
gap: 32px;
max-width: 1300px;
margin: 0 auto;
align-items: stretch;
}
body.portfolio-page .portfolio-card {
position: relative;
overflow: hidden;
border-radius: 12px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.portfolio-page .portfolio-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
body.portfolio-page .portfolio-card:hover img {
transform: scale(1.1);
}
body.portfolio-page .portfolio-card .overlay {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #0e0d0d;
padding: 15px;
text-align: left;
transform: translateY(100%);
transition: transform 0.3s ease;
}
body.portfolio-page .portfolio-card:hover .overlay {
transform: translateY(0);
}
body.portfolio-page .portfolio-card h4 {
margin: 0;
font-size: 1.1rem;
}
/* 🔹 Portfolio Links */
body.portfolio-page .portfolio-card h4 a {
color: #111;
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
body.portfolio-page .portfolio-card h4 a:hover {
color: #0B61D6; /* hover blue */
}
/* LIGHTBOX */
body.portfolio-page #portfolio-lightbox {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(255, 255, 255, 0.85);
justify-content: center;
align-items: center;
z-index: 9999;
}
body.portfolio-page #portfolio-lightbox.show {
display: flex;
}
body.portfolio-page .lightbox-content {
position: relative;
max-width: 800px;
width: 90%;
background: #fff;
padding: 20px;
text-align: center;
border-radius: 12px;
}
body.portfolio-page .lightbox-img {
width: 100%;
height: auto;
border-radius: 10px;
}
body.portfolio-page .lightbox-title {
margin-top: 15px;
font-size: 1.5rem;
}
body.portfolio-page .lightbox-desc {
font-size: 1rem;
color: #0a0a0a;
margin-top: 10px;
}
body.portfolio-page .lightbox-content .close,
body.portfolio-page .lightbox-content .prev,
body.portfolio-page .lightbox-content .next {
position: absolute;
font-size: 2rem;
cursor: pointer;
color: #050505;
user-select: none;
}
body.portfolio-page .lightbox-content .close {
top: 10px;
right: 15px;
}
body.portfolio-page .lightbox-content .prev {
top: 50%;
left: 10px;
transform: translateY(-50%);
}
body.portfolio-page .lightbox-content .next {
top: 50%;
right: 10px;
transform: translateY(-50%);
}
/* ✅ Responsive Breakpoints */
/* Tablet */
@media (max-width: 1024px) {
body.portfolio-page .portfolio-grid {
grid-template-columns: repeat(2, 1fr); /* 2 columns */
gap: 24px;
}
body.portfolio-page .portfolio-section h2 {
font-size: 2rem;
}
body.portfolio-page .portfolio-card h4 {
font-size: 1rem;
}
}
/* Mobile */
@media (max-width: 768px) {
body.portfolio-page .portfolio-grid {
grid-template-columns: 1fr; /* 1 column */
gap: 18px;
}
body.portfolio-page .portfolio-section {
padding: 40px 15px;
}
body.portfolio-page .portfolio-section h2 {
font-size: 1.8rem;
margin-bottom: 25px;
}
body.portfolio-page .portfolio-card h4 {
font-size: 0.95rem;
}
body.portfolio-page .lightbox-content {
padding: 15px;
}
body.portfolio-page .lightbox-title {
font-size: 1.3rem;
}
body.portfolio-page .lightbox-desc {
font-size: 0.9rem;
}
}
/* Extra Small Devices */
@media (max-width: 480px) {
body.portfolio-page .portfolio-section h2 {
font-size: 1.6rem;
}
body.portfolio-page .portfolio-card h4 {
font-size: 0.9rem;
}
body.portfolio-page .lightbox-title {
font-size: 1.1rem;
}
body.portfolio-page .lightbox-desc {
font-size: 0.85rem;
}
}
/* Blog Page */
body.blog-page .blog-hero-section {
position: relative;
width: 100%;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
overflow: hidden;
}
body.blog-page .hero-slider-images {
height: 200px; /* smaller height */
background-size: cover; /* fit nicely */
background-position: center;
}
body.blog-page .blog-hero-content {
position: absolute;
z-index: 5;
text-align: center;
max-width: 700px;
padding: 0 20px;
}
body.blog-page .blog-hero-content h1 {
font-size: 3rem;
margin-bottom: 15px;
}
body.blog-page .blog-hero-content p {
font-size: 1.2rem;
margin-bottom: 25px;
}
body.blog-page .btn-primary {
background-color: #006eff;
color: #fff;
padding: 12px 30px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: 0.3s;
}
body.blog-page .btn-primary:hover {
background-color: #00aeff;
}
/* Slides */
body.blog-page .blog-hero-slides {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
body.blog-page .blog-hero-slides .slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease;
}
body.blog-page .blog-hero-slides .slide.active {
opacity: 1;
z-index: 1;
}
/* Dots */
body.blog-page .blog-dots {
position: absolute;
bottom: 25px;
display: flex;
justify-content: center;
width: 100%;
gap: 12px;
z-index: 5;
}
body.blog-page .blog-dots .dot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: 0.3s;
}
body.blog-page .blog-dots .dot.active {
background-color: #0084ff;
}
/* Responsive */
@media (max-width: 768px) {
body.blog-page .blog-hero-content h1 { font-size: 2rem; }
body.blog-page .blog-hero-content p { font-size: 1rem; }
}
@media (max-width: 480px) {
body.blog-page .blog-hero-content h1 { font-size: 1.5rem; }
body.blog-page .blog-hero-content p { font-size: 0.9rem; }
body.blog-page .btn-primary { padding: 10px 20px; }
}
/* =========================
BLOG GRID
========================= */
body.blog-page .blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
}
body.blog-page .blog-card {
background-color: #12161b;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.blog-page .blog-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
body.blog-page .blog-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
body.blog-page .blog-card .content {
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
body.blog-page .blog-card h3 {
font-size: 1.3rem;
color: #fff;
margin: 0;
}
body.blog-page .blog-card p {
font-size: 0.95rem;
color: #a8b0b8;
flex-grow: 1;
}
body.blog-page .blog-card a {
align-self: flex-start;
color: #2834d4;
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease;
}
body.blog-page .blog-card a:hover {
color: #1f48a1;
}
/* Responsive */
@media (max-width: 768px) {
body.blog-page .blog-card img {
height: 180px;
}
}
@media (max-width: 480px) {
body.blog-page .blog-card img {
height: 160px;
}
body.blog-page .blog-card h3 {
font-size: 1.1rem;
}
body.blog-page .blog-card p {
font-size: 0.85rem;
}
}
/* HERO SECTION - WebAR Page */
body.webar-page .hero {
position: relative;
height: 60vh;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
}
body.webar-page .hero::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.45); /* dark overlay for text readability */
z-index: 1;
}
body.webar-page .hero-content {
position: relative;
z-index: 2;
max-width: 800px;
color: #fff;
animation: fadeInUp 1s ease forwards;
}
body.webar-page .hero-content h1 {
font-size: 3rem;
margin-bottom: 20px;
}
body.webar-page .hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
line-height: 1.5;
}
/* Primary Button */
body.webar-page .hero-content .btn-primary {
background: #007bff;
color: #fff;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
display: inline-block;
margin: 8px; /* gap between buttons */
}
body.webar-page .hero-content .btn-primary:hover {
background: #0056b3;
box-shadow: 0 6px 18px rgba(0, 123, 255, 0.5);
transform: translateY(-2px);
}
/* Animation */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive - Tablet */
@media (max-width: 1024px) {
body.webar-page .hero-content h1 {
font-size: 2.5rem;
}
body.webar-page .hero-content p {
font-size: 1.1rem;
}
body.webar-page .hero-content .btn-primary {
padding: 12px 28px;
font-size: 0.95rem;
margin: 6px; /* spacing between buttons */
}
}
/* Responsive - Mobile */
@media (max-width: 768px) {
body.webar-page .hero-content h1 {
font-size: 2rem;
}
body.webar-page .hero-content p {
font-size: 1rem;
}
body.webar-page .hero-content .btn-primary {
display: block; /* stack vertically */
width: 100%; /* full width */
max-width: 180px; /* prevent oversized button */
margin: 10px auto; /* vertical gap + centered */
padding: 12px 0;
font-size: 0.9rem;
}
}
/* Extra small screens */
@media (max-width: 400px) {
body.webar-page .hero-content h1 {
font-size: 1.6rem;
}
body.webar-page .hero-content p {
font-size: 0.9rem;
}
body.webar-page .hero-content .btn-primary {
font-size: 0.85rem; /* smaller text for tiny screens */
padding: 10px 0;
}
}
/* ==========================
WEBAR SERVICES SECTION
========================== */
body.webar-page .our-services-section {
padding: 60px 20px;
background: #0d0d0d; /* dark background, adjust as needed */
text-align: center;
}
body.webar-page .our-services-section h2 {
font-size: 2rem;
margin-bottom: 40px;
color: #fff;
}
/* GRID */
body.webar-page .our-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
gap: 20px;
}
/* CARD */
body.webar-page .our-service-card {
position: relative;
background-size: cover;
background-position: center;
border-radius: 12px;
overflow: hidden;
height: 280px; /* equal height for all */
display: flex;
align-items: flex-end;
transition: transform 0.3s ease;
cursor: pointer;
}
body.webar-page .our-service-card:hover {
transform: translateY(-8px);
}
/* OVERLAY */
body.webar-page .our-service-card .overlay {
width: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
text-align: left;
transition: background 0.3s ease;
}
body.webar-page .our-service-card:hover .overlay {
background: rgba(0, 0, 0, 0.8);
}
body.webar-page .our-service-card h3 {
margin: 0 0 10px;
font-size: 1.2rem;
}
body.webar-page .our-service-card p {
font-size: 0.95rem;
line-height: 1.4;
}
/* RESPONSIVE */
@media (max-width: 1200px) {
body.webar-page .our-services-grid {
grid-template-columns: repeat(2, 1fr); /* 2 in a row */
}
}
@media (max-width: 768px) {
body.webar-page .our-services-grid {
grid-template-columns: 1fr; /* stack vertically */
}
}
/* Responsive */
@media (max-width: 768px) {
body.webar-page .our-services-section h2 {
font-size: 2rem;
}
body.webar-page .our-service-card {
height: 300px; /* adjust for smaller screens */
}
}
/* RELATED SERVICES SECTION */
body.webar-page .related-services {
padding: 80px 20px;
text-align: center;
background: #fff;
}
body.webar-page .related-services h2 {
font-size: 2.2rem;
color: #001c3d;
margin-bottom: 40px;
}
/* Grid Layout */
body.webar-page .services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
gap: 25px;
max-width: 1100px;
margin: 0 auto 40px;
}
body.webar-page .service-card {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
cursor: pointer;
/* Equal height fix */
display: flex;
flex-direction: column;
height: 100%;
}
body.webar-page .service-card img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
body.webar-page .service-card:hover {
transform: translateY(-8px);
}
body.webar-page .service-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: rgba(0,28,61,0.7);
color: #fff;
text-align: left;
}
body.webar-page .service-overlay h3 {
font-size: 1.4rem;
margin-bottom: 8px;
}
body.webar-page .service-overlay p {
font-size: 0.95rem;
margin: 0;
color: #e0e0e0;
}
/* 🔹 Portfolio Links */
body.webar-page .service-card h3 a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
body.webar-page .service-card h3 a:hover {
color: #0B61D6; /* hover blue */
}
/* ✅ Responsive Breakpoints */
/* Tablet: 2 columns */
@media (max-width: 1024px) {
body.webar-page .services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
body.webar-page .service-card {
height: 100%;
}
body.webar-page .service-overlay h3 {
font-size: 1.2rem;
}
body.webar-page .service-overlay p {
font-size: 0.9rem;
}
}
/* Mobile: 1 column */
@media (max-width: 768px) {
body.webar-page .services-grid {
grid-template-columns: 1fr;
gap: 18px;
}
body.webar-page .related-services h2 {
font-size: 1.8rem;
}
body.webar-page .service-card {
height: 100%;
}
body.webar-page .service-overlay h3 {
font-size: 1.1rem;
}
body.webar-page .service-overlay p {
font-size: 0.85rem;
}
}
/* ================================
WEBAR PAGE – FULL-WIDTH INFO STACK
================================ */
body.webar-page .info-stack {
width: 100%;
padding: 80px 0;
background: #f9f9f9;
}
body.webar-page .info-card {
width: 100%;
max-width: 1400px; /* keeps content neat on large screens */
margin: 0 auto;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
}
/* Image (Top by default) */
body.webar-page .info-img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Text Content */
body.webar-page .info-content {
padding: 50px;
text-align: center;
}
body.webar-page .info-content h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
color: #0B61D6;
}
body.webar-page .info-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin: 30px 0 15px;
color: #111;
}
body.webar-page .info-content p {
font-size: 1.05rem;
color: #0c0c0c;
line-height: 1.7;
margin-bottom: 18px;
}
/* Responsive Adjustments */
@media (min-width: 992px) {
body.webar-page .info-card {
flex-direction: row; /* side by side layout */
align-items: stretch;
}
body.webar-page .info-img {
flex: 1;
}
body.webar-page .info-img img {
height: 100%;
}
body.webar-page .info-content {
flex: 1.2;
text-align: left;
padding: 60px;
}
}
/* ==========================
HOW WE WORK SECTION
========================== */
body.webar-page .how-we-work-section {
padding: 60px 20px;
background: #f9f9f9;
text-align: center;
}
body.webar-page .how-we-work-section h2 {
font-size: 2rem;
font-weight: 700;
color: #111;
margin-bottom: 40px;
}
body.webar-page .how-we-work-steps {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
body.webar-page .how-step {
background: #fff;
flex: 1 1 calc(25% - 20px);
padding: 30px 20px;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
cursor: pointer;
}
body.webar-page .how-step h3 {
font-size: 1.25rem;
color: #0B61D6;
margin-bottom: 15px;
transition: color 0.3s ease;
}
body.webar-page .how-step p {
font-size: 1rem;
color: #0a0a0a;
line-height: 1.6;
transition: color 0.3s ease;
}
/* Hover effect */
body.webar-page .how-step:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
background: #0B61D6; /* subtle color change */
}
body.webar-page .how-step:hover h3,
body.webar-page .how-step:hover p {
color: #fff; /* text turns white on hover */
}
/* Responsive */
@media (max-width: 992px) {
body.webar-page .how-step {
flex: 1 1 calc(50% - 20px);
}
}
@media (max-width: 600px) {
body.webar-page .how-step {
flex: 1 1 100%;
}
body.webar-page .how-we-work-section h2 {
font-size: 1.6rem;
margin-bottom: 30px;
}
body.webar-page .how-step h3 {
font-size: 1.1rem;
}
body.webar-page .how-step p {
font-size: 0.95rem;
}
}
/* ================================
TOOLS & TECHNOLOGIES SECTION
================================ */
body.webar-page .tools-tech-section {
margin: 60px 0;
text-align: center;
}
body.webar-page .tools-tech-section h2 {
font-size: 2rem;
color: #0B61D6;
margin-bottom: 25px;
font-weight: 700;
}
body.webar-page .tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
justify-content: center;
align-items: center;
}
body.webar-page .tool-card {
background: #f5f5f5;
padding: 14px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
color: #333;
box-shadow: 0 3px 6px rgba(0,0,0,0.08);
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
body.webar-page .tool-card:hover {
transform: translateY(-5px);
background: #0B61D6;
color: #fff;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
body.webar-page .tools-tech-section h2 {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
body.webar-page .tools-tech-section h2 {
font-size: 1.6rem;
}
body.webar-page .tool-card {
font-size: 0.95rem;
padding: 12px 16px;
}
}
@media (max-width: 480px) {
body.webar-page .tools-grid {
grid-template-columns: 1fr 1fr; /* two per row on small screens */
}
body.webar-page .tool-card {
font-size: 0.9rem;
padding: 10px 14px;
}
}
/* HERO SECTION - VR Page */
body.vr-page .hero {
position: relative;
height: 60vh; /* full screen height */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8%;
color: #fff;
text-align: center;
}
/* Dark overlay */
body.vr-page .hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.55);
z-index: 1;
}
/* Content */
body.vr-page .hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
body.vr-page .hero-content h1 {
font-size: 3rem;
margin-bottom: 20px;
line-height: 1.2;
}
body.vr-page .hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
line-height: 1.5;
}
/* Primary Button */
body.vr-page .hero-content .btn-primary {
background: #007bff;
color: #fff;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
body.vr-page .hero-content .btn-primary:hover {
background: #0056b3;
box-shadow: 0 6px 18px rgba(0, 123, 255, 0.5);
transform: translateY(-2px);
}
/* Responsive - Tablet */
@media (max-width: 1024px) {
body.vr-page .hero-content h1 {
font-size: 2.5rem;
}
body.vr-page .hero-content p {
font-size: 1.1rem;
}
body.vr-page .hero-content .btn-primary {
padding: 12px 28px;
font-size: 0.95rem;
margin: 6px; /* spacing between buttons */
}
}
/* Responsive - Mobile */
@media (max-width: 768px) {
body.vr-page .hero-content h1 {
font-size: 2rem;
}
body.vr-page .hero-content p {
font-size: 1rem;
}
body.vr-page .hero-content .btn-primary {
display: block; /* stack vertically */
width: 100%; /* full width */
max-width: 180px; /* prevent oversized button */
margin: 10px auto; /* vertical gap + centered */
padding: 12px 0;
font-size: 0.9rem;
}
}
/* Extra small screens */
@media (max-width: 400px) {
body.vr-page .hero-content h1 {
font-size: 1.6rem;
}
body.vr-page .hero-content p {
font-size: 0.9rem;
}
body.vr-page .hero-content .btn-primary {
font-size: 0.85rem; /* smaller text for tiny screens */
padding: 10px 0;
}
}
/* ================================
VR PAGE – FULL-WIDTH INFO STACK
================================ */
body.vr-page .info-stack {
width: 100%;
padding: 80px 0;
background: #f9f9f9;
}
body.vr-page .info-card {
width: 100%;
max-width: 1400px; /* keeps content neat on large screens */
margin: 0 auto;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
}
/* Image (Top by default) */
body.vr-page .info-img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Text Content */
body.vr-page .info-content {
padding: 50px;
text-align: center;
}
body.vr-page .info-content h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
color: #0B61D6;
}
body.vr-page .info-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin: 30px 0 15px;
color: #111;
}
body.vr-page .info-content p {
font-size: 1.05rem;
color: #080808;
line-height: 1.7;
margin-bottom: 18px;
}
/* Responsive Adjustments */
@media (min-width: 992px) {
body.vr-page .info-card {
flex-direction: row; /* side by side layout */
align-items: stretch;
}
body.vr-page .info-img {
flex: 1;
}
body.vr-page .info-img img {
height: 100%;
}
body.vr-page .info-content {
flex: 1.2;
text-align: left;
padding: 60px;
}
}
/* VR Services Section */
body.vr-page .our-services-section {
padding: 60px 20px;
background: #f8fbff;
text-align: center;
}
body.vr-page .our-services-section h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 15px;
color: #002855;
}
body.vr-page .our-services-section p {
margin-bottom: 40px;
color: #444;
font-size: 1rem;
}
/* Grid Layout */
body.vr-page .our-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
align-items: stretch; /* ensures equal card heights */
}
/* Service Card */
body.vr-page .our-service-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0,0,0,0.08);
display: flex;
flex-direction: column; /* stack image + content */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.vr-page .our-service-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}
/* Card Image */
body.vr-page .our-service-card img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
flex-shrink: 0;
}
/* Card Content */
body.vr-page .service-content {
flex: 1; /* make content fill space */
padding: 15px 18px;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
}
body.vr-page .service-content h3 {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 8px;
color: #002855;
}
body.vr-page .service-content p {
font-size: 0.9rem;
line-height: 1.5;
color: #000000;
margin-bottom: 8px;
}
/* Bullet Points */
body.vr-page .service-content ul {
font-size: 0.85rem;
margin-left: 18px;
color: #444;
line-height: 1.4;
margin-top: auto; /* pushes bullets to bottom */
}
/* Responsive */
@media (max-width: 992px) {
body.vr-page .our-services-grid {
grid-template-columns: 1fr;
}
body.vr-page .our-service-card img {
height: 140px;
}
}
/* RELATED SERVICES SECTION */
body.vr-page .related-services1 {
padding: 80px 20px;
text-align: center;
background: #fff;
}
body.vr-page .related-services1 h2 {
font-size: 2.2rem;
color: #001c3d;
margin-bottom: 40px;
}
/* one row layout */
body.vr-page .services-grid1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
max-width: 1100px;
margin: 0 auto 40px;
}
body.vr-page .service-card1 {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
cursor: pointer;
}
body.vr-page .service-card1 img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
body.vr-page .service-card1:hover {
transform: translateY(-8px);
}
body.vr-page .service-overlay1 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: rgba(0,28,61,0.7);
color: #fff;
text-align: left;
}
body.vr-page .service-overlay1 h3 {
font-size: 1.4rem;
margin-bottom: 8px;
}
body.vr-page .service-overlay1 p {
font-size: 0.95rem;
margin: 0;
color: #e0e0e0;
}
/* 🔹 Portfolio Links */
body.vr-page .service-card1 h3 a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
body.vr-page .service-card1 h3 a:hover {
color: #0B61D6; /* hover pe blue */}
/* ✅ Responsive Breakpoints */
/* Tablet: 2 columns */
@media (max-width: 1024px) {
body.vr-page .services-grid1 {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
body.vr-page .service-card1 {
height: 100%;
}
body.vr-page .service-overlay1 h3 {
font-size: 1.2rem;
}
body.vr-page .service-overlay1 p {
font-size: 0.9rem;
}
}
/* Mobile: 1 column */
@media (max-width: 768px) {
body.vr-page .services-grid1 {
grid-template-columns: 1fr;
gap: 18px;
}
body.vr-page .related-services1 h2 {
font-size: 1.8rem;
}
body.vr-page .service-card1 {
height: 100%;
}
body.vr-page .service-overlay1 h3 {
font-size: 1.1rem;
}
body.vr-page .service-overlay1 p {
font-size: 0.85rem;
}
}
/* ================================
TOOLS & TECHNOLOGIES SECTION
================================ */
body.vr-page .tools-tech-section {
margin: 60px 0;
text-align: center;
}
body.vr-page .tools-tech-section h2 {
font-size: 2rem;
color: #0B61D6;
margin-bottom: 25px;
font-weight: 700;
}
body.vr-page .tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
justify-content: center;
align-items: center;
}
body.vr-page .tool-card {
background: #f5f5f5;
padding: 14px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
color: #333;
box-shadow: 0 3px 6px rgba(0,0,0,0.08);
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
body.vr-page .tool-card:hover {
transform: translateY(-5px);
background: #0B61D6;
color: #fff;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
body.vr-page .tools-tech-section h2 {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
body.vr-page .tools-tech-section h2 {
font-size: 1.6rem;
}
body.vr-page .tool-card {
font-size: 0.95rem;
padding: 12px 16px;
}
}
@media (max-width: 480px) {
body.vr-page .tools-grid {
grid-template-columns: 1fr 1fr; /* two per row on small screens */
}
body.vr-page .tool-card {
font-size: 0.9rem;
padding: 10px 14px;
}
}
/* ===============================
VR PAGE – SERVICES SECTION
================================ */
body.vr-page .vr-services {
padding: 80px 0; /* remove side padding so cards touch edges */
background: #fff;
color: #111;
}
body.vr-page .vr-services-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px; /* keep small container padding */
}
body.vr-page .vr-services-intro {
margin-bottom: 50px;
text-align: center;
}
body.vr-page .vr-services-intro h2 {
font-size: 2rem;
font-weight: 700;
color: #0B0B6E;
margin-bottom: 15px;
}
body.vr-page .vr-services-intro p {
font-size: 1rem;
color: #141414;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
}
/* Service Cards Grid */
body.vr-page .vr-services-grid {
display: flex;
flex-wrap: wrap;
gap: 20px; /* spacing only between cards */
}
/* First row → 3 equal */
body.vr-page .vr-services-grid .service-card:nth-child(-n+3) {
flex: 1 1 calc(33.333% - 13.33px);
max-width: calc(33.333% - 13.33px);
}
/* Second row → 2 equal (50% each) */
body.vr-page .vr-services-grid .service-card:nth-child(4),
body.vr-page .vr-services-grid .service-card:nth-child(5) {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
/* Card Styling */
body.vr-page .service-card {
background: #ffffff;
color: #000000;
border-radius: 0;
padding: 25px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
body.vr-page .service-card h3 {
font-size: 1.25rem;
color: #0B61D6;
margin-bottom: 15px;
transition: color 0.3s ease;
}
body.vr-page .service-card {
font-size: 1rem;
color: #0a0a0a;
line-height: 1.6;
transition: color 0.3s ease;
}
body.vr-page .service-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
background: #0B61D6; /* subtle color change */
}
body.vr-page .service-card:hover h3,
body.vr-page .service-card:hover p {
color: #fff; /* text turns white on hover */
}
/* ================= Responsive ================= */
/* Tablet: 2 per row */
@media (max-width: 992px) {
body.vr-page .vr-services-grid {
gap: 15px;
}
body.vr-page .vr-services-grid .service-card {
flex: 1 1 calc(50% - 7.5px) !important;
max-width: calc(50% - 7.5px) !important;
}
}
/* Mobile: 1 per row */
@media (max-width: 600px) {
body.vr-page .vr-services-grid {
gap: 15px;
}
body.vr-page .vr-services-grid .service-card {
flex: 1 1 100% !important;
max-width: 100% !important;
}
}
/* GAME HERO SECTION */
body.game-page .hero {
position: relative;
height: 60vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8%;
color: #fff;
text-align: center;
}
/* Overlay */
body.game-page .hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6); /* dark overlay */
z-index: 1;
}
/* Content */
body.game-page .hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
body.game-page .hero-content h1 {
font-size: 3rem;
margin-bottom: 20px;
line-height: 1.2;
}
body.game-page .hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
line-height: 1.5;
}
/* Primary Button */
body.game-page .hero-content .btn-primary {
background: #007bff;
color: #fff;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
body.game-page .hero-content .btn-primary:hover {
background: #0056b3;
box-shadow: 0 6px 18px rgba(0, 123, 255, 0.5);
transform: translateY(-2px);
}
/* Responsive - Tablet */
@media (max-width: 1024px) {
body.game-page .hero-content h1 {
font-size: 2.5rem;
}
body.game-page .hero-content p {
font-size: 1.1rem;
}
body.game-page .hero-content .btn-primary {
padding: 12px 28px;
font-size: 0.95rem;
margin: 6px; /* spacing between buttons */
}
}
/* Responsive - Mobile */
@media (max-width: 768px) {
body.game-page .hero-content h1 {
font-size: 2rem;
}
body.game-page .hero-content p {
font-size: 1rem;
}
body.game-page .hero-content .btn-primary {
display: block; /* stack vertically */
width: 100%; /* full width */
max-width: 180px; /* prevent oversized button */
margin: 10px auto; /* vertical gap + centered */
padding: 12px 0;
font-size: 0.9rem;
}
}
/* Extra small screens */
@media (max-width: 400px) {
body.game-page .hero-content h1 {
font-size: 1.6rem;
}
body.game-page .hero-content p {
font-size: 0.9rem;
}
body.game-page .hero-content .btn-primary {
font-size: 0.85rem; /* smaller text for tiny screens */
padding: 10px 0;
}
}
/* ================================
Game PAGE – FULL-WIDTH INFO STACK
================================ */
body.game-page .info-stack {
width: 100%;
padding: 80px 0;
background: #f9f9f9;
}
body.game-page .info-card {
width: 100%;
max-width: 1400px; /* keeps content neat on large screens */
margin: 0 auto;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
}
/* Image (Top by default) */
body.game-page .info-img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Text Content */
body.game-page .info-content {
padding: 50px;
text-align: center;
}
body.game-page .info-content h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
color: #0B61D6;
}
body.game-page .info-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin: 30px 0 15px;
color: #111;
}
body.game-page .info-content p {
font-size: 1.05rem;
color: #000000;
line-height: 1.7;
margin-bottom: 18px;
}
/* Responsive Adjustments */
@media (min-width: 992px) {
body.game-page .info-card {
flex-direction: row; /* side by side layout */
align-items: stretch;
}
body.game-page .info-img {
flex: 1;
}
body.game-page .info-img img {
height: 100%;
}
body.game-page .info-content {
flex: 1.2;
text-align: left;
padding: 60px;
}
}
/* GAME SERVICES SECTION */
body.game-page .our-services-section {
padding: 60px 20px;
background: #ffffff; /* dark background */
text-align: center;
}
body.game-page .our-services-section h2 {
font-size: 2rem;
margin-bottom: 40px;
color: #000000;
position: relative;
}
body.game-page .our-services-section h2::after {
content: "";
display: block;
width: 90px;
height: 3px;
background: #3c59ff; /* neon pink accent */
margin: 12px auto 0;
border-radius: 2px;
}
/* GRID */
body.game-page .our-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* CARD */
body.game-page .our-service-card {
position: relative;
background-size: cover;
background-position: center;
border-radius: 12px;
overflow: hidden;
height: 280px;
display: flex;
align-items: flex-end;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
body.game-page .our-service-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 0 18px rgba(247, 247, 247, 0.6);
}
/* OVERLAY */
body.game-page .our-service-card .overlay {
width: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
text-align: left;
transition: background 0.3s ease;
}
body.game-page .our-service-card:hover .overlay {
background: rgba(0, 0, 0, 0.8);
}
body.game-page .our-service-card h3 {
margin: 0 0 10px;
font-size: 1.2rem;
color: #ffffff; /* neon pink */
}
body.game-page .our-service-card p {
font-size: 0.95rem;
line-height: 1.4;
color: #ddd;
}
/* RESPONSIVE */
@media (max-width: 1200px) {
body.game-page .our-services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
body.game-page .our-services-grid {
grid-template-columns: 1fr;
}
}
/* ==========================
HOW WE WORK SECTION
========================== */
body.game-page .how-we-work-section {
padding: 60px 20px;
background: #f9f9f9;
text-align: center;
}
body.game-page .how-we-work-section h2 {
font-size: 2rem;
font-weight: 700;
color: #111;
margin-bottom: 40px;
}
body.game-page .how-we-work-steps {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
body.game-page .how-step {
background: #fff;
flex: 1 1 calc(25% - 20px);
padding: 30px 20px;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
cursor: pointer;
}
body.game-page .how-step h3 {
font-size: 1.25rem;
color: #0B61D6;
margin-bottom: 15px;
transition: color 0.3s ease;
}
body.game-page .how-step p {
font-size: 1rem;
color: #0a0a0a;
line-height: 1.6;
transition: color 0.3s ease;
}
/* Hover effect */
body.game-page .how-step:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
background: #0B61D6; /* subtle color change */
}
body.game-page .how-step:hover h3,
body.game-page .how-step:hover p {
color: #fff; /* text turns white on hover */
}
/* Responsive */
@media (max-width: 992px) {
body.game-page .how-step {
flex: 1 1 calc(50% - 20px);
}
}
@media (max-width: 600px) {
body.game-page .how-step {
flex: 1 1 100%;
}
body.game-page .how-we-work-section h2 {
font-size: 1.6rem;
margin-bottom: 30px;
}
body.game-page .how-step h3 {
font-size: 1.1rem;
}
body.game-page .how-step p {
font-size: 0.95rem;
}
}
/* RELATED SERVICES SECTION */
body.game-page .related-services {
padding: 80px 20px;
text-align: center;
background: #fff;
}
body.game-page .related-services h2 {
font-size: 2.2rem;
color: #001c3d;
margin-bottom: 40px;
}
/* Grid Layout */
body.game-page .services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
gap: 25px;
max-width: 1100px;
margin: 0 auto 40px;
}
body.game-page .service-card {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
cursor: pointer;
/* Equal height fix */
display: flex;
flex-direction: column;
height: 100%;
}
body.game-page .service-card img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
body.game-page .service-card:hover {
transform: translateY(-8px);
}
body.game-page .service-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: rgba(0,28,61,0.7);
color: #fff;
text-align: left;
}
body.game-page .service-overlay h3 {
font-size: 1.4rem;
margin-bottom: 8px;
}
body.game-page .service-overlay p {
font-size: 0.95rem;
margin: 0;
color: #e0e0e0;
}
/* 🔹 Portfolio Links */
body.game-page .service-card h3 a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
body.game-page .service-card h3 a:hover {
color: #0B61D6; /* hover blue */
}
/* ✅ Responsive Breakpoints */
/* Tablet: 2 columns */
@media (max-width: 1024px) {
body.game-page .services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
body.game-page .service-card {
height: 100%;
}
body.game-page .service-overlay h3 {
font-size: 1.2rem;
}
body.game-page .service-overlay p {
font-size: 0.9rem;
}
}
/* Mobile: 1 column */
@media (max-width: 768px) {
body.game-page .services-grid {
grid-template-columns: 1fr;
gap: 18px;
}
body.game-page .related-services h2 {
font-size: 1.8rem;
}
body.game-page .service-card {
height: 100%;
}
body.game-page .service-overlay h3 {
font-size: 1.1rem;
}
body.game-page .service-overlay p {
font-size: 0.85rem;
}
}
/* TEAM HERO SECTION */
body.team-page .hero {
position: relative;
height: 70vh; /* shorter than full screen for professional feel */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 0 20px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Overlay for readability */
body.team-page .hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 40, 85, 0.55); /* semi-transparent navy blue overlay */
z-index: 1;
}
/* Content wrapper */
body.team-page .hero .wrap {
position: relative;
z-index: 2;
max-width: 800px;
}
/* Headline */
body.team-page .hero h1 {
font-size: 3rem;
margin-bottom: 15px;
font-weight: 700;
color: #ffffff;
}
/* Subtext */
body.team-page .hero p.muted {
font-size: 1.2rem;
color: #d0e6ff; /* soft blue tone */
line-height: 1.5;
}
/* Responsive */
@media (max-width: 992px) {
body.team-page .hero {
height: 60vh;
}
body.team-page .hero h1 {
font-size: 2.4rem;
}
body.team-page .hero p.muted {
font-size: 1rem;
}
}
@media (max-width: 600px) {
body.team-page .hero {
height: 50vh;
padding: 0 15px;
}
body.team-page .hero h1 {
font-size: 1.9rem;
}
body.team-page .hero p.muted {
font-size: 0.95rem;
}
}
/* TEAM SECTION */
body.team-page .team.section {
padding: 80px 20px;
background: #f9fbff; /* light bluish-white background */
text-align: center;
}
body.team-page .team.section h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
color: #002855; /* dark navy */
}
body.team-page .team.section p.muted {
font-size: 1.1rem;
color: #5c6f82;
max-width: 750px;
margin: 0 auto 50px;
line-height: 1.6;
}
/* Team Grid */
body.team-page .team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
/* Team Card */
body.team-page .team-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
padding: 25px 15px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-top: 5px solid #007bff; /* theme blue accent */
}
body.team-page .team-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0, 123, 255, 0.4); /* blue glow */
}
/* Images (Equal Size) */
body.team-page .team-card img {
width: 100%;
height: 250px; /* fixed height */
object-fit: cover; /* crop nicely */
border-radius: 10px;
margin-bottom: 15px;
}
/* Member Name */
body.team-page .team-card h4 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 8px;
}
body.team-page .team-card h4 a {
color: #002855;
text-decoration: none;
transition: color 0.3s ease;
}
body.team-page .team-card h4 a:hover {
color: #007bff; /* theme blue */
}
/* Role / Position */
body.team-page .team-card p.muted {
font-size: 0.95rem;
color: #6c7a89;
margin: 0;
}
/* Responsive */
@media (max-width: 992px) {
body.team-page .team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
body.team-page .team-grid {
grid-template-columns: 1fr;
}
body.team-page .team-card img {
height: 220px;
}
}
/* HERO SECTION - AR Page */
body.ar-page .hero {
position: relative;
height: 60vh; /* full screen height */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8%;
color: #fff;
text-align: center;
}
/* Dark overlay */
body.ar-page .hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.55);
z-index: 1;
}
/* Content */
body.ar-page .hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
body.ar-page .hero-content h1 {
font-size: 3rem;
margin-bottom: 20px;
line-height: 1.2;
}
body.ar-page .hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
line-height: 1.5;
}
/* Primary Button */
body.ar-page .hero-content .btn-primary {
background: #007bff;
color: #fff;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
body.ar-page .hero-content .btn-primary:hover {
background: #0056b3;
box-shadow: 0 6px 18px rgba(0, 123, 255, 0.5);
transform: translateY(-2px);
}
/* Responsive - Tablet */
@media (max-width: 1024px) {
body.ar-page .hero-content h1 {
font-size: 2.5rem;
}
body.ar-page .hero-content p {
font-size: 1.1rem;
}
body.ar-page .hero-content .btn-primary {
padding: 12px 28px;
font-size: 0.95rem;
margin: 6px; /* spacing between buttons */
}
}
/* Responsive - Mobile */
@media (max-width: 768px) {
body.ar-page .hero-content h1 {
font-size: 2rem;
}
body.ar-page .hero-content p {
font-size: 1rem;
}
body.ar-page .hero-content .btn-primary {
display: block; /* stack vertically */
width: 100%; /* full width */
max-width: 180px; /* prevent oversized button */
margin: 0 auto; /* vertical gap + centered */
padding: 12px 0;
font-size: 0.9rem;
}
}
/* Extra small screens */
@media (max-width: 400px) {
body.ar-page .hero-content h1 {
font-size: 1.6rem;
}
body.ar-page .hero-content p {
font-size: 0.9rem;
}
body.ar-page .hero-content .btn-primary {
font-size: 0.85rem; /* smaller text for tiny screens */
padding: 10px 0;
}
}
/* ================================
AR PAGE – FULL-WIDTH INFO STACK
================================ */
body.ar-page .info-stack {
width: 100%;
padding: 80px 0;
background: #f9f9f9;
}
body.ar-page .info-card {
width: 100%;
max-width: 1400px; /* keeps content neat on large screens */
margin: 0 auto;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
}
/* Image (Top by default) */
body.ar-page .info-img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Text Content */
body.ar-page .info-content {
padding: 50px;
text-align: center;
}
body.ar-page .info-content h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
color: #0B61D6;
}
body.ar-page .info-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin: 30px 0 15px;
color: #111;
}
body.ar-page .info-content p {
font-size: 1.05rem;
color: #444;
line-height: 1.7;
margin-bottom: 18px;
}
/* Responsive Adjustments */
@media (min-width: 992px) {
body.ar-page .info-card {
flex-direction: row; /* side by side layout */
align-items: stretch;
}
body.ar-page .info-img {
flex: 1;
}
body.ar-page .info-img img {
height: 100%;
}
body.ar-page .info-content {
flex: 1.2;
text-align: left;
padding: 60px;
}
}
/* AR SERVICES SECTION */
body.ar-page .our-services-section {
padding: 80px 20px;
background: #f9fbff; /* light bluish theme background */
text-align: center;
}
body.ar-page .our-services-section h2 {
font-size: 2.5rem;
font-weight: 700;
color: #002855;
margin-bottom: 50px;
}
/* Service Grid */
body.ar-page .our-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
/* Service Card */
body.ar-page .our-service-card {
position: relative;
height: 300px;
border-radius: 12px;
background-size: cover;
background-position: center;
overflow: hidden;
cursor: pointer;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
body.ar-page .our-service-card::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 40, 85, 0.55); /* dark blue overlay */
transition: background 0.4s ease;
}
body.ar-page .our-service-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0, 123, 255, 0.35);
}
body.ar-page .our-service-card:hover::before {
background: rgba(0, 123, 255, 0.6); /* lighter blue on hover */
}
/* Overlay Content */
body.ar-page .our-service-card .overlay {
position: relative;
z-index: 2;
top: 50%;
transform: translateY(-50%);
padding: 20px;
color: #fff;
}
body.ar-page .our-service-card .overlay h3 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 10px;
}
body.ar-page .our-service-card .overlay p {
font-size: 0.95rem;
line-height: 1.5;
color: #dbe7f5;
}
/* Buttons */
body.ar-page .cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
body.ar-page .btn-primary,
body.ar-page .btn-secondary {
padding: 14px 32px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
body.ar-page .btn-primary {
background: #fff;
color: #007bff;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
body.ar-page .btn-primary:hover {
background: #f1f5ff;
transform: translateY(-2px);
}
body.ar-page .btn-secondary {
background: transparent;
border: 2px solid #fff;
color: #fff;
}
body.ar-page .btn-secondary:hover {
background: #fff;
color: #007bff;
}
/* Responsive */
@media (max-width: 1200px) {
body.ar-page .our-services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
body.ar-page .our-services-grid {
grid-template-columns: 1fr;
}
body.ar-page .our-service-card {
height: 250px;
}
body.ar-page .final-cta-section h2 {
font-size: 1.8rem;
}
}
/* ===============================
AR PAGE – SERVICES SECTION
================================ */
body.ar-page .ar-services {
padding: 80px 0; /* remove side padding so cards touch edges */
background: #fff;
color: #111;
}
body.ar-page .ar-services-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px; /* keep small container padding */
}
body.ar-page .ar-services-intro {
margin-bottom: 50px;
text-align: center;
}
body.ar-page .ar-services-intro h2 {
font-size: 2rem;
font-weight: 700;
color: #0B0B6E;
margin-bottom: 15px;
}
body.ar-page .ar-services-intro p {
font-size: 1rem;
color: #141414;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
}
/* Service Cards Grid */
body.ar-page .ar-services-grid {
display: flex;
flex-wrap: wrap;
gap: 20px; /* spacing only between cards */
}
/* First row → 3 equal */
body.ar-page .ar-services-grid .service-card:nth-child(-n+3) {
flex: 1 1 calc(33.333% - 13.33px);
max-width: calc(33.333% - 13.33px);
}
/* Second row → 2 equal (50% each) */
body.ar-page .ar-services-grid .service-card:nth-child(4),
body.ar-page .ar-services-grid .service-card:nth-child(5) {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
/* Card Styling */
body.ar-page .service-card {
background: #ffffff;
color: #000000;
border-radius: 0;
padding: 25px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
body.ar-page .service-card h3 {
font-size: 1.25rem;
color: #0B61D6;
margin-bottom: 15px;
transition: color 0.3s ease;
}
body.ar-page .service-card {
font-size: 1rem;
color: #0a0a0a;
line-height: 1.6;
transition: color 0.3s ease;
}
body.ar-page .service-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
background: #0B61D6; /* subtle color change */
}
body.ar-page .service-card:hover h3,
body.ar-page .service-card:hover p {
color: #fff; /* text turns white on hover */
}
/* ================= Responsive ================= */
/* Tablet: 2 per row */
@media (max-width: 992px) {
body.ar-page .ar-services-grid {
gap: 15px;
}
body.ar-page .ar-services-grid .service-card {
flex: 1 1 calc(50% - 7.5px) !important;
max-width: calc(50% - 7.5px) !important;
}
}
/* Mobile: 1 per row */
@media (max-width: 600px) {
body.ar-page .ar-services-grid {
gap: 15px;
}
body.ar-page .ar-services-grid .service-card {
flex: 1 1 100% !important;
max-width: 100% !important;
}
}
/* RELATED SERVICES SECTION */
body.ar-page .related-services1 {
padding: 80px 20px;
text-align: center;
background: #fff;
}
body.ar-page .related-services1 h2 {
font-size: 2.2rem;
color: #001c3d;
margin-bottom: 40px;
}
/* one row layout */
body.ar-page .services-grid1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
max-width: 1100px;
margin: 0 auto 40px;
}
body.ar-page .service-card1 {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
cursor: pointer;
}
body.ar-page .service-card1 img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
body.ar-page .service-card1:hover {
transform: translateY(-8px);
}
body.ar-page .service-overlay1 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: rgba(0,28,61,0.7);
color: #fff;
text-align: left;
}
body.ar-page .service-overlay1 h3 {
font-size: 1.4rem;
margin-bottom: 8px;
}
body.ar-page .service-overlay1 p {
font-size: 0.95rem;
margin: 0;
color: #e0e0e0;
}
/* 🔹 Portfolio Links */
body.ar-page .service-card1 h3 a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
body.ar-page .service-card1 h3 a:hover {
color: #0B61D6; /* hover pe blue */}
/* ✅ Responsive Breakpoints */
/* Tablet: 2 columns */
@media (max-width: 1024px) {
body.ar-page .services-grid1 {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
body.ar-page .service-card1 {
height: 100%;
}
body.ar-page .service-overlay1 h3 {
font-size: 1.2rem;
}
body.ar-page .service-overlay1 p {
font-size: 0.9rem;
}
}
/* Mobile: 1 column */
@media (max-width: 768px) {
body.ar-page .services-grid1 {
grid-template-columns: 1fr;
gap: 18px;
}
body.ar-page .related-services1 h2 {
font-size: 1.8rem;
}
body.ar-page .service-card1 {
height: 100%;
}
body.ar-page .service-overlay1 h3 {
font-size: 1.1rem;
}
body.ar-page .service-overlay1 p {
font-size: 0.85rem;
}
}
/* ==========================
HOW WE WORK SECTION
========================== */
body.ar-page .how-we-work-section {
padding: 60px 20px;
background: #f9f9f9;
text-align: center;
}
body.ar-page .how-we-work-section h2 {
font-size: 2rem;
font-weight: 700;
color: #111;
margin-bottom: 40px;
}
body.ar-page .how-we-work-steps {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
body.ar-page .how-step {
background: #fff;
flex: 1 1 calc(25% - 20px);
padding: 30px 20px;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
cursor: pointer;
}
body.ar-page .how-step h3 {
font-size: 1.25rem;
color: #0B61D6;
margin-bottom: 15px;
transition: color 0.3s ease;
}
body.ar-page .how-step p {
font-size: 1rem;
color: #0a0a0a;
line-height: 1.6;
transition: color 0.3s ease;
}
/* Hover effect */
body.ar-page .how-step:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
background: #0B61D6; /* subtle color change */
}
body.ar-page .how-step:hover h3,
body.ar-page .how-step:hover p {
color: #fff; /* text turns white on hover */
}
/* Responsive */
@media (max-width: 992px) {
body.ar-page .how-step {
flex: 1 1 calc(50% - 20px);
}
}
@media (max-width: 600px) {
body.ar-page .how-step {
flex: 1 1 100%;
}
body.ar-page .how-we-work-section h2 {
font-size: 1.6rem;
margin-bottom: 30px;
}
body.ar-page .how-step h3 {
font-size: 1.1rem;
}
body.ar-page .how-step p {
font-size: 0.95rem;
}
}
/* ================================
TOOLS & TECHNOLOGIES SECTION
================================ */
body.ar-page .tools-tech-section {
margin: 60px 0;
text-align: center;
}
body.ar-page .tools-tech-section h2 {
font-size: 2rem;
color: #0B61D6;
margin-bottom: 25px;
font-weight: 700;
}
body.ar-page .tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
justify-content: center;
align-items: center;
}
body.ar-page .tool-card {
background: #f5f5f5;
padding: 14px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
color: #333;
box-shadow: 0 3px 6px rgba(0,0,0,0.08);
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
body.ar-page .tool-card:hover {
transform: translateY(-5px);
background: #0B61D6;
color: #fff;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
body.ar-page .tools-tech-section h2 {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
body.ar-page .tools-tech-section h2 {
font-size: 1.6rem;
}
body.ar-page .tool-card {
font-size: 0.95rem;
padding: 12px 16px;
}
}
@media (max-width: 480px) {
body.ar-page .tools-grid {
grid-template-columns: 1fr 1fr; /* two per row on small screens */
}
body.ar-page .tool-card {
font-size: 0.9rem;
padding: 10px 14px;
}
}
/* BLOCKCHAIN HERO SECTION */
body.blockchain-page .hero {
position: relative;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-size: cover;
background-position: center;
color: #fff;
overflow: hidden;
}
/* Dark overlay for readability */
body.blockchain-page .hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 40, 85, 0.6); /* navy transparent overlay */
z-index: 0;
}
body.blockchain-page .hero-content {
position: relative;
z-index: 1;
max-width: 850px;
padding: 20px;
}
body.blockchain-page .hero-content h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
color: #fff;
text-shadow: 0 3px 12px rgba(0,0,0,0.5);
}
body.blockchain-page .hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
color: #dce7f5;
line-height: 1.6;
}
/* Primary Button */
body.blockchain-page .hero-content .btn-primary {
background: #007bff;
color: #fff;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
body.blockchain-page .hero-content .btn-primary:hover {
background: #0056b3;
box-shadow: 0 6px 18px rgba(0, 123, 255, 0.5);
transform: translateY(-2px);
}
/* Responsive - Tablet */
@media (max-width: 1024px) {
body.blockchain-page .hero-content h1 {
font-size: 2.5rem;
}
body.blockchain-page .hero-content p {
font-size: 1.1rem;
}
body.blockchain-page .hero-content .btn-primary {
padding: 12px 28px;
font-size: 0.95rem;
margin: 6px; /* spacing between buttons */
}
}
/* Responsive - Mobile */
@media (max-width: 768px) {
body.blockchain-page .hero-content h1 {
font-size: 2rem;
}
body.blockchain-page .hero-content p {
font-size: 1rem;
}
body.blockchain-page .hero-content .btn-primary {
display: block; /* stack vertically */
width: 100%; /* full width */
max-width: 180px; /* prevent oversized button */
margin: 10px auto; /* vertical gap + centered */
padding: 12px 0;
font-size: 0.9rem;
}
}
/* Extra small screens */
@media (max-width: 400px) {
body.blockchain-page .hero-content h1 {
font-size: 1.6rem;
}
body.blockchain-page .hero-content p {
font-size: 0.9rem;
}
body.blockchain-page .hero-content .btn-primary {
font-size: 0.85rem; /* smaller text for tiny screens */
padding: 10px 0;
}
}
/* ================================
Blockchain PAGE – FULL-WIDTH INFO STACK
================================ */
body.blockchain-page .info-stack {
width: 100%;
padding: 80px 0;
background: #f9f9f9;
}
body.blockchain-page .info-card {
width: 100%;
max-width: 1400px; /* keeps content neat on large screens */
margin: 0 auto;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
}
/* Image (Top by default) */
body.blockchain-page .info-img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Text Content */
body.blockchain-page .info-content {
padding: 50px;
text-align: center;
}
body.blockchain-page .info-content h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
color: #0B61D6;
}
body.blockchain-page .info-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin: 30px 0 15px;
color: #111;
}
body.blockchain-page .info-content p {
font-size: 1.05rem;
color: #444;
line-height: 1.7;
margin-bottom: 18px;
}
/* Responsive Adjustments */
@media (min-width: 992px) {
body.blockchain-page .info-card {
flex-direction: row; /* side by side layout */
align-items: stretch;
}
body.blockchain-page .info-img {
flex: 1;
}
body.blockchain-page .info-img img {
height: 100%;
}
body.blockchain-page .info-content {
flex: 1.2;
text-align: left;
padding: 60px;
}
}
/* ==========================
HOW WE WORK SECTION
========================== */
body.blockchain-page .how-we-work-section {
padding: 60px 20px;
background: #f9f9f9;
text-align: center;
}
body.blockchain-page .how-we-work-section h2 {
font-size: 2rem;
font-weight: 700;
color: #111;
margin-bottom: 40px;
}
body.blockchain-page .how-we-work-steps {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
body.blockchain-page .how-step {
background: #fff;
flex: 1 1 calc(25% - 20px);
padding: 30px 20px;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
cursor: pointer;
}
body.blockchain-page .how-step h3 {
font-size: 1.25rem;
color: #0B61D6;
margin-bottom: 15px;
transition: color 0.3s ease;
}
body.blockchain-page .how-step p {
font-size: 1rem;
color: #0a0a0a;
line-height: 1.6;
transition: color 0.3s ease;
}
/* Hover effect */
body.blockchain-page .how-step:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
background: #0B61D6; /* subtle color change */
}
body.blockchain-page .how-step:hover h3,
body.blockchain-page .how-step:hover p {
color: #fff; /* text turns white on hover */
}
/* Responsive */
@media (max-width: 992px) {
body.blockchain-page .how-step {
flex: 1 1 calc(50% - 20px);
}
}
@media (max-width: 600px) {
body.blockchain-page .how-step {
flex: 1 1 100%;
}
body.blockchain-page .how-we-work-section h2 {
font-size: 1.6rem;
margin-bottom: 30px;
}
body.blockchain-page .how-step h3 {
font-size: 1.1rem;
}
body.blockchain-page .how-step p {
font-size: 0.95rem;
}
}
/* BLOCKCHAIN SERVICES SECTION */
body.blockchain-page .our-services-section {
padding: 80px 20px;
background: #f8fbff; /* soft white-blue background */
text-align: center;
}
body.blockchain-page .our-services-section h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 50px;
color: #002855; /* dark navy */
}
/* Services Grid */
body.blockchain-page .our-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
/* Service Card */
body.blockchain-page .our-service-card {
position: relative;
background-size: cover;
background-position: center;
height: 280px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.blockchain-page .our-service-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
/* Overlay Effect */
body.blockchain-page .our-service-card .overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,40,85,0.8));
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 25px;
text-align: left;
color: #fff;
}
body.blockchain-page .our-service-card .overlay h3 {
font-size: 1.4rem;
margin-bottom: 10px;
font-weight: 600;
}
body.blockchain-page .our-service-card .overlay p {
font-size: 0.95rem;
line-height: 1.5;
color: #dce7f5;
}
/* Responsive */
@media (max-width: 768px) {
body.blockchain-page .our-services-section h2 {
font-size: 2rem;
}
body.blockchain-page .final-cta-section h2 {
font-size: 1.6rem;
}
}
/* Blockchain Services Grid - 2 per row */
body.blockchain-page .our-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Always 2 cards per row */
gap: 25px;
}
/* Responsive for smaller screens */
@media (max-width: 768px) {
body.blockchain-page .our-services-grid {
grid-template-columns: 1fr; /* 1 per row on mobile */
}
}
/* RELATED SERVICES SECTION */
body.blockchain-page .related-services {
padding: 80px 20px;
text-align: center;
background: #fff;
}
body.blockchain-page .related-services h2 {
font-size: 2.2rem;
color: #001c3d;
margin-bottom: 40px;
}
/* Grid Layout */
body.blockchain-page .services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
gap: 25px;
max-width: 1100px;
margin: 0 auto 40px;
}
body.blockchain-page .service-card {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
cursor: pointer;
/* Equal height fix */
display: flex;
flex-direction: column;
height: 100%;
}
body.blockchain-page .service-card img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
body.blockchain-page .service-card:hover {
transform: translateY(-8px);
}
body.blockchain-page .service-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: rgba(0,28,61,0.7);
color: #fff;
text-align: left;
}
body.blockchain-page .service-overlay h3 {
font-size: 1.4rem;
margin-bottom: 8px;
}
body.blockchain-page .service-overlay p {
font-size: 0.95rem;
margin: 0;
color: #e0e0e0;
}
/* 🔹 Portfolio Links */
body.blockchain-page .service-card h3 a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
body.blockchain-page .service-card h3 a:hover {
color: #0B61D6; /* hover blue */
}
/* ✅ Responsive Breakpoints */
/* Tablet: 2 columns */
@media (max-width: 1024px) {
body.blockchain-page .services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
body.blockchain-page .service-card {
height: 100%;
}
body.blockchain-page .service-overlay h3 {
font-size: 1.2rem;
}
body.blockchain-page .service-overlay p {
font-size: 0.9rem;
}
}
/* Mobile: 1 column */
@media (max-width: 768px) {
body.blockchain-page .services-grid {
grid-template-columns: 1fr;
gap: 18px;
}
body.blockchain-page .related-services h2 {
font-size: 1.8rem;
}
body.blockchain-page .service-card {
height: 100%;
}
body.blockchain-page .service-overlay h3 {
font-size: 1.1rem;
}
body.blockchain-page .service-overlay p {
font-size: 0.85rem;
}
}
/* ================================
TOOLS & TECHNOLOGIES SECTION
================================ */
body.blockchain-page .tools-tech-section {
margin: 60px 0;
text-align: center;
}
body.blockchain-page .tools-tech-section h2 {
font-size: 2rem;
color: #0B61D6;
margin-bottom: 25px;
font-weight: 700;
}
body.blockchain-page .tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
justify-content: center;
align-items: center;
}
body.blockchain-page .tool-card {
background: #f5f5f5;
padding: 14px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
color: #333;
box-shadow: 0 3px 6px rgba(0,0,0,0.08);
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
body.blockchain-page .tool-card:hover {
transform: translateY(-5px);
background: #0B61D6;
color: #fff;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
body.blockchain-page .tools-tech-section h2 {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
body.blockchain-page .tools-tech-section h2 {
font-size: 1.6rem;
}
body.blockchain-page .tool-card {
font-size: 0.95rem;
padding: 12px 16px;
}
}
@media (max-width: 480px) {
body.blockchain-page .tools-grid {
grid-template-columns: 1fr 1fr; /* two per row on small screens */
}
body.blockchain-page .tool-card {
font-size: 0.9rem;
padding: 10px 14px;
}
}
/* HERO SECTION - AR Page */
body.app-page .hero {
position: relative;
height: 60vh; /* full screen height */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8%;
color: #fff;
text-align: center;
}
/* Dark overlay */
body.app-page .hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.55);
z-index: 1;
}
/* Content */
body.app-page .hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
body.app-page .hero-content h1 {
font-size: 3rem;
margin-bottom: 20px;
line-height: 1.2;
}
body.app-page .hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
line-height: 1.5;
}
/* Primary Button */
body.app-page .hero-content .btn-primary {
background: #007bff;
color: #fff;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
body.app-page .hero-content .btn-primary:hover {
background: #0056b3;
box-shadow: 0 6px 18px rgba(0, 123, 255, 0.5);
transform: translateY(-2px);
}
/* Responsive - Tablet */
@media (max-width: 1024px) {
body.app-page .hero-content h1 {
font-size: 2.5rem;
}
body.app-page .hero-content p {
font-size: 1.1rem;
}
body.app-page .hero-content .btn-primary {
padding: 12px 28px;
font-size: 0.95rem;
margin: 6px; /* spacing between buttons */
}
}
/* Responsive - Mobile */
@media (max-width: 768px) {
body.app-page .hero-content h1 {
font-size: 2rem;
}
body.app-page .hero-content p {
font-size: 1rem;
}
body.app-page .hero-content .btn-primary {
display: block; /* stack vertically */
width: 100%; /* full width */
max-width: 180px; /* prevent oversized button */
margin: 10px auto; /* vertical gap + centered */
padding: 12px 0;
font-size: 0.9rem;
}
}
/* Extra small screens */
@media (max-width: 400px) {
body.app-page .hero-content h1 {
font-size: 1.6rem;
}
body.app-page .hero-content p {
font-size: 0.9rem;
}
body.app-page .hero-content .btn-primary {
font-size: 0.85rem; /* smaller text for tiny screens */
padding: 10px 0;
}
}
/* SERVICE DETAIL SECTION (App Page) */
body.app-page .service-detail {
padding: 80px 20px;
text-align: center;
background: #f9f9f9;
}
body.app-page .service-detail h2 {
font-size: 2.5rem;
color: #001c3d; /* dark blue */
margin-bottom: 15px;
}
body.app-page .service-detail p {
max-width: 800px;
margin: 0 auto 30px;
font-size: 1.1rem;
color: #555;
}
body.app-page .service-detail h3 {
font-size: 1.8rem;
margin-bottom: 15px;
color: #007bff; /* primary blue */
}
body.app-page .service-detail ul {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 500px;
text-align: left;
}
body.app-page .service-detail ul li {
font-size: 1rem;
padding: 10px 0;
border-bottom: 1px solid #e5e5e5;
color: #0e0d0d;
}
/* RELATED SERVICES SECTION */
.related-services {
padding: 80px 20px;
text-align: center;
background: #fff;
}
.related-services h2 {
font-size: 2.2rem;
color: #001c3d;
margin-bottom: 40px;
}
/* one row layout */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
max-width: 1100px;
margin: 0 auto 40px;
}
.service-card {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
cursor: pointer;
}
.service-card img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
.service-card:hover {
transform: translateY(-8px);
}
.service-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: rgba(0,28,61,0.7);
color: #fff;
text-align: left;
}
.service-overlay h3 {
font-size: 1.4rem;
margin-bottom: 8px;
}
.service-overlay p {
font-size: 0.95rem;
margin: 0;
color: #e0e0e0;
}
/* 🔹 Portfolio Links */
.service-card h3 a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
.service-card h3 a:hover {
color: #0B61D6; /* hover pe blue */}
/* App SERVICES SECTION */
body.app-page .our-services-section {
padding: 80px 20px;
background: #f8fbff; /* soft white-blue background */
text-align: center;
}
body.app-page .our-services-section h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 50px;
color: #002855; /* dark navy */
}
/* Services Grid */
body.app-page .our-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
/* Service Card */
body.app-page .our-service-card {
position: relative;
background-size: cover;
background-position: center;
height: 280px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.app-page .our-service-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}
/* Overlay Effect */
body.app-page .our-service-card .overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,40,85,0.8));
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 25px;
text-align: left;
color: #fff;
}
body.app-page .our-service-card .overlay h3 {
font-size: 1.4rem;
margin-bottom: 10px;
font-weight: 600;
}
body.app-page .our-service-card .overlay p {
font-size: 0.95rem;
line-height: 1.5;
color: #dce7f5;
}
/* Responsive */
@media (max-width: 991px) {
body.app-page .services-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
body.app-page .services-grid {
grid-template-columns: 1fr;
}
}
/* Responsive */
@media (max-width: 768px) {
body.app-page .our-services-section h2 {
font-size: 2rem;
}
body.app-page .final-cta-section h2 {
font-size: 1.6rem;
}
}
/* App Services Grid - 2 per row */
body.app-page .our-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Always 2 cards per row */
gap: 25px;
}
/* Responsive for smaller screens */
@media (max-width: 768px) {
body.app-page .our-services-grid {
grid-template-columns: 1fr; /* 1 per row on mobile */
}
}
/* ================================
TOOLS & TECHNOLOGIES SECTION
================================ */
body.app-page .tools-tech-section {
margin: 60px 0;
text-align: center;
}
body.app-page .tools-tech-section h2 {
font-size: 2rem;
color: #0B61D6;
margin-bottom: 25px;
font-weight: 700;
}
body.app-page .tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
justify-content: center;
align-items: center;
}
body.app-page .tool-card {
background: #f5f5f5;
padding: 14px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
color: #333;
box-shadow: 0 3px 6px rgba(0,0,0,0.08);
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
body.app-page .tool-card:hover {
transform: translateY(-5px);
background: #0B61D6;
color: #fff;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
body.app-page .tools-tech-section h2 {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
body.app-page .tools-tech-section h2 {
font-size: 1.6rem;
}
body.app-page .tool-card {
font-size: 0.95rem;
padding: 12px 16px;
}
}
@media (max-width: 480px) {
body.app-page .tools-grid {
grid-template-columns: 1fr 1fr; /* two per row on small screens */
}
body.app-page .tool-card {
font-size: 0.9rem;
padding: 10px 14px;
}
}
/* ================================
app PAGE – FULL-WIDTH INFO STACK
================================ */
body.app-page .info-stack {
width: 100%;
padding: 80px 0;
background: #f9f9f9;
}
body.app-page .info-card {
width: 100%;
max-width: 1400px; /* keeps content neat on large screens */
margin: 0 auto;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
}
/* Image (Top by default) */
body.app-page .info-img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Text Content */
body.app-page .info-content {
padding: 50px;
text-align: center;
}
body.app-page .info-content h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
color: #0B61D6;
}
body.app-page .info-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin: 30px 0 15px;
color: #111;
}
body.app-page .info-content p {
font-size: 1.05rem;
color: #444;
line-height: 1.7;
margin-bottom: 18px;
}
/* Responsive Adjustments */
@media (min-width: 992px) {
body.app-page .info-card {
flex-direction: row; /* side by side layout */
align-items: stretch;
}
body.app-page .info-img {
flex: 1;
}
body.app-page .info-img img {
height: 100%;
}
body.app-page .info-content {
flex: 1.2;
text-align: left;
padding: 60px;
}
}
/* ==========================
HOW WE WORK SECTION
========================== */
body.app-page .how-we-work-section {
padding: 60px 20px;
background: #f9f9f9;
text-align: center;
}
body.app-page .how-we-work-section h2 {
font-size: 2rem;
font-weight: 700;
color: #111;
margin-bottom: 40px;
}
body.app-page .how-we-work-steps {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
body.app-page .how-step {
background: #fff;
flex: 1 1 calc(25% - 20px);
padding: 30px 20px;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
cursor: pointer;
}
body.app-page .how-step h3 {
font-size: 1.25rem;
color: #0B61D6;
margin-bottom: 15px;
transition: color 0.3s ease;
}
body.app-page .how-step p {
font-size: 1rem;
color: #0a0a0a;
line-height: 1.6;
transition: color 0.3s ease;
}
/* Hover effect */
body.app-page .how-step:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
background: #0B61D6; /* subtle color change */
}
body.app-page .how-step:hover h3,
body.app-page .how-step:hover p {
color: #fff; /* text turns white on hover */
}
/* Responsive */
@media (max-width: 992px) {
body.app-page .how-step {
flex: 1 1 calc(50% - 20px);
}
}
@media (max-width: 600px) {
body.app-page .how-step { flex: 1 1 100%; }
body.app-page .how-we-work-section h2 { font-size: 1.6rem; margin-bottom: 30px;}
body.app-page .how-step h3 { font-size: 1.1rem; }
body.app-page .how-step p { font-size: 0.95rem; }}
/* Fix footer positioning on app-page */
body.app-page {display: flex;flex-direction: column; min-height: 100vh; }
body.app-page main { flex: 1;}
body.app-page footer { margin-top: auto;}
/* BLOG VR PAGE HERO */
body.blog-vr-page .hero {
position: relative;
width: 100%;
min-height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 60px 20px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
body.blog-vr-page .hero::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.55);
z-index: 1;
}
body.blog-vr-page .hero h1,
body.blog-vr-page .hero p {
position: relative;
z-index: 2;
}
body.blog-vr-page .hero h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.2;
}
body.blog-vr-page .hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto;
color: #f1f1f1;
}
/* Responsive */
@media (max-width: 768px) {
body.blog-vr-page .hero {
min-height: 50vh;
padding: 40px 15px;
}
body.blog-vr-page .hero h1 {
font-size: 2rem;
}
body.blog-vr-page .hero p {
font-size: 1rem;
}
}
/* SINGLE BLOG POST (only for blog-ar-page) */
body.blog-vr-page .single-post { padding: 80px 20px; background: #fff;}
body.blog-vr-page .single-post .wrap { max-width: 900px; margin: 0 auto;}
/* Breadcrumbs */
body.blog-vr-page .single-post .breadcrumbs { font-size: 0.9rem; color: #666; margin-bottom: 25px;}
body.blog-vr-page .single-post .breadcrumbs a { color: #0077ff; text-decoration: none; transition: color 0.3s;}
body.blog-vr-page .single-post .breadcrumbs a:hover { color: #0056b3; text-decoration: underline;}
/* Blog Image - Responsive Cover */
body.blog-vr-page .single-post .post-img {
width: 80%; /* smaller on big screens */
max-width: 650px; height: auto; display: block;
margin: 0 auto 30px; /* center + spacing below */
border-radius: 10px;
object-fit: cover; /* keeps image proportionate */
box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
/* On mobile: make image full width */
@media (max-width: 768px) {
body.blog-vr-page .single-post .post-img { width: 100%; max-width: 100%;}}
/* Article Content */
body.blog-vr-page .single-post article h2 { font-size: 1.8rem; margin: 30px 0 15px; font-weight: 600; color: #222;}
body.blog-vr-page .single-post article p {font-size: 1.1rem;line-height: 1.8; color: #0e0d0d; margin-bottom: 20px;}
body.blog-vr-page .single-post article ul {padding-left: 20px; margin-bottom: 25px;}
body.blog-vr-page .single-post article ul li { margin-bottom: 10px; font-size: 1.05rem; color: #333; list-style: disc;}
/* Post Navigation */
body.blog-vr-page .post-navigation { display: flex; justify-content: space-between; margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px;}
body.blog-vr-page .post-navigation a {font-size: 1rem;color: #0077ff;text-decoration: none;transition: color 0.3s;}
body.blog-vr-page .post-navigation a:hover {color: #0056b3;text-decoration: underline;}
/* Responsive */
@media (max-width: 768px) {
body.blog-vr-page .single-post { padding: 50px 15px;}
body.blog-vr-page .single-post article h2 { font-size: 1.5rem;}
body.blog-vr-page .single-post article p { font-size: 1rem; }}
/* HERO FULL COVER - Blog AR Page */
body.blog-ar-page .hero { position: relative; width: 100%; height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
margin: 0;padding: 0; overflow: hidden; color: #fff;background-size: cover; background-position: center; background-repeat: no-repeat;}
/* Text inside hero */
body.blog-ar-page .hero h1,
body.blog-ar-page .hero p { margin: 0; padding: 0; position: relative; z-index: 2;}
body.blog-ar-page .hero h1 { font-size: 2.5rem; margin-bottom: 12px;}
body.blog-ar-page .hero p { font-size: 1.1rem; max-width: 650px; margin: 0 auto; color: #f1f1f1;}
/* Dark overlay for text readability */
body.blog-ar-page .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); z-index: 1;}
/* Responsive */
@media (max-width: 768px) {
body.blog-ar-page .hero { height: 40vh; /* smaller height on mobile */ }
body.blog-ar-page .hero h1 { font-size: 1.8rem;}
body.blog-ar-page .hero p { font-size: 0.95rem;}}
/* SINGLE BLOG POST (only for blog-ar-page) */
body.blog-ar-page .single-post { padding: 70px 20px; background: #fff;}
body.blog-ar-page .single-post .wrap { max-width: 850px; margin: 0 auto;}
/* Breadcrumbs */
body.blog-ar-page .single-post .breadcrumbs { font-size: 0.9rem; color: #666; margin-bottom: 25px;}
body.blog-ar-page .single-post .breadcrumbs a { color: #0077ff; text-decoration: none; transition: color 0.3s;}
body.blog-ar-page .single-post .breadcrumbs a:hover { color: #0056b3; text-decoration: underline;}
/* Blog Image */
body.blog-ar-page .single-post .post-img { width: 80%; max-width: 600px; display: block; margin: 0 auto 30px; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
/* Responsive image */
@media (max-width: 768px) {
body.blog-ar-page .single-post .post-img { width: 100%; max-width: 100%;}}
/* Article Content */
body.blog-ar-page .single-post article h2 { font-size: 1.8rem; margin: 30px 0 15px; font-weight: 600; color: #222;}
body.blog-ar-page .single-post article p { font-size: 1.1rem; line-height: 1.8; color: #444; margin-bottom: 20px;}
body.blog-ar-page .single-post article ul { padding-left: 20px; margin-bottom: 25px;}
body.blog-ar-page .single-post article ul li { margin-bottom: 10px; font-size: 1.05rem; color: #333; list-style: disc;}
/* Post Navigation */
body.blog-ar-page .post-navigation { display: flex; justify-content: space-between; margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px;}
body.blog-ar-page .post-navigation a { font-size: 1rem; color: #0077ff; text-decoration: none; transition: color 0.3s;}
body.blog-ar-page .post-navigation a:hover { color: #0056b3; text-decoration: underline;}
/* Responsive */
@media (max-width: 768px) {
body.blog-ar-page .single-post { padding: 50px 15px;}
body.blog-ar-page .single-post article h2 { font-size: 1.5rem;}
body.blog-ar-page .single-post article p { font-size: 1rem; }}
/* HERO - Blog 3D Page */
body.blog-3d-page .hero { position: relative; width: 100%; height: 60vh; /* Hero height */
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center; margin: 0; padding: 0; overflow: hidden; color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat;}
/* Hero Text */
body.blog-3d-page .hero h1,
body.blog-3d-page .hero p { margin: 0; padding: 0; position: relative; z-index: 2;}
body.blog-3d-page .hero h1 { font-size: 2.5rem; margin-bottom: 12px;}
body.blog-3d-page .hero p { font-size: 1.1rem; max-width: 650px; margin: 0 auto; color: #f1f1f1;}
/* Overlay for readability */
body.blog-3d-page .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); z-index: 1;}
/* Responsive */
@media (max-width: 768px) {
body.blog-3d-page .hero { height: 40vh; /* smaller height on mobile */}
body.blog-3d-page .hero h1 { font-size: 1.8rem; }
body.blog-3d-page .hero p { font-size: 0.95rem; }}
/* SINGLE POST CONTENT - Blog 3D Page */
body.blog-3d-page .single-post { padding: 60px 20px; background: #fff;}
body.blog-3d-page .single-post .wrap { max-width: 850px; margin: 0 auto;}
/* Breadcrumbs */
body.blog-3d-page .single-post .breadcrumbs { font-size: 0.9rem; color: #666; margin-bottom: 25px;}
body.blog-3d-page .single-post .breadcrumbs a { color: #007bff; text-decoration: none;}
body.blog-3d-page .single-post .breadcrumbs a:hover { text-decoration: underline;}
/* Blog Image (smaller + cover) */
body.blog-3d-page .single-post .post-img {width: 100%;height: 280px; /* ✅ smaller fixed height */
object-fit: cover; /* ✅ cover effect */
border-radius: 10px; margin-bottom: 25px; display: block;}
/* Typography */
body.blog-3d-page .single-post p { font-size: 1.05rem; line-height: 1.7; color: #333; margin-bottom: 20px;}
body.blog-3d-page .single-post h2 { font-size: 1.6rem; margin: 30px 0 15px; color: #111;}
/* List Styling */
body.blog-3d-page .single-post ul { margin: 15px 0 25px 20px; padding: 0;}
body.blog-3d-page .single-post ul li { margin-bottom: 10px; line-height: 1.6;}
/* Post Navigation */
body.blog-3d-page .post-navigation { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd;}
body.blog-3d-page .post-navigation a { color: #007bff; text-decoration: none; font-weight: 500;}
body.blog-3d-page .post-navigation a:hover { text-decoration: underline;}
/* Responsive */
@media (max-width: 768px) {
body.blog-3d-page .single-post { padding: 40px 15px; }
body.blog-3d-page .single-post .post-img { height: 200px; /* ✅ smaller on mobile */ }
body.blog-3d-page .single-post h2 { font-size: 1.3rem; }}
/* contact page */
body.contact-page body { font-family: 'Poppins', sans-serif; margin:0; padding:0; background:#0a0f1c; color:#fff; line-height:1.6;}
body.contact-page .container { max-width:1200px; margin:0 auto; padding:50px 20px; }
body.contact-page h1,h2 { color:#f8f9fa; }
body.contact-page p { color:#cbd5e1; }
body.contact-page .page-contact-card { display:flex; flex-wrap:wrap; gap:50px; background:#111827; padding:40px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.5); max-width:1100px; margin:auto;}
body.contact-page .page-contact-info { flex:1 1 350px; }
body.contact-page .page-contact-info h1 { font-size:36px; margin-bottom:20px; }
body.contact-page .info-item { margin-bottom:16px; }
body.contact-page .info-item h4 { margin-bottom:6px; color:#01bef8; }
body.contact-page .social-links a { margin-right:12px; color:#028dff; text-decoration:none; font-weight:600; }
body.contact-page .social-links a:hover { color:#ffffff; }
body.contact-page .map { margin-top:20px; border-radius:12px; overflow:hidden; }
body.contact-page .map iframe { width:100%; height:220px; border:0; }
body.contact-page .page-contact-form { flex:1 1 400px; }
body.contact-page .form-row { display:flex; gap:12px; flex-wrap:wrap; }
body.contact-page .form-group { flex:1; margin-bottom:16px; display:flex; flex-direction:column; }
body.contact-page .form-group label { margin-bottom:6px; color:#94a3b8; }
body.contact-page .form-group input, .form-group textarea { padding:12px; border-radius:8px; border:1px solid #374151; background:#1f2937; color:#fff;}
textarea { resize:vertical; }
body.contact-page .page-btn-submit { padding:12px 20px; background:#00ccff; color:#0f1724; border:none; border-radius:8px; cursor:pointer; font-weight:600; }
body.contact-page .page-btn-submit:hover { background:#fbfcfc; }
body.contact-page .toast { position:fixed; bottom:20px; right:20px; background:#062029; color:#6ee7b7; padding:12px 16px; border-radius:10px; display:none; }
/* ==========================
FOOTER SECTION
========================== */
footer { background: #111; color: #fff; padding: 60px 20px 40px; font-family: 'Arial', sans-serif;}
footer a { color: #bbb; text-decoration: none; transition: color 0.3s ease;}
footer a:hover { color: #0B61D6;}
/* Grid layout */
footer .footer-container {display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; /* logo wider, others equal */
gap: 30px; max-width: 1200px; margin: 0 auto; align-items: flex-start;}
/* Logo column */
footer .footer-logo h2 { font-size: 1.8rem; margin-bottom: 12px;}
footer .footer-logo p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 12px;}
footer .social-icons a { display: inline-block; margin-right: 12px; font-size: 1.1rem; color: #bbb;}
footer .social-icons a:hover { color: #0B61D6;}
/* Product, Services, Legal */
footer .footer-col { text-align: center; /* ✅ center align */}
footer .footer-col h4 { font-size: 1.1rem; margin-bottom: 15px; color: #fff;}
footer .footer-col ul { list-style: none; padding: 0; margin: 0;}
footer .footer-col ul li { margin-bottom: 10px;}
footer .footer-col ul li a {
display: inline-block; /* ✅ so links stay centered */}
/* Footer bottom */
footer .footer-bottom {
text-align: center; border-top: 1px solid #333; margin-top: 40px; padding-top: 20px; font-size: 0.9rem; color: #aaa;}
/* Back to Top Button */
#backToTop { position: fixed; bottom: 30px; right: 30px; background: #0B61D6; color: #fff; border: none;
padding: 12px 16px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: none; transition: background 0.3s ease, transform 0.3s ease; z-index: 1000;}
#backToTop:hover { background: #0748a2; transform: translateY(-3px);}
/* Responsive */
@media (max-width: 1024px) { footer .footer-container { grid-template-columns: 1fr 1fr; /* 2 columns on tablet */ gap: 20px;}}
@media (max-width: 600px) { footer .footer-container { grid-template-columns: 1fr; /* stack on small screens */}
footer { padding: 40px 15px 30px;}
#backToTop { bottom: 20px; right: 20px; padding: 10px 14px;}}