:root {
--hero-gradient-start: #0f5cff;
--hero-gradient-end: #0b2342;
--hero-accent: #42e4ff;
/* Primary Colors (from Navbar/Hero) */
--primary-dark: #06152f;
--primary-blue: #296693;
--hero-gradient-start: #0f5cff;
--hero-gradient-end: #0b2342;

/* Accent Colors */
--accent-cyan: #00e5ff;
--accent-green: #1dd1a1;
--accent-light-cyan: #7FE5F0;

/* Section Backgrounds */
--bg-light: #f8f9fa;
--bg-white: #ffffff;
--bg-dark-light: #f0f4f8;
--bg-blue-light: rgba(15, 92, 255, 0.05);
--bg-cyan-light: rgba(0, 229, 255, 0.08);

/* Text Colors */
--text-dark: #1a1a2e;
--text-light: #666666;
--text-muted: #999999;
}
/* =======================
HEADER / NAVIGATION
======================= */
.header {
position: fixed;
top: 0;       /* hides header upward */
left: 0;
width: 100%;
z-index: 9999;
background: rgba(6, 25, 70, 0.92);
backdrop-filter: blur(18px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
transition: top 0.4s ease;
}
.header.hide {
top: -100px; /* hide when scrolling down */
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0.8rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.header .logo img {
height: 70px;
}
/* Desktop nav */
.nav-links {
list-style: none;
display: flex;
gap: 1.6rem;
margin: 0;
padding: 0;
}
.nav-links li {
display: flex;
align-items: center;
}
.nav-links li a {
color: #eaf3ff;
font-weight: 500;
text-decoration: none;
padding: 0.35rem 0.2rem;
position: relative;
transition: color 0.2s ease;
font-size: 0.98rem;
}
/* Underline hover / active */
.nav-links li a::after {
content: "";
position: absolute;
left: 0;
bottom: -0.25rem;
width: 0;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, #00e5ff, #1dd1a1);
transition: width 0.25s ease;
}
.nav-links li a:hover,
.nav-links li a.active {
color: #ffffff;
}
.nav-links li a:hover::after,
.nav-links li a.active::after {
width: 100%;
}
/* Call Now button styled like hero CTA */
.nav-links .call-btn {
padding: 0.45rem 1.2rem;
border-radius: 999px;
background: linear-gradient(135deg, #00e5ff, #1dd1a1);
color: #021123;
font-weight: 600;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
border: none;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.nav-links .call-btn:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
opacity: 0.95;
}
@media (max-width: 768px) {
.mobile-nav .cta-call {
display: block !important;
}
}
/* =======================
HERO SECTION
======================= */
.hero.hero-trendy {
position: relative;
min-height: 110vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #ffffff;
background:
radial-gradient(circle at top left, #3d8bff 0, transparent 50%),
radial-gradient(circle at bottom right, #00e5ff 0, transparent 55%),
linear-gradient(135deg, var(--hero-gradient-start), var(--hero-gradient-end));
overflow: hidden;
}
/* Soft blurred background blobs */
.hero.hero-trendy::before,
.hero.hero-trendy::after {
content: "";
position: absolute;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(66, 228, 255, 0.55), transparent 60%);
filter: blur(8px);
opacity: 0.7;
z-index: 0;
}
.hero.hero-trendy::before {
top: -80px;
right: -80px;
}
.hero.hero-trendy::after {
bottom: -120px;
left: -60px;
}
/* Centered hero content */
.hero-content {
max-width: 720px;
position: relative;
z-index: 1;
padding: 1rem 1rem;
margin: 0 auto;
}
.hero .lead {
/*max-width: 580px;*/
margin-inline: auto;
}
/* Service tags */
.service-tags .service-tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.95rem;
border-radius: 999px;
background: rgba(10, 20, 40, 0.55);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #e5f0ff;
font-size: 0.9rem;
backdrop-filter: blur(10px);
}
.service-tags .service-tag i {
font-size: 1.1rem;
color: var(--hero-accent);
}
/* Hero primary CTA */
.hero-cta {
border-radius: 999px;
padding-inline: 1.8rem;
background: linear-gradient(135deg, #00e5ff, #1dd1a1);
border: none;
color: #021123;
font-weight: 600;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
}
/* Hero secondary CTA */
.hero-secondary-cta {
border-radius: 999px;
border-width: 1px;
color: #eaf3ff;
}

.hero-cont{background: rgba(0, 0, 0, 0.9); padding: 50px;}}

@media (max-width: 768px) {
.hero-cont{background: rgba(0, 0, 0, 0.9);}
}
/* =========================================
ABOUT SECTION - LIGHT WITH BLUE ACCENT
========================================= */
section#about {
background: linear-gradient(135deg, #f8f9fa 0%, rgba(15, 92, 255, 0.03) 100%);
padding: 5rem 2rem;
}
#about .section-title {
color: rgba(6, 25, 70, 0.92);
font-size: 2.75rem;
font-weight: 700;
margin-bottom: 1rem;
}
#about .section-title::after {
background: linear-gradient(90deg, #0f5cff, var(--accent-green));
width: 80px;
height: 4px;
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
.about-content {
/*max-width: 800px;*/
margin: 0 auto;
text-align: center;
color: var(--text-dark);
font-size: 1.1rem;
line-height: 1.8;
}
#about p{
line-height: 1.8rem;
text-align: justify;
font-weight: 500;
}
/* =========================================
SERVICES SECTION - WHITE WITH BLUE CARDS
========================================= */
section#services {
background: #ffffff;
padding: 5rem 2rem;
}
#services .section-title {
color: rgba(6, 25, 70, 0.92);
margin-bottom: 2rem;
}
#services .section-title::after {
background: linear-gradient(90deg, #0f5cff, var(--accent-green));
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-card {
background: white;
border: 1px solid #e8e8e8;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.service-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0f5cff, var(--accent-green));
transform: scaleX(0);
transition: transform 0.4s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 16px 40px rgba(41, 102, 147, 0.2);
border-color: #0f5cff;
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-icon {
font-size: 3.5rem;
color: #0f5cff;
margin-bottom: 1.5rem;
}
.service-card h3 {
color: var(--primary-blue);
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.25rem;
}
.service-card p {
color: #000000;
line-height: 1.7;
font-weight: 500;
}
.services-list li {list-style: none;padding: 8px 0px;}
.services-list i {color: #05e2f1;background: #000;border-radius: 50%;padding: 1px 4px;}
.service-box { background: #f7f9ff; border-radius: 10px; transition: 0.3s; padding: 10px 15px;  }
.service-box:hover { background: #eef3ff; transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.08);}
.service-box i {float: left;padding-right: 10px;}
.service-box h6 { font-weight:500 !important }
/* =========================================
WHY CHOOSE US - GRADIENT BACKGROUND
========================================= */
section#why-choose-us,
.section-why-choose {
background: linear-gradient(135deg, rgba(15, 92, 255, 0.08) 0%, rgba(0, 229, 255, 0.05) 100%);
padding: 5rem 2rem;
}
.why-choose-title,
#why-choose-us .section-title {
color: rgba(6, 25, 70, 0.92);
}
#why-choose-us .section-title::after {
background: linear-gradient(90deg, #0f5cff, var(--accent-green));
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
}
.feature-item {
background: rgba(255, 255, 255, 0.8);
padding: 2rem;
border-radius: 12px;
border-left: 4px solid #0f5cff;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.feature-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 1);
box-shadow: 0 10px 30px rgba(0, 229, 255, 0.15);
border-left-color: var(--accent-green);
}
.feature-icon {
font-size: 2.5rem;
color: #0f5cff;
margin-bottom: 1rem;
}
.feature-item h4 {
color: var(--primary-blue);
font-weight: 600;
margin-bottom: 0.5rem;
}
.feature-item p {
color: #000000;
line-height: 1.6;
font-weight: 500;
}
/* =========================================
BLOG SECTION - MODERN CARDS
========================================= */
section#blog {
background: #f8f9fa;
padding: 5rem 2rem;
}
#blog .section-title {
color: rgba(6, 25, 70, 0.92);
}
#blog .section-title::after {
background: linear-gradient(90deg, #0f5cff, var(--accent-green));
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
}
.blog-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #e8e8e8;
}
.blog-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(41, 102, 147, 0.2);
border-color: #0f5cff;
}
.blog-header {
background: linear-gradient(135deg, var(--primary-blue) 0%, #0f5cff 100%);
padding: 2rem;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: white;
position: relative;
overflow: hidden;
}
.blog-header::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
}
.blog-date {
font-size: 0.85rem;
opacity: 0.9;
margin-bottom: 0.5rem;
}
.blog-content {
padding: 2rem;
}
.blog-card h3 {
color: var(--primary-blue);
font-weight: 600;
margin-bottom: 0.75rem;
font-size: 1.15rem;
}
.blog-card p {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.blog-read-more {
color: #0f5cff;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.blog-read-more:hover {
color: var(--accent-green);
gap: 0.75rem;
}
/* =========================================
FAQ SECTION - ACCORDION WITH CYAN ACCENT
========================================= */
section#faq {
background: linear-gradient(135deg, rgba(15, 92, 255, 0.05) 0%, rgba(0, 229, 255, 0.03) 100%);
padding: 5rem 2rem;
}
#faq .section-title {
color: var(--primary-blue);
}
#faq .section-title::after {
background: linear-gradient(90deg, #0f5cff, var(--accent-green));
}
.faq-container {
max-width: 900px;
margin: 0 auto;
}
.faq-item {
background: white;
border-radius: 12px;
margin-bottom: 1.5rem;
border: 1px solid #e8e8e8;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}
.faq-item:hover {
box-shadow: 0 8px 20px rgba(0, 229, 255, 0.15);
border-color: #0f5cff;
}
.faq-question {
width: 100%;
padding: 1.75rem 2rem;
text-align: left;
border: none;
background: white;
color: var(--text-dark);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.faq-question:hover {
background: rgba(15, 92, 255, 0.02);
}
.faq-icon {
font-size: 1.25rem;
color: #0f5cff;
transition: transform 0.3s ease;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.faq-item.active .faq-icon {
transform: rotate(180deg);
color: var(--accent-green);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
background: rgba(15, 92, 255, 0.02);
}
.faq-item.active .faq-answer {
max-height: 500px;
padding: 0 2rem 1.75rem 2rem;
}
.faq-answer p {
color: #000000;
line-height: 1.7;
}
/* =========================================
CONTACT SECTION - MODERN FORM
========================================= */
section#contact {
background: linear-gradient(135deg, #ffffff 0%, rgba(15, 92, 255, 0.02) 100%);
padding: 5rem 2rem;
}
#contact .section-title {
color: rgba(6, 25, 70, 0.92);
}
#contact .section-title::after {
background: linear-gradient(90deg, #0f5cff, var(--accent-green));
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.5rem;
margin-top: 3rem;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.form-group label {
font-weight: 600;
color: var(--primary-blue);
font-size: 0.95rem;
}
.form-group input,
.form-group textarea {
padding: 1rem 1.25rem;
border: 2px solid #e8e8e8;
border-radius: 12px;
font-family: inherit;
font-size: 1rem;
background: white;
color: var(--text-dark);
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #0f5cff;
background: white;
box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.1);
}
.form-group textarea {
min-height: 140px;
resize: vertical;
}
.submit-button {
padding: 1.2rem 2.5rem;
border: none;
border-radius: 50px;
background: linear-gradient(135deg, #0f5cff, var(--accent-green));
color: #021123;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.contact .info {
width: 100%;
background: #fff;
}
.contact .info i {
font-size: 20px;
color: #3f43fd;
float: left;
width: 44px;
height: 44px;
background: #f0f0ff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
transition: all 0.3s
ease-in-out;
}
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
background: #1acc8d;
color: #fff;
}
.contact .info h4 {
padding: 0 0 0 60px;
font-size: 22px;
font-weight: 600;
margin-bottom: 5px;
color: #010483;
}
.contact .info p {
padding: 0 0 0 60px;
margin-bottom: 0;
font-size: 14px;
color: #0205a1;
}
.contact .info .email, .contact .info .phone {
margin-top: 40px;
}
.contact .info .email, .contact .info .phone {
margin-top: 40px;
}
.contact .info .email, .contact .info .phone {
margin-top: 40px;
}
.contact .php-email-form input {
height: 44px;
}
.contact .php-email-form input, .contact .php-email-form textarea {
border-radius: 10px;
box-shadow: none;
font-size: 14px;
}