/* ============================================================ True Line Group Education - Complete Stylesheet Brand: True Line Group Education, Ahmedabad Founded by: Dr. Pruthvigiri Goswami Note: Pages using Font Awesome icons require the FA CDN loaded separately in the HTML . ============================================================ */ /* ---------------------------------------------------------- 0. Google Fonts (loaded via in HTML ) ---------------------------------------------------------- */ /* ---------------------------------------------------------- 1. CSS Custom Properties ---------------------------------------------------------- */ :root { --primary-blue: #005078; --dark-navy: #003450; --accent-red: #DC0000; --cta-orange: #DC0000; --cta-orange-hover: #B80000; --light-gray-bg: #F5F7FA; --white: #FFFFFF; --text-dark: #1A1A2E; --text-gray: #6B7280; --whatsapp-green: #25D366; --whatsapp-green-hover: #1ebe5a; --border-color: #E5E7EB; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 10px 30px rgba(0,0,0,0.12); --shadow-xl: 0 20px 50px rgba(0,0,0,0.15); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 50px; --transition: 0.3s ease; --font-heading: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; --container-max: 1200px; --section-padding: 80px; --header-height: 100px; } /* ---------------------------------------------------------- 2. CSS Reset / Base ---------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-dark); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: color var(--transition); } ul, ol { list-style: none; } button { border: none; background: none; cursor: pointer; font-family: inherit; } input, select, textarea, button { font-family: inherit; font-size: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.3; color: var(--text-dark); } /* ---------------------------------------------------------- 3. Core Layout ---------------------------------------------------------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; width: 100%; } .section { padding: var(--section-padding) 0; } .section-gray { background: var(--light-gray-bg); } .section-header { text-align: center; margin-bottom: 50px; } .section-title { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; } .section-subtitle { font-size: 18px; color: var(--text-gray); max-width: 600px; margin: 0 auto; } .section-tag { display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--cta-orange); margin-bottom: 10px; } .text-center { text-align: center; } .text-white { color: var(--white); } .lead-text { font-size: 18px; line-height: 1.8; color: var(--text-gray); } .bg-light { background: var(--light-gray-bg); } .two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; } .section-divider { width: 60px; height: 4px; background: var(--cta-orange); border-radius: 2px; margin: 16px auto; } .title-line { width: 50px; height: 3px; background: var(--cta-orange); border-radius: 2px; margin-top: 10px; } .image-badge { position: absolute; bottom: -10px; right: -10px; background: var(--cta-orange); color: var(--white); padding: 8px 16px; border-radius: var(--radius-md); font-weight: 600; font-size: 14px; } /* ---------------------------------------------------------- 4. Preloader ---------------------------------------------------------- */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease, visibility 0.5s ease; } .preloader.hidden { opacity: 0; visibility: hidden; } .preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; } .spinner { width: 48px; height: 48px; border: 4px solid var(--border-color); border-top-color: var(--primary-blue); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .preloader-text { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--primary-blue); letter-spacing: 1px; } /* ---------------------------------------------------------- 5. Header / Navigation ---------------------------------------------------------- */ .header { position: sticky; top: 0; left: 0; width: 100%; background: var(--white); z-index: 1000; transition: box-shadow var(--transition); height: var(--header-height); } .header.scrolled { box-shadow: var(--shadow-md); } .navbar { display: flex; justify-content: space-between; align-items: center; height: var(--header-height); } .logo { display: flex; align-items: center; text-decoration: none; } .logo img { height: 90px; width: auto; object-fit: contain; } .nav-menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; } .nav-link { display: inline-block; padding: 10px 14px; font-size: 15px; font-weight: 500; color: var(--text-dark); transition: color var(--transition); border-radius: var(--radius-sm); } .nav-link:hover { color: var(--primary-blue); } .nav-link.active { color: var(--primary-blue); font-weight: 600; } .dropdown { position: relative; } .dropdown-toggle { display: flex; align-items: center; gap: 4px; } .dropdown-arrow { display: inline-block; font-size: 10px; line-height: 1; transition: transform var(--transition); margin-left: 2px; } .dropdown:hover .dropdown-arrow { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--transition); z-index: 100; } .dropdown:hover .dropdown-menu, .dropdown-open .dropdown-menu, .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu li { list-style: none; } .dropdown-link { display: block; padding: 10px 20px; font-size: 14px; color: var(--text-dark); transition: all var(--transition); white-space: nowrap; } .dropdown-link:hover { background: var(--light-gray-bg); color: var(--primary-blue); padding-left: 24px; } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-cta-desktop { display: inline-flex; } .nav-cta-mobile { display: none; } .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 30px; cursor: pointer; z-index: 1001; } .hamburger-line { display: block; width: 100%; height: 3px; background: var(--text-dark); border-radius: 2px; transition: all var(--transition); } .hamburger.active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Alternate nav elements used on service pages */ .nav-logo { display: flex; align-items: center; gap: 10px; } .nav-cta { display: flex; align-items: center; } .nav-cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; background: var(--cta-orange); color: var(--white); border-radius: var(--radius-md); font-weight: 600; font-size: 14px; transition: background var(--transition); } .nav-cta-btn:hover { background: var(--cta-orange-hover); } .nav-dropdown { position: relative; } .dropdown-trigger { display: flex; align-items: center; gap: 4px; cursor: pointer; } /* ---------------------------------------------------------- 6. Hero Section ---------------------------------------------------------- */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--white); position: relative; overflow: hidden; } /* Background Video */ .hero-video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .hero-video { width: 100%; height: 100%; object-fit: cover; } /* Dark overlay on top of video */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 30, 70, 0.75) 0%, rgba(20, 60, 120, 0.65) 50%, rgba(15, 45, 90, 0.7) 100%); z-index: 1; } .hero-content { position: relative; text-align: center; max-width: 800px; margin: 0 auto; padding: 40px 20px; z-index: 1; } .hero-title { font-family: var(--font-heading); font-size: 52px; font-weight: 800; color: var(--white); margin-bottom: 20px; line-height: 1.15; } .hero-title .highlight { color: var(--cta-orange); } .hero-subtitle { font-size: 18px; color: rgba(255,255,255,0.9); margin-bottom: 30px; line-height: 1.7; } .hero-cta { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 30px; flex-wrap: wrap; } .hero-trust-text { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 24px; } /* ---------------------------------------------------------- 7. Trust Bar ---------------------------------------------------------- */ .trust-bar { background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy)); padding: 24px 0; } .trust-stats { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .trust-stat { display: flex; align-items: center; gap: 12px; } .trust-icon { font-size: 28px; line-height: 1; } .trust-info { display: flex; flex-direction: column; } .trust-value { display: flex; align-items: baseline; } .trust-number, .trust-number-text { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--white); line-height: 1.2; } .trust-plus { font-weight: 700; color: var(--white); } .trust-label { font-size: 13px; color: rgba(255,255,255,0.7); } /* ---------------------------------------------------------- 8. About Brief ---------------------------------------------------------- */ .about-brief { background: var(--white); } .about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; align-items: center; } .about-text { display: flex; flex-direction: column; } .about-description { font-size: 16px; color: var(--text-gray); line-height: 1.8; margin-bottom: 20px; } .about-image { display: flex; flex-direction: column; gap: 16px; } .about-image-placeholder { background: linear-gradient(135deg, #e8f0fe, #d4e4fc); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px; width: 100%; gap: 12px; } .placeholder-icon { font-size: 64px; line-height: 1; } .placeholder-name { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--primary-blue); } .placeholder-title { font-size: 14px; color: var(--text-gray); } /* ---------------------------------------------------------- 9. Features / Why Choose ---------------------------------------------------------- */ .why-choose { padding: var(--section-padding) 0; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); } .section-subtitle { font-size: 17px; color: var(--text-gray); max-width: 600px; margin: 0 auto; line-height: 1.7; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 10px; } .feature-card { background: var(--white); padding: 36px 30px 32px; border-radius: var(--radius-xl); text-align: left; transition: transform 0.35s ease, box-shadow 0.35s ease; border: 1px solid rgba(27, 79, 138, 0.06); box-shadow: 0 2px 12px rgba(13, 46, 92, 0.04); position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-blue), var(--cta-orange)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(13, 46, 92, 0.12); } .feature-card:hover::before { transform: scaleX(1); } .feature-icon-wrap { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, rgba(27, 79, 138, 0.08), rgba(27, 79, 138, 0.15)); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background 0.35s ease, transform 0.35s ease; } .feature-card:hover .feature-icon-wrap { background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy)); transform: scale(1.05); } .feature-svg { width: 28px; height: 28px; color: var(--primary-blue); transition: color 0.35s ease; } .feature-card:hover .feature-svg { color: var(--white); } .feature-icon { font-size: 48px; margin-bottom: 16px; line-height: 1; } .feature-title { font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin-bottom: 10px; color: var(--text-dark); } .feature-description { font-size: 14.5px; color: var(--text-gray); line-height: 1.7; } /* Reveal animation */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .reveal.revealed { opacity: 1; transform: translateY(0); } /* ---------------------------------------------------------- 10. Services ---------------------------------------------------------- */ .services { padding: var(--section-padding) 0; } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .service-card { display: flex; gap: 20px; background: var(--white); padding: 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .service-icon { font-size: 48px; flex-shrink: 0; line-height: 1; } .service-content { display: flex; flex-direction: column; } .service-title { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--text-dark); } .service-description { font-size: 15px; color: var(--text-gray); line-height: 1.6; margin-bottom: 12px; } .service-link { font-size: 14px; font-weight: 600; color: var(--cta-orange); transition: color var(--transition); } .service-link:hover { color: var(--cta-orange-hover); } /* ---------------------------------------------------------- 11. Countries ---------------------------------------------------------- */ .countries { padding: var(--section-padding) 0; } .countries-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } .country-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; padding: 28px 16px; transition: transform var(--transition), box-shadow var(--transition); } .country-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .country-flag { margin-bottom: 12px; line-height: 1; display: flex; justify-content: center; } .country-flag img { width: 64px; height: auto; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .country-flag .flag-icon { font-size: 48px; line-height: 1; display: block; } .table-flag { width: 20px; height: auto; vertical-align: middle; margin-right: 6px; border-radius: 2px; } .country-name { font-family: var(--font-heading); font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--text-dark); } .country-stats { list-style: none; padding: 0; margin: 0; text-align: left; font-size: 13px; color: var(--text-gray); display: flex; flex-direction: column; gap: 6px; } /* ---------------------------------------------------------- 12. Fee Comparison ---------------------------------------------------------- */ .fee-comparison { padding: var(--section-padding) 0; } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .comparison-table { width: 100%; border-collapse: collapse; font-size: 15px; } .comparison-table th { background: var(--dark-navy); color: var(--white); padding: 16px 20px; text-align: left; font-family: var(--font-heading); font-weight: 600; font-size: 14px; white-space: nowrap; } .comparison-table td { padding: 14px 20px; border-bottom: 1px solid var(--border-color); color: var(--text-dark); } .comparison-table tbody tr:nth-child(even) { background: var(--light-gray-bg); } .comparison-table tbody tr:hover { background: #eef3fa; } .highlight-row { background: rgba(245,130,32,0.1) !important; font-weight: 600; } .highlight-row td { color: var(--text-dark); } .fee-cta { text-align: center; margin-top: 30px; } /* ---------------------------------------------------------- 13. Admission Process / Timeline ---------------------------------------------------------- */ .admission-process { padding: var(--section-padding) 0; } .timeline { display: flex; flex-direction: column; position: relative; max-width: 700px; margin: 0 auto; } .timeline::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 0; width: 3px; background: var(--border-color); border-radius: 2px; } .timeline-item { display: flex; gap: 24px; padding-left: 0; margin-bottom: 36px; position: relative; } .timeline-number { width: 50px; height: 50px; min-width: 50px; background: var(--cta-orange); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 18px; z-index: 1; } .timeline-content { padding-top: 8px; } .timeline-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin-bottom: 6px; color: var(--text-dark); } .timeline-description { font-size: 15px; color: var(--text-gray); line-height: 1.6; } .process-cta { text-align: center; margin-top: 40px; } /* ---------------------------------------------------------- 14. Testimonials ---------------------------------------------------------- */ .testimonials { padding: var(--section-padding) 0; background-size: cover; background-position: center; } .testimonial-carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); } .testimonial-track { display: flex; transition: transform 0.5s ease; } .testimonial-slide { min-width: 100%; padding: 20px; } .testimonial-card { background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-xl); padding: 36px; max-width: 700px; margin: 0 auto; border: 1px solid rgba(255,255,255,0.15); } .testimonial-stars { color: #FFD700; font-size: 20px; margin-bottom: 16px; } .testimonial-text { color: var(--white); font-style: italic; font-size: 16px; line-height: 1.8; margin-bottom: 20px; } .testimonial-author { display: flex; align-items: center; gap: 14px; margin-top: 16px; } .author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--cta-orange); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; } .author-info { display: flex; flex-direction: column; } .author-name { color: var(--white); font-weight: 600; font-size: 15px; } .author-location { color: rgba(255,255,255,0.7); font-size: 13px; } .testimonial-nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; } .testimonial-arrow { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: all var(--transition); background: transparent; } .testimonial-arrow:hover { background: rgba(255,255,255,0.15); border-color: var(--white); } .testimonial-prev, .testimonial-next { cursor: pointer; } .testimonial-dots { display: flex; gap: 8px; align-items: center; } .testimonial-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; transition: all var(--transition); border: none; } .testimonial-dot.active { background: var(--white); transform: scale(1.2); } /* ---------------------------------------------------------- 15. Blog Preview ---------------------------------------------------------- */ .blog-preview { padding: var(--section-padding) 0; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .blog-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .blog-image-placeholder { height: 200px; background: linear-gradient(135deg, #e8f0fe, #d4e4fc); display: flex; align-items: center; justify-content: center; font-size: 48px; } .blog-content { padding: 24px; } .blog-category { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--cta-orange); letter-spacing: 1px; margin-bottom: 8px; display: inline-block; } .blog-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--text-dark); line-height: 1.4; } .blog-excerpt { font-size: 14px; color: var(--text-gray); line-height: 1.6; margin-bottom: 14px; } .blog-link { font-size: 14px; font-weight: 600; color: var(--cta-orange); } .blog-link:hover { color: var(--cta-orange-hover); } /* ---------------------------------------------------------- 16. Accreditations ---------------------------------------------------------- */ .accreditations { padding: var(--section-padding) 0; } .accreditation-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .accreditation-badge { border: 2px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 32px; text-align: center; transition: all var(--transition); } .accreditation-badge:hover { border-color: var(--primary-blue); box-shadow: var(--shadow-sm); } .badge-text { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--primary-blue); } .badge-label { font-size: 13px; color: var(--text-gray); margin-top: 2px; } /* ---------------------------------------------------------- 17. Consultation Form ---------------------------------------------------------- */ .consultation-section { padding: var(--section-padding) 0; background-size: cover; background-position: center; } .consultation-wrapper { max-width: 700px; margin: 0 auto; } .consultation-header { text-align: center; color: var(--white); margin-bottom: 30px; } .consultation-card { background: var(--white); border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-xl); } .consultation-form { display: flex; flex-direction: column; } .form-row { display: flex; gap: 16px; } .form-row > * { flex: 1; } .form-group { margin-bottom: 18px; display: flex; flex-direction: column; } .form-label { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; } .form-input { width: 100%; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 14px; font-size: 15px; color: var(--text-dark); background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-input:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(27,79,138,0.1); } .form-select { width: 100%; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 14px; font-size: 15px; color: var(--text-dark); background: var(--white); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-select:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(27,79,138,0.1); } .form-textarea { width: 100%; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 14px; font-size: 15px; color: var(--text-dark); background: var(--white); min-height: 120px; resize: vertical; transition: border-color var(--transition), box-shadow var(--transition); outline: none; font-family: inherit; } .form-textarea:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(27,79,138,0.1); } .form-error { font-size: 13px; color: var(--accent-red); margin-top: 4px; display: none; } /* Generic form element styles (for pages using plain tags without .form-input class) */ .consultation-form input[type="text"], .consultation-form input[type="email"], .consultation-form input[type="tel"], .consultation-form input[type="number"], .consultation-form select, .consultation-form textarea, .contact-page-form input[type="text"], .contact-page-form input[type="email"], .contact-page-form input[type="tel"], .contact-page-form select, .contact-page-form textarea { width: 100%; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 14px; font-size: 15px; color: var(--text-dark); background: var(--white); font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .consultation-form input:focus, .consultation-form select:focus, .consultation-form textarea:focus, .contact-page-form input:focus, .contact-page-form select:focus, .contact-page-form textarea:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(27,79,138,0.1); } .consultation-form textarea, .contact-page-form textarea { min-height: 120px; resize: vertical; } .consultation-form select, .contact-page-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .contact-page-form label, .consultation-form label { display: block; font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; } .contact-page-form label .required { color: var(--accent-red, #e74c3c); } .form-group.error .form-error { display: block; } .form-group.error .form-input, .form-group.error .form-select, .form-group.error .form-textarea { border-color: var(--accent-red); } .required { color: var(--accent-red); } .checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; } .checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .checkbox-text { color: var(--text-dark); } .consultation-footer { text-align: center; padding-top: 20px; } .consultation-call { font-size: 14px; color: var(--text-gray); } .phone-link { color: var(--cta-orange); font-weight: 700; } .phone-link:hover { color: var(--cta-orange-hover); } .consultation-privacy { font-size: 13px; color: var(--text-gray); margin-top: 8px; } .form-privacy-note { font-size: 13px; color: var(--text-gray); margin-top: 10px; } /* ---------------------------------------------------------- 18. FAQ ---------------------------------------------------------- */ .faq { padding: var(--section-padding) 0; } .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border-color); margin-bottom: 4px; } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 4px; font-size: 16px; font-weight: 600; color: var(--text-dark); text-align: left; cursor: pointer; background: transparent; border: none; font-family: var(--font-body); transition: background var(--transition); } .faq-question:hover { background: var(--light-gray-bg); } .faq-icon { font-size: 20px; transition: transform var(--transition); flex-shrink: 0; margin-left: 12px; } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; } .faq-item.active .faq-answer { max-height: 500px; padding-bottom: 20px; } .faq-answer p, .faq-answer div { font-size: 15px; color: var(--text-gray); line-height: 1.7; padding: 0 4px; } /* ---------------------------------------------------------- 19. Footer ---------------------------------------------------------- */ .footer { background: #0a1228; color: rgba(255,255,255,0.8); padding: 60px 0 0; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; } .footer-col { display: flex; flex-direction: column; } .footer-about { display: flex; flex-direction: column; } .footer-logo { display: flex; align-items: center; margin-bottom: 16px; } .footer-logo img { height: 80px; width: auto; object-fit: contain; } .footer-description { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 20px; } .footer-social { display: flex; gap: 10px; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); color: var(--white); font-size: 15px; transition: all var(--transition); } .social-link:hover { background: var(--cta-orange); border-color: var(--cta-orange); color: var(--white); } .footer-heading { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--white); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--cta-orange); display: inline-block; } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 14px; color: rgba(255,255,255,0.65); transition: all var(--transition); } .footer-links a:hover { color: var(--white); padding-left: 4px; } .footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.5; } .contact-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; align-items: center; padding: 20px 0; flex-wrap: wrap; gap: 12px; } .copyright { font-size: 13px; color: rgba(255,255,255,0.5); } .footer-bottom-links { display: flex; gap: 8px; align-items: center; } .footer-bottom-links a { font-size: 13px; color: rgba(255,255,255,0.5); transition: color var(--transition); } .footer-bottom-links a:hover { color: var(--white); } .separator { color: rgba(255,255,255,0.3); font-size: 12px; } /* ---------------------------------------------------------- 20. Floating Elements ---------------------------------------------------------- */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp-green); box-shadow: 0 4px 16px rgba(37,211,102,0.4); display: flex; align-items: center; justify-content: center; z-index: 999; font-size: 28px; color: var(--white); transition: transform var(--transition); } .whatsapp-float:hover { transform: scale(1.1); } .whatsapp-float::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: var(--whatsapp-green); animation: wa-pulse 2s infinite; z-index: -1; } @keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } .back-to-top { position: fixed; bottom: 24px; right: 90px; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0; visibility: hidden; transition: all var(--transition); cursor: pointer; z-index: 998; box-shadow: var(--shadow-md); border: none; } .back-to-top.visible { opacity: 1; visibility: visible; } .back-to-top:hover { background: var(--dark-navy); transform: translateY(-2px); } /* ---------------------------------------------------------- 21. Cookie Consent ---------------------------------------------------------- */ .cookie-consent { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--text-dark); padding: 18px; z-index: 998; transform: translateY(100%); transition: transform 0.4s ease; } .cookie-consent.visible { transform: translateY(0); } .cookie-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .cookie-text { color: rgba(255,255,255,0.85); font-size: 14px; flex: 1; } .cookie-actions { display: flex; gap: 10px; flex-shrink: 0; } .cookie-accept { padding: 10px 24px; background: var(--cta-orange); color: var(--white); border: none; border-radius: var(--radius-md); font-weight: 600; font-size: 14px; cursor: pointer; transition: background var(--transition); } .cookie-accept:hover { background: var(--cta-orange-hover); } .cookie-decline { padding: 10px 24px; background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-md); font-size: 14px; cursor: pointer; transition: all var(--transition); } .cookie-decline:hover { border-color: var(--white); color: var(--white); } /* ---------------------------------------------------------- 22. Buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; cursor: pointer; transition: all var(--transition); border: none; text-decoration: none; line-height: 1.4; font-family: var(--font-body); } .btn-primary { background: var(--cta-orange); color: var(--white); } .btn-primary:hover { background: var(--cta-orange-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,130,32,0.35); } .btn-outline { background: transparent; border: 2px solid var(--primary-blue); color: var(--primary-blue); } .btn-outline:hover { background: var(--primary-blue); color: var(--white); transform: translateY(-2px); } .btn-outline-white { background: transparent; border: 2px solid var(--white); color: var(--white); } .btn-outline-white:hover { background: var(--white); color: var(--text-dark); } .btn-whatsapp { background: var(--whatsapp-green); color: var(--white); } .btn-whatsapp:hover { background: var(--whatsapp-green-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,0.35); } .btn-link { background: none; color: var(--cta-orange); padding: 0; font-weight: 600; } .btn-link:hover { color: var(--cta-orange-hover); } .btn-sm { padding: 8px 18px; font-size: 13px; } .btn-lg { padding: 16px 36px; font-size: 17px; } .btn-block { width: 100%; } .btn-nav { padding: 10px 22px; font-size: 14px; border-radius: var(--radius-md); } .btn-orange { background: linear-gradient(135deg, var(--cta-orange), #B80000); color: var(--white); box-shadow: 0 4px 15px rgba(245,130,32,0.4); } .btn-orange:hover { box-shadow: 0 6px 25px rgba(245,130,32,0.5); } .btn-white-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.7); } .btn-white-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--white); } .btn-cta { background: var(--cta-orange); color: var(--white); padding: 14px 32px; font-size: 16px; } .btn-cta:hover { background: var(--cta-orange-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,130,32,0.35); } .btn-full { width: 100%; justify-content: center; } /* ---------------------------------------------------------- 23. Page Banner (Inner Pages) ---------------------------------------------------------- */ .page-banner { background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy)); padding: 100px 0 60px; text-align: center; color: var(--white); } .page-banner h1 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; margin-bottom: 15px; color: var(--white); position: relative; z-index: 1; } .page-banner .section-title { color: var(--white); } .page-banner .banner-subtitle { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin-bottom: 10px; } .breadcrumb { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: rgba(255,255,255,0.7); } .breadcrumb ul { display: flex; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .breadcrumb a { color: rgba(255,255,255,0.8); transition: color var(--transition); } .breadcrumb a:hover { text-decoration: underline; color: var(--white); } .breadcrumb-separator { color: rgba(255,255,255,0.5); } .breadcrumb-current { color: rgba(255,255,255,0.6); } .breadcrumb li { display: flex; align-items: center; gap: 10px; list-style: none; } .breadcrumb li + li::before { content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900; opacity: 0.7; } .breadcrumb .active, .breadcrumb li[aria-current] { color: rgba(255,255,255,0.7); } /* Country-specific banners alias */ .country-banner, .russia-banner, .bosnia-banner, .georgia-banner, .uzbekistan-banner, .philippines-banner { background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy)); padding: 60px 0; text-align: center; color: var(--white); } .country-flag-emoji { font-size: 48px; margin-bottom: 12px; display: block; } .banner-content { position: relative; z-index: 1; } .banner-subtitle { font-size: 18px; color: rgba(255,255,255,0.85); margin-top: 10px; } /* ---------------------------------------------------------- 24. Inner Page - Intro Section ---------------------------------------------------------- */ .intro-section { padding: var(--section-padding) 0; } .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .intro-content { display: flex; flex-direction: column; } .intro-content p { font-size: 16px; color: var(--text-gray); line-height: 1.8; margin-bottom: 14px; } .intro-list { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; } .intro-list li { padding-left: 28px; position: relative; font-size: 15px; color: var(--text-gray); } .intro-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--cta-orange); font-weight: 700; } .intro-problem { background: #fef2f2; border-left: 4px solid var(--accent-red); padding: 20px; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: 20px; } .intro-solution { background: #f0fdf4; border-left: 4px solid #22c55e; padding: 20px; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: 20px; } .intro-cta { margin-top: 20px; } .intro-icon { font-size: 48px; margin-bottom: 12px; } .intro-content-centered { max-width: 800px; margin: 0 auto; text-align: center; } .introduction-section { padding: var(--section-padding) 0; } /* ---------------------------------------------------------- 25. Inner Page - Benefits ---------------------------------------------------------- */ .benefits-section { padding: var(--section-padding) 0; } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .benefit-card { background: var(--white); padding: 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--transition), box-shadow var(--transition); } .benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .benefit-icon { font-size: 48px; margin-bottom: 16px; line-height: 1; } /* ---------------------------------------------------------- 26. Inner Page - Eligibility ---------------------------------------------------------- */ .eligibility-section { padding: var(--section-padding) 0; } .eligibility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .eligibility-card { background: var(--white); padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; } .eligibility-icon { font-size: 44px; margin-bottom: 14px; line-height: 1; } /* ---------------------------------------------------------- 27. Inner Page - Documents ---------------------------------------------------------- */ .documents-section { padding: var(--section-padding) 0; } .documents-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .documents-block { background: var(--white); padding: 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 20px; } .documents-checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .documents-checklist li { padding-left: 28px; position: relative; font-size: 15px; color: var(--text-gray); } .documents-checklist li::before { content: '\2713'; position: absolute; left: 0; color: var(--cta-orange); font-weight: 700; } /* ---------------------------------------------------------- 28. Inner Page - Process / Steps ---------------------------------------------------------- */ .process-section { padding: var(--section-padding) 0; } .process-timeline { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } .step-card { background: var(--white); padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); position: relative; transition: transform var(--transition), box-shadow var(--transition); } .step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .step-number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cta-orange); color: var(--white); font-family: var(--font-heading); font-weight: 700; font-size: 16px; margin-bottom: 14px; } /* ---------------------------------------------------------- 29. Inner Page - Packages ---------------------------------------------------------- */ .package-section { padding: var(--section-padding) 0; } .package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .package-item { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px; text-align: center; border: 2px solid transparent; transition: all var(--transition); } .package-item:hover { border-color: var(--cta-orange); transform: translateY(-4px); } /* ---------------------------------------------------------- 30. Inner Page - Highlights ---------------------------------------------------------- */ .highlights-section { padding: var(--section-padding) 0; } .highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .highlight-card { background: var(--white); padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--transition), box-shadow var(--transition); } .highlight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .highlight-icon { font-size: 44px; margin-bottom: 14px; line-height: 1; } /* ---------------------------------------------------------- 31. Inner Page - University Detail ---------------------------------------------------------- */ .university-detail-section { padding: var(--section-padding) 0; } .university-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } /* ---------------------------------------------------------- 32. Inner Page - Student Life ---------------------------------------------------------- */ .student-life-section { padding: var(--section-padding) 0; } .student-life-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .life-card { background: var(--white); padding: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--transition); } .life-card:hover { transform: translateY(-4px); } /* ---------------------------------------------------------- 33. Inner Page - Explore Countries ---------------------------------------------------------- */ .explore-section { padding: var(--section-padding) 0; } .explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .explore-card { background: var(--white); padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; transition: all var(--transition); } .explore-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .explore-flag { font-size: 48px; margin-bottom: 12px; line-height: 1; } /* ---------------------------------------------------------- 34. Styled Lists and Tables ---------------------------------------------------------- */ .styled-table { width: 100%; border-collapse: collapse; font-size: 15px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .styled-table thead th { background: var(--dark-navy); color: var(--white); padding: 14px 18px; text-align: left; font-family: var(--font-heading); font-weight: 600; font-size: 14px; } .styled-table td { padding: 12px 18px; border-bottom: 1px solid var(--border-color); } .styled-table tbody tr:nth-child(even) { background: var(--light-gray-bg); } .styled-table tbody tr:hover { background: #eef3fa; } .styled-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .styled-list li { padding-left: 28px; position: relative; font-size: 15px; color: var(--text-gray); line-height: 1.6; } .styled-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--cta-orange); font-weight: 700; } .numbered-list { list-style: none; padding: 0; counter-reset: nl-counter; display: flex; flex-direction: column; gap: 12px; } .numbered-list li { counter-increment: nl-counter; padding-left: 36px; position: relative; font-size: 15px; color: var(--text-gray); line-height: 1.6; } .numbered-list li::before { content: counter(nl-counter); position: absolute; left: 0; width: 24px; height: 24px; background: var(--cta-orange); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; top: 2px; } .numbered-list .list-number { display: none; } .checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; } .checklist li { padding-left: 26px; position: relative; font-size: 15px; color: var(--text-gray); } .checklist li::before { content: '\2713'; position: absolute; left: 0; color: var(--cta-orange); font-weight: 700; } .checklist-column { columns: 2; column-gap: 30px; } .checklist-column li { break-inside: avoid; margin-bottom: 8px; } /* ---------------------------------------------------------- 35. Fee Section (Country Pages) ---------------------------------------------------------- */ .fee-section { padding: var(--section-padding) 0; } .fee-additional { margin-top: 20px; font-size: 14px; color: var(--text-gray); } .table-note { font-size: 13px; color: var(--text-gray); margin-top: 12px; font-style: italic; } .total-row { font-weight: 700; background: var(--light-gray-bg); } .total-row td { font-weight: 700; } .detail-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; margin-bottom: 20px; } .transfer-cost-details { font-size: 14px; color: var(--text-gray); line-height: 1.7; } .list-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cta-orange); color: var(--white); font-size: 12px; font-weight: 700; margin-right: 8px; } .list-text { color: var(--text-gray); font-size: 15px; } /* ---------------------------------------------------------- 36. Country Visa Section ---------------------------------------------------------- */ .countries-visa-section { padding: var(--section-padding) 0; } .country-visa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .country-visa-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; text-align: center; transition: transform var(--transition); } .country-visa-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .country-visa-flag { font-size: 48px; margin-bottom: 12px; line-height: 1; } .country-visa-details { font-size: 14px; color: var(--text-gray); line-height: 1.6; } /* ---------------------------------------------------------- 37. Comparison Section (Country Pages) ---------------------------------------------------------- */ .comparison-section { padding: var(--section-padding) 0; } .comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .comparison-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; text-align: center; transition: all var(--transition); } .comparison-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* ---------------------------------------------------------- 38. Services Section (Inner) ---------------------------------------------------------- */ .services-section { padding: var(--section-padding) 0; } .admission-section { padding: var(--section-padding) 0; } /* ---------------------------------------------------------- 39. Logo Variant Styles (Service Pages) ---------------------------------------------------------- */ .brand-name { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--primary-blue); } .brand-tagline { font-size: 12px; color: var(--text-gray); letter-spacing: 0.5px; } .logo-true { color: var(--primary-blue); } .logo-line { color: var(--dark-navy); } .logo-highlight { color: var(--cta-orange); } /* ---------------------------------------------------------- 40. Landing Page (free-consultation.html) ---------------------------------------------------------- */ .landing-page { font-family: var(--font-body); } .header-landing { background: var(--white); padding: 16px 0; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 1000; } .header-landing .container { display: flex; justify-content: space-between; align-items: center; } .header-landing-contact { display: flex; align-items: center; gap: 16px; } .header-phone { font-weight: 600; color: var(--primary-blue); font-size: 15px; } .landing-hero { padding: 60px 0 80px; background: linear-gradient(135deg, #f8fafd, var(--light-gray-bg)); } .landing-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .landing-hero-content { display: flex; flex-direction: column; } .landing-subtitle { font-size: 18px; color: var(--text-gray); line-height: 1.7; margin-bottom: 24px; } .trust-points { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; } .trust-points li { padding-left: 28px; position: relative; font-size: 15px; color: var(--text-dark); } .trust-points li::before { content: '\2713'; position: absolute; left: 0; color: var(--whatsapp-green); font-weight: 700; } .landing-call-cta { margin-top: 16px; } .landing-phone-link { font-size: 18px; font-weight: 700; color: var(--primary-blue); } .landing-phone-link:hover { color: var(--cta-orange); } .landing-form-card { background: var(--white); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-xl); } .form-card-header { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 24px; text-align: center; } .landing-form { display: flex; flex-direction: column; } /* Social proof bar */ .social-proof-bar { padding: 40px 0; background: var(--white); } .proof-stats-row { display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; } .proof-stat { text-align: center; } .proof-stat-number { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: var(--primary-blue); line-height: 1.2; } .proof-stat-label { font-size: 14px; color: var(--text-gray); margin-top: 4px; } /* Why trueline landing section */ .why-trueline-section { padding: var(--section-padding) 0; background: var(--light-gray-bg); } .why-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .why-card { background: var(--white); padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--transition); } .why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .why-card-icon { font-size: 44px; margin-bottom: 14px; line-height: 1; } /* Landing testimonials */ .landing-testimonials-section { padding: var(--section-padding) 0; } .landing-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .landing-testimonial-card { background: var(--white); padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* Landing footer */ .footer-landing { background: var(--dark-navy); padding: 30px 0; color: rgba(255,255,255,0.7); } .footer-landing-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-landing-brand { display: flex; align-items: center; gap: 10px; } .footer-landing-contact { font-size: 14px; color: rgba(255,255,255,0.7); } .footer-landing-copy { font-size: 13px; color: rgba(255,255,255,0.5); width: 100%; text-align: center; margin-top: 12px; } /* ---------------------------------------------------------- 41. Testimonials Page ---------------------------------------------------------- */ .testimonials-grid-section { padding: var(--section-padding) 0; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .testimonials-grid .testimonial-card { background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #eee; max-width: none; padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .testimonials-grid .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .testimonials-grid .testimonial-stars { color: #FFD700; font-size: 16px; margin-bottom: 12px; display: flex; gap: 2px; } .testimonials-grid .testimonial-text { color: var(--text-gray); font-style: italic; font-size: 14px; line-height: 1.7; margin: 0; } .testimonials-grid .testimonial-meta h4 { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--text-dark); margin-bottom: 2px; } .testimonials-grid .testimonial-meta p { font-size: 13px; color: var(--text-gray); margin-bottom: 2px; } .testimonial-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .testimonial-meta { font-size: 13px; color: var(--text-gray); } .testimonial-year { font-size: 12px; color: var(--text-gray); background: var(--light-gray-bg); padding: 2px 10px; border-radius: var(--radius-full); } .stats-bar { background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy)); padding: 40px 0; color: var(--white); } .stats-bar-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; } .stat-bar-item { text-align: center; } .stat-bar-number { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--white); line-height: 1.2; } .stat-bar-label { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 4px; } .video-testimonials-section { padding: var(--section-padding) 0; } .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .video-placeholder-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--transition); } .video-placeholder-card:hover { transform: translateY(-4px); } .video-thumbnail { position: relative; height: 200px; background: linear-gradient(135deg, #1a1a2e, #0d2e5c); display: flex; align-items: center; justify-content: center; } .video-play-btn { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--white); cursor: pointer; transition: all var(--transition); } .video-play-btn:hover { background: var(--cta-orange); transform: scale(1.1); } .video-overlay-text { position: absolute; bottom: 12px; left: 12px; color: var(--white); font-size: 13px; background: rgba(0,0,0,0.5); padding: 4px 10px; border-radius: var(--radius-sm); } .video-info { padding: 18px; background: var(--white); } .cta-section { background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy)); padding: 80px 0; text-align: center; color: var(--white); position: relative; overflow: hidden; } .cta-section h2 { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; margin-bottom: 15px; position: relative; z-index: 1; } .cta-section p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; } .cta-buttons { display: flex; justify-content: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; } /* ---------------------------------------------------------- 42. Contact Page ---------------------------------------------------------- */ .contact-info-section { padding: var(--section-padding) 0; } .contact-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } .contact-info-card { background: var(--white); padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--transition); } .contact-info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .contact-card-icon { font-size: 40px; margin-bottom: 14px; line-height: 1; } .contact-card-note { font-size: 13px; color: var(--text-gray); margin-top: 8px; font-style: italic; } .contact-form-section { padding: var(--section-padding) 0; } .contact-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .contact-form-wrapper { background: var(--white); padding: 32px; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .contact-page-form { display: flex; flex-direction: column; } .contact-map-wrapper { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); height: 100%; min-height: 400px; } .map-placeholder { width: 100%; height: 100%; min-height: 400px; background: var(--light-gray-bg); display: flex; align-items: center; justify-content: center; position: relative; } .map-overlay { position: absolute; bottom: 20px; left: 20px; right: 20px; } .map-overlay-inner { background: var(--white); padding: 18px 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: 14px; color: var(--text-dark); } .working-hours-section { padding: var(--section-padding) 0; } .working-hours-card { max-width: 500px; margin: 0 auto; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px; } .hours-grid { display: flex; flex-direction: column; gap: 4px; } .hours-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 15px; } .hours-row .day { font-weight: 600; color: var(--text-dark); } .hours-row .time { color: var(--text-gray); } .hours-row .closed { color: var(--accent-red); font-weight: 600; } .social-section { padding: var(--section-padding) 0; } .social-links-large { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; } .social-link-card { background: var(--white); padding: 20px 32px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; font-weight: 600; transition: all var(--transition); display: flex; align-items: center; gap: 10px; } .social-link-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--primary-blue); } .whatsapp-cta-section { padding: 50px 0; text-align: center; background: linear-gradient(135deg, #dcfce7, #f0fdf4); border-radius: var(--radius-xl); margin: 0 20px 40px; } /* ---------------------------------------------------------- 43. About Page ---------------------------------------------------------- */ .about-section { padding: var(--section-padding) 0; } .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .story-content { display: flex; flex-direction: column; } .story-content p { font-size: 16px; color: var(--text-gray); line-height: 1.8; margin-bottom: 14px; } .story-image { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-radius: 16px; height: 400px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .story-image .placeholder-icon { font-size: 5rem; color: var(--primary-blue); opacity: 0.3; } .story-image .image-badge { position: absolute; bottom: 20px; right: 20px; background: var(--dark-navy); color: var(--white); padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; } .story-image img { width: 100%; height: auto; object-fit: cover; } .story-content h2 { font-family: var(--font-heading); font-size: 1.8rem; color: var(--text-dark); margin-bottom: 20px; line-height: 1.3; } .section-title .title-line { width: 60px; height: 4px; background: linear-gradient(90deg, var(--primary-blue), var(--cta-orange)); margin: 15px auto 0; border-radius: 2px; } .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .mv-card { background: var(--white); padding: 36px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .mv-icon { font-size: 44px; margin-bottom: 14px; line-height: 1; } .mv-card .mv-icon { width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px; background: #e3f2fd; color: var(--primary-blue); } .mv-card:nth-child(2) .mv-icon { background: #fff3e0; color: var(--cta-orange); } .mv-card h3 { font-family: var(--font-heading); font-size: 1.4rem; color: var(--text-dark); margin-bottom: 15px; } .mv-card p { color: var(--text-gray); line-height: 1.7; } .mv-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); transition: transform 0.3s, box-shadow 0.3s; } .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .value-card { background: var(--white); padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--transition); } .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .value-icon { font-size: 40px; margin-bottom: 14px; line-height: 1; } .value-card .value-icon { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.6rem; } .value-card:nth-child(1) .value-icon { background: #e3f2fd; color: #0d47a1; } .value-card:nth-child(2) .value-icon { background: #e8f5e9; color: #2e7d32; } .value-card:nth-child(3) .value-icon { background: #fff3e0; color: #e65100; } .value-card:nth-child(4) .value-icon { background: #f3e5f5; color: #7b1fa2; } .value-card h3 { font-family: var(--font-heading); font-size: 1.15rem; color: var(--text-dark); margin-bottom: 12px; } .value-card p { color: var(--text-gray); font-size: 0.95rem; line-height: 1.6; } .different-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .different-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .different-icon, .diff-icon { flex-shrink: 0; width: 50px; height: 50px; border-radius: 12px; background: #e3f2fd; color: var(--primary-blue); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .different-icon svg, .diff-icon svg { width: 28px; height: 28px; } .different-item h3, .different-item h4 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-dark); margin-bottom: 6px; } .different-item p { color: var(--text-gray); font-size: 0.9rem; line-height: 1.5; } .different-item:hover { transform: translateY(-3px); transition: transform 0.3s; } .stats-section { padding: var(--section-padding) 0; background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy)); color: var(--white); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; } .stats-row { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 24px; } .stat-item { text-align: center; } .stat-icon { font-size: 36px; margin-bottom: 10px; line-height: 1; } .stat-number { font-family: var(--font-heading); font-size: 40px; font-weight: 700; color: var(--white); line-height: 1.2; } .stat-label { font-size: 15px; color: rgba(255,255,255,0.7); margin-top: 4px; } .stat-item h3 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; margin-bottom: 8px; } .stat-item p { font-size: 1rem; opacity: 0.9; } .stat-item .stat-icon { font-size: 1.8rem; margin-bottom: 10px; opacity: 0.8; } .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; } .team-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px; text-align: center; } .team-avatar { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 16px; overflow: hidden; background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy)); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: var(--white); border: 4px solid #e3f2fd; } .team-avatar img { width: 100%; height: 100%; object-fit: cover; } .team-card h3 { font-family: var(--font-heading); font-size: 1.4rem; color: var(--text-dark); margin-bottom: 5px; } .team-role { color: var(--primary-blue); font-weight: 600; font-size: 0.95rem; margin-bottom: 5px; } .team-qualification { color: var(--text-gray); font-size: 0.9rem; margin-bottom: 15px; } .team-bio { color: var(--text-gray); line-height: 1.7; font-size: 0.95rem; } .team-contact { margin-top: 20px; display: flex; justify-content: center; gap: 15px; } .team-contact a { width: 42px; height: 42px; border-radius: 50%; background: #e3f2fd; color: var(--primary-blue); display: flex; align-items: center; justify-content: center; font-size: 1rem; text-decoration: none; transition: background 0.3s, color 0.3s; } .team-contact a:hover { background: var(--primary-blue); color: var(--white); } .about-section:nth-child(even) { background: #f8f9fa; } /* ---------------------------------------------------------- 44. Responsive Breakpoints ---------------------------------------------------------- */ /* 1200px */ @media (max-width: 1200px) { .container { max-width: 960px; } .countries-grid { grid-template-columns: repeat(3, 1fr); } .hero-title { font-size: 44px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } } /* 992px */ @media (max-width: 992px) { :root { --section-padding: 60px; } .hamburger { display: flex; } .nav-menu { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background: var(--white); flex-direction: column; padding: 80px 24px 40px; box-shadow: var(--shadow-xl); transition: right 0.35s ease; z-index: 1000; overflow-y: auto; gap: 0; align-items: stretch; } .hamburger.active + .nav-menu, .nav-menu.active { right: 0; } .nav-link { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--border-color); } .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding-left: 16px; display: none; } .dropdown.active .dropdown-menu { display: block; } .nav-cta-desktop { display: none; } .nav-cta-mobile { display: inline-flex; margin-top: 16px; } .about-grid, .intro-grid, .story-grid, .university-detail-grid, .contact-two-col, .landing-hero-grid { grid-template-columns: 1fr; gap: 30px; } .services-grid, .mv-grid { grid-template-columns: 1fr; } .features-grid, .benefits-grid, .eligibility-grid { grid-template-columns: repeat(2, 1fr); } .countries-grid { grid-template-columns: repeat(3, 1fr); } .blog-grid, .why-cards-grid, .landing-testimonials-grid { grid-template-columns: repeat(2, 1fr); } .hero-title { font-size: 40px; } .section-title { font-size: 30px; } .two-col-grid { grid-template-columns: 1fr; } .form-row { flex-direction: column; gap: 0; } .footer-grid { grid-template-columns: repeat(2, 1fr); } } /* 768px */ @media (max-width: 768px) { :root { --section-padding: 50px; } .logo img { height: 70px; } .footer-logo img { height: 65px; } .hero { min-height: 70vh; } .hero-title { font-size: 32px; } .hero-subtitle { font-size: 16px; } .section-title { font-size: 26px; } .section-subtitle { font-size: 16px; } .features-grid, .benefits-grid, .eligibility-grid, .countries-grid { grid-template-columns: 1fr; } .blog-grid, .why-cards-grid, .landing-testimonials-grid { grid-template-columns: 1fr; } .trust-stats { flex-direction: column; align-items: flex-start; gap: 16px; } .service-card { flex-direction: column; } .consultation-card { padding: 24px; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { flex-direction: column; text-align: center; } .comparison-table { font-size: 13px; } .comparison-table th, .comparison-table td { padding: 10px 12px; } .accreditation-badges { flex-direction: column; align-items: center; } .hero-cta { flex-direction: column; align-items: center; } .page-banner { padding: 40px 0; } .country-banner, .russia-banner, .bosnia-banner, .georgia-banner, .uzbekistan-banner, .philippines-banner { padding: 40px 0; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .stat-number { font-size: 32px; } .proof-stats-row { gap: 24px; } .checklist-column { columns: 1; } .cookie-content { flex-direction: column; text-align: center; } .landing-form-card { padding: 24px; } .contact-cards-grid { grid-template-columns: 1fr; } .social-links-large { flex-direction: column; align-items: center; } .footer-landing-inner { flex-direction: column; text-align: center; } } /* 576px */ @media (max-width: 576px) { :root { --section-padding: 40px; } .container { padding: 0 16px; } .hero-title { font-size: 28px; } .hero-subtitle { font-size: 15px; } .section-title { font-size: 24px; } .btn-lg { padding: 14px 28px; font-size: 15px; } .consultation-card { padding: 20px; } .feature-card, .benefit-card, .service-card { padding: 20px; } .nav-menu { width: 100%; } .stat-number { font-size: 28px; } .stat-bar-number { font-size: 28px; } .proof-stat-number { font-size: 26px; } .back-to-top { right: 16px; bottom: 90px; } .whatsapp-float { bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 24px; } .testimonial-card { padding: 24px; } .working-hours-card { padding: 20px; } .team-grid { grid-template-columns: 1fr; } .team-card { padding: 24px; } .countries-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .steps-grid { grid-template-columns: 1fr; } .highlights-grid { grid-template-columns: 1fr; } .different-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr; } .video-grid { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- 45. Print Styles ---------------------------------------------------------- */ @media print { .header, .preloader, .whatsapp-float, .back-to-top, .cookie-consent, .hamburger { display: none !important; } .hero { min-height: auto; padding: 40px 0; } body { font-size: 12pt; color: #000; } .section { padding: 20px 0; } } /* ---------------------------------------------------------- Additional Inner Page Classes ---------------------------------------------------------- */ .header-inner { display: flex; align-items: center; justify-content: space-between; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text-dark); margin: 5px 0; transition: var(--transition); } @media (max-width: 992px) { .nav-toggle { display: block; } } .text-highlight { color: var(--cta-orange); } .founder-name { font-family: var(--font-heading); font-weight: 700; color: var(--primary-blue); font-size: 1.25rem; } .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--cta-orange); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; } .faq-section { padding: var(--section-padding) 0; } .faq-container { max-width: 800px; margin: 0 auto; } .why-choose-section { padding: var(--section-padding) 0; } .universities-section { padding: var(--section-padding) 0; } .current { font-weight: 600; color: var(--cta-orange); } .eligibility-block { background: var(--white); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); margin-bottom: 20px; } .cta-wrapper, .cta-grid { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .cta-content { flex: 1; min-width: 280px; } .cta-text { color: rgba(255,255,255,0.9); font-size: 1.1rem; } .cta-form-wrapper { flex: 1; min-width: 300px; } .cta-highlights { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; } .cta-contact-info { margin-top: 16px; color: rgba(255,255,255,0.8); }