/* =================================================================== */
/* 1. GLOBAL & ROOT VARIABLES */
/* =================================================================== */
:root {
--primary-color: #003366; /* Deep Blue - Professional, Trustworthy */
--secondary-color: #E67E22; /* Gold - Premium, Success */
--accent-color: #e6d922; /* Bright Orange - Energetic, Action */
--light-gray: #f9f9f9; /* For light backgrounds */
--dark-gray: #000000; /* For text */
--white-color: #ffffff;
--font-primary: 'Poppins', sans-serif; /* Recommended: Add Google Font link in HTML */
--header-height: 140px; /* <<< CHANGED: Increased from 80px to 140px */
--border-radius: 8px;
--box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Add this to your HTML for the Poppins font */
/* */
/* */
/* */
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-primary);
line-height: 1.6;
color: var(--dark-gray);
background-color: var(--white-color);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
color: var(--primary-color);
transition: color 0.3s ease;
}
a:hover {
color: var(--secondary-color);
}
ul {
list-style: none;
}
/* =================================================================== */
/* 2. HEADER & NAVIGATION BAR */
/* =================================================================== */
header {
background-color: var(--white-color);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
height: var(--header-height); /* This will now be 140px */
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--header-height); /* This will now be 140px */
padding: 0 2rem;
position: relative;
}
.logo img {
height: 120px; /* This remains 120px as you requested */
width: auto;
}
.nav-links {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.nav-links ul {
display: flex;
align-items: center;
}
.nav-links ul li {
padding: 0 15px;
}
.nav-links ul li a {
font-weight: 600;
text-transform: uppercase;
font-size: 0.9rem;
position: relative;
padding-bottom: 9px;
}
/* Active link style and hover effect */
.nav-links ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--secondary-color);
transition: width 0.3s ease-in-out;
}
.nav-links ul li a:hover::after,
.nav-links ul li a.active::after {
width: 100%;
}
.hamburger {
display: none;
cursor: pointer;
}
.hamburger .line {
width: 25px;
height: 3px;
background-color: var(--primary-color);
margin: 5px 0;
transition: all 0.3s ease;
}
/* =================================================================== */
/* 3. HERO SECTION */
/* =================================================================== */
.hero {
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: var(--white-color);
overflow: hidden; /* Ensures video doesn't overflow */
}
#bg-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: -2;
}
/* =================================================================== */
/* 4. GENERAL SECTION STYLING */
/* =================================================================== */
.section {
padding: 80px 0;
}
.section-light {
padding: 80px 0;
background-color: var(--light-gray);
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--primary-color);
}
.section-subtitle {
text-align: center;
font-size: 1.1rem;
color: #666;
max-width: 600px;
margin: 0 auto 50px auto;
}
.section-cta {
text-align: center;
margin-top: 40px;
}
/* =================================================================== */
/* 5. SERVICES & 3-STEPS SECTION (CARD LAYOUT) */
/* =================================================================== */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.service-card {
background-color: var(--white-color);
padding: 30px;
text-align: center;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.service-card i {
font-size: 3rem;
color: var(--secondary-color);
margin-bottom: 20px;
}
.service-card h3 {
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: 15px;
}
.service-card p {
font-size: 1rem;
color: #555;
}
/* Makes the whole card clickable */
.service-card-link {
color: inherit; /* Inherits text color from parent */
}
/* =================================================================== */
/* 6. STUDY DESTINATIONS SECTION */
/* =================================================================== */
.destination-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.destination-card {
position: relative;
overflow: hidden;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
color: var(--white-color);
min-height: 350px;
}
.destination-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.destination-card:hover img {
transform: scale(1.1);
}
.dest-card-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
z-index: 2;
}
.dest-card-content h3 {
font-size: 1.6rem;
margin-bottom: 5px;
}
.dest-card-content p {
font-size: 0.9rem;
opacity: 0.9;
}
/* =================================================================== */
/* 7. ABOUT US PREVIEW SECTION */
/* =================================================================== */
.about-preview {
display: flex;
align-items: center;
gap: 50px;
}
.about-preview img {
flex-basis: 45%;
max-width: 450px;
border-radius: var(--border-radius);
}
.about-preview-text {
flex-basis: 55%;
}
.stats-container {
display: flex;
justify-content: space-between;
text-align: center;
margin: 30px 0;
}
.stat-item h3 {
font-size: 2.5rem;
color: var(--primary-color);
font-weight: 700;
}
.stat-item p {
color: #666;
font-weight: 600;
}
/* =================================================================== */
/* 8. TESTIMONIALS SECTION */
/* =================================================================== */
.testimonial-container {
position: relative;
max-width: 800px;
margin: 0 auto;
text-align: center;
overflow: hidden; /* Important for slider effect */
}
.testimonial-item {
display: none; /* Hide all by default */
}
.testimonial-item.active {
display: block; /* Show only the active one */
animation: fadeIn 0.8s;
}
.testimonial-item blockquote {
font-size: 1.3rem;
font-style: italic;
color: #555;
margin-bottom: 20px;
line-height: 1.5;
}
.testimonial-item p {
font-weight: 600;
color: var(--primary-color);
}
/* =================================================================== */
/* 9. PROMOTIONAL MODAL */
/* =================================================================== */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background: var(--white-color);
padding: 40px;
border-radius: var(--border-radius);
width: 90%;
max-width: 500px;
text-align: center;
position: relative;
transform: scale(0.9);
transition: transform 0.4s ease;
}
.modal-overlay.active .modal-content {
transform: scale(1);
}
.modal-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 2rem;
color: #aaa;
cursor: pointer;
transition: color 0.3s ease;
}
.modal-close:hover {
color: var(--dark-gray);
}
.modal-icon {
font-size: 3rem;
color: var(--accent-color);
margin-bottom: 1rem;
}
.modal-content h2 {
color: var(--primary-color);
font-size: 2rem;
margin-bottom: 1rem;
}
.promo-highlight {
font-size: 1.8rem;
font-weight: bold;
margin: 1rem 0;
}
.promo-highlight span {
color: var(--accent-color);
font-size: 2.2rem;
}
.modal-content .btn {
margin-top: 1.5rem;
}
/* =================================================================== */
/* 10. FOOTER */
/* =================================================================== */
.footer {
background-color: var(--primary-color);
color: #f0f0f0;
padding: 60px 0 0;
}
.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.footer-col .footer-logo {
height: 50px;
margin-bottom: 20px;
}
.footer-col h4 {
font-size: 1.2rem;
margin-bottom: 20px;
color: var(--white-color);
position: relative;
}
/* Underline for footer headings */
.footer-col h4::after {
content: '';
position: absolute;
left: 0;
bottom: -5px;
height: 2px;
width: 50px;
background-color: var(--secondary-color);
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: #ccc;
}
.footer-col ul li a:hover {
color: var(--white-color);
padding-left: 5px; /* Nice hover effect */
}
.contact-list span {
margin-left: 10px;
}
.social-links a {
display: inline-flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.1);
color: var(--white-color);
border-radius: 50%;
margin-right: 10px;
transition: background-color 0.3s ease;
}
.social-links a:hover {
background-color: var(--secondary-color);
}
.footer-bottom {
text-align: center;
padding: 20px 0;
margin-top: 40px;
border-top: 1px solid #444;
}
/* =================================================================== */
/* 11. UTILITY & HELPER CLASSES */
/* =================================================================== */
/* Buttons */
.btn {
display: inline-block;
padding: 12px 28px;
border-radius: 50px; /* Pill shape */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.btn-primary {
background-color: var(--primary-color);
color: var(--white-color);
border-color: var(--primary-color);
}
.btn-primary:hover {
background-color: transparent;
color: var(--primary-color);
}
.btn-secondary {
background-color: var(--secondary-color);
color: var(--white-color);
border-color: var(--secondary-color);
}
.btn-secondary:hover {
background-color: transparent;
color: var(--secondary-color);
}
.btn-primary-full {
background-color: var(--accent-color);
color: var(--white-color);
border-color: var(--accent-color);
width: 100%;
}
.btn-primary-full:hover {
background-color: #c0392b;
border-color: #c0392b;
}
/* Fade-in Animation on Scroll */
.fade-in-section {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* =================================================================== */
/* 12. RESPONSIVE MEDIA QUERIES */
/* =================================================================== */
/* For Tablets and smaller desktops */
@media (max-width: 992px) {
.hero-content h1 {
font-size: 2.8rem;
}
.about-preview {
flex-direction: column;
text-align: center;
}
}
/* =================================================================== */
/* 12. RESPONSIVE MEDIA QUERIES */
/* =================================================================== */
/* For Tablets and smaller desktops */
@media (max-width: 992px) {
.hero-content h1 {
font-size: 2.8rem;
}
.about-preview {
flex-direction: column;
text-align: center;
}
}
/* For Mobile Devices */
@media (max-width: 768px) {
body {
padding-top: var(--header-height); /* Prevent content from hiding behind fixed header */
}
.section-title {
font-size: 2rem;
}
.hero-content h1 {
font-size: 2.2rem;
}
/* --- Hamburger Menu Logic --- */
.hamburger {
display: block;
z-index: 1001; /* Ensure it's above the nav links panel */
}
/* === UPDATED FULL-HEIGHT MENU STYLES === */
.nav-links {
position: fixed;
top: 0; /* CHANGED: Start from the very top of the screen */
right: -100%; /* Start off-screen */
width: 70%; /* CHANGED: Cover 70% of the screen width */
max-width: 300px; /* ADDED: Set a maximum width for larger mobile screens */
height: 100vh; /* CHANGED: Cover the full vertical height */
background-color: var(--primary-color);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
transition: right 0.4s ease-in-out;
padding-top: 120px; /* CHANGED: Add space at the top for menu items */
/* This is still the critical fix to prevent centering */
left: auto;
transform: none;
}
.nav-links.active {
right: 0; /* Slide in */
}
.nav-links ul {
flex-direction: column;
align-items: center; /* CHANGED: Center items inside the panel */
}
.nav-links ul li {
padding: 20px 0;
width: 100%;
text-align: center; /* CHANGED: Center the link text */
}
.nav-links ul li a {
color: var(--white-color);
font-size: 1.1rem;
}
.nav-links ul li a:hover, .nav-links ul li a.active {
color: var(--secondary-color);
}
.nav-links ul li a::after {
display: none; /* Remove underline effect on mobile nav */
}
/* Hamburger animation to 'X' */
.hamburger.active .line:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger.active .line:nth-child(2) {
opacity: 0;
}
.hamburger.active .line:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
/* === THIS IS THE NEWLY ADDED FIX === */
/* When the menu is active, change the hamburger lines to white so it's visible */
.hamburger.active .line {
background-color: var(--white-color);
}
.about-preview-text {
order: 1;
}
.about-preview img {
order: 2;
}
}
/* These all up CSS are for the Index page and all web page format.............................*/
/* This section is only for the our service page YOUR JOURNEY TO SCCESS.............................*/
/* =================================================================== */
/* GAMIFIED "PROCESS BOARD GAME" STYLES */
/* =================================================================== */
/* =================================================================== */
/* PROCESS BOARD GAME – CLEAN HORIZONTAL */
/* =================================================================== */
/* ---------------------- 3D Dice Logo Fix ------------------------- */
/* ---------------------- 3D Dice Logo ----------------------------------- */
/* ---------------------- 3D Dice ----------------------------------- */
.dice-container {
perspective: 1200px; /* High perspective for better 3D effect */
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
}
.dice {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
/* This transition makes the JS rotation look like a roll */
transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
cursor: pointer;
/* Default starting position */
transform: rotateX(-20deg) rotateY(30deg);
}
/* Ensure faces are solid and visible */
.dice .face {
position: absolute;
width: 100px;
height: 100px;
background: white; /* Make sure this is solid! */
border: 2px solid var(--primary-color, #ccc);
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Position the faces to form a cube (Half of 100px width = 50px) */
.face.front { transform: rotateY(0deg) translateZ(50px); }
.face.back { transform: rotateY(180deg) translateZ(50px); }
.face.right { transform: rotateY(90deg) translateZ(50px); }
.face.left { transform: rotateY(-90deg) translateZ(50px); }
.face.top { transform: rotateX(90deg) translateZ(50px); }
.face.bottom { transform: rotateX(-90deg) translateZ(50px); }
/* Logo Styling */
.nn-logo {
width: 75%; /* Reduced slightly so it doesn't touch the borders */
height: auto;
object-fit: contain;
display: block;
}
/* Icon face styling */
.dice .face i {
font-size: 32px;
color: var(--primary-color);
}
/* ---------------------- Horizontal Timeline ----------------------- */
/* =================================================== */
/* 1. BASE / DESKTOP STYLES (Horizontal) */
/* =================================================== */
.process-timeline {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
max-width: 1200px;
margin-inline: auto;
padding: 100px 20px 40px 20px; /* Top padding makes room for the line */
min-height: 250px;
transition: all 0.5s ease;
}
/* Horizontal Line (Desktop) */
.process-timeline::before {
content: '';
position: absolute;
top: 45px; /* Matches the center of the dot */
left: 50px;
right: 50px;
height: 4px;
background: #e0e0e0;
z-index: 1;
}
.timeline-item {
position: relative;
flex: 1;
text-align: center;
min-width: 90px;
}
/* Dot (Desktop - Top Aligned) */
.timeline-dot {
position: absolute;
top: -55px; /* Pulls dot up onto the line */
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: white;
border: 3px solid #ccc;
border-radius: 50%;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
}
/* Marker (Golden Ring) */
.timeline-marker {
z-index: 5;
width: 50px;
height: 50px;
border: 3px solid #f39c12; /* Fallback if var fails */
border: 3px solid var(--secondary-color, #f39c12);
background: transparent;
border-radius: 50%;
position: absolute;
box-shadow: 0 0 15px rgba(243, 156, 18, 0.5);
pointer-events: none;
}
/* Text Content */
.timeline-content h3 {
font-size: 0.85rem;
color: #999;
margin-top: 10px;
transition: color 0.3s ease;
}
.timeline-content h3 span {
display: block; /* Number above title on desktop */
font-size: 1rem;
font-weight: 800;
}
.timeline-content p {
font-size: 0.8rem;
color: #666;
margin-top: 0;
opacity: 0;
max-height: 0;
overflow: hidden;
transform: translateY(10px);
transition: all 0.5s ease;
}
/* ACTIVE STATE */
.timeline-item.active .timeline-dot {
border-color: var(--primary-color, #10f053);
transform: translate(-50%, -50%) scale(1.15);
}
.timeline-item.active .timeline-content h3 {
color: #333;
}
.timeline-item.active .timeline-content p {
opacity: 1;
max-height: 200px;
margin-top: 10px;
transform: translateY(0);
}
/* =================================================== */
/* 2. MOBILE & TABLET STYLES (Vertical Left-Aligned) */
/* =================================================== */
@media (max-width: 767px) {
.process-timeline {
flex-direction: column; /* Stack vertically */
align-items: flex-start;
padding: 40px 20px 40px 70px; /* Room on left for line */
min-height: auto;
}
/* Change Horizontal Line to Vertical */
.process-timeline::before {
left: 35px; /* Position on left gutter */
top: 0;
bottom: 0;
width: 4px;
height: 100%;
right: auto;
}
.timeline-item {
text-align: left;
width: 100%;
margin-bottom: 40px; /* Space between steps */
min-height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Move Dot to the left vertical line */
.timeline-dot {
left: -50px; /* Align with left vertical line */
top: 25px; /* Align with the title text */
transform: translate(-50%, -50%);
}
.timeline-content h3 {
margin-top: 0;
}
.timeline-content h3 span {
display: inline; /* Number next to title on mobile */
margin-right: 10px;
}
}
/* ------------------- Celebration Fix ------------------ */
.celebration-container {
position: fixed; /* Fixed to the viewport, not the section */
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none; /* Let user click through them */
z-index: 9999; /* Stay on top of everything */
overflow: hidden;
}
.flower {
position: absolute;
top: -50px; /* Start above the screen */
opacity: 0;
will-change: transform, opacity;
}
@keyframes petalFall {
0% {
opacity: 0;
transform: translateY(0) rotate(0deg);
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(100vh) rotate(720deg); /* Fall to bottom of screen */
}
}
.roll-instruction {
margin-top: 40px; /* Increase this value to move the text further down */
font-weight: 600;
color: #555;
text-align: center;
display: block; /* Ensures it stays on its own line */
transition: all 0.3s ease; /* Makes text changes look smooth */
}
/* Optional: Add a little bit of bottom margin to the dice itself for extra safety */
.dice {
margin-bottom: 20px;
}
/* ------------------- Enhanced Typography ------------------ */
/* 1. Title Styling (The Steps) */
.timeline-content h3 {
font-size: 1.1rem; /* Slightly larger */
font-weight: 800; /* Extra Bold */
color: #bbb; /* Faded when not active */
margin-top: 15px;
letter-spacing: -0.02em; /* Modern tight tracking */
line-height: 1.2;
transition: all 0.3s ease;
text-transform: capitalize; /* Ensures it looks like a heading */
}
/* 2. Number Styling (The 01, 02...) */
.timeline-content h3 span {
display: block;
font-size: 1.3rem; /* Pop the numbers! */
font-weight: 900;
color: #ddd;
margin-bottom: 2px;
transition: color 0.3s ease;
}
/* 3. Description Styling (The Paragraphs) */
.timeline-content p {
font-size: 0.95rem; /* More readable size */
font-weight: 500; /* Medium weight for clarity */
color: #777;
line-height: 1.5; /* Better breathing room for text */
margin-top: 0;
/* Reveal Animation stays the same */
opacity: 0;
max-height: 0;
overflow: hidden;
transform: translateY(10px);
transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ------------------- ACTIVE STATE (The "Attractive" Part) ------------------ */
/* Highlight the Title when active */
.timeline-item.active .timeline-content h3 {
color: #1a1a1a; /* Deep black/gray for high contrast */
transform: scale(1.05); /* Subtle grow effect */
}
/* Highlight the Number with your Primary Green */
.timeline-item.active .timeline-content h3 span {
color: #10f053; /* Your Nepal Nexus Green */
text-shadow: 0 0 10px rgba(16, 240, 83, 0.2); /* Soft glow */
}
/* Highlight the Paragraph */
.timeline-item.active .timeline-content p {
opacity: 1;
max-height: 150px;
margin-top: 12px;
color: #444; /* Darker for better reading */
transform: translateY(0);
/* Add a subtle highlight box behind the active description */
background: rgba(16, 240, 83, 0.05);
padding: 10px;
border-radius: 8px;
border-left: 3px solid #10f053; /* Side accent line */
}
/* --- Mobile Specific Adjustment --- */
@media (max-width: 767px) {
.timeline-content h3 {
font-size: 1.15rem; /* Make it even bolder on mobile */
}
.timeline-content h3 span {
display: inline-block; /* Put number next to title on mobile */
margin-right: 10px;
font-size: 1.2rem;
}
.timeline-content p {
font-size: 0.9rem;
}
}
/* =================================================== */
/* ABOUT PAGE SPECIFIC CONTENT */
/* =================================================== */
/* --- Who We Are & Mission/Vision --- */
.about-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
margin-top: 40px;
}
.about-text h2 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 25px;
color: #1a1a1a;
position: relative;
}
.about-text h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 50px;
height: 4px;
background: #10f053; /* Nepal Nexus Green */
}
.about-text p {
line-height: 1.8;
margin-bottom: 20px;
color: #555;
}
.mission-vision {
display: flex;
flex-direction: column;
gap: 25px;
}
.mv-card {
background: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
border-left: 5px solid #10f053;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mv-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.mv-icon {
font-size: 2rem;
color: #10f053;
margin-bottom: 15px;
}
/* --- Why Choose Nepal Nexus --- */
.why-choose-us {
background-color: #f9f9f9;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 30px;
margin-top: 40px;
}
.feature-item {
background: #fff;
padding: 40px 30px;
border-radius: 20px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid #eee;
}
.feature-item:hover {
transform: translateY(-10px);
border-color: #10f053;
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.feature-icon {
width: 65px;
height: 65px;
background: rgba(16, 240, 83, 0.1);
color: #10f053;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.5rem;
}
/* --- Meet Our Team (Image & Card Styling) --- */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
margin-top: 40px;
}
.team-card {
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.05);
text-align: center;
transition: transform 0.3s ease;
}
.team-photo {
width: 100%;
height: 280px; /* Fixed height for uniformity */
overflow: hidden;
position: relative;
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures images don't stretch */
transition: transform 0.5s ease;
}
.team-card:hover {
transform: translateY(-10px);
}
.team-card:hover .team-photo img {
transform: scale(1.1); /* Zoom effect on hover */
}
.team-info {
padding: 20px;
}
.team-info h3 {
font-size: 1.2rem;
color: #333;
margin-bottom: 5px;
font-weight: 700;
}
.team-info p {
color: #10f053;
font-weight: 600;
font-size: 0.9rem;
margin: 0;
}
/* --- Scroll Animation Classes --- */
.fade-in-section {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
}
/* --- Responsive --- */
@media (max-width: 992px) {
.about-intro {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* Students forms page */
/* =================================================== */
/* STUDENT HUB & FORMS CONTENT */
/* =================================================== */
/* --- Page Header --- */
.forms-header {
background:
linear-gradient(rgba(26, 26, 26, 0.8), rgba(26, 26, 26, 0.8)),
url('https://images.pexels.com/photos/4145190/pexels-photo-4145190.jpeg?auto=compress&cs=tinysrgb&w=1600');
background-size: cover;
background-position: center;
padding: 180px 0;
text-align: center;
color: white;
}
/* --- Tab System (Generic) --- */
.form-container, .ielts-container {
background: #fff;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
overflow: hidden;
margin-top: -50px; /* Overlap effect */
}
.form-tabs, .ielts-tabs {
display: flex;
list-style: none;
background: #f8f9fa;
border-bottom: 2px solid #d44545;
}
.tab-link, .ielts-tab-link {
flex: 1;
padding: 20px;
text-align: center;
cursor: pointer;
font-weight: 700;
color: #777;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
}
.tab-link i, .ielts-tab-link i {
margin-right: 8px;
}
.tab-link.active, .ielts-tab-link.active {
color: #6e27e0; /* Nepal Nexus Green */
background: #fff;
border-bottom: 3px solid #1d90d3;
}
/* --- Form Content --- */
.form-content, .ielts-content {
padding: 40px;
}
.form-section, .ielts-tab-content {
display: none; /* Hidden by default */
}
.form-section.active, .ielts-tab-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
/* --- Form Grid --- */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group.full-width {
grid-column: span 2;
}
.form-group label {
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.form-group input, .form-group select, .form-group textarea {
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
}
.form-group input:focus {
border-color: #391e53;
outline: none;
}
.btn-submit {
background: #041c6b;
color: white;
padding: 15px 30px;
border: none;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
transition: background 0.3s;
}
.btn-submit:hover {
background: #0dc444;
}
/* =================================================== */
/* IELTS RESOURCE HUB STYLING */
/* =================================================== */
.ielts-resource-section { background: #fdfdfd; }
.section-subtitle { text-align: center; margin-bottom: 40px; color: #666; }
.ielts-subsection { margin-bottom: 40px; }
.ielts-subsection h4 {
color: #1a1a1a;
border-left: 5px solid #0e30c7;
padding-left: 15px;
margin-bottom: 20px;
}
/* Tip Cards */
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.tip-card {
background: white;
padding: 25px;
border-radius: 12px;
border: 1px solid #eee;
transition: transform 0.3s ease;
}
.tip-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.tip-icon { font-size: 1.5rem; color: #0d4e20; margin-bottom: 15px; }
/* Prompt Boxes */
.writing-task, .sample-passage {
background: #f1f8f3;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #10f053;
margin-bottom: 20px;
}
/* =================================================== */
/* POP-UP STYLING (for forms.html) */
/* =================================================== */
/* Pop-up Overlay: covers the entire screen */
.popup-overlay {
display: none; /* Initially hidden */
position: fixed; /* Sits on top of the page content */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
z-index: 1000; /* Ensures it's on top of other content */
justify-content: center;
align-items: center;
}
/* Pop-up Content Box */
.popup-content {
position: relative;
background-color: #ffffff;
padding: 25px;
border-radius: 12px;
width: 90%;
max-width: 550px; /* Maximum width for larger screens */
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
text-align: center;
/* Animation for appearing */
animation: fadeInScale 0.4s ease-out;
}
/* Close Button */
.popup-close {
position: absolute;
top: 10px;
right: 20px;
font-size: 30px;
font-weight: bold;
color: #888;
cursor: pointer;
transition: color 0.3s ease;
}
.popup-close:hover {
color: #333;
}
/* Special Offer Section */
.popup-offer-highlight {
background-color: #ffc107; /* A bright, attention-grabbing color */
color: #333;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.popup-offer-highlight .discount {
font-size: 2.5em;
font-weight: 700;
line-height: 1;
}
.popup-offer-highlight .condition {
font-size: 1.1em;
margin-top: 5px;
}
/* Main Content Area */
.popup-main-content .popup-icon {
font-size: 45px;
color: #007bff; /* Blue color for the icon */
margin-bottom: 15px;
}
.popup-main-content h2 {
font-size: 1.8em;
margin-bottom: 10px;
color: #333;
}
.popup-main-content p {
font-size: 1em;
color: #666;
margin-bottom: 25px;
}
/* Call-to-Action Button Styling */
.btn-primary {
display: inline-block;
padding: 12px 25px;
background-color: #28a745; /* Green color for action */
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.btn-primary:hover {
background-color: #218838; /* Darker green on hover */
}
/* Keyframe animation for the pop-up appearing */
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* =================================================== */
/* CONTACT PAGE CONTENT */
/* =================================================== */
.contact-header {
background:
linear-gradient(rgba(0,0,0,0.7), rgba(15, 177, 218, 0.7)),
url('https://images.unsplash.com/photo-1521791136064-7986c2920216');
background-size: cover;
background-position: center;
padding: 170px 0;
text-align: center;
color: white;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
/* --- Left Column: Contact Info --- */
.contact-info .section-title {
margin-bottom: 20px;
font-size: 2rem;
color: #1a1a1a;
}
.info-item {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.info-item i {
font-size: 1.5rem;
color: #10a9f0; /* Brand Green */
background: rgba(16, 240, 83, 0.1);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
}
.info-item h4 {
margin-bottom: 5px;
font-size: 1.1rem;
color: #333;
}
.info-item p, .info-item a {
color: #666;
text-decoration: none;
transition: color 0.3s;
}
.info-item a:hover {
color: #10f053;
}
/* Social Links in Contact */
.follow-us-title {
margin-top: 40px;
margin-bottom: 15px;
font-size: 1.2rem;
}
.social-links-contact {
display: flex;
gap: 15px;
}
.social-links-contact a {
width: 45px;
height: 45px;
border: 1px solid #ddd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #555;
transition: all 0.3s ease;
}
.social-links-contact a:hover {
background: #10f053;
color: white;
border-color: #10f053;
transform: translateY(-3px);
}
/* --- Right Column: Floating Label Form --- */
.contact-form-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0,0,0,0.08);
}
.floating-label {
position: relative;
margin-bottom: 25px;
}
.floating-label input,
.floating-label textarea {
width: 100%;
padding: 15px 0;
font-size: 1rem;
border: none;
border-bottom: 2px solid #ddd;
background: transparent;
outline: none;
transition: border-color 0.3s;
}
.floating-label label {
position: absolute;
top: 15px;
left: 0;
color: #999;
pointer-events: none;
transition: all 0.3s ease;
}
/* Animation for Floating Labels */
.floating-label input:focus ~ label,
.floating-label input:not(:placeholder-shown) ~ label,
.floating-label textarea:focus ~ label,
.floating-label textarea:not(:placeholder-shown) ~ label {
top: -12px;
font-size: 0.85rem;
font-weight: 700;
color: #10f053;
}
.floating-label input:focus,
.floating-label textarea:focus {
border-color: #10f053;
}
.btn-primary-full {
width: 100%;
background: #10f053;
color: white;
padding: 15px;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.btn-primary-full:hover {
background: #0dc444;
transform: translateY(-2px);
}
/* =================================================================== */
/* PAGE: CONTACT US (FIXED MAP) */
/* =================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
/* Styles for the map container */
.map-section { position: relative; line-height: 0; background-color: #e0e0e0; /* Fallback color */ }
.map-responsive-container iframe { width: 100%; height: 450px; border: none; }
/* =================================================== */
/* CSS for application form Only */
/* =================================================== */
/* --- Page Header --- */
/* --- Page Header --- */
/* --- Page Header --- */
.counseling-header {
background: linear-gradient(rgba(64, 165, 233, 0.9), rgba(19, 81, 122, 0.9)), url('https://images.pexels.com/photos/3184611/pexels-photo-3184611.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
background-size: cover;
background-position: center;
padding: 170px 0;
text-align: center;
color: white;
}
.counseling-header h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; }
/* --- Why Apply Section --- */
.why-us-section { background: #f9f9f9; }
.section-subtitle { text-align: center; margin-bottom: 40px; color: #666; max-width: 700px; margin-inline: auto; }
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.benefit-item {
background: white;
padding: 30px;
border-radius: 15px;
text-align: center;
transition: transform 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.benefit-item:hover { transform: translateY(-10px); }
.benefit-item i {
font-size: 2.5rem;
color: #f08f10;
margin-bottom: 20px;
}
.benefit-item h3 { font-size: 1.2rem; margin-bottom: 15px; color: #1a1a1a; }
/* --- Multi-Step Form Styling --- */
.counseling-form-container {
background: white;
max-width: 800px;
margin: -60px auto 40px;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
/* Progress Bar */
.progress-bar {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
position: relative;
}
.progress-bar::before {
content: '';
position: absolute;
top: 25px; left: 0; width: 100%; height: 2px;
background: #eee;
z-index: 1;
}
.step {
position: relative;
z-index: 2;
text-align: center;
flex: 1;
}
.step-icon {
width: 50px; height: 50px;
background: #eee;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 10px;
color: #999;
transition: all 0.3s ease;
}
.step.active .step-icon { background: #107fc0; color: white; }
.step.active p { color: #101ff0; font-weight: 700; }
.step p { font-size: 0.85rem; color: #999; }
/* Form Steps Visibility */
.form-step { display: none; }
.form-step-active { display: block; animation: fadeIn 0.5s ease; }
.form-step-title { font-size: 1.5rem; margin-bottom: 25px; color: #1a1a1a; border-left: 5px solid #10f053; padding-left: 15px; }
/* Inputs & Groups */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; }
.form-group input, .form-group select {
width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem;
}
/* Radio Group */
.radio-group { display: flex; gap: 20px; margin-top: 10px; }
.radio-group label { font-weight: 400; cursor: pointer; }
/* Score Grid */
.score-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
margin-top: 10px;
}
.score-grid input { text-align: center; padding: 8px; }
/* Buttons */
.form-buttons { display: flex; justify-content: space-between; margin-top: 30px; }
.btn-prev { background: #eee; color: #555; }
.btn-next, button[type="submit"] { background: #dd10f0; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: 600; }
/* --- FAQ Accordion --- */
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #eee; }
.faq-question {
width: 100%; padding: 20px;
display: flex; justify-content: space-between; align-items: center;
background: none; border: none; cursor: pointer;
font-size: 1.1rem; font-weight: 600; text-align: left;
transition: color 0.3s;
}
.faq-question:hover { color: #f01093; }
.faq-answer {
max-height: 0; overflow: hidden;
transition: max-height 0.3s ease-out;
background: #f9f9f9;
}
.faq-answer p { padding: 0 20px 20px; color: #666; line-height: 1.6; }
.faq-item.active .faq-answer { max-height: 200px; }
.faq-item.active i { transform: rotate(180deg); color: #10f053; }
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.counseling-form-container { margin-top: 20px; padding: 20px; }
.progress-bar p { display: none; }
}
/* =================================================== */
/* APPLICATION & DOCUMENTATION PAGE CONTENT */
/* =================================================== */
/* --- Hero Section --- */
.header-with-bg {
background: linear-gradient(rgba(11, 180, 247, 0.75), rgba(0, 0, 0, 0.75)), url('images/documentation-header.jpg');
background-size: cover;
background-position: center;
color: white;
text-align: center;
padding: 160px 0;
}
.header-with-bg h1 {
font-size: 2.8rem;
font-weight: 800;
margin-bottom: 15px;
}
/* --- Intro Text --- */
.intro-text {
max-width: 900px;
margin: 0 auto 60px;
text-align: center;
}
.intro-text h2 {
font-size: 2.2rem;
color: #1a1a1a;
margin-bottom: 20px;
}
.intro-text p {
font-size: 1.1rem;
line-height: 1.8;
color: #555;
}
/* --- The Nepal Nexus Advantage Grid --- */
.advantage-section {
padding: 60px 0;
background-color: #f9f9f9;
border-radius: 30px;
margin-bottom: 80px;
}
.advantage-section h2 {
text-align: center;
margin-bottom: 50px;
font-size: 2rem;
}
.benefits-grid-fullwidth {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
padding: 0 20px;
}
.benefit-item {
background: white;
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
text-align: center;
border-bottom: 4px solid transparent;
}
.benefit-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
border-bottom: 4px solid #0d86d6; /* Nepal Nexus Green */
}
.benefit-item i {
font-size: 2.5rem;
color: #076e26;
margin-bottom: 20px;
}
.benefit-item h3 {
font-size: 1.3rem;
margin-bottom: 15px;
color: #1a1a1a;
}
.benefit-item p {
color: #666;
line-height: 1.6;
}
/* --- Step-by-Step Process Section --- */
.process-section {
max-width: 1000px;
margin: 0 auto 80px;
}
.process-section h2 {
text-align: center;
margin-bottom: 50px;
font-size: 2.2rem;
}
.process-steps {
display: flex;
flex-direction: column;
gap: 40px;
}
.process-step {
display: flex;
gap: 30px;
align-items: center;
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.03);
transition: transform 0.3s ease;
}
.process-step:hover {
transform: scale(1.02);
}
.step-number {
width: 60px;
height: 60px;
background: #105ef0;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 800;
flex-shrink: 0;
}
.step-content h4 {
font-size: 1.25rem;
margin-bottom: 10px;
color: #1a1a1a;
}
/* --- Call To Action (Contact Cards) --- */
.cta-section {
background: #1a1a1a;
color: white;
padding: 80px 0;
border-radius: 40px 40px 0 0;
text-align: center;
}
.cta-section h3 {
font-size: 2rem;
margin-bottom: 15px;
}
.cta-section p {
margin-bottom: 40px;
color: #bbb;
}
.cta-contact-list {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
}
.cta-card {
background: #2a2a2a;
padding: 20px 30px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
color: white;
min-width: 300px;
transition: all 0.3s ease;
border: 1px solid #333;
}
.cta-card:hover {
background: #333;
border-color: #10f053;
transform: translateY(-5px);
}
.cta-card i {
font-size: 1.8rem;
color: #10f053;
}
.cta-card-content {
text-align: left;
}
.cta-label {
display: block;
font-size: 0.85rem;
color: #888;
text-transform: uppercase;
}
.cta-detail {
font-size: 1rem;
font-weight: 600;
}
/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
.process-step {
flex-direction: column;
text-align: center;
}
.cta-card {
width: 100%;
}
}
/* Styles for the pop-up container */
.popup-container {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Styles for the pop-up content */
.popup-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
max-width: 500px;
text-align: center;
border-radius: 10px;
position: relative;
}
/* Styles for the close button */
.close-btn {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 10px;
right: 25px;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Styles for the pop-up icon */
.popup-icon {
font-size: 50px;
color: #333;
margin-bottom: 15px;
}
/* General button styles */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
margin-top: 15px;
}
.btn-popup {
background-color: #28a745;
}
/* =================================================== */
/* VISA SUPPORT PAGE CONTENT */
/* =================================================== */
.service-page-content {
display: flex;
gap: 40px;
margin-top: 40px;
align-items: flex-start;
}
.main-content-column {
flex: 2;
}
.main-content-column h2 {
font-size: 2.2rem;
color: #1a1a1a;
margin-bottom: 20px;
}
/* --- Vertical Visa Journey --- */
.visa-journey-vertical {
position: relative;
padding: 40px 0;
margin: 40px 0;
}
.journey-path-vertical {
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 4px;
background: #131212;
z-index: 1;
}
.student-icon-vertical {
position: absolute;
left: 22px;
top: 0;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: #10b1f0;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
transition: top 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
box-shadow: 0 0 15px rgba(16, 240, 83, 0.4);
}
.journey-step-vertical {
position: relative;
display: flex;
gap: 30px;
margin-bottom: 60px;
padding-left: 60px;
opacity: 0.4; /* Faded when not reached */
transition: all 0.4s ease;
}
.journey-step-vertical.active {
opacity: 1;
}
.step-milestone {
position: absolute;
left: 0;
width: 44px;
height: 44px;
background: white;
border: 4px solid #ddd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
z-index: 2;
transition: all 0.3s ease;
}
.journey-step-vertical.active .step-milestone {
border-color: #2c09ac;
background: #10bbd1;
color: white;
transform: scale(1.1);
}
.step-details h3 {
font-size: 1.3rem;
margin-bottom: 8px;
color: #333;
}
.step-description {
color: #666;
line-height: 1.6;
}
/* Sparkle Effects for Final Step */
.celebration-fx {
position: relative;
display: none;
}
.active .celebration-fx {
display: block;
}
.sparkle {
position: absolute;
width: 5px; height: 5px;
background: #f39c12;
border-radius: 50%;
animation: explode 1s infinite;
}
@keyframes explode {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(3); opacity: 0; }
}
/* --- FAQ Accordion --- */
.accordion-container {
margin-top: 60px;
}
.faq-title {
margin-bottom: 30px;
}
.accordion-item {
border-bottom: 1px solid #eee;
}
.accordion-header {
width: 100%;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
background: none;
border: none;
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
text-align: left;
transition: color 0.3s;
}
.accordion-header:hover {
color: #1032f0;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background: #f9f9f9;
}
.accordion-content p {
padding: 0 20px 20px;
color: #555;
line-height: 1.6;
}
.accordion-item.active .accordion-content {
max-height: 200px;
}
.accordion-item.active i {
transform: rotate(180deg);
color: #340aa7;
}
/* --- Contact Sidebar --- */
.contact-sidebar {
flex: 1;
background: #fff;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(10, 0, 0, 0.05);
position: sticky;
top: 100px;
}
.contact-sidebar h3 {
margin-bottom: 15px;
}
.contact-item-sidebar {
display: flex;
gap: 15px;
margin-bottom: 25px;
}
.contact-item-sidebar i {
color: #1096f0;
font-size: 1.2rem;
margin-top: 4px;
}
.contact-item-sidebar strong {
display: block;
font-size: 0.9rem;
color: #333;
}
.contact-item-sidebar span {
font-size: 0.95rem;
color: #666;
}
.cta-button-sidebar {
display: block;
background: #e211c6;
color: white;
text-align: center;
padding: 15px;
border-radius: 10px;
text-decoration: none;
font-weight: 700;
margin-top: 20px;
transition: background 0.3s;
}
.cta-button-sidebar:hover {
background: #0dc444;
}
/* --- Responsive --- */
@media (max-width: 992px) {
.service-page-content {
flex-direction: column;
}
.contact-sidebar {
position: static;
width: 100%;
}
}
.journey-step-vertical {
cursor: pointer; /* Makes it look clickable */
transition: background 0.3s ease, transform 0.3s ease;
border-radius: 15px;
padding: 20px 20px 20px 60px; /* Adjusted padding */
}
/* Give a subtle highlight when hovering over a step */
.journey-step-vertical:hover {
background: rgba(16, 240, 83, 0.05);
transform: translateX(10px);
}
.journey-step-vertical.active .step-milestone {
background: #10f053;
border-color: #10f053;
color: white;
}
/* Ensure the icon is always on top */
#studentIcon {
z-index: 10;
pointer-events: none; /* Let clicks pass through the icon to the step below */
}
/* =================================================================== */
/* PRE-DEPARTURE PAGE - COMPLETE CSS */
/* =================================================================== */
/* Page Header */
.predeparture-header {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/predeparture-bg.jpg');
background-size: cover;
background-position: center;
padding: 150px 0;
text-align: center;
color: white;
margin-top: 140px;
}
.predeparture-header h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 15px;
}
.predeparture-header p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto;
opacity: 0.9;
}
/* =================================================================== */
/* PACKING CHECKLIST SECTION */
/* =================================================================== */
.packing-checklist-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0,0,0,0.08);
margin-top: 30px;
}
.checklist-filters {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.filter-btn {
padding: 12px 25px;
border: 2px solid #e0e0e0;
background: white;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
color: #555;
}
.filter-btn.active {
background: #87CEEB;
border-color: #87CEEB;
color: #1a4b6d;
box-shadow: 0 5px 15px rgba(135, 206, 235, 0.3);
}
.filter-btn:hover {
background: #E0F2FE;
border-color: #87CEEB;
transform: translateY(-2px);
}
.checklist-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
}
.check-item {
background: #f8fafc;
padding: 15px 20px;
border-radius: 12px;
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.check-item:hover {
border-color: #87CEEB;
box-shadow: 0 5px 15px rgba(135, 206, 235, 0.1);
transform: translateY(-2px);
}
.check-item label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-size: 0.95rem;
color: #2c3e50;
}
.check-item input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #87CEEB;
}
.check-item.checked {
background: #f0fff4;
opacity: 0.8;
}
.check-item.checked label {
text-decoration: line-through;
color: #6c757d;
}
/* =================================================================== */
/* FAQ SECTION */
/* =================================================================== */
.faq-container {
max-width: 900px;
margin: 40px auto 0;
}
.faq-item {
background: white;
margin-bottom: 15px;
border-radius: 15px;
border: 1px solid #e9ecef;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover {
border-color: #87CEEB;
box-shadow: 0 5px 20px rgba(135, 206, 235, 0.15);
}
.faq-question {
padding: 22px 25px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background: white;
transition: background 0.3s ease;
}
.faq-question:hover {
background: #f8fafc;
}
.faq-question h4 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: #1a4b6d;
flex: 1;
padding-right: 20px;
}
.faq-question i {
color: #87CEEB;
font-size: 1.2rem;
transition: transform 0.3s ease;
width: 24px;
text-align: center;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
color: #4aa3d1;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
background: #f8fafc;
border-top: 0px solid #e9ecef;
}
.faq-item.active .faq-answer {
max-height: 300px;
border-top-width: 1px;
}
.faq-answer p {
padding: 0 25px 25px 25px;
color: #4a5568;
line-height: 1.7;
font-size: 0.95rem;
margin: 0;
}
/* =================================================================== */
/* STILL HAVE QUESTIONS CTA */
/* =================================================================== */
.dynamic-cta-section {
background: linear-gradient(135deg, #E0F2FE 0%, #87CEEB 100%);
border-radius: 30px;
padding: 60px 50px;
margin: 60px 0 20px;
position: relative;
overflow: hidden;
box-shadow: 0 25px 40px -15px rgba(135, 206, 235, 0.4);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Background Decorative Elements */
.dynamic-cta-section::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
z-index: 0;
animation: floatQuestion 20s ease-in-out infinite;
}
.dynamic-cta-section::after {
content: '';
position: absolute;
bottom: -80px;
left: -80px;
width: 300px;
height: 300px;
background: rgba(135, 206, 235, 0.2);
border-radius: 50%;
z-index: 0;
animation: floatQuestion 25s ease-in-out infinite reverse;
}
@keyframes floatQuestion {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, -30px) scale(1.1); }
}
/* Content Area */
.dynamic-cta-section .cta-content {
position: relative;
z-index: 10;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
/* Icon Styling */
.dynamic-cta-section .cta-icon {
font-size: 4.5rem;
color: #1a4b6d;
margin-bottom: 25px;
display: inline-block;
animation: pulseQuestion 2s ease-in-out infinite;
background: rgba(255, 255, 255, 0.3);
width: 110px;
height: 110px;
line-height: 110px;
border-radius: 50%;
box-shadow: 0 15px 30px rgba(135, 206, 235, 0.4);
}
@keyframes pulseQuestion {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Heading */
.dynamic-cta-section h2 {
font-size: 2.5rem;
font-weight: 800;
color: #0a2a3b;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.dynamic-cta-section h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1a4b6d, #0a2a3b);
border-radius: 2px;
transition: width 0.3s ease;
}
.dynamic-cta-section:hover h2::after {
width: 120px;
}
/* Description Text */
.dynamic-cta-section p {
font-size: 1.2rem;
color: #1a4b6d;
line-height: 1.7;
margin-bottom: 35px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Button Container */
.dynamic-cta-section .cta-actions-container {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
margin-top: 20px;
}
/* Button Styles */
.dynamic-cta-section .cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 40px;
border-radius: 60px;
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
min-width: 200px;
}
.dynamic-cta-section .cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.dynamic-cta-section .cta-button:hover::before {
left: 100%;
}
/* Primary Button (Call Us) */
.dynamic-cta-section .cta-button.primary {
background: linear-gradient(135deg, #1a4b6d 0%, #0a2a3b 100%);
color: white;
box-shadow: 0 15px 25px -8px rgba(26, 75, 109, 0.5);
}
.dynamic-cta-section .cta-button.primary:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 25px 35px -10px #0a2a3b;
background: linear-gradient(135deg, #0a2a3b 0%, #1a4b6d 100%);
}
/* Secondary Button (Send Message) */
.dynamic-cta-section .cta-button.secondary {
background: linear-gradient(135deg, #87CEEB 0%, #4aa3d1 100%);
color: #0a2a3b;
box-shadow: 0 15px 25px -8px rgba(135, 206, 235, 0.5);
}
.dynamic-cta-section .cta-button.secondary:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 25px 35px -10px #4aa3d1;
background: linear-gradient(135deg, #4aa3d1 0%, #87CEEB 100%);
}
/* Button Icons */
.dynamic-cta-section .cta-button i {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.dynamic-cta-section .cta-button:hover i {
transform: translateX(5px) scale(1.1);
}
.dynamic-cta-section .cta-button.primary:hover i {
transform: translateX(5px) rotate(5deg);
}
.dynamic-cta-section .cta-button.secondary:hover i {
transform: translateX(5px) rotate(-5deg);
}
/* =================================================================== */
/* RESPONSIVE DESIGN */
/* =================================================================== */
@media (max-width: 992px) {
.predeparture-header h1 {
font-size: 2.5rem;
}
.predeparture-header p {
font-size: 1.1rem;
padding: 0 20px;
}
.dynamic-cta-section {
padding: 50px 30px;
}
.dynamic-cta-section h2 {
font-size: 2.2rem;
}
.dynamic-cta-section p {
font-size: 1.1rem;
}
}
@media (max-width: 768px) {
.predeparture-header {
padding: 120px 0;
}
.predeparture-header h1 {
font-size: 2rem;
}
.packing-checklist-container {
padding: 30px 20px;
}
.checklist-filters {
gap: 10px;
}
.filter-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.checklist-grid {
grid-template-columns: 1fr;
}
.faq-question {
padding: 18px 20px;
}
.faq-question h4 {
font-size: 1rem;
}
.dynamic-cta-section {
padding: 40px 25px;
border-radius: 25px;
}
.dynamic-cta-section .cta-icon {
font-size: 3.5rem;
width: 90px;
height: 90px;
line-height: 90px;
}
.dynamic-cta-section h2 {
font-size: 2rem;
}
.dynamic-cta-section h2::after {
width: 60px;
}
.dynamic-cta-section:hover h2::after {
width: 100px;
}
.dynamic-cta-section p {
font-size: 1rem;
padding: 0 10px;
}
.dynamic-cta-section .cta-actions-container {
flex-direction: column;
gap: 15px;
align-items: center;
}
.dynamic-cta-section .cta-button {
width: 100%;
max-width: 300px;
padding: 16px 30px;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.predeparture-header h1 {
font-size: 1.6rem;
}
.predeparture-header p {
font-size: 0.95rem;
}
.section-title {
font-size: 1.8rem;
}
.section-subtitle {
font-size: 1rem;
}
.filter-btn {
padding: 8px 16px;
font-size: 0.85rem;
}
.faq-question {
padding: 15px;
}
.faq-question h4 {
font-size: 0.95rem;
}
.faq-answer p {
padding: 0 15px 15px 15px;
font-size: 0.9rem;
}
.dynamic-cta-section {
padding: 30px 20px;
}
.dynamic-cta-section .cta-icon {
font-size: 3rem;
width: 80px;
height: 80px;
line-height: 80px;
}
.dynamic-cta-section h2 {
font-size: 1.6rem;
}
.dynamic-cta-section p {
font-size: 0.95rem;
}
.dynamic-cta-section .cta-button {
padding: 14px 25px;
font-size: 0.95rem;
min-width: auto;
}
}
/* =================================================================== */
/* MOCK TEST CTA - SPECIFIC ONLY */
/* =================================================================== */
/* Main Section - Specific to Mock Test */
.free-test-cta {
padding: 60px 0;
background: linear-gradient(135deg, #E0F2FE 0%, #b3e0f5 100%);
position: relative;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
.free-test-cta::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: rgba(135, 206, 235, 0.15);
border-radius: 50%;
z-index: 0;
}
.free-test-cta::after {
content: '';
position: absolute;
bottom: -50px;
left: -50px;
width: 250px;
height: 250px;
background: rgba(135, 206, 235, 0.1);
border-radius: 50%;
z-index: 0;
}
/* Main Card */
.free-test-cta .cta-card {
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(135, 206, 235, 0.2);
padding: 50px;
display: grid;
grid-template-columns: 1.5fr 0.8fr;
gap: 40px;
align-items: center;
position: relative;
z-index: 1;
transform: translateY(0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.free-test-cta .cta-card:hover {
transform: translateY(-5px);
box-shadow: 0 30px 50px rgba(135, 206, 235, 0.3);
}
/* Content Area */
.free-test-cta .cta-content {
position: relative;
}
.free-test-cta .cta-content h2 {
color: #1a4b6d;
font-size: 2.2rem;
margin-bottom: 15px;
font-weight: 700;
line-height: 1.2;
}
.free-test-cta .cta-content p {
color: #4a5568;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 25px;
}
/* Form Styling */
.free-test-cta .mock-test-access-form {
margin: 25px 0;
}
.free-test-cta .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}
.free-test-cta .form-group {
margin-bottom: 15px;
}
/* FIXED: Label and icon alignment */
.free-test-cta .form-group label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-weight: 600;
color: #2d3748;
font-size: 0.95rem;
line-height: 1.5;
}
.free-test-cta .form-group label i {
color: #87CEEB;
font-size: 1rem;
width: 18px;
text-align: center;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.free-test-cta .form-group input,
.free-test-cta .form-group select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.95rem;
transition: all 0.3s ease;
background: #f8fafc;
}
.free-test-cta .form-group input:focus,
.free-test-cta .form-group select:focus {
border-color: #87CEEB;
outline: none;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.1);
}
.free-test-cta .form-group input:hover,
.free-test-cta .form-group select:hover {
border-color: #4aa3d1;
}
/* Checkbox Styling - FIXED alignment */
.free-test-cta .consent-checkbox {
margin: 20px 0;
}
.free-test-cta .checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-size: 0.9rem;
color: #4a5568;
line-height: 1.5;
}
.free-test-cta .checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
cursor: pointer;
accent-color: #87CEEB;
flex-shrink: 0;
}
.free-test-cta .checkbox-label span {
line-height: 1.5;
flex: 1;
}
/* Submit Button */
.free-test-cta .btn-free-test {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(135deg, #87CEEB 0%, #4aa3d1 100%);
color: white;
border: none;
padding: 16px 35px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
box-shadow: 0 10px 20px rgba(135, 206, 235, 0.3);
}
.free-test-cta .btn-free-test i {
font-size: 1.1rem;
transition: transform 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.free-test-cta .btn-free-test:hover {
background: linear-gradient(135deg, #4aa3d1 0%, #1e88c7 100%);
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(135, 206, 235, 0.4);
}
.free-test-cta .btn-free-test:hover i {
transform: translateX(5px);
}
.free-test-cta .btn-free-test:active {
transform: translateY(0);
}
/* Note Text - FIXED alignment */
.free-test-cta .cta-note {
font-size: 0.9rem;
color: #718096;
margin-top: 15px;
display: flex;
align-items: center;
gap: 8px;
line-height: 1.5;
}
.free-test-cta .cta-note i {
color: #87CEEB;
font-size: 1rem;
width: 18px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Image Side */
.free-test-cta .cta-image {
position: relative;
text-align: center;
background: linear-gradient(135deg, #E0F2FE 0%, #87CEEB 100%);
border-radius: 15px;
padding: 40px 20px;
color: #1a4b6d;
box-shadow: 0 15px 30px rgba(135, 206, 235, 0.2);
}
.free-test-cta .cta-image i {
font-size: 80px;
margin-bottom: 15px;
animation: mockTestFloat 3s ease-in-out infinite;
}
@keyframes mockTestFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* Badge */
.free-test-cta .cta-badge {
position: absolute;
top: -10px;
right: -10px;
background: #ff6b6b;
color: white;
padding: 8px 15px;
border-radius: 30px;
font-weight: bold;
font-size: 1.1rem;
box-shadow: 0 5px 10px rgba(255, 107, 107, 0.3);
transform: rotate(5deg);
}
/* Responsive Design */
@media (max-width: 992px) {
.free-test-cta .cta-card {
grid-template-columns: 1fr;
text-align: center;
padding: 40px;
}
.free-test-cta .cta-image {
max-width: 400px;
margin: 0 auto;
width: 100%;
}
/* Center align labels on mobile */
.free-test-cta .form-group label {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.free-test-cta {
padding: 40px 0;
}
.free-test-cta .cta-card {
padding: 30px 20px;
}
.free-test-cta .cta-content h2 {
font-size: 1.8rem;
}
.free-test-cta .form-row {
grid-template-columns: 1fr;
gap: 0;
}
.free-test-cta .btn-free-test {
padding: 14px 25px;
font-size: 1rem;
}
.free-test-cta .cta-image i {
font-size: 60px;
}
/* Ensure labels stay left-aligned on mobile */
.free-test-cta .form-group label {
text-align: left;
}
}
@media (max-width: 480px) {
.free-test-cta .cta-content h2 {
font-size: 1.5rem;
}
.free-test-cta .cta-image i {
font-size: 50px;
}
.free-test-cta .cta-badge {
font-size: 0.9rem;
padding: 6px 12px;
}
}