/* Complete CSS for TEFL/TESOL Website */
:root {
--primary-color: #4a6cf7;
--primary-dark: #3a56d4;
--secondary-color: #6c757d;
--accent-color: #ff6b6b;
--accent-gradient: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
--primary-gradient: linear-gradient(135deg, #4a6cf7 0%, #6a11cb 100%);
--light-color: #f8f9fa;
--light-gray: #e9ecef;
--dark-color: #212529;
--dark-bg: #1a1d28;
--darker-bg: #0f1117;
--text-color: #495057;
--text-light: #6c757d;
--border-radius: 12px;
--border-radius-sm: 8px;
--border-radius-lg: 20px;
--box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
--box-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
--box-shadow-hover: 0 20px 40px rgba(74, 108, 247, 0.15);
--transition: all 0.3s ease;
--transition-slow: all 0.5s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Open Sans', sans-serif;
color: var(--text-color);
line-height: 1.7;
background-color: #fff;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 1.3;
color: var(--dark-color);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-padding {
padding: 100px 0;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 42px;
margin-bottom: 20px;
}
.section-header p {
font-size: 18px;
color: var(--text-light);
max-width: 700px;
margin: 0 auto;
}
.gradient-text {
background: #ff9800e0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-tes {
background: #03a9f4;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.highlight {
position: relative;
display: inline-block;
}
.highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 10px;
background-color: #03a9f4;
z-index: -1;
border-radius: 5px;
}
.dark-theme {
background-color: #346ee9e0;
color: rgba(255, 255, 255, 0.9);
}
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6 {
color: white;
}
.dark-theme .section-header p {
color: rgba(255, 255, 255, 0.7);
}
.dark-theme-home {
background: linear-gradient(90deg, #ff98007d, #8bc34aba);
color: rgba(255, 255, 255, 0.9);
}
.dark-theme-home h1,
.dark-theme-home h2,
.dark-theme-home h3,
.dark-theme-home h4,
.dark-theme-home h5,
.dark-theme-home h6 {
color: white;
}
.dark-theme-home .section-header p {
color: rgba(255, 255, 255, 0.7);
}
/* Header Styles */
.top-bar {
background: linear-gradient(90deg, #009688c7, #ab6a0bde);
color: white;
padding: 10px 0;
font-size: 12px;
}
.top-bar-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.accreditation-badge {
display: flex;
align-items: center;
gap: 10px;
}
.top-bar-links {
display: flex;
gap: 20px;
}
.top-bar-links a {
color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
gap: 8px;
}
.top-bar-links a:hover {
color: white;
}
/* Enhanced Navigation */
.navbar {
background-color: white;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
position: sticky;
top: 0;
z-index: 99999;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
position: relative;
}
.logo {
display: flex;
align-items: center;
gap: 15px;
z-index: 1001;
}
.logo-icon {
width: 50px;
height: 50px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-main {
font-size: 28px;
font-weight: 800;
color: var(--primary-color);
letter-spacing: -0.5px;
}
.logo-sub {
font-size: 12px;
color: var(--text-light);
letter-spacing: 1px;
}
/* Fixed Mega Menu */
.nav-menu {
display: flex;
align-items: center;
list-style: none;
gap: 30px;
}
.nav-item {
position: relative;
}
.nav-link {
font-weight: 500;
color: var(--dark-color);
padding: 10px 0;
position: relative;
display: flex;
align-items: center;
gap: 5px;
}
.nav-link:hover {
color: #009688eb;
}
.nav-link.active {
color: #009688eb;
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #009688eb;
border-radius: 3px;
}
/* FIXED Mega Menu Styles with Proper Spacing */
.mega-menu-parent {
position: static !important;
}
.mega-menu {
position: absolute;
left: 0;
top: calc(100% - 16px);
width: 100%;
background-color: white;
box-shadow: var(--box-shadow-lg);
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
padding: 0;
display: none;
z-index: 999;
overflow: hidden;
min-width: 900px;
left: 50%;
transform: translateX(-50%);
}
.mega-menu-parent:hover .mega-menu {
display: block;
}
.mega-menu-header {
background: #009688eb;
color: white;
padding: 25px 30px;
margin-bottom: 0;
}
.mega-menu-header h3 {
color: white;
font-size: 24px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.mega-menu-header p {
opacity: 0.9;
margin: 0;
font-size: 16px;
line-height: 1.6;
}
.mega-menu-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: 30px;
min-height: 450px;
}
.mega-menu-column {
padding: 0 20px;
border-right: 1px solid var(--light-gray);
display: flex;
flex-direction: column;
gap: 30px;
}
.mega-menu-column:last-child {
border-right: none;
}
.menu-section {
margin-bottom: 0;
}
.menu-section h4 {
font-size: 18px;
margin-bottom: 20px;
color: #009688eb;
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(74, 108, 247, 0.1);
}
.menu-quiz1-h4 {
font-size: 14px;
color: #009688eb;
}
/* Course Card Mini - FIXED spacing */
.course-card-mini {
border: 1px solid var(--light-gray);
border-radius: var(--border-radius);
overflow: hidden;
margin-bottom: 0;
transition: var(--transition);
background: white;
}
.course-card-mini:hover {
transform: translateY(-5px);
box-shadow: var(--box-shadow);
}
.course-thumb {
height: 140px;
position: relative;
overflow: hidden;
}
.course-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.course-card-mini:hover .course-thumb img {
transform: scale(1.05);
}
.course-badge {
position: absolute;
top: 10px;
right: 10px;
background: var(--accent-gradient);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
z-index: 2;
}
.course-info {
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.course-info h5 {
font-size: 17px;
margin-bottom: 0;
line-height: 1.4;
color: var(--dark-color);
}
.course-info p {
font-size: 14px;
color: var(--text-light);
margin-bottom: 0;
line-height: 1.5;
}
.course-meta {
display: flex;
justify-content: space-between;
font-size: 13px;
margin-bottom: 0;
color: var(--text-light);
padding-top: 10px;
border-top: 1px solid rgba(0,0,0,0.05);
}
.course-price {
font-size: 22px;
font-weight: 700;
color: #009688eb;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 8px;
}
.original-price {
font-size: 16px;
color: var(--text-light);
text-decoration: line-through;
}
.btn-menu {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #009688eb;
color: white;
padding: 10px 18px;
border-radius: var(--border-radius-sm);
font-size: 14px;
font-weight: 500;
transition: var(--transition);
margin-top: 5px;
width: 100%;
justify-content: center;
}
.btn-menu:hover {
background-color: #FF9800;
transform: translateX(5px);
}
/* Menu Links with proper spacing */
.menu-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.menu-links li {
margin-bottom: 0;
}
.menu-links a {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-color);
padding: 8px 12px;
border-radius: 6px;
transition: var(--transition);
}
.menu-links a:hover {
color: #009688eb;
transform: translateX(5px);
background-color: rgba(74, 108, 247, 0.05);
}
.menu-links i {
color: #009688eb;
font-size: 14px;
width: 20px;
}
/* Specializations with proper spacing */
.specializations {
display: flex;
flex-direction: column;
gap: 15px;
}
.specialization-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
border-radius: var(--border-radius-sm);
background-color: rgba(74, 108, 247, 0.05);
transition: var(--transition);
border: 1px solid rgba(74, 108, 247, 0.1);
}
.specialization-item:hover {
background-color: rgba(74, 108, 247, 0.1);
transform: translateX(5px);
border-color: rgba(74, 108, 247, 0.2);
}
.spec-icon {
width: 45px;
height: 45px;
background: #009688eb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
flex-shrink: 0;
}
.spec-info {
flex: 1;
}
.spec-info h6 {
font-size: 15px;
margin-bottom: 4px;
color: var(--dark-color);
}
.spec-info p {
font-size: 13px;
color: var(--text-light);
margin: 0;
line-height: 1.4;
}
/* Help Card with proper spacing */
.help-card {
background-color: #fff9e6;
border-radius: var(--border-radius);
padding: 20px;
margin-bottom: 20px;
border-left: 4px solid #ffc107;
display: flex;
flex-direction: column;
gap: 15px;
}
.help-card p {
font-size: 14px;
color: #856404;
margin: 0;
line-height: 1.5;
}
.btn-help {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #ffc107;
color: #fbfbfb;
padding: 10px 18px;
border-radius: var(--border-radius-sm);
font-weight: 600;
font-size: 14px;
transition: var(--transition);
justify-content: center;
}
.btn-help:hover {
background-color: #e0a800;
transform: translateY(-3px);
}
/* Comparison Section */
.comparison {
margin-top: 10px;
}
.comparison h5 {
font-size: 16px;
margin-bottom: 15px;
color: var(--primary-color);
display: flex;
align-items: center;
gap: 8px;
}
.comparison ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.comparison li {
margin-bottom: 0;
}
.comparison a {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-color);
padding: 8px 12px;
border-radius: 6px;
transition: var(--transition);
font-size: 14px;
}
.comparison a:hover {
color: var(--primary-color);
transform: translateX(5px);
background-color: rgba(74, 108, 247, 0.05);
}
/* Certificate Gallery */
.menu-certificates {
margin-top: 10px;
}
.menu-certificates h5 {
font-size: 16px;
margin-bottom: 15px;
color: var(--primary-color);
display: flex;
align-items: center;
gap: 8px;
}
.certificate-grid {
display: flex;
gap: 10px;
margin-top: 10px;
margin-bottom: 15px;
}
.certificate-grid img {
width: 120px;
border-radius: 5px;
border: 1px solid var(--light-gray);
cursor: pointer;
transition: transform 0.25s ease;
}
.certificate-grid img:hover {
transform: scale(1.03);
box-shadow: var(--box-shadow);
}
.image-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
.image-lightbox.active {
display: flex;
}
.lightbox-img {
max-width: 90%;
max-height: 90%;
border-radius: 6px;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.lightbox-close {
position: absolute;
top: 25px;
right: 35px;
font-size: 40px;
color: #fff;
cursor: pointer;
line-height: 1;
}
/* Accreditation Icons in mega menu */
.accreditation-icons {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 15px;
}
.acc-icon {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
background-color: rgba(74, 108, 247, 0.05);
border-radius: var(--border-radius-sm);
font-size: 14px;
font-weight: 500;
color: #009688eb
}
.acc-icon i {
font-size: 16px;
}
.btn-enroll {
display: inline-flex;
align-items: center;
gap: 10px;
background: #ff9800ed;
color: white;
padding: 12px 24px;
border-radius: var(--border-radius);
font-weight: 600;
transition: var(--transition);
}
.btn-enroll:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(255, 107, 107, 0.2);
}
.btn-enroll-nav {
display: inline-flex;
align-items: center;
gap: 10px;
background: #ff9800ed;
color: white;
padding: 12px 24px;
border-radius: var(--border-radius);
font-weight: 600;
transition: var(--transition);
}
.btn-enroll-nav:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(255, 107, 107, 0.2);
}
.cta-nav {
margin-left: 10px;
}
.mobile-toggle {
display: none;
cursor: pointer;
}
.hamburger {
display: flex;
flex-direction: column;
gap: 5px;
}
.hamburger span {
width: 25px;
height: 3px;
background-color: var(--dark-color);
transition: var(--transition);
}
/* Rest of your CSS remains the same - just showing the fixed part */
/* Hero Section */
.hero {
position: relative;
padding: 120px 0;
overflow: hidden;
background: linear-gradient(135deg, #f0f5ff 0%, #ffffff 100%);
}
/* ... rest of your existing CSS ... */
/* Responsive Design for Mega Menu */
@media (max-width: 1200px) {
.hero-title {
font-size: 46px;
}
.mega-menu {
min-width: 800px;
}
.mega-menu-columns {
grid-template-columns: repeat(2, 1fr);
}
.mega-menu-column:nth-child(2) {
border-right: none;
}
}
@media (max-width: 992px) {
.hero .container {
flex-direction: column;
text-align: center;
}
.hero-content {
max-width: 100%;
margin-bottom: 60px;
}
.hero-image {
justify-content: center;
}
.floating-card {
display: none;
}
.mobile-toggle {
display: block;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background-color: white;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
transition: var(--transition);
overflow-y: auto;
z-index: 1000;
flex-direction: column;
padding: 100px 30px 30px;
gap: 0;
}
.nav-menu.active {
right: 0;
}
.nav-item {
width: 100%;
margin: 0;
border-bottom: 1px solid var(--light-gray);
}
.nav-link {
padding: 15px 0;
display: flex;
justify-content: space-between;
}
.mega-menu {
position: static;
display: none;
width: 100%;
box-shadow: none;
border-radius: 0;
padding: 15px;
background-color: #f8f9fa;
min-width: auto;
transform: none;
left: 0;
}
.mega-menu-columns {
grid-template-columns: 1fr;
gap: 20px;
min-height: auto;
}
.mega-menu-column {
border-right: none;
border-bottom: 1px solid var(--light-gray);
padding-bottom: 20px;
}
.mega-menu-column:last-child {
border-bottom: none;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 36px;
}
.section-header h2 {
font-size: 32px;
}
.hero-stats {
flex-wrap: wrap;
justify-content: center;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.btn-hero-primary, .btn-hero-secondary {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* Hero Section */
.hero {
position: relative;
padding: 110px 0;
overflow: hidden;
background: linear-gradient(135deg, #8bc34a17 0%, #03a9f42e 100%);
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(74, 108, 247, 0.1), rgba(74, 108, 247, 0.05));
}
.shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -100px;
}
.shape-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: -50px;
}
.shape-3 {
width: 150px;
height: 150px;
top: 30%;
right: 20%;
}
.shape-4 {
width: 100px;
height: 100px;
bottom: 20%;
left: 10%;
}
.floating-icon {
position: absolute;
font-size: 24px;
color: rgba(74, 108, 247, 0.1);
animation: float 6s ease-in-out infinite;
}
.floating-icon:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.floating-icon:nth-child(2) {
top: 60%;
right: 15%;
animation-delay: 2s;
}
.floating-icon:nth-child(3) {
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}
.hero .container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.hero-content {
flex: 1;
max-width: 600px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: #ff98008f;
color: white;
padding: 5px 12px;
border-radius: 50px;
font-weight: 450;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(255, 107, 107, 0.2);
animation: pulse 2s infinite;
font-size: 12px;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.hero-title {
font-size: 52px;
margin-bottom: 25px;
line-height: 1.2;
}
.typing-text {
color: #009688e3;
border-right: 3px solid var(--primary-color);
padding-right: 5px;
animation: blink 0.7s infinite;
}
@keyframes blink {
0%, 100% { border-color: var(--primary-color); }
50% { border-color: transparent; }
}
.hero-subtitle {
font-size: 16px;
color: var(--text-light);
margin-bottom: 40px;
max-width: 500px;
}
.hero-subtitle strong {
color: #03a9f4;
font-weight: 600;
}
.hero-stats {
display: flex;
gap: 30px;
margin-bottom: 40px;
}
.stat {
text-align: center;
}
.stat-number {
font-size: 42px;
font-weight: 700;
color: #ff9800e0;
margin-bottom: 5px;
font-family: 'Montserrat', sans-serif;
}
.stat-label {
font-size: 14px;
color: var(--text-light);
font-weight: 500;
}
.hero-actions {
display: flex;
gap: 20px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.btn-hero-primary {
display: inline-flex;
align-items: center;
gap: 15px;
background: #ff9800e0;
color: white;
padding: 18px 35px;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 18px;
position: relative;
overflow: hidden;
transition: var(--transition);
}
.btn-hero-primary:hover {
transform: translateY(-5px);
box-shadow: var(--box-shadow-hover);
}
.btn-shine {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
animation: shine 3s infinite;
}
@keyframes shine {
0% { transform: translateX(-100%) rotate(30deg); }
100% { transform: translateX(100%) rotate(30deg); }
}
.btn-hero-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: white;
color: var(--primary-color);
padding: 18px 35px;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 18px;
border: 2px solid var(--primary-color);
transition: var(--transition);
}
.btn-hero-secondary:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-5px);
}
.hero-features {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.feature {
display: flex;
align-items: center;
gap: 10px;
font-weight: 350;
color: var(--dark-color);
font-size: 12px;
}
.feature i {
color: #ff9800e0;
font-size: 20px;
}
.hero-image {
flex: 1;
display: flex;
justify-content: flex-end;
margin-top: -15%;
}
.image-container {
position: relative;
max-width: 550px;
}
.main-image {
width: 100%;
border-radius: var(--border-radius-lg);
box-shadow: var(--box-shadow-lg);
height: 650px;
}
.floating-card {
position: absolute;
display: flex;
align-items: center;
gap: 15px;
background-color: #00968870;
padding: 15px 20px;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
animation: float-card 4s ease-in-out infinite;
color: #f9f9f9;
}
.floating-card i {
font-size: 28px;
color: #FFf;
}
.card-1 {
top: 20px;
left: -30px;
animation-delay: 0s;
}
.card-2 {
top: 50%;
right: -30px;
animation-delay: 1s;
}
.card-3 {
bottom: 30px;
left: -30px;
animation-delay: 2s;
}
@keyframes float-card {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
/* Accreditation Section */
.accreditation-section {
padding: 100px 0;
position: relative;
overflow: hidden;
}
.accreditation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.accreditation-card {
background: #0772695c;
border-radius: var(--border-radius);
padding: 30px;
text-align: center;
transition: var(--transition);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.accreditation-card:hover {
transform: translateY(-10px);
background-color: rgb(0 150 136 / 62%);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.accreditation-icon {
width: 80px;
height: 80px;
background: rgb(0 150 136 / 44%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 32px;
color: #fff59d;
}
.accreditation-card h3 {
font-size: 20px;
margin-bottom: 15px;
color: #e8d850de;
}
.accreditation-card p {
font-size: 14px;
color: #f5f4f4de;
}
.accreditation-logos {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.logo-item {
position: relative;
}
.logo-item:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px 15px;
border-radius: var(--border-radius-sm);
font-size: 14px;
white-space: nowrap;
z-index: 10;
}
/* Courses Section */
.courses-section {
padding: 100px 0;
background-color: #f8f9fa;
}
.course-tabs {
margin-bottom: 60px;
}
.tab-header {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.tab {
padding: 15px 30px;
background-color: white;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
}
.tab:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-3px);
}
.tab.active {
background-color: var(--primary-color);
color: white;
box-shadow: 0 10px 20px rgba(74, 108, 247, 0.2);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
}
.course-card {
background-color: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
transition: var(--transition);
position: relative;
}
.course-card.featured {
border: 2px solid var(--primary-color);
transform: scale(1.02);
}
.course-card:hover {
transform: translateY(-10px);
box-shadow: var(--box-shadow-lg);
}
.course-card.featured:hover {
transform: translateY(-10px) scale(1.02);
}
.course-header {
position: relative;
}
.course-badge {
position: absolute;
top: 15px;
right: 15px;
background: var(--accent-gradient);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
z-index: 1;
}
.course-image {
height: 200px;
overflow: hidden;
}
.course-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.course-card:hover .course-image img {
transform: scale(1.1);
}
.course-body {
padding: 25px;
}
.course-body h3 {
font-size: 22px;
margin-bottom: 15px;
}
.course-body p {
color: #f5f2ec;
margin-bottom: 20px;
}
.course-features {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 10px;
}
.course-features span {
display: flex;
align-items: center;
font-size: 14px;
color: var(--text-light);
}
.course-features i {
margin-right: 5px;
color: var(--primary-color);
}
.course-footer {
padding: 20px 25px;
border-top: 1px solid var(--light-gray);
display: flex;
justify-content: space-between;
align-items: center;
}
.price {
display: flex;
align-items: center;
gap: 10px;
}
.current-price {
font-size: 28px;
font-weight: 700;
color: var(--primary-color);
}
.original-price {
font-size: 18px;
color: var(--text-light);
text-decoration: line-through;
}
.discount {
background-color: #ffebee;
color: var(--accent-color);
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
font-weight: 600;
}
.btn-course {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
border-radius: var(--border-radius-sm);
font-weight: 500;
transition: var(--transition);
}
.btn-course:hover {
background-color: var(--primary-dark);
transform: translateX(5px);
}
.course-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--primary-gradient);
color: white;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
transition: var(--transition);
transform: translateY(20px);
}
.course-card:hover .course-hover {
opacity: 0.95;
transform: translateY(0);
}
.course-hover h4 {
color: white;
margin-bottom: 20px;
font-size: 22px;
}
.course-hover ul {
list-style: none;
}
.course-hover li {
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.course-cta {
margin-top: 60px;
}
.cta-card {
background: #2196F3;
border-radius: var(--border-radius-lg);
padding: 50px;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
position: relative;
overflow: hidden;
}
.cta-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.3;
z-index: 0;
}
.cta-content {
position: relative;
z-index: 1;
flex: 1;
}
.cta-content h3 {
color: white;
font-size: 32px;
margin-bottom: 15px;
}
.cta-content p {
font-size: 18px;
margin-bottom: 25px;
opacity: 0.9;
}
.btn-cta-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: white;
color: var(--primary-color);
padding: 15px 30px;
border-radius: var(--border-radius);
font-weight: 600;
transition: var(--transition);
}
.btn-cta-secondary:hover {
background-color: #f8f9fa;
transform: translateX(10px);
}
.cta-image {
position: relative;
z-index: 1;
}
.cta-image img {
width: 300px;
border-radius: var(--border-radius);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
/* Why Choose Section */
.why-choose-section {
padding: 100px 0;
background: linear-gradient(90deg, #4caf504d, #539bbd);
position: relative;
overflow: hidden;
}
.why-choose-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
opacity: 0.1;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 60px;
}
.feature-card {
background: #0772695c;
border-radius: var(--border-radius);
padding: 40px 30px;
text-align: center;
transition: var(--transition);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.feature-card:hover {
transform: translateY(-10px);
background-color: #8bc34aa3;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.feature-icon {
width: 80px;
height: 80px;
background: #098f83a8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 32px;
color: white;
transition: var(--transition);
}
.feature-card:hover .feature-icon {
transform: scale(1.1) rotate(10deg);
}
.feature-card h3 {
color: white;
font-size: 22px;
margin-bottom: 15px;
}
.feature-card p {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
}
.feature-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--primary-gradient);
opacity: 0;
transition: var(--transition);
z-index: -1;
}
.feature-card:hover .feature-bg {
opacity: 0.1;
}
/* Testimonials Section */
.testimonials-section {
padding: 100px 0;
background-color: #e5f2fd;
}
.testimonials-slider {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-top: 60px;
}
.testimonial-card {
background-color: white;
border-radius: var(--border-radius);
padding: 30px;
box-shadow: var(--box-shadow);
transition: var(--transition);
border: 1px solid var(--light-gray);
position: relative;
}
.testimonial-card::before {
content: '"';
position: absolute;
top: 20px;
right: 30px;
font-size: 80px;
color: var(--primary-color);
opacity: 0.1;
font-family: serif;
line-height: 1;
}
.testimonial-card:hover {
transform: translateY(-10px);
box-shadow: var(--box-shadow-lg);
border-color: var(--primary-color);
}
.testimonial-header {
display: flex;
align-items: center;
margin-bottom: 25px;
}
.testimonial-image {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
margin-right: 20px;
border: 3px solid var(--primary-color);
}
.testimonial-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-info h4 {
font-size: 18px;
margin-bottom: 5px;
}
.testimonial-info span {
color: var(--text-light);
font-size: 14px;
}
.rating {
color: #ffc107;
margin-top: 5px;
}
.testimonial-body p {
font-style: italic;
color: var(--text-color);
line-height: 1.8;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.course-taken {
display: flex;
align-items: center;
gap: 10px;
background-color: #f8f9fa;
padding: 10px 15px;
border-radius: var(--border-radius-sm);
font-size: 14px;
}
.course-taken i {
color: var(--primary-color);
}
/* Teaching Destinations Section */
.destinations-section {
padding: 100px 0;
background-color: #e2ecf6;
}
.destinations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
margin-top: 60px;
}
.destination-card {
background:linear-gradient(90deg, #607D8B, #2196F3);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
transition: var(--transition);
position: relative;
}
.destination-card:hover {
transform: translateY(-10px);
box-shadow: var(--box-shadow-lg);
}
.destination-flag {
height: 150px;
overflow: hidden;
position: relative;
}
.destination-flag img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.destination-card:hover .destination-flag img {
transform: scale(1.1);
}
.country-name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
padding: 20px;
font-size: 22px;
font-weight: 600;
}
.destination-info {
padding: 25px;
}
.destination-info p {
color: #fff;
margin-bottom: 20px;
}
.destination-stats {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.destination-stat {
text-align: center;
}
.stat-value-home-new {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
}
.stat-label-home-new {
font-size: 12px;
color: #cfcdcd;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-destination {
display: block;
text-align: center;
background-color: #03a9f4;
color: white;
padding: 12px;
border-radius: var(--border-radius-sm);
font-weight: 500;
transition: var(--transition);
}
.btn-destination:hover {
background-color: var(--primary-dark);
}
/* CTA Section */
.cta-section {
padding: 100px 0;
background: #e5f2fd;
color: white;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
opacity: 0.1;
}
.cta-container {
position: relative;
z-index: 1;
text-align: center;
}
.cta-container h2 {
color: white;
font-size: 42px;
margin-bottom: 20px;
}
.cta-container p {
font-size: 20px;
margin-bottom: 40px;
opacity: 0.9;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.cta-features {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.cta-feature {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
}
.cta-feature i {
color: #4cd964;
}
.cta-actions {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.btn-cta-primary {
display: inline-flex;
align-items: center;
gap: 15px;
background-color: white;
color: var(--primary-color);
padding: 20px 40px;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 18px;
transition: var(--transition);
}
.btn-cta-primary:hover {
background-color: #f8f9fa;
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.btn-cta-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: transparent;
color: white;
padding: 20px 40px;
border-radius: var(--border-radius);
font-weight: 600;
font-size: 18px;
border: 2px solid white;
transition: var(--transition);
}
.btn-cta-secondary:hover {
background-color: white;
color: var(--primary-color);
transform: translateY(-5px);
}
.cta-countdown {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius);
padding: 30px;
backdrop-filter: blur(10px);
max-width: 600px;
margin: 0 auto;
}
.cta-countdown h4 {
color: white;
margin-bottom: 20px;
font-size: 24px;
}
.countdown-timer {
display: flex;
justify-content: center;
gap: 20px;
}
.countdown-item {
text-align: center;
}
.countdown-number {
width: 80px;
height: 80px;
background-color: white;
color: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
margin-bottom: 10px;
}
.countdown-label {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.9;
}
/* Enhanced Footer */
.footer {
background: linear-gradient(90deg, #4CAF50, #3f51b5eb);
color: rgba(255, 255, 255, 0.7);
}
.footer-main {
padding: 80px 0 50px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.footer-column h3 {
color: white;
font-size: 20px;
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: #ffc107d9;
border-radius: 3px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.footer-description {
margin-bottom: 30px;
line-height: 1.8;
font-size: 15px;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 30px;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
}
.contact-item i {
color: #cddc3980;
font-size: 18px;
width: 20px;
}
.social-links h4 {
color: white;
margin-bottom: 20px;
font-size: 18px;
}
.social-icons {
display: flex;
gap: 15px;
}
.social-icon {
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.social-icon:hover {
background-color: var(--primary-color);
transform: translateY(-5px);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 15px;
}
.footer-links a {
display: flex;
align-items: center;
gap: 10px;
transition: var(--transition);
}
.footer-links a:hover {
color: #cddc39bd;
transform: translateX(5px);
}
.footer-newsletter {
margin-top: 30px;
}
.footer-newsletter h4 {
color: white;
margin-bottom: 15px;
font-size: 18px;
}
.newsletter-form {
display: flex;
margin-top: 10px;
}
.newsletter-form input {
flex: 1;
padding: 12px 15px;
background-color: rgba(255, 255, 255, 0.1);
border: none;
border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
color: white;
font-family: 'Open Sans', sans-serif;
}
.newsletter-form input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.newsletter-form button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0 25px;
border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
cursor: pointer;
transition: var(--transition);
}
.newsletter-form button:hover {
background-color: var(--primary-dark);
}
.footer-certifications {
padding: 40px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-certifications h4 {
color: white;
text-align: center;
margin-bottom: 30px;
font-size: 24px;
}
.certification-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.certification-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 15px;
padding: 15px 10px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: var(--border-radius);
transition: var(--transition);
}
.certification-item:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
}
.cert-icon {
width: 60px;
height: 60px;
background: #e6f55969;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
}
.footer-bottom {
padding: 30px 0;
background-color: #2196f300;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-bottom-links {
display: flex;
gap: 20px;
}
.footer-bottom-links a:hover {
color: #cddc39bd;
}
.payment-methods {
display: flex;
gap: 15px;
font-size: 28px;
color: rgba(255, 255, 255, 0.7);
}
/* Responsive Design */
@media (max-width: 1200px) {
.hero-title {
font-size: 46px;
}
.mega-menu {
min-width: 800px;
}
.mega-menu-columns {
grid-template-columns: repeat(2, 1fr);
}
.mega-menu-column:nth-child(2) {
border-right: none;
}
}
@media (max-width: 992px) {
.hero .container {
flex-direction: column;
text-align: center;
}
.hero-content {
max-width: 100%;
margin-bottom: 60px;
}
.hero-image {
justify-content: center;
}
.floating-card {
display: none;
}
.mobile-toggle {
display: block;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background-color: white;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
transition: var(--transition);
overflow-y: auto;
z-index: 1000;
flex-direction: column;
padding: 100px 30px 30px;
gap: 0;
}
.nav-menu.active {
right: 0;
}
.nav-item {
width: 100%;
margin: 0;
border-bottom: 1px solid var(--light-gray);
}
.nav-link {
padding: 15px 0;
display: flex;
justify-content: space-between;
}
.mega-menu {
position: static;
display: none;
width: 100%;
box-shadow: none;
border-radius: 0;
padding: 15px;
background-color: #f8f9fa;
min-width: auto;
transform: none;
left: 0;
}
.mega-menu-columns {
grid-template-columns: 1fr;
gap: 20px;
}
.mega-menu-column {
border-right: none;
border-bottom: 1px solid var(--light-gray);
padding-bottom: 20px;
}
.mega-menu-column:last-child {
border-bottom: none;
}
.cta-card {
flex-direction: column;
text-align: center;
gap: 40px;
}
.cta-image img {
width: 100%;
max-width: 400px;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 36px;
}
.section-header h2 {
font-size: 32px;
}
.hero-stats {
flex-wrap: wrap;
justify-content: center;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.btn-hero-primary, .btn-hero-secondary {
width: 100%;
max-width: 300px;
justify-content: center;
}
.courses-grid {
grid-template-columns: 1fr;
}
.testimonials-slider {
grid-template-columns: 1fr;
}
.destinations-grid {
grid-template-columns: repeat(2, 1fr);
}
.countdown-timer {
flex-wrap: wrap;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
.top-bar-content {
flex-direction: column;
gap: 10px;
text-align: center;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 30px;
}
.section-header h2 {
font-size: 28px;
}
.accreditation-grid, .features-grid {
grid-template-columns: 1fr;
}
.destinations-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.certification-grid {
grid-template-columns: 1fr;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.btn-cta-primary, .btn-cta-secondary {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
/* Compare Courses CSS - Custom Styles */
.compare-css-hero {
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
color: #333;
padding: 100px 0 80px;
overflow: hidden;
min-height: 80vh;
display: flex;
align-items: center;
}
.compare-css-hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.compare-css-hero-shapes {
position: relative;
width: 100%;
height: 100%;
}
.compare-css-shape {
position: absolute;
border-radius: 50%;
background: rgba(41, 128, 185, 0.1);
animation: compare-css-float 20s infinite linear;
}
.compare-css-shape.shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -100px;
background: rgba(52, 152, 219, 0.08);
animation-delay: 0s;
}
.compare-css-shape.shape-2 {
width: 200px;
height: 200px;
bottom: 100px;
left: -50px;
background: rgba(155, 89, 182, 0.06);
animation-delay: -5s;
}
.compare-css-shape.shape-3 {
width: 150px;
height: 150px;
top: 30%;
right: 20%;
background: rgba(46, 204, 113, 0.05);
animation-delay: -10s;
}
.compare-css-shape.shape-4 {
width: 100px;
height: 100px;
bottom: 30%;
left: 10%;
background: rgba(230, 126, 34, 0.04);
animation-delay: -15s;
}
.compare-css-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
.compare-css-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.compare-css-hero-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
}
.compare-css-title-part {
color: #2c3e50;
}
.compare-css-title-highlight {
color: #2980b9;
position: relative;
display: inline-block;
padding-bottom: 10px;
}
.compare-css-title-highlight::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 4px;
background: linear-gradient(90deg, transparent, #3498db, transparent);
border-radius: 2px;
}
.compare-css-hero-subtitle {
font-size: 1.3rem;
color: #5d6d7e;
margin-bottom: 3rem;
line-height: 1.6;
}
.compare-css-hero-subtitle strong {
color: #2c3e50;
font-weight: 600;
}
.compare-css-hero-stats {
display: flex;
justify-content: center;
gap: 3rem;
margin-bottom: 3rem;
}
.compare-css-stat-item {
display: flex;
flex-direction: column;
}
.compare-css-stat-number {
font-size: 2.8rem;
font-weight: 700;
color: #2980b9;
line-height: 1;
}
.compare-css-stat-label {
font-size: 0.9rem;
color: #7f8c8d;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 0.5rem;
}
.compare-css-hero-search {
display: flex;
max-width: 600px;
margin: 0 auto 4rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-radius: 50px;
overflow: hidden;
}
.compare-css-search-input {
flex: 1;
padding: 20px 25px;
border: none;
font-size: 1.1rem;
background: white;
}
.compare-css-search-btn {
padding: 20px 40px;
background: linear-gradient(135deg, #2980b9, #3498db);
color: white;
border: none;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.compare-css-search-btn:hover {
background: linear-gradient(135deg, #2573a7, #2980b9);
transform: translateY(-2px);
}
.compare-css-scroll-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: #7f8c8d;
font-size: 0.9rem;
animation: compare-css-bounce 2s infinite;
}
.compare-css-scroll-arrow {
width: 20px;
height: 35px;
border: 2px solid #7f8c8d;
border-radius: 10px;
position: relative;
}
.compare-css-scroll-arrow::after {
content: '';
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 8px;
background: #7f8c8d;
border-radius: 2px;
animation: compare-css-scroll 2s infinite;
}
/* Comparison Section */
.compare-css-comparison {
padding: 100px 0;
background: #f8f9fa;
}
.compare-css-section-header {
text-align: center;
margin-bottom: 3rem;
}
.compare-css-section-title {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.compare-css-section-icon {
font-size: 2rem;
}
.compare-css-section-subtitle {
font-size: 1.2rem;
color: #5d6d7e;
margin-bottom: 2.5rem;
}
.compare-css-filter-controls {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
padding: 20px 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 2rem;
}
.compare-css-filter-group {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.compare-css-filter-label {
font-weight: 600;
color: #2c3e50;
}
.compare-css-filter-btn {
padding: 8px 20px;
background: #ecf0f1;
border: none;
border-radius: 50px;
color: #5d6d7e;
cursor: pointer;
transition: all 0.3s ease;
}
.compare-css-filter-btn.active,
.compare-css-filter-btn:hover {
background: #2980b9;
color: white;
}
.compare-css-sort-group {
display: flex;
align-items: center;
gap: 10px;
}
.compare-css-sort-select {
padding: 8px 15px;
border-radius: 5px;
border: 1px solid #ddd;
background: white;
color: #2c3e50;
}
/* Comparison Table */
.compare-css-table-container {
background:#fbfbfb;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 3rem;
}
.compare-css-table-scroll {
overflow-x: auto;
}
.compare-css-comparison-table {
width: 100%;
border-collapse: collapse;
min-width: 1000px;
}
.compare-css-table-corner {
background: linear-gradient(135deg, #2c3e50, #34495e);
color: white;
width: 200px;
vertical-align: bottom;
}
.compare-css-corner-content {
padding: 30px 20px;
font-size: 1.2rem;
font-weight: 600;
}
.compare-css-course-card {
background: #e7e7f3;
vertical-align: top;
border-left: 3px solid #eee;
transition: all 0.3s ease;
}
.compare-css-course-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.compare-css-course-header {
padding: 30px 20px;
text-align: center;
}
.compare-css-course-badge {
display: inline-block;
padding: 5px 15px;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.compare-css-course-badge.popular {
background: #ffeaa7;
color: #e17055;
}
.compare-css-course-badge.value {
background: #a29bfe;
color: white;
}
.compare-css-course-badge.budget {
background: #55efc4;
color: #00b894;
}
.compare-css-course-badge.premium {
background: #fd79a8;
color: white;
}
.compare-css-course-logo {
font-size: 1.8rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.compare-css-course-logo span {
color: #2980b9;
}
.compare-css-course-name {
font-size: 1.3rem;
color: #2c3e50;
margin-bottom: 15px;
}
.compare-css-course-rating {
margin-bottom: 15px;
}
.compare-css-stars {
color: #f1c40f;
font-size: 1.2rem;
margin-right: 5px;
}
.compare-css-rating-text {
color: #7f8c8d;
font-weight: 600;
}
.compare-css-course-price {
margin-bottom: 20px;
}
.compare-css-price-current {
font-size: 2.2rem;
font-weight: 700;
color: #2c3e50;
margin-right: 10px;
}
.compare-css-price-original {
font-size: 1.2rem;
color: #95a5a6;
text-decoration: line-through;
}
.compare-css-enroll-btn {
padding: 12px 30px;
background: linear-gradient(135deg, #27ae60, #2ecc71);
color: white;
border: none;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 80%;
}
.compare-css-enroll-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
}
.compare-css-table-row:nth-child(even) {
background: #f8f9fa;
}
.compare-css-feature-name {
padding: 20px;
font-weight: 600;
color: #2c3e50;
background: #f8f9fa;
border-top: 1px solid #eee;
}
.compare-css-feature-value {
padding: 20px;
text-align: center;
border-left: 3px solid #eee;
border-top: 1px solid #eee;
color: #2c3e50;
}
.compare-css-table-note {
padding: 15px;
text-align: center;
background: #f8f9fa;
color: #7f8c8d;
border-top: 1px solid #eee;
}
/* CTA Section */
.compare-css-cta-middle-section {
background: linear-gradient(135deg, #2c3e50, #34495e);
color: white;
padding: 60px;
border-radius: 15px;
text-align: center;
margin-top: 2rem;
}
.compare-css-cta-middle-title {
font-size: 2.2rem;
margin-bottom: 1rem;
color: white;
}
.compare-css-cta-middle-text {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.compare-css-cta-middle-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.compare-css-cta-middle-btn {
padding: 15px 35px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.compare-css-cta-middle-btn.primary {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
border: none;
}
.compare-css-cta-btn-middle.primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}
.compare-css-cta-middle-btn.secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.compare-css-cta-btn-middle.secondary:hover {
background: white;
color: #2c3e50;
transform: translateY(-3px);
}
/* Features Section */
.compare-css-features {
padding: 100px 0;
background: white;
}
.compare-css-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 3rem;
}
.compare-css-feature-card {
background: #eaf1f8;
padding: 30px;
border-radius: 10px;
text-align: center;
transition: all 0.3s ease;
border-bottom: 4px solid transparent;
}
.compare-css-feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
border-bottom-color: #3498db;
}
.compare-css-feature-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.compare-css-feature-title {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 15px;
}
.compare-css-feature-desc {
color: #5d6d7e;
line-height: 1.6;
margin-bottom: 15px;
}
.compare-css-feature-tip {
background: rgba(52, 152, 219, 0.1);
color: #2980b9;
padding: 8px 15px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
display: inline-block;
}
/* SEO Content Section */
/* Animations */
@keyframes compare-css-float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-20px) rotate(120deg);
}
66% {
transform: translateY(20px) rotate(240deg);
}
}
@keyframes compare-css-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes compare-css-scroll {
0% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(15px);
}
}
/* Mobile Responsive */
@media (max-width: 992px) {
.compare-css-hero-title {
font-size: 2.8rem;
}
.compare-css-hero-stats {
gap: 2rem;
}
.compare-css-stat-number {
font-size: 2.2rem;
}
.compare-css-section-title {
font-size: 2rem;
}
.compare-css-filter-controls {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
.compare-css-cta-section {
padding: 40px 20px;
}
}
@media (max-width: 768px) {
.compare-css-hero {
padding: 80px 0 60px;
min-height: auto;
}
.compare-css-hero-title {
font-size: 2.2rem;
}
.compare-css-hero-subtitle {
font-size: 1.1rem;
}
.compare-css-hero-stats {
flex-direction: column;
gap: 1.5rem;
}
.compare-css-hero-search {
flex-direction: column;
border-radius: 10px;
}
.compare-css-search-input,
.compare-css-search-btn {
width: 100%;
border-radius: 0;
padding: 15px;
}
.compare-css-section-title {
font-size: 1.8rem;
flex-direction: column;
gap: 10px;
}
.compare-css-course-card {
min-width: 250px;
}
.compare-css-cta-buttons {
flex-direction: column;
}
.compare-css-cta-btn {
width: 100%;
}
.compare-css-seo-title {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.compare-css-hero-title {
font-size: 1.8rem;
}
.compare-css-title-highlight::after {
width: 150px;
}
.compare-css-stat-number {
font-size: 1.8rem;
}
.compare-css-filter-group {
flex-direction: column;
align-items: flex-start;
}
.compare-css-filter-btn {
width: 100%;
text-align: left;
}
.compare-css-sort-group {
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.compare-css-sort-select {
width: 100%;
}
}
.compare-css-seo-section {
padding: 100px 0;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
color: white;
position: relative;
overflow: hidden;
}
.compare-css-seo-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.compare-css-seo-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 80%, rgba(56, 189, 248, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
}
.compare-css-seo-header {
text-align: center;
margin-bottom: 60px;
}
.compare-css-seo-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 20px;
line-height: 1.2;
color: #425e7a;
}
.compare-css-text-gradient {
background: linear-gradient(90deg, #60a5fa, #34d399);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.compare-css-seo-subtitle {
font-size: 1.2rem;
color: #94a3b8;
max-width: 700px;
margin: 0 auto;
}
.compare-css-seo-subtitle strong {
color: #e2e8f0;
}
.compare-css-seo-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.compare-css-seo-card {
border-radius: 20px;
overflow: hidden;
transition: all 0.4s ease;
position: relative;
}
.compare-css-seo-card:hover {
transform: translateY(-10px);
}
.compare-css-seo-card.dark {
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.compare-css-seo-card.light {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.compare-css-seo-card-header {
padding: 30px 30px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.compare-css-seo-icon {
font-size: 2.5rem;
margin-bottom: 20px;
}
.compare-css-seo-card-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: white;
}
.compare-css-seo-card-body {
padding: 20px 30px 30px;
}
.compare-css-seo-card-body p {
color: #cbd5e1;
line-height: 1.7;
margin-bottom: 20px;
}
.compare-css-seo-tip {
background: rgba(56, 189, 248, 0.1);
border-left: 4px solid #3b82f6;
padding: 15px;
border-radius: 0 8px 8px 0;
margin-top: 20px;
}
.compare-css-seo-tip strong {
color: #60a5fa;
}
.compare-css-price-breakdown {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
.compare-css-price-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.compare-css-price-range {
font-weight: 700;
color: white;
}
.compare-css-price-label {
color: #94a3b8;
}
.compare-css-country-requirements {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}
.compare-css-country {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-left: 3px solid #10b981;
}
.compare-css-country-name {
font-weight: 600;
color: white;
}
.compare-css-country-req {
color: #94a3b8;
font-size: 0.9rem;
}
.compare-css-seo-keywords {
grid-column: 1 / -1;
background: rgb(46 74 121 / 80%);
border-radius: 20px;
padding: 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.compare-css-seo-keywords h4 {
font-size: 1.3rem;
margin-bottom: 25px;
color: white;
text-align: center;
}
.compare-css-keyword-cloud {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.compare-css-keyword {
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.compare-css-keyword.large {
font-size: 1.2rem;
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.compare-css-keyword.medium {
font-size: 1rem;
background: rgba(16, 185, 129, 0.2);
color: #34d399;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.compare-css-keyword.small {
font-size: 0.9rem;
background: rgba(139, 92, 246, 0.2);
color: #a78bfa;
border: 1px solid rgba(139, 92, 246, 0.3);
}
.compare-css-keyword:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.compare-css-cta-section {
padding: 120px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.compare-css-cta-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.compare-css-cta-shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
}
.compare-css-cta-shape.shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -100px;
animation: compare-css-float 25s infinite linear;
}
.compare-css-cta-shape.shape-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: -50px;
animation: compare-css-float 20s infinite linear reverse;
}
.compare-css-cta-shape.shape-3 {
width: 150px;
height: 150px;
top: 50%;
left: 10%;
animation: compare-css-float 15s infinite linear;
}
.compare-css-cta-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.compare-css-cta-badge {
display: inline-block;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 20px;
}
.compare-css-cta-title {
font-size: 2.8rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.2;
}
.compare-css-cta-description {
font-size: 1.2rem;
color: #64748b;
margin-bottom: 30px;
line-height: 1.6;
}
.compare-css-cta-description strong {
color: #3b82f6;
}
.compare-css-cta-features {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 30px;
}
.compare-css-cta-feature {
display: flex;
align-items: center;
gap: 12px;
color: #475569;
}
.compare-css-feature-check {
width: 24px;
height: 24px;
background: #10b981;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}
.compare-css-cta-action {
position: relative;
}
.compare-css-cta-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
.compare-css-cta-card-header {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
padding: 30px;
text-align: center;
}
.compare-css-cta-card-header h3 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 10px;
}
.compare-css-cta-card-header p {
opacity: 0.9;
}
.compare-css-cta-card-body {
padding: 40px 30px;
}
.compare-css-cta-quiz-progress {
margin-bottom: 30px;
}
.compare-css-progress-text {
text-align: center;
color: #64748b;
margin-bottom: 10px;
}
.compare-css-cta-btn {
width: 100%;
padding: 20px;
background: linear-gradient(135deg, #10b981, #34d399);
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: all 0.3s ease;
}
.compare-css-btn-glow {
animation: compare-css-glow 2s ease-in-out infinite;
}
.compare-css-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(16, 185, 129, 0.3);
}
.compare-css-cta-stats {
display: flex;
justify-content: space-around;
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e2e8f0;
}
.compare-css-stat {
text-align: center;
}
.compare-css-stat-number {
display: block;
font-size: 2rem;
font-weight: 800;
color: #3b82f6;
line-height: 1;
}
.compare-css-stat-label {
display: block;
color: #64748b;
font-size: 0.9rem;
margin-top: 5px;
}
/* Responsive Design */
@media (max-width: 1200px) {
.compare-css-main-heading {
font-size: 3.5rem;
}
.compare-css-hero-globe {
width: 300px;
height: 300px;
}
}
@media (max-width: 992px) {
.compare-css-hero-content-wrapper {
grid-template-columns: 1fr;
text-align: center;
}
.compare-css-hero-visual {
height: 300px;
}
.compare-css-card {
width: 220px;
height: 260px;
}
.compare-css-dashboard-controls {
grid-template-columns: 1fr;
gap: 20px;
}
.compare-css-cta-content {
grid-template-columns: 1fr;
text-align: center;
}
}
@media (max-width: 768px) {
.compare-css-main-heading {
font-size: 2.8rem;
}
.compare-css-dashboard-title {
font-size: 2.5rem;
}
.compare-css-seo-title {
font-size: 2.2rem;
}
.compare-css-cta-title {
font-size: 2.2rem;
}
.compare-css-course-cards {
grid-template-columns: 1fr;
}
.compare-css-seo-content {
grid-template-columns: 1fr;
}
.compare-css-hero-cta {
flex-direction: column;
}
}
@media (max-width: 576px) {
.compare-css-main-heading {
font-size: 2.2rem;
}
.compare-css-dashboard-title,
.compare-css-seo-title,
.compare-css-cta-title {
font-size: 1.8rem;
}
.compare-css-container {
padding: 0 20px;
}
.compare-css-course-cards,
.compare-css-feature-matrix {
padding: 20px;
}
.compare-css-cta-card-header,
.compare-css-cta-card-body {
padding: 20px;
}
}
/* About Us CSS - Dynamic & Visual */
.about-css-hero-section {
position: relative;
background: linear-gradient(135deg, #009688b8 0%, #1e293b 50%);
color: white;
padding: 140px 0 100px;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
}
.about-css-hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.about-css-hero-particles {
position: absolute;
width: 100%;
height: 100%;
}
.about-css-particle {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: about-css-float 20s infinite linear;
}
.about-css-particle:nth-child(1) {
width: 100px;
height: 100px;
top: 20%;
left: 10%;
animation-delay: 0s;
background: radial-gradient(circle, rgb(233 30 99 / 68%), transparent 100%);
}
.about-css-particle:nth-child(2) {
width: 150px;
height: 150px;
top: 60%;
right: 15%;
animation-delay: -5s;
background: radial-gradient(circle, rgb(103 58 183 / 55%), transparent 100%);
}
.about-css-particle:nth-child(3) {
width: 80px;
height: 80px;
bottom: 30%;
left: 20%;
animation-delay: -10s;
background: radial-gradient(circle, rgb(139 195 74 / 51%), transparent 100%);
}
.about-css-particle:nth-child(4) {
width: 120px;
height: 120px;
top: 40%;
right: 25%;
animation-delay: -15s;
background: radial-gradient(circle, rgb(255 152 0 / 39%), transparent 100%);
}
.about-css-particle:nth-child(5) {
width: 90px;
height: 90px;
top: 15%;
right: 23%;
animation-delay: -20s;
background: radial-gradient(circle, rgb(33 150 243 / 46%), transparent 100%);
}
.about-css-hero-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.15) 0%, transparent 100%),
radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 100%);
}
.about-css-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 30px;
position: relative;
z-index: 2;
}
.about-css-hero-content {
max-width: 700px;
margin-bottom: 60px;
}
.about-css-hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 10px 20px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 30px;
}
.about-css-badge-dot {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
animation: about-css-pulse 2s infinite;
}
.about-css-main-title {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 30px;
}
.about-css-title-line {
display: block;
}
.about-css-title-line.line-1 {
color: #e2e8f0;
}
.about-css-title-line.line-2 {
margin: 15px 0;
}
.about-css-title-highlight {
color: transparent;
background: linear-gradient(90deg, #60a5fa, #34d399);
-webkit-background-clip: text;
background-clip: text;
position: relative;
display: inline-block;
}
.about-css-title-highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #60a5fa, #34d399);
border-radius: 2px;
animation: about-css-underline 3s ease-in-out infinite;
}
.about-css-hero-description {
font-size: 1.3rem;
line-height: 1.7;
color: #cbd5e1;
margin-bottom: 40px;
}
.about-css-hero-description strong {
color: #e2e8f0;
font-weight: 600;
}
.about-css-hero-stats {
display: flex;
gap: 40px;
margin-top: 50px;
}
.about-css-stat-card {
text-align: center;
}
.about-css-stat-number {
font-size: 3.5rem;
font-weight: 800;
color: #60a5fa;
line-height: 1;
margin-bottom: 10px;
font-feature-settings: "tnum";
}
.about-css-stat-label {
font-size: 1rem;
color: #94a3b8;
font-weight: 500;
}
.about-css-hero-visual {
position: absolute;
right: -35%;
top: 30%;
transform: translateY(-50%);
width: 300px;
height: 300px;
}
.about-css-world-map {
position: relative;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.about-css-map-point {
position: absolute;
width: 40px;
height: 40px;
transform: translate(-50%, -50%);
}
.about-css-point-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: rgba(56, 189, 248, 0.3);
border-radius: 50%;
animation: about-css-radar-pulse 2s infinite;
}
.about-css-point-label {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.9);
color: #1e293b;
padding: 4px 12px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
opacity: 0;
animation: about-css-fade-in 0.5s forwards;
animation-delay: 1s;
}
.about-css-map-point:hover .about-css-point-label {
opacity: 1;
transform: translateX(-50%) translateY(-5px);
}
.about-css-scroll-hint {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: #94a3b8;
font-size: 0.9rem;
animation: about-css-bounce 2s infinite;
}
.about-css-chevron {
width: 20px;
height: 20px;
border-right: 3px solid #94a3b8;
border-bottom: 3px solid #94a3b8;
transform: rotate(45deg);
}
/* Story Timeline Section */
.about-css-story-section {
padding: 120px 0;
background: #f8fafc;
}
.about-css-section-header {
text-align: center;
margin-bottom: 80px;
}
.about-css-section-header.centered {
text-align: center;
}
.about-css-section-badge {
display: inline-block;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: 0.5px;
}
.about-css-section-badge.dark {
background: linear-gradient(90deg, #ffc1079c, #ff9800a8);
}
.about-css-section-title {
font-size: 3.2rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.2;
}
.about-css-section-title.light {
color: white;
}
.about-css-gradient-text {
color: transparent;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
}
.about-css-section-description {
font-size: 1.2rem;
color: #64748b;
max-width: 700px;
margin: 0 auto;
}
.about-css-section-description.light {
color: #cbd5e1;
}
.about-css-section-description strong {
color: #ffeb3bc9;
font-weight: 600;
}
.about-css-timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 40px 0;
}
.about-css-timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background: #e2e8f0;
transform: translateX(-50%);
border-radius: 2px;
}
.about-css-timeline-progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
border-radius: 2px;
animation: about-css-timeline-fill 2s ease-out forwards;
}
.about-css-timeline-item {
position: relative;
margin-bottom: 80px;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
}
.about-css-timeline-item:nth-child(odd) {
flex-direction: row;
}
.about-css-timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.about-css-timeline-year {
width: 120px;
height: 120px;
background: #f9f7f7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
color: #3b82f6;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
border: 4px solid white;
}
.about-css-timeline-card {
width: 400px;
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
position: relative;
transition: all 0.3s ease;
}
.about-css-timeline-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}
.about-css-timeline-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.about-css-timeline-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.about-css-timeline-description {
color: #64748b;
line-height: 1.6;
}
.about-css-timeline-description strong {
color: #3b82f6;
font-weight: 600;
}
/* Mission & Values Section */
.about-css-mission-section {
padding: 120px 0;
background: linear-gradient(135deg, #4caf50eb 0%, #795548 100%);
color: white;
position: relative;
overflow: hidden;
}
.about-css-mission-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.about-css-mission-shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.03);
animation: about-css-float 20s infinite linear;
}
.about-css-mission-shape.shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -100px;
}
.about-css-mission-shape.shape-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: -50px;
animation-delay: -10s;
}
.about-css-mission-shape.shape-3 {
width: 150px;
height: 150px;
top: 50%;
left: 10%;
animation-delay: -5s;
}
.about-css-mission-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.about-css-mission-content {
position: relative;
z-index: 2;
}
.about-css-mission-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 30px;
line-height: 1.2;
color: wheat
}
.about-css-highlight {
color: transparent;
background: linear-gradient(90deg, #60a5fa, #34d399);
-webkit-background-clip: text;
background-clip: text;
}
.about-css-mission-description {
font-size: 1.2rem;
line-height: 1.7;
color: #cbd5e1;
margin-bottom: 40px;
}
.about-css-mission-description strong {
color: #e2e8f0;
font-weight: 600;
}
.about-css-mission-stats {
display: flex;
gap: 40px;
margin-top: 40px;
}
.about-css-mission-stat {
text-align: center;
}
.about-css-mission-number {
font-size: 2.5rem;
font-weight: 800;
color: #eabd35ad;
line-height: 1;
margin-bottom: 10px;
}
.about-css-mission-label {
font-size: 0.9rem;
color: #dee4eb;
font-weight: 500;
}
.about-css-values-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
position: relative;
z-index: 2;
}
.about-css-value-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 30px;
transition: all 0.3s ease;
}
.about-css-value-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
border-color: rgba(255, 255, 255, 0.2);
}
.about-css-value-icon {
font-size: 2.5rem;
margin-bottom: 20px;
}
.about-css-value-title {
font-size: 1.3rem;
font-weight: 700;
color: white;
margin-bottom: 15px;
}
.about-css-value-description {
color: #cbd5e1;
line-height: 1.6;
font-size: 0.95rem;
}
.about-css-value-description strong {
color: #e2e8f0;
font-weight: 600;
}
/* Team Section */
.about-css-team-section {
padding: 120px 0;
background: #f8fafc;
}
.about-css-team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin: 60px 0;
}
.about-css-team-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
position: relative;
}
.about-css-team-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}
.about-css-team-image {
height: 200px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.about-css-image-placeholder {
width: 120px;
height: 120px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 700;
color: #3b82f6;
border: 5px solid white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.about-css-team-social {
position: absolute;
bottom: -20px;
right: 30px;
width: 40px;
height: 40px;
background: #0ea5e9;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.about-css-team-social:hover {
transform: scale(1.1);
background: #0284c7;
}
.about-css-team-info {
padding: 40px 30px 30px;
}
.about-css-team-name {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 5px;
}
.about-css-team-role {
color: #3b82f6;
font-weight: 600;
margin-bottom: 15px;
font-size: 0.95rem;
}
.about-css-team-bio {
color: #64748b;
line-height: 1.6;
font-size: 0.95rem;
}
.about-css-team-bio strong {
color: #1e293b;
font-weight: 600;
}
.about-css-team-cta {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-radius: 20px;
padding: 60px;
text-align: center;
margin-top: 80px;
position: relative;
overflow: hidden;
}
.about-css-team-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #10b981, #34d399);
animation: about-css-scan 3s linear infinite;
}
.about-css-cta-content {
position: relative;
z-index: 2;
}
.about-css-cta-title {
font-size: 2.2rem;
font-weight: 800;
color: white;
margin-bottom: 15px;
}
.about-css-cta-text {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
}
.about-css-cta-text strong {
color: white;
}
.about-css-cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: white;
color: #3b82f6;
border: none;
padding: 18px 35px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.about-css-cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
/* Trust & Accreditation Section */
.about-css-trust-section {
padding: 120px 0;
background: linear-gradient(135deg, #7e4f3e 0%, #0c6d64 100%);
color: white;
position: relative;
overflow: hidden;
}
.about-css-trust-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.about-css-trust-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}
.about-css-accreditation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 60px 0;
}
.about-css-accreditation-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 40px 30px;
text-align: center;
transition: all 0.3s ease;
}
.about-css-accreditation-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
border-color: rgba(56, 189, 248, 0.3);
}
.about-css-accreditation-logo {
font-size: 2.5rem;
font-weight: 800;
color: #ffeb3ba8;
margin-bottom: 20px;
background: rgba(96, 165, 250, 0.1);
padding: 15px;
border-radius: 12px;
display: inline-block;
}
.about-css-accreditation-title {
font-size: 1.3rem;
font-weight: 700;
color: white;
margin-bottom: 15px;
}
.about-css-accreditation-description {
color: #cbd5e1;
line-height: 1.6;
font-size: 0.95rem;
}
.about-css-accreditation-description strong {
color: #e2e8f0;
font-weight: 600;
}
.about-css-trust-badges {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 60px;
}
.about-css-badge-item {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.05);
padding: 5px 10px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.about-css-badge-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-3px);
}
.about-css-badge-icon {
font-size: 1.5rem;
}
.about-css-badge-text {
font-weight: 400;
color: #ffffff80;
font-size: 12px;
}
/* SEO Content Section */
.about-css-seo-section {
padding: 100px 0;
background: #f8fafc;
}
.about-css-seo-content {
max-width: 1000px;
margin: 0 auto;
}
.about-css-seo-header {
text-align: center;
margin-bottom: 60px;
}
.about-css-seo-title {
font-size: 2.8rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.2;
}
.about-css-seo-subtitle {
font-size: 1.2rem;
color: #64748b;
max-width: 700px;
margin: 0 auto;
}
.about-css-seo-subtitle strong {
color: #3b82f6;
font-weight: 600;
}
.about-css-seo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
margin-bottom: 60px;
}
.about-css-seo-article {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.about-css-seo-article:hover {
transform: translateY(-5px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}
.about-css-article-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.4;
}
.about-css-article-text {
color: #475569;
line-height: 1.7;
margin-bottom: 20px;
}
.about-css-article-text strong {
color: #1e293b;
font-weight: 600;
}
.about-css-seo-features {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 25px;
}
.about-css-feature-item {
display: flex;
align-items: flex-start;
gap: 12px;
color: #475569;
}
.about-css-feature-check {
color: #10b981;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
}
.about-css-keyword-cloud {
background: white;
border-radius: 20px;
padding: 50px;
box-shadow: 0 15px 40px rgb(99 180 190);
text-align: center;
}
.about-css-cloud-title {
font-size: 1.3rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 30px;
}
.about-css-cloud-content {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.about-css-keyword {
padding: 10px 20px;
background: #f1f5f9;
color: #475569;
border-radius: 25px;
font-size: 0.95rem;
transition: all 0.3s ease;
cursor: pointer;
}
.about-css-keyword:hover {
background: #3b82f6;
color: white;
transform: translateY(-3px);
}
/* Animations */
@keyframes about-css-float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-20px) rotate(120deg);
}
66% {
transform: translateY(10px) rotate(240deg);
}
}
@keyframes about-css-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes about-css-radar-pulse {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
@keyframes about-css-fade-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes about-css-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-10px);
}
60% {
transform: translateX(-50%) translateY(-5px);
}
}
@keyframes about-css-underline {
0%, 100% {
transform: scaleX(1);
}
50% {
transform: scaleX(1.1);
}
}
@keyframes about-css-timeline-fill {
from {
height: 0;
}
to {
height: 100%;
}
}
@keyframes about-css-scan {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes about-css-count-up {
from {
counter-increment: count 0;
}
to {
counter-increment: count var(--num);
}
}
/* Responsive Design */
@media (max-width: 1200px) {
.about-css-main-title {
font-size: 3.2rem;
}
.about-css-hero-visual {
display: none;
}
.about-css-mission-grid,
.about-css-seo-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.about-css-values-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
@media (max-width: 992px) {
.about-css-main-title {
font-size: 2.8rem;
}
.about-css-section-title {
font-size: 2.5rem;
}
.about-css-timeline-item {
flex-direction: column !important;
gap: 30px;
}
.about-css-timeline-line {
left: 30px;
}
.about-css-timeline-year {
align-self: flex-start;
width: 100px;
height: 100px;
font-size: 1.5rem;
}
.about-css-timeline-card {
width: calc(100% - 60px);
margin-left: 60px;
}
}
@media (max-width: 768px) {
.about-css-main-title {
font-size: 2.2rem;
}
.about-css-section-title {
font-size: 2rem;
}
.about-css-seo-title {
font-size: 2rem;
}
.about-css-hero-stats {
flex-direction: column;
gap: 30px;
}
.about-css-stat-number {
font-size: 2.8rem;
}
.about-css-mission-stats {
flex-direction: column;
gap: 30px;
}
.about-css-team-grid {
grid-template-columns: 1fr;
}
.about-css-accreditation-grid {
grid-template-columns: 1fr;
}
.about-css-trust-badges {
flex-direction: column;
align-items: center;
}
.about-css-container {
padding: 0 20px;
}
.about-css-hero-section,
.about-css-story-section,
.about-css-mission-section,
.about-css-team-section,
.about-css-trust-section,
.about-css-seo-section {
padding: 80px 0;
}
.about-css-seo-article,
.about-css-keyword-cloud,
.about-css-team-cta {
padding: 30px;
}
}
@media (max-width: 480px) {
.about-css-main-title {
font-size: 1.8rem;
}
.about-css-section-title {
font-size: 1.7rem;
}
.about-css-hero-description,
.about-css-section-description {
font-size: 1.1rem;
}
.about-css-values-grid {
grid-template-columns: 1fr;
}
}
/* Accreditation CSS - Professional & Trust-Focused */
.accreditation-css-hero-section {
position: relative;
background: linear-gradient(135deg, #4caf50de 0%, #607D8B 70%);
color: white;
padding: 50px 0 100px;
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
}
.accreditation-css-hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.accreditation-css-badge-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
filter: blur(60px);
animation: accreditation-css-pulse 4s ease-in-out infinite;
}
.accreditation-css-floating-badges {
position: absolute;
width: 100%;
height: 100%;
}
.accreditation-css-floating-badge {
position: absolute;
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.3);
border: 2px solid rgba(255, 255, 255, 0.1);
animation: accreditation-css-float-badge 20s infinite linear;
}
.accreditation-css-floating-badge.badge-1 {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.accreditation-css-floating-badge.badge-2 {
top: 15%;
right: 15%;
animation-delay: -5s;
}
.accreditation-css-floating-badge.badge-3 {
bottom: 25%;
left: 15%;
animation-delay: -10s;
}
.accreditation-css-floating-badge.badge-4 {
bottom: 20%;
right: 20%;
animation-delay: -15s;
}
.accreditation-css-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
position: relative;
z-index: 2;
}
.accreditation-css-hero-content {
max-width: 800px;
}
.accreditation-css-breadcrumb {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 30px;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
.accreditation-css-breadcrumb-separator {
opacity: 0.5;
}
.accreditation-css-breadcrumb-item.active {
color: #60a5fa;
font-weight: 600;
}
.accreditation-css-main-title {
font-size: 3.8rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 25px;
}
.accreditation-css-title-line {
display: block;
color: #e2e8f0;
}
.accreditation-css-title-highlight {
color: transparent;
background: linear-gradient(90deg, #60a5fa, #34d399);
-webkit-background-clip: text;
background-clip: text;
position: relative;
display: inline-block;
}
.accreditation-css-title-highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #60a5fa, #34d399);
border-radius: 2px;
animation: accreditation-css-underline 3s ease-in-out infinite;
}
.accreditation-css-hero-description {
font-size: 1.2rem;
line-height: 1.7;
color: #cbd5e1;
margin-bottom: 40px;
}
.accreditation-css-hero-description strong {
color: #e2e8f0;
font-weight: 600;
}
.accreditation-css-hero-badges {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.accreditation-css-primary-badge {
display: flex;
align-items: center;
gap: 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 2px solid rgba(96, 165, 250, 0.3);
border-radius: 16px;
padding: 20px 30px;
min-width: 300px;
transition: all 0.3s ease;
}
.accreditation-css-primary-badge:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(96, 165, 250, 0.5);
transform: translateY(-3px);
}
.accreditation-css-badge-icon {
font-size: 2.5rem;
}
.accreditation-css-badge-content {
flex: 1;
}
.accreditation-css-badge-title {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 5px;
}
.accreditation-css-badge-subtitle {
font-size: 0.9rem;
color: #e3e9f1;
}
.accreditation-css-secondary-badges {
display: flex;
flex-direction: column;
gap: 12px;
}
.accreditation-css-secondary-badge {
display: flex;
align-items: center;
gap: 10px;
color: #cbd5e1;
font-size: 0.95rem;
}
.accreditation-css-secondary-badge .accreditation-css-badge-icon {
font-size: 1.2rem;
color: #10b981;
}
.accreditation-css-verify-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #03A9F4, #4CAF50);
color: white;
padding: 16px 35px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.accreditation-css-verify-btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
}
/* IARC Accreditation Section */
.accreditation-css-iarc-section {
padding: 100px 0;
background: #f8fafc;
position: relative;
overflow: hidden;
}
.accreditation-css-iarc-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.accreditation-css-iarc-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
}
.accreditation-css-section-header {
text-align: center;
margin-bottom: 60px;
}
.accreditation-css-section-header.centered {
text-align: center;
}
.accreditation-css-section-badge {
display: inline-block;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: 0.5px;
}
.accreditation-css-section-badge.dark {
background: linear-gradient(90deg, #1e293b, #334155);
}
.accreditation-css-section-title {
font-size: 3rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.2;
}
.accreditation-css-section-title.light {
color: white;
}
.accreditation-css-gradient-text {
color: transparent;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
}
.accreditation-css-section-description {
font-size: 1.2rem;
color: #64748b;
max-width: 700px;
margin: 0 auto;
}
.accreditation-css-section-description.light {
color: #cbd5e1;
}
.accreditation-css-section-description strong {
color: #3b82f6;
font-weight: 600;
}
.accreditation-css-iarc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.accreditation-css-iarc-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
transition: all 0.4s ease;
border: 2px solid transparent;
}
.accreditation-css-iarc-card.highlight {
border-color: #3b82f6;
background: linear-gradient(135deg, #ffffff, #f8fafc);
position: relative;
overflow: hidden;
}
.accreditation-css-iarc-card.highlight::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
}
.accreditation-css-iarc-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}
.accreditation-css-iarc-card-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.accreditation-css-iarc-card-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.accreditation-css-iarc-card-description {
color: #475569;
line-height: 1.6;
margin-bottom: 25px;
}
.accreditation-css-iarc-card-description strong {
color: #1e293b;
font-weight: 600;
}
.accreditation-css-iarc-card-features {
display: flex;
flex-direction: column;
gap: 12px;
}
.accreditation-css-feature {
display: flex;
align-items: flex-start;
gap: 10px;
color: #475569;
}
.accreditation-css-feature-check {
color: #10b981;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
}
.accreditation-css-iarc-card-benefits {
display: flex;
flex-direction: column;
gap: 20px;
}
.accreditation-css-benefit {
display: flex;
gap: 15px;
}
.accreditation-css-benefit-number {
width: 40px;
height: 40px;
background: #e0f2fe;
color: #0369a1;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.accreditation-css-benefit-content {
flex: 1;
}
.accreditation-css-benefit-title {
font-weight: 600;
color: #1e293b;
margin-bottom: 5px;
}
.accreditation-css-benefit-text {
color: #64748b;
font-size: 0.9rem;
line-height: 1.5;
}
.accreditation-css-verification-box {
background: #f1f5f9;
border-radius: 12px;
padding: 20px;
margin: 25px 0;
}
.accreditation-css-verification-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: white;
border-radius: 8px;
margin-bottom: 15px;
}
.accreditation-css-verification-item:last-child {
margin-bottom: 0;
}
.accreditation-css-verification-icon {
font-size: 1.5rem;
color: #3b82f6;
}
.accreditation-css-verification-content {
flex: 1;
}
.accreditation-css-verification-title {
font-weight: 600;
color: #1e293b;
margin-bottom: 5px;
}
.accreditation-css-verification-text {
color: #64748b;
font-size: 0.9rem;
}
.accreditation-css-view-listing-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #3b82f6;
color: white;
padding: 12px 25px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
width: 100%;
justify-content: center;
margin-top: 15px;
}
.accreditation-css-view-listing-btn:hover {
background: #2563eb;
transform: translateY(-2px);
}
/* Importance Section */
.accreditation-css-importance-section {
padding: 100px 0;
background: white;
}
.accreditation-css-highlight-text {
color: transparent;
background: linear-gradient(90deg, #10b981, #0d9488);
-webkit-background-clip: text;
background-clip: text;
}
.accreditation-css-importance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-top: 60px;
}
.accreditation-css-importance-card {
background: #f8fafc;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
transition: all 0.4s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.accreditation-css-importance-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
border-color: #e2e8f0;
}
.accreditation-css-importance-visual {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto 25px;
}
.accreditation-css-visual-number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 800;
}
.accreditation-css-visual-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
opacity: 0.1;
}
.accreditation-css-importance-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.accreditation-css-importance-description {
color: #475569;
line-height: 1.6;
margin-bottom: 25px;
}
.accreditation-css-importance-description strong {
color: #1e293b;
font-weight: 600;
}
.accreditation-css-stats {
display: flex;
justify-content: center;
gap: 20px;
}
.accreditation-css-stat {
text-align: center;
}
.accreditation-css-stat-number {
font-size: 2.2rem;
font-weight: 800;
color: #3b82f6;
line-height: 1;
margin-bottom: 5px;
}
.accreditation-css-stat-label {
font-size: 0.85rem;
color: #64748b;
max-width: 150px;
}
/* Standards Section */
.accreditation-css-standards-section {
padding: 100px 0;
background: linear-gradient(135deg, #555d63 0%, #0f172a 100%);
color: white;
position: relative;
overflow: hidden;
}
.accreditation-css-standards-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.accreditation-css-standards-shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.03);
animation: accreditation-css-float 20s infinite linear;
}
.accreditation-css-standards-shape.shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -100px;
}
.accreditation-css-standards-shape.shape-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: -50px;
animation-delay: -10s;
}
.accreditation-css-standards-shape.shape-3 {
width: 150px;
height: 150px;
top: 50%;
left: 10%;
animation-delay: -5s;
}
.accreditation-css-standards-container {
position: relative;
z-index: 2;
}
.accreditation-css-standards-intro {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 30px;
margin-bottom: 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.accreditation-css-standards-intro-title {
font-size: 1.5rem;
color: white;
margin-bottom: 15px;
}
.accreditation-css-standards-intro-text {
color: #cbd5e1;
line-height: 1.6;
}
.accreditation-css-standards-table {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 40px;
}
.accreditation-css-table-header {
display: grid;
grid-template-columns: 2fr 2fr 1.5fr 1.5fr;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
font-weight: 600;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.accreditation-css-table-row {
display: grid;
grid-template-columns: 2fr 2fr 1.5fr 1.5fr;
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.accreditation-css-table-row:hover {
background: rgba(255, 255, 255, 0.03);
}
.accreditation-css-table-row:last-child {
border-bottom: none;
}
.accreditation-css-table-cell {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.accreditation-css-table-badge {
display: inline-block;
padding: 6px 15px;
border-radius: 20px;
font-weight: 700;
font-size: 0.9rem;
background: rgba(96, 165, 250, 0.2);
color: #60a5fa;
margin-bottom: 5px;
text-align: center;
}
.accreditation-css-table-badge.active {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
}
.accreditation-css-table-subtext {
font-size: 0.85rem;
color: #94a3b8;
}
.accreditation-css-table-text {
color: #cbd5e1;
}
.accreditation-css-table-rating {
color: #fbbf24;
font-size: 1.2rem;
}
.accreditation-css-table-status {
display: inline-block;
padding: 6px 15px;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
text-align: center;
}
.accreditation-css-table-status.active {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.accreditation-css-table-status.aligned {
background: rgba(96, 165, 250, 0.2);
color: #60a5fa;
border: 1px solid rgba(96, 165, 250, 0.3);
}
.accreditation-css-note-box {
display: flex;
gap: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 30px;
border-left: 4px solid #fbbf24;
}
.accreditation-css-note-icon {
font-size: 2rem;
flex-shrink: 0;
}
.accreditation-css-note-content {
flex: 1;
}
.accreditation-css-note-title {
color: white;
margin-bottom: 10px;
font-size: 1.2rem;
}
.accreditation-css-note-text {
color: #cbd5e1;
line-height: 1.6;
}
.accreditation-css-note-text strong {
color: white;
font-weight: 600;
}
/* Trust Section */
.accreditation-css-trust-section {
padding: 100px 0;
background: #f8fafc;
}
.accreditation-css-verification-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin: 60px 0;
}
.accreditation-css-step {
background: white;
border-radius: 16px;
padding: 30px;
display: flex;
gap: 20px;
align-items: flex-start;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.accreditation-css-step:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.accreditation-css-step-number {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
flex-shrink: 0;
}
.accreditation-css-step-content {
flex: 1;
}
.accreditation-css-step-title {
font-size: 1.3rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 10px;
}
.accreditation-css-step-description {
color: #64748b;
line-height: 1.6;
}
.accreditation-css-verification-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 60px;
}
.accreditation-css-verification-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}
.accreditation-css-verification-card-header {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
padding: 30px;
text-align: center;
}
.accreditation-css-verification-card-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
.accreditation-css-verification-card-title {
font-size: 1.5rem;
font-weight: 700;
}
.accreditation-css-verification-card-body {
padding: 40px 30px;
}
.accreditation-css-verification-card-text {
color: #64748b;
text-align: center;
margin-bottom: 25px;
line-height: 1.6;
}
.accreditation-css-verify-now-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(135deg, #10b981, #0d9488);
color: white;
padding: 16px 30px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
width: 100%;
}
.accreditation-css-verify-now-btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(16, 185, 129, 0.3);
}
.accreditation-css-verification-note {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
padding: 15px;
background: #f1f5f9;
border-radius: 8px;
color: #64748b;
font-size: 0.9rem;
}
.accreditation-css-note-icon {
flex-shrink: 0;
}
.accreditation-css-certificate-preview {
display: flex;
align-items: center;
justify-content: center;
}
.accreditation-css-certificate-card {
width: 100%;
max-width: 400px;
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 20px;
padding: 30px;
position: relative;
overflow: hidden;
border: 2px solid #e2e8f0;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}
.accreditation-css-certificate-shine {
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.7s ease;
}
.accreditation-css-certificate-card:hover .accreditation-css-certificate-shine {
left: 100%;
}
.accreditation-css-certificate-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 2px solid #e2e8f0;
}
.accreditation-css-certificate-badge {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.5rem;
}
.accreditation-css-certificate-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
}
.accreditation-css-certificate-body {
text-align: center;
}
.accreditation-css-certificate-logo {
font-size: 2.5rem;
font-weight: 800;
color: #3b82f6;
margin-bottom: 20px;
}
.accreditation-css-certificate-text {
color: #475569;
line-height: 1.6;
margin-bottom: 25px;
}
.accreditation-css-certificate-details {
display: flex;
flex-direction: column;
gap: 10px;
background: #f1f5f9;
padding: 20px;
border-radius: 12px;
}
.accreditation-css-detail {
display: flex;
justify-content: space-between;
align-items: center;
}
.accreditation-css-detail-label {
color: #64748b;
font-weight: 500;
}
.accreditation-css-detail-value {
font-weight: 600;
color: #1e293b;
}
.accreditation-css-detail-value.active {
color: #10b981;
}
/* FAQ Section */
.accreditation-css-faq-section {
padding: 100px 0;
background: white;
border-top: 1px solid #e2e8f0;
}
.accreditation-css-faq-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
}
.accreditation-css-faq-content {
flex: 1;
}
.accreditation-css-faq-title {
font-size: 2.5rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.2;
}
.accreditation-css-faq-intro {
font-size: 1.2rem;
color: #64748b;
margin-bottom: 40px;
line-height: 1.6;
}
.accreditation-css-faq-intro strong {
color: #3b82f6;
font-weight: 600;
}
.accreditation-css-faq-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.accreditation-css-faq-item {
background: #f8fafc;
border-radius: 16px;
overflow: hidden;
border: 2px solid #e2e8f0;
transition: all 0.3s ease;
}
.accreditation-css-faq-item.active {
border-color: #3b82f6;
background: white;
}
.accreditation-css-faq-question {
padding: 25px 30px;
display: flex;
align-items: center;
gap: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.accreditation-css-faq-question:hover {
background: #f1f5f9;
}
.accreditation-css-faq-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.accreditation-css-faq-question h3 {
flex: 1;
font-size: 1.2rem;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.accreditation-css-faq-toggle {
font-size: 1.5rem;
font-weight: 300;
color: #64748b;
transition: transform 0.3s ease;
}
.accreditation-css-faq-item.active .accreditation-css-faq-toggle {
transform: rotate(45deg);
}
.accreditation-css-faq-answer {
padding: 0 30px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.accreditation-css-faq-item.active .accreditation-css-faq-answer {
padding: 0 30px 30px;
max-height: 500px;
}
.accreditation-css-faq-answer p {
color: #475569;
line-height: 1.6;
margin: 0;
}
.accreditation-css-seo-content {
flex: 1;
}
.accreditation-css-seo-card {
background: linear-gradient(135deg, #607D8B, #0f172a);
color: white;
border-radius: 20px;
padding: 40px 30px;
position: sticky;
top: 30px;
}
.accreditation-css-seo-card-title {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 20px;
line-height: 1.4;
}
.accreditation-css-seo-card-text {
color: #cbd5e1;
line-height: 1.6;
margin-bottom: 20px;
}
.accreditation-css-seo-card-text strong {
color: #e2e8f0;
font-weight: 600;
}
.accreditation-css-seo-keywords {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.accreditation-css-keywords-title {
font-size: 1.1rem;
font-weight: 600;
color: white;
margin-bottom: 15px;
}
.accreditation-css-keywords-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.accreditation-css-keyword {
background: rgba(255, 255, 255, 0.1);
color: #94a3b8;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.accreditation-css-keyword:hover {
background: rgba(255, 255, 255, 0.15);
color: white;
}
.accreditation-css-cta-section {
margin-top: 80px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-radius: 20px;
padding: 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.accreditation-css-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #10b981, #34d399);
animation: accreditation-css-scan 3s linear infinite;
}
.accreditation-css-cta-content {
position: relative;
z-index: 2;
}
.accreditation-css-cta-title {
font-size: 2.5rem;
font-weight: 800;
color: white;
margin-bottom: 20px;
}
.accreditation-css-cta-text {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
max-width: 700px;
margin: 0 auto 30px;
}
.accreditation-css-cta-text strong {
color: white;
}
.accreditation-css-cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.accreditation-css-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 35px;
border-radius: 12px;
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
transition: all 0.3s ease;
}
.accreditation-css-cta-btn.primary {
background: white;
color: #3b82f6;
}
.accreditation-css-cta-btn.primary:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);
}
.accreditation-css-cta-btn.secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 2px solid white;
}
.accreditation-css-cta-btn.secondary:hover {
background: white;
color: #3b82f6;
transform: translateY(-3px);
}
/* Animations */
@keyframes accreditation-css-pulse {
0%, 100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.05);
}
}
@keyframes accreditation-css-float-badge {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-30px) rotate(120deg);
}
66% {
transform: translateY(15px) rotate(240deg);
}
}
@keyframes accreditation-css-underline {
0%, 100% {
transform: scaleX(1);
}
50% {
transform: scaleX(1.1);
}
}
@keyframes accreditation-css-float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-20px) rotate(120deg);
}
66% {
transform: translateY(10px) rotate(240deg);
}
}
@keyframes accreditation-css-scan {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Interactive FAQ */
.accreditation-css-faq-item .accreditation-css-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.accreditation-css-faq-item.active .accreditation-css-faq-answer {
max-height: 500px;
padding-bottom: 30px;
}
/* Responsive Design */
@media (max-width: 1024px) {
.accreditation-css-main-title {
font-size: 3rem;
}
.accreditation-css-section-title {
font-size: 2.5rem;
}
.accreditation-css-faq-grid,
.accreditation-css-verification-cta {
grid-template-columns: 1fr;
gap: 40px;
}
.accreditation-css-table-header,
.accreditation-css-table-row {
grid-template-columns: 1fr;
gap: 15px;
}
.accreditation-css-table-column {
display: none;
}
.accreditation-css-table-cell::before {
content: attr(data-label);
font-weight: 600;
color: white;
margin-bottom: 5px;
font-size: 0.9rem;
opacity: 0.8;
}
.accreditation-css-table-row {
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin-bottom: 15px;
}
.accreditation-css-table-header {
display: none;
}
}
@media (max-width: 768px) {
.accreditation-css-main-title {
font-size: 2.5rem;
}
.accreditation-css-section-title {
font-size: 2rem;
}
.accreditation-css-cta-title {
font-size: 2rem;
}
.accreditation-css-hero-badges {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.accreditation-css-primary-badge {
min-width: auto;
width: 100%;
}
.accreditation-css-iarc-grid,
.accreditation-css-importance-grid,
.accreditation-css-verification-steps {
grid-template-columns: 1fr;
}
.accreditation-css-cta-section {
padding: 40px 20px;
}
.accreditation-css-cta-buttons {
flex-direction: column;
}
.accreditation-css-cta-btn {
width: 100%;
justify-content: center;
}
.accreditation-css-container {
padding: 0 20px;
}
.accreditation-css-hero-section,
.accreditation-css-iarc-section,
.accreditation-css-importance-section,
.accreditation-css-standards-section,
.accreditation-css-trust-section,
.accreditation-css-faq-section {
padding: 80px 0;
}
}
@media (max-width: 480px) {
.accreditation-css-main-title {
font-size: 2rem;
}
.accreditation-css-section-title {
font-size: 1.7rem;
}
.accreditation-css-hero-description,
.accreditation-css-section-description {
font-size: 1.1rem;
}
.accreditation-css-cta-title {
font-size: 1.8rem;
}
.accreditation-css-note-box {
flex-direction: column;
text-align: center;
}
.accreditation-css-step {
flex-direction: column;
text-align: center;
}
.accreditation-css-step-number {
margin: 0 auto;
}
}
/* Certificate Page CSS - Verification & Download */
.certificate-page-css-hero-section {
position: relative;
background: linear-gradient(135deg, #4CAF50 0%, #795548 70%);
color: white;
padding: 100px 0 60px;
overflow: hidden;
}
.certificate-page-css-hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.certificate-page-css-hero-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}
.certificate-page-css-floating-seals {
position: absolute;
width: 100%;
height: 100%;
}
.certificate-page-css-seal {
position: absolute;
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.3);
border: 2px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
animation: certificate-page-css-float-seal 20s infinite linear;
}
.certificate-page-css-seal:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.certificate-page-css-seal:nth-child(2) {
top: 15%;
right: 15%;
animation-delay: -7s;
}
.certificate-page-css-seal:nth-child(3) {
bottom: 45%;
left: 10%;
animation-delay: -14s;
}
.certificate-page-css-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
position: relative;
z-index: 2;
}
.certificate-page-css-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
}
.certificate-page-css-main-title {
font-size: 3.2rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
}
.certificate-page-css-title-line {
display: block;
color: #e2e8f0;
}
.certificate-page-css-title-highlight {
color: transparent;
background: linear-gradient(90deg, #60a5fa, #34d399);
-webkit-background-clip: text;
background-clip: text;
position: relative;
display: inline-block;
}
.certificate-page-css-title-highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 3px;
background: linear-gradient(90deg, #60a5fa, #34d399);
border-radius: 2px;
animation: certificate-page-css-underline 3s ease-in-out infinite;
}
.certificate-page-css-hero-description {
font-size: 1.2rem;
line-height: 1.7;
color: #cbd5e1;
margin-bottom: 30px;
}
.certificate-page-css-hero-description strong {
color: #e2e8f0;
font-weight: 600;
}
.certificate-page-css-hero-badges {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 40px;
}
.certificate-page-css-badge {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
padding: 12px 25px;
border-radius: 50px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.certificate-page-css-badge:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-3px);
}
.certificate-page-css-badge-icon {
font-size: 1.2rem;
}
.certificate-page-css-hero-visual {
position: relative;
max-width: 500px;
margin: 0 auto;
}
.certificate-page-css-certificate-preview {
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 20px;
padding: 5px;
position: relative;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
transform: perspective(1000px) rotateY(-5deg);
transition: all 0.5s ease;
}
.certificate-page-css-certificate-preview:hover {
transform: perspective(1000px) rotateY(0deg);
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);
}
.certificate-page-css-certificate-shine {
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.7s ease;
}
.certificate-page-css-certificate-preview:hover .certificate-page-css-certificate-shine {
left: 100%;
}
.certificate-page-css-certificate-content {
background: white;
border-radius: 16px;
padding: 40px 30px;
position: relative;
z-index: 2;
}
.certificate-page-css-certificate-header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 3px double #e2e8f0;
}
.certificate-page-css-certificate-badge {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.8rem;
margin: 0 auto 20px;
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}
.certificate-page-css-certificate-header h3 {
font-size: 1.8rem;
color: #1e293b;
font-weight: 700;
}
.certificate-page-css-certificate-body {
text-align: center;
}
.certificate-page-css-certificate-logo {
font-size: 2.8rem;
font-weight: 800;
color: #3b82f6;
margin-bottom: 20px;
letter-spacing: 2px;
}
.certificate-page-css-certificate-text {
color: #475569;
line-height: 1.6;
margin-bottom: 25px;
font-size: 1.1rem;
}
.certificate-page-css-certificate-text strong {
color: #1e293b;
font-weight: 600;
}
.certificate-page-css-certificate-id {
background: #f1f5f9;
padding: 15px;
border-radius: 10px;
border-left: 4px solid #3b82f6;
}
.certificate-page-css-id-label {
color: #64748b;
font-weight: 600;
margin-right: 10px;
}
.certificate-page-css-id-value {
color: #1e293b;
font-weight: 700;
font-family: monospace;
letter-spacing: 1px;
}
/* Verification Section */
.certificate-page-css-verification-section {
padding: 80px 0;
background: #f8fafc;
}
.certificate-page-css-verification-tabs {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.certificate-page-css-tab {
display: flex;
align-items: center;
gap: 15px;
background: white;
border: 2px solid #e2e8f0;
padding: 20px 40px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
min-width: 250px;
justify-content: center;
}
.certificate-page-css-tab:hover {
border-color: #3b82f6;
color: #3b82f6;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.certificate-page-css-tab.active {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-color: transparent;
color: white;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
}
.certificate-page-css-tab-icon {
font-size: 1.5rem;
}
.certificate-page-css-tab-content {
display: none;
animation: certificate-page-css-fadeIn 0.5s ease;
}
.certificate-page-css-tab-content.active {
display: block;
}
@keyframes certificate-page-css-fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.certificate-page-css-form-card {
background: white;
border-radius: 20px;
padding: 50px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
margin-bottom: 40px;
border: 1px solid #e2e8f0;
}
.certificate-page-css-form-header {
text-align: center;
margin-bottom: 40px;
}
.certificate-page-css-form-title {
font-size: 2rem;
font-weight: 700;
color: #1b61d2;
margin-bottom: 15px;
}
.certificate-page-css-form-description {
color: #64748b;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.certificate-page-css-form-description strong {
color: #3b82f6;
font-weight: 600;
}
.certificate-page-css-download-form,
.certificate-page-css-verify-form {
max-width: 500px;
margin: 0 auto;
}
.certificate-page-css-form-group {
margin-bottom: 25px;
}
.certificate-page-css-form-label {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: #1e293b;
margin-bottom: 10px;
font-size: 1.1rem;
}
.certificate-page-css-label-icon {
font-size: 1.2rem;
}
.certificate-page-css-form-input {
width: 100%;
padding: 16px 20px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 1.1rem;
color: #1e293b;
transition: all 0.3s ease;
background: #f8fafc;
}
.certificate-page-css-form-input:focus {
outline: none;
border-color: #3b82f6;
background: white;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.certificate-page-css-form-input::placeholder {
color: #94a3b8;
}
.certificate-page-css-form-hint {
margin-top: 8px;
color: #64748b;
font-size: 0.9rem;
}
.certificate-page-css-form-hint strong {
color: #3b82f6;
font-weight: 600;
}
.certificate-page-css-form-actions {
margin-top: 40px;
}
.certificate-page-css-submit-btn,
.certificate-page-css-verify-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
padding: 18px;
border: none;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.certificate-page-css-submit-btn {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
}
.certificate-page-css-verify-btn {
background: linear-gradient(135deg, #10b981, #0d9488);
color: white;
}
.certificate-page-css-submit-btn:hover,
.certificate-page-css-verify-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}
.certificate-page-css-verify-btn:hover {
box-shadow: 0 15px 30px rgba(16, 185, 129, 0.3);
}
.certificate-page-css-btn-icon {
font-size: 1.5rem;
}
.certificate-page-css-form-links {
margin-top: 25px;
display: flex;
flex-direction: column;
gap: 15px;
}
.certificate-page-css-form-link {
display: flex;
align-items: center;
gap: 10px;
color: #64748b;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.certificate-page-css-form-link:hover {
color: #3b82f6;
transform: translateX(5px);
}
.certificate-page-css-link-icon {
font-size: 1.2rem;
}
.certificate-page-css-help-card {
background: linear-gradient(135deg, #03A9F4, #fde68a);
border-radius: 16px;
padding: 30px;
text-align: center;
border-left: 4px solid #f59e0b;
}
.certificate-page-css-help-icon {
font-size: 2.5rem;
margin-bottom: 20px;
}
.certificate-page-css-help-title {
font-size: 1.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 15px;
}
.certificate-page-css-help-text {
color: #322e2cba;
line-height: 1.6;
margin-bottom: 20px;
}
.certificate-page-css-contact-info {
background: rgba(255, 255, 255, 0.5);
padding: 15px;
border-radius: 8px;
}
.certificate-page-css-contact-label {
color: #92400e;
font-weight: 600;
margin-right: 10px;
}
.certificate-page-css-contact-link {
color: #3b82f6;
text-decoration: none;
font-weight: 600;
}
.certificate-page-css-contact-link:hover {
text-decoration: underline;
}
.certificate-page-css-results {
margin-top: 40px;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border-radius: 16px;
padding: 30px;
border-left: 4px solid #0ea5e9;
}
.certificate-page-css-results.hidden {
display: none;
}
.certificate-page-css-result-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.certificate-page-css-result-icon {
font-size: 2rem;
color: #10b981;
}
.certificate-page-css-result-title {
font-size: 1.8rem;
font-weight: 700;
color: #0f766e;
}
.certificate-page-css-result-details {
background: white;
border-radius: 12px;
padding: 25px;
margin-bottom: 20px;
}
.certificate-page-css-result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e2e8f0;
}
.certificate-page-css-result-row:last-child {
border-bottom: none;
}
.certificate-page-css-result-label {
color: #64748b;
font-weight: 600;
}
.certificate-page-css-result-value {
color: #1e293b;
font-weight: 600;
}
.certificate-page-css-result-value.verified {
color: #10b981;
}
.certificate-page-css-result-note {
color: #475569;
line-height: 1.6;
font-size: 0.95rem;
padding: 15px;
background: rgba(255, 255, 255, 0.7);
border-radius: 8px;
}
.certificate-page-css-result-note a {
color: #3b82f6;
text-decoration: none;
font-weight: 600;
}
.certificate-page-css-result-note a:hover {
text-decoration: underline;
}
.certificate-page-css-employer-info {
background: linear-gradient(135deg, #03A9F4, #0f172a);
color: white;
border-radius: 20px;
padding: 40px;
margin-top: 40px;
}
.certificate-page-css-employer-title {
font-size: 1.8rem;
font-weight: 700;
color: white;
margin-bottom: 20px;
}
.certificate-page-css-employer-text {
color: #cbd5e1;
line-height: 1.6;
margin-bottom: 25px;
}
.certificate-page-css-employer-text strong {
color: #e2e8f0;
}
.certificate-page-css-employer-features {
display: flex;
flex-direction: column;
gap: 15px;
}
.certificate-page-css-feature {
display: flex;
align-items: center;
gap: 15px;
color: #cbd5e1;
}
.certificate-page-css-feature-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
/* Features & SEO Section */
.certificate-page-css-features-section {
padding: 80px 0;
background: white;
}
.certificate-page-css-section-header {
text-align: center;
margin-bottom: 60px;
}
.certificate-page-css-section-title {
font-size: 2.5rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.2;
}
.certificate-page-css-highlight {
color: transparent;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
}
.certificate-page-css-section-description {
font-size: 1.2rem;
color: #64748b;
max-width: 700px;
margin: 0 auto;
}
.certificate-page-css-section-description strong {
color: #3b82f6;
font-weight: 600;
}
.certificate-page-css-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.certificate-page-css-feature-card {
background: #f8fafc;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
transition: all 0.4s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.certificate-page-css-feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
border-color: #e2e8f0;
}
.certificate-page-css-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
opacity: 0;
transition: opacity 0.3s ease;
}
.certificate-page-css-feature-card:hover::before {
opacity: 1;
}
.certificate-page-css-feature-visual {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
}
.certificate-page-css-visual-icon {
font-size: 2.5rem;
color: white;
}
.certificate-page-css-feature-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.certificate-page-css-feature-description {
color: #475569;
line-height: 1.6;
}
.certificate-page-css-feature-description strong {
color: #1e293b;
font-weight: 600;
}
.certificate-page-css-seo-content {
background: #f1f5f9;
border-radius: 20px;
padding: 50px;
margin-top: 40px;
}
.certificate-page-css-seo-title {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 20px;
}
.certificate-page-css-seo-text {
color: #475569;
line-height: 1.6;
margin-bottom: 20px;
}
.certificate-page-css-keywords {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #e2e8f0;
}
.certificate-page-css-keyword {
background: white;
color: #475569;
padding: 10px 20px;
border-radius: 25px;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
cursor: pointer;
}
.certificate-page-css-keyword:hover {
background: #3b82f6;
color: white;
border-color: #3b82f6;
transform: translateY(-2px);
}
/* Animations */
@keyframes certificate-page-css-float-seal {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-30px) rotate(120deg);
}
66% {
transform: translateY(15px) rotate(240deg);
}
}
@keyframes certificate-page-css-underline {
0%, 100% {
transform: translateX(-50%) scaleX(1);
}
50% {
transform: translateX(-50%) scaleX(1.1);
}
}
/* Interactive Elements */
.certificate-page-css-form-input:focus {
animation: certificate-page-css-input-focus 0.3s ease;
}
@keyframes certificate-page-css-input-focus {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
.certificate-page-css-submit-btn:active,
.certificate-page-css-verify-btn:active {
transform: translateY(-1px);
}
/* JavaScript Interactive States */
.certificate-page-css-results.show {
display: block;
animation: certificate-page-css-fadeIn 0.5s ease;
}
/* Responsive Design */
@media (max-width: 1024px) {
.certificate-page-css-main-title {
font-size: 2.5rem;
}
.certificate-page-css-section-title {
font-size: 2rem;
}
.certificate-page-css-verification-tabs {
flex-direction: column;
align-items: center;
}
.certificate-page-css-tab {
width: 100%;
max-width: 400px;
}
.certificate-page-css-features-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.certificate-page-css-main-title {
font-size: 2rem;
}
.certificate-page-css-section-title {
font-size: 1.8rem;
}
.certificate-page-css-form-card {
padding: 30px 20px;
}
.certificate-page-css-form-title {
font-size: 1.5rem;
}
.certificate-page-css-certificate-preview {
transform: perspective(1000px) rotateY(0deg);
}
.certificate-page-css-certificate-logo {
font-size: 2rem;
}
.certificate-page-css-result-row {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.certificate-page-css-container {
padding: 0 20px;
}
.certificate-page-css-hero-section,
.certificate-page-css-verification-section,
.certificate-page-css-features-section {
padding: 60px 0;
}
}
@media (max-width: 480px) {
.certificate-page-css-main-title {
font-size: 1.8rem;
}
.certificate-page-css-section-title {
font-size: 1.5rem;
}
.certificate-page-css-hero-description,
.certificate-page-css-section-description {
font-size: 1.1rem;
}
.certificate-page-css-hero-badges {
flex-direction: column;
align-items: center;
}
.certificate-page-css-badge {
width: 100%;
max-width: 250px;
justify-content: center;
}
.certificate-page-css-employer-info,
.certificate-page-css-seo-content {
padding: 30px 20px;
}
.certificate-page-css-keywords {
justify-content: center;
}
.certificate-page-css-keyword {
font-size: 0.8rem;
padding: 8px 15px;
}
}
/* Teach Abroad CSS - Destination Explorer */
.teach-abroad-css-hero-section {
position: relative;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 70%);
color: white;
padding: 120px 0 80px;
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
}
.teach-abroad-css-hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.teach-abroad-css-world-map {
position: relative;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
overflow: hidden;
}
.teach-abroad-css-map-pin {
position: absolute;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
.teach-abroad-css-pin-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: #FFC107;
border-radius: 50%;
animation: teach-abroad-css-pulse 2s infinite;
}
.teach-abroad-css-pin-label {
position: absolute;
top: -35px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.9);
color: #1e293b;
padding: 6px 15px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 700;
white-space: nowrap;
opacity: 0;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.teach-abroad-css-map-pin:hover .teach-abroad-css-pin-label {
opacity: 1;
transform: translateX(-50%) translateY(-5px);
}
.teach-abroad-css-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
position: relative;
z-index: 3;
}
.teach-abroad-css-hero-content {
max-width: 700px;
text-align: center;
margin: 0 auto;
}
.teach-abroad-css-main-title {
font-size: 3.8rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 25px;
}
.teach-abroad-css-title-line {
display: block;
color: #e2e8f0;
}
.teach-abroad-css-title-highlight {
color: transparent;
background: linear-gradient(90deg, #60a5fa, #34d399);
-webkit-background-clip: text;
background-clip: text;
position: relative;
display: inline-block;
}
.teach-abroad-css-title-highlight::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 4px;
background: linear-gradient(90deg, #60a5fa, #34d399);
border-radius: 2px;
animation: teach-abroad-css-underline 3s ease-in-out infinite;
}
.teach-abroad-css-hero-description {
font-size: 1.3rem;
line-height: 1.7;
color: #cbd5e1;
margin-bottom: 40px;
}
.teach-abroad-css-hero-description strong {
color: #e2e8f0;
font-weight: 600;
}
.teach-abroad-css-hero-stats {
display: flex;
justify-content: center;
gap: 50px;
margin: 50px 0;
flex-wrap: wrap;
}
.teach-abroad-css-stat {
text-align: center;
}
.teach-abroad-css-stat-number {
font-size: 3rem;
font-weight: 800;
color: #60a5fa;
line-height: 1;
margin-bottom: 10px;
font-feature-settings: "tnum";
}
.teach-abroad-css-stat-label {
font-size: 1rem;
color: #94a3b8;
font-weight: 500;
}
.teach-abroad-css-hero-actions {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.teach-abroad-css-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 35px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.teach-abroad-css-cta-btn.primary {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
}
.teach-abroad-css-cta-btn.secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.teach-abroad-css-cta-btn.primary:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
}
.teach-abroad-css-cta-btn.secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.teach-abroad-css-btn-icon {
font-size: 1.5rem;
}
/* Destinations Section */
.teach-abroad-css-destinations-section {
padding: 100px 0;
background: #f8fafc;
}
.teach-abroad-css-section-header {
text-align: center;
margin-bottom: 60px;
}
.teach-abroad-css-section-header.centered {
text-align: center;
}
.teach-abroad-css-section-badge {
display: inline-block;
background: #de912de0;
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: 0.5px;
}
.teach-abroad-css-section-badge.dark {
background: linear-gradient(90deg, #1e293b, #334155);
}
.teach-abroad-css-section-title {
font-size: 3rem;
font-weight: 800;
color: #ff9800;
margin-bottom: 20px;
line-height: 1.2;
}
.teach-abroad-css-section-title.light {
color: white;
}
.teach-abroad-css-highlight {
color: transparent;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
}
.teach-abroad-css-section-description {
font-size: 1.2rem;
color: #64748b;
max-width: 700px;
margin: 0 auto;
}
.teach-abroad-css-section-description.light {
color: #cbd5e1;
}
.teach-abroad-css-destinations-filter {
margin-bottom: 40px;
}
.teach-abroad-css-filter-tabs {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.teach-abroad-css-filter-tab {
padding: 12px 25px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 50px;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
}
.teach-abroad-css-filter-tab:hover {
border-color: #3b82f6;
color: #3b82f6;
transform: translateY(-2px);
}
.teach-abroad-css-filter-tab.active {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-color: transparent;
color: white;
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
}
.teach-abroad-css-destinations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
}
.teach-abroad-css-country-card {
background: white;
border-radius: 20px;
padding: 30px;
display: flex;
gap: 20px;
transition: all 0.4s ease;
border: 2px solid transparent;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.teach-abroad-css-country-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
border-color: #3b82f6;
}
.teach-abroad-css-country-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
opacity: 0;
transition: opacity 0.3s ease;
}
.teach-abroad-css-country-card:hover::before {
opacity: 1;
}
.teach-abroad-css-country-flag {
font-size: 3rem;
flex-shrink: 0;
margin-top: 5px;
}
.teach-abroad-css-country-content {
flex: 1;
}
.teach-abroad-css-country-name {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 10px;
}
.teach-abroad-css-country-description {
color: #64748b;
line-height: 1.6;
margin-bottom: 20px;
}
.teach-abroad-css-country-stats {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.teach-abroad-css-country-stat {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f1f5f9;
}
.teach-abroad-css-country-stat:last-child {
border-bottom: none;
}
.teach-abroad-css-stat-label {
color: #64748b;
font-weight: 500;
}
.teach-abroad-css-stat-value {
color: #1e293b;
font-weight: 600;
}
.teach-abroad-css-country-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.teach-abroad-css-tag {
background: #e0f2fe;
color: #0369a1;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.teach-abroad-css-country-cta {
position: absolute;
top: 30px;
right: 30px;
width: 40px;
height: 40px;
background: #3b82f6;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
opacity: 0;
transform: translateX(10px);
transition: all 0.3s ease;
}
.teach-abroad-css-country-card:hover .teach-abroad-css-country-cta {
opacity: 1;
transform: translateX(0);
}
.teach-abroad-css-country-cta:hover {
background: #2563eb;
transform: scale(1.1);
}
.teach-abroad-css-cta-icon {
font-size: 1.2rem;
}
/* Requirements Section */
.teach-abroad-css-requirements-section {
padding: 100px 0;
background: linear-gradient(135deg, #607D8B 0%, #0f172a 100%);
color: white;
position: relative;
overflow: hidden;
}
.teach-abroad-css-requirements-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.teach-abroad-css-requirements-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}
.teach-abroad-css-requirements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 60px;
}
.teach-abroad-css-requirement-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 30px;
transition: all 0.3s ease;
}
.teach-abroad-css-requirement-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
border-color: rgba(56, 189, 248, 0.3);
}
.teach-abroad-css-requirement-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.teach-abroad-css-requirement-icon {
font-size: 2rem;
color: #60a5fa;
}
.teach-abroad-css-requirement-title {
font-size: 1.3rem;
font-weight: 700;
color: white;
}
.teach-abroad-css-requirement-content {
color: #cbd5e1;
line-height: 1.6;
}
.teach-abroad-css-requirement-levels {
margin-top: 15px;
}
.teach-abroad-css-level {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.teach-abroad-css-level:last-child {
border-bottom: none;
}
.teach-abroad-css-level-title {
color: #94a3b8;
font-weight: 500;
}
.teach-abroad-css-level-countries {
color: white;
font-weight: 600;
font-size: 0.9rem;
}
.teach-abroad-css-requirement-stats {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.teach-abroad-css-stat-circle {
text-align: center;
}
.teach-abroad-css-circle-value {
font-size: 1.8rem;
font-weight: 800;
color: #60a5fa;
line-height: 1;
margin-bottom: 5px;
}
.teach-abroad-css-circle-label {
font-size: 0.8rem;
color: #94a3b8;
}
.teach-abroad-css-certification-info {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 15px;
}
.teach-abroad-css-info-item {
display: flex;
align-items: center;
gap: 10px;
color: #cbd5e1;
font-size: 0.95rem;
}
.teach-abroad-css-info-icon {
color: #10b981;
flex-shrink: 0;
}
.teach-abroad-css-age-ranges {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 15px;
}
.teach-abroad-css-age-range {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.teach-abroad-css-age-range:last-child {
border-bottom: none;
}
.teach-abroad-css-range-label {
color: #94a3b8;
font-weight: 500;
}
.teach-abroad-css-range-value {
color: white;
font-weight: 600;
}
/* Positions Section */
.teach-abroad-css-positions-section {
padding: 100px 0;
background: white;
}
.teach-abroad-css-positions-tabs {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.teach-abroad-css-position-tab {
display: flex;
align-items: center;
gap: 10px;
background: #f8fafc;
border: 2px solid #e2e8f0;
padding: 15px 25px;
border-radius: 12px;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
min-width: 200px;
justify-content: center;
}
.teach-abroad-css-position-tab:hover {
border-color: #3b82f6;
color: #3b82f6;
transform: translateY(-3px);
}
.teach-abroad-css-position-tab.active {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-color: transparent;
color: white;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
}
.teach-abroad-css-tab-icon {
font-size: 1.5rem;
}
.teach-abroad-css-positions-content {
background: #f8fafc;
border-radius: 20px;
padding: 50px;
}
.teach-abroad-css-position-details {
display: none;
animation: teach-abroad-css-fadeIn 0.5s ease;
}
.teach-abroad-css-position-details.active {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 50px;
}
@keyframes teach-abroad-css-fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.teach-abroad-css-position-info {
flex: 2;
}
.teach-abroad-css-position-title {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 20px;
}
.teach-abroad-css-position-description {
color: #475569;
line-height: 1.6;
margin-bottom: 30px;
}
.teach-abroad-css-position-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.teach-abroad-css-position-stat {
background: white;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.teach-abroad-css-position-stat-icon {
font-size: 2rem;
color: #3b82f6;
}
.teach-abroad-css-position-stat-content {
flex: 1;
}
.teach-abroad-css-position-stat-value {
font-weight: 700;
color: #1e293b;
margin-bottom: 5px;
}
.teach-abroad-css-position-stat-label {
color: #64748b;
font-size: 0.9rem;
}
.teach-abroad-css-position-features {
display: flex;
flex-direction: column;
gap: 12px;
}
.teach-abroad-css-feature {
display: flex;
align-items: flex-start;
gap: 10px;
color: #475569;
}
.teach-abroad-css-feature-check {
color: #10b981;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
}
.teach-abroad-css-position-visual {
flex: 1;
}
.teach-abroad-css-visual-card {
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
position: sticky;
top: 30px;
}
.teach-abroad-css-visual-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.teach-abroad-css-visual-icon {
font-size: 2rem;
color: #3b82f6;
}
.teach-abroad-css-visual-title {
font-size: 1.3rem;
font-weight: 700;
color: #1e293b;
}
.teach-abroad-css-visual-body p {
color: #475569;
line-height: 1.6;
margin-bottom: 20px;
}
.teach-abroad-css-visual-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.teach-abroad-css-visual-tag {
background: #e0f2fe;
color: #0369a1;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
/* Application Section */
.teach-abroad-css-application-section {
padding: 100px 0;
background: #f8fafc;
}
.teach-abroad-css-application-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin: 60px 0;
}
.teach-abroad-css-step {
background: #f5f1f1;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
transition: all 0.4s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.teach-abroad-css-step:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
border-color: #e2e8f0;
}
.teach-abroad-css-step::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
opacity: 0;
transition: opacity 0.3s ease;
}
.teach-abroad-css-step:hover::before {
opacity: 1;
}
.teach-abroad-css-step-visual {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto 25px;
}
.teach-abroad-css-step-number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #de912de0;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 800;
}
.teach-abroad-css-step-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
opacity: 0.1;
}
.teach-abroad-css-step-content {
flex: 1;
}
.teach-abroad-css-step-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.teach-abroad-css-step-description {
color: #475569;
line-height: 1.6;
}
.teach-abroad-css-step-description strong {
color: #de912de0;
font-weight: 600;
}
.teach-abroad-css-job-resources {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 60px;
}
.teach-abroad-css-resource-card {
background: #f5f2efde;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.teach-abroad-css-resource-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: #de912de0;
}
.teach-abroad-css-resource-icon {
font-size: 3rem;
margin-bottom: 20px;
color: #3b82f6;
}
.teach-abroad-css-resource-title {
font-size: 1.3rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.teach-abroad-css-resource-description {
color: #64748b;
line-height: 1.6;
margin-bottom: 20px;
}
.teach-abroad-css-resource-link {
display: inline-block;
color: #de912de0;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.teach-abroad-css-resource-link:hover {
color: #8BC34A;
transform: translateX(5px);
}
/* CTA & SEO Section */
.teach-abroad-css-cta-section {
padding: 120px 0;
background: linear-gradient(135deg, #2196F3 0%, #0f172a 100%);
color: white;
position: relative;
overflow: hidden;
}
.teach-abroad-css-cta-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.teach-abroad-css-cta-shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.03);
animation: teach-abroad-css-float 20s infinite linear;
}
.teach-abroad-css-cta-shape.shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -100px;
}
.teach-abroad-css-cta-shape.shape-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: -50px;
animation-delay: -10s;
}
.teach-abroad-css-cta-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.teach-abroad-css-cta-title {
font-size: 3rem;
font-weight: 800;
color: white;
margin-bottom: 20px;
}
.teach-abroad-css-cta-description {
font-size: 1.3rem;
color: #cbd5e1;
line-height: 1.7;
margin-bottom: 40px;
}
.teach-abroad-css-cta-description strong {
color: #e2e8f0;
font-weight: 600;
}
.teach-abroad-css-cta-actions {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 60px;
flex-wrap: wrap;
}
.teach-abroad-css-seo-keywords {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.teach-abroad-css-keyword {
background: rgba(255, 255, 255, 0.1);
color: #94a3b8;
padding: 10px 20px;
border-radius: 25px;
font-size: 0.9rem;
transition: all 0.3s ease;
cursor: pointer;
}
.teach-abroad-css-keyword:hover {
background: #3b82f6;
color: white;
transform: translateY(-3px);
}
/* Animations */
@keyframes teach-abroad-css-pulse {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
@keyframes teach-abroad-css-underline {
0%, 100% {
transform: translateX(-50%) scaleX(1);
}
50% {
transform: translateX(-50%) scaleX(1.1);
}
}
@keyframes teach-abroad-css-float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-20px) rotate(120deg);
}
66% {
transform: translateY(10px) rotate(240deg);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.teach-abroad-css-main-title {
font-size: 3rem;
}
.teach-abroad-css-section-title {
font-size: 2.5rem;
}
.teach-abroad-css-destinations-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.teach-abroad-css-position-details.active {
grid-template-columns: 1fr;
gap: 30px;
}
.teach-abroad-css-cta-title {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.teach-abroad-css-main-title {
font-size: 2.5rem;
}
.teach-abroad-css-section-title {
font-size: 2rem;
}
.teach-abroad-css-cta-title {
font-size: 2rem;
}
.teach-abroad-css-hero-stats {
flex-direction: column;
gap: 30px;
}
.teach-abroad-css-stat-number {
font-size: 2.5rem;
}
.teach-abroad-css-filter-tabs {
flex-direction: column;
align-items: center;
}
.teach-abroad-css-filter-tab {
width: 100%;
max-width: 300px;
}
.teach-abroad-css-positions-tabs {
flex-direction: column;
align-items: center;
}
.teach-abroad-css-position-tab {
width: 100%;
max-width: 300px;
}
.teach-abroad-css-position-stats {
grid-template-columns: 1fr;
}
.teach-abroad-css-cta-actions {
flex-direction: column;
align-items: center;
}
.teach-abroad-css-cta-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
.teach-abroad-css-container {
padding: 0 20px;
}
.teach-abroad-css-hero-section,
.teach-abroad-css-destinations-section,
.teach-abroad-css-requirements-section,
.teach-abroad-css-positions-section,
.teach-abroad-css-application-section,
.teach-abroad-css-cta-section {
padding: 80px 0;
}
}
@media (max-width: 480px) {
.teach-abroad-css-main-title {
font-size: 2rem;
}
.teach-abroad-css-section-title {
font-size: 1.7rem;
}
.teach-abroad-css-cta-title {
font-size: 1.8rem;
}
.teach-abroad-css-hero-description,
.teach-abroad-css-section-description {
font-size: 1.1rem;
}
.teach-abroad-css-destinations-grid {
grid-template-columns: 1fr;
}
.teach-abroad-css-country-card {
flex-direction: column;
text-align: center;
}
.teach-abroad-css-country-flag {
margin: 0 auto 20px;
}
.teach-abroad-css-requirements-grid {
grid-template-columns: 1fr;
}
.teach-abroad-css-job-resources {
grid-template-columns: 1fr;
}
.teach-abroad-css-seo-keywords {
flex-direction: column;
align-items: center;
}
.teach-abroad-css-keyword {
width: 100%;
text-align: center;
}
}
/* Travel Checklist CSS - Interactive Preparation Guide */
.travel-checklist-css-hero-section {
position: relative;
background: linear-gradient(135deg, #4caf50de 0%, #1d2446 70%);
color: white;
padding: 120px 0 80px;
overflow: hidden;
}
.travel-checklist-css-hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.travel-checklist-css-travel-icons {
position: absolute;
width: 100%;
height: 100%;
}
.travel-checklist-css-icon {
position: absolute;
font-size: 3rem;
opacity: 0.1;
animation: travel-checklist-css-float-icon 25s infinite linear;
}
.travel-checklist-css-icon.passport {
top: 25%;
left: 5%;
animation-delay: 0s;
}
.travel-checklist-css-icon.suitcase {
top: 10%;
right: 48%;
animation-delay: -5s;
}
.travel-checklist-css-icon.plane {
top: 5%;
left: 35%;
animation-delay: -10s;
}
.travel-checklist-css-icon.globe {
bottom: 25%;
left: 5%;
animation-delay: -15s;
}
.travel-checklist-css-icon.documents {
top: 40%;
left: 50%;
animation-delay: -20s;
}
.travel-checklist-css-hero-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.15) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}
.travel-checklist-css-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
position: relative;
z-index: 2;
}
.travel-checklist-css-hero-content {
max-width: 600px;
margin-bottom: 60px;
}
.travel-checklist-css-hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 10px 20px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 30px;
}
.travel-checklist-css-badge-dot {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
animation: travel-checklist-css-pulse 2s infinite;
}
.travel-checklist-css-main-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 25px;
}
.travel-checklist-css-title-line {
display: block;
color: #e2e8f0;
}
.travel-checklist-css-title-highlight {
color: transparent;
background: linear-gradient(90deg, #60a5fa, #34d399);
-webkit-background-clip: text;
background-clip: text;
position: relative;
display: inline-block;
}
.travel-checklist-css-title-highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #60a5fa, #34d399);
border-radius: 2px;
animation: travel-checklist-css-underline 3s ease-in-out infinite;
}
.travel-checklist-css-hero-description {
font-size: 1.2rem;
line-height: 1.7;
color: #cbd5e1;
margin-bottom: 40px;
}
.travel-checklist-css-hero-stats {
display: flex;
gap: 40px;
margin-top: 40px;
}
.travel-checklist-css-stat {
text-align: center;
}
.travel-checklist-css-stat-number {
font-size: 2.8rem;
font-weight: 800;
color: #60a5fa;
line-height: 1;
margin-bottom: 10px;
font-feature-settings: "tnum";
}
.travel-checklist-css-stat-label {
font-size: 1rem;
color: #94a3b8;
font-weight: 500;
}
.travel-checklist-css-hero-visual {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 450px;
}
.travel-checklist-css-checklist-preview {
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 20px;
padding: 5px;
position: relative;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
transform: perspective(1000px) rotateY(-8deg);
transition: all 0.5s ease;
}
.travel-checklist-css-checklist-preview:hover {
transform: perspective(1000px) rotateY(0deg);
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);
}
.travel-checklist-css-checklist-shine {
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.7s ease;
}
.travel-checklist-css-checklist-preview:hover .travel-checklist-css-checklist-shine {
left: 100%;
}
.travel-checklist-css-checklist-content {
background: white;
border-radius: 16px;
padding: 30px;
position: relative;
z-index: 2;
}
.travel-checklist-css-checklist-header {
margin-bottom: 25px;
}
.travel-checklist-css-checklist-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
}
.travel-checklist-css-progress {
margin-top: 15px;
}
.travel-checklist-css-progress-bar {
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 8px;
}
.travel-checklist-css-progress-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
border-radius: 4px;
transition: width 1s ease;
}
.travel-checklist-css-progress-text {
font-size: 0.9rem;
color: #64748b;
font-weight: 600;
}
.travel-checklist-css-checklist-items {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 25px;
}
.travel-checklist-css-checklist-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
border-radius: 10px;
background: #03a9f4d4;
transition: all 0.3s ease;
}
.travel-checklist-css-checklist-item.completed {
background: #75d091;
border-left: 4px solid #10b981;
}
.travel-checklist-css-checklist-item.current {
background: #ff9800c9;
border-left: 4px solid #FF5722;
animation: travel-checklist-css-pulse-current 2s infinite;
}
.travel-checklist-css-check {
font-weight: bold;
font-size: 1.2rem;
}
.travel-checklist-css-checklist-item.completed .travel-checklist-css-check {
color: #10b981;
}
.travel-checklist-css-checklist-item.current .travel-checklist-css-check {
color: #f59e0b;
}
.travel-checklist-css-download-checklist {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #009688 0%, #1d2d7b 70%);
color: white;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
}
.travel-checklist-css-download-checklist:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}
.travel-checklist-css-download-icon {
font-size: 1.2rem;
}
/* Checklist Section */
.travel-checklist-css-checklist-section {
padding: 100px 0;
background: #f8fafc;
}
.travel-checklist-css-section-header {
text-align: center;
margin-bottom: 60px;
}
.travel-checklist-css-section-header.centered {
text-align: center;
}
.travel-checklist-css-section-badge {
display: inline-block;
background: linear-gradient(135deg, #4caf50cf 0%, #1c34a8 70%);
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: 0.5px;
}
.travel-checklist-css-section-badge.dark {
background: linear-gradient(135deg, #458b48db 0%, #192049 100%);
}
.travel-checklist-css-section-title {
font-size: 3rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.2;
}
.travel-checklist-css-section-title.light {
color: white;
}
.travel-checklist-css-gradient-text {
color: transparent;
background: linear-gradient(90deg, #009688, #009688b5);
-webkit-background-clip: text;
background-clip: text;
}
.travel-checklist-css-section-description {
font-size: 1.2rem;
color: #64748b;
max-width: 700px;
margin: 0 auto;
}
.travel-checklist-css-section-description.light {
color: #cbd5e1;
}
.travel-checklist-css-section-description strong {
color: #3b82f6;
font-weight: 600;
}
.travel-checklist-css-category-tabs {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.travel-checklist-css-category-tab {
display: flex;
align-items: center;
gap: 10px;
background: white;
border: 2px solid #e2e8f0;
padding: 15px 25px;
border-radius: 12px;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
min-width: 160px;
justify-content: center;
}
.travel-checklist-css-category-tab:hover {
border-color: #3b82f6;
color: #3b82f6;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.travel-checklist-css-category-tab.active {
background: #009688;
border-color: transparent;
color: white;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
}
.travel-checklist-css-tab-icon {
font-size: 1.5rem;
}
.travel-checklist-css-category-content {
display: none;
animation: travel-checklist-css-fadeIn 0.5s ease;
}
.travel-checklist-css-category-content.active {
display: block;
}
@keyframes travel-checklist-css-fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.travel-checklist-css-category-header {
text-align: center;
margin-bottom: 40px;
}
.travel-checklist-css-category-title {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.travel-checklist-css-category-icon {
font-size: 2rem;
}
.travel-checklist-css-category-description {
color: #64748b;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.travel-checklist-css-items-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 20px;
margin-bottom: 60px;
}
.travel-checklist-css-item-card {
background: white;
border-radius: 16px;
padding: 25px;
display: flex;
gap: 20px;
align-items: flex-start;
transition: all 0.3s ease;
border: 2px solid transparent;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.travel-checklist-css-item-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: #e2e8f0;
}
.travel-checklist-css-item-card.priority-high:hover {
border-color: #3450ed87;
}
.travel-checklist-css-item-card.priority-medium:hover {
border-color: #f59e0b;
}
.travel-checklist-css-item-checkbox {
flex-shrink: 0;
margin-top: 5px;
}
.travel-checklist-css-checkbox {
display: none;
}
.travel-checklist-css-checkbox-label {
display: block;
width: 24px;
height: 24px;
border: 2px solid #cbd5e1;
border-radius: 6px;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
.travel-checklist-css-checkbox-label:hover {
border-color: #3b82f6;
}
.travel-checklist-css-checkbox:checked + .travel-checklist-css-checkbox-label {
background: #10b981;
border-color: #10b981;
}
.travel-checklist-css-checkbox:checked + .travel-checklist-css-checkbox-label::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
.travel-checklist-css-item-content {
flex: 1;
}
.travel-checklist-css-item-title {
font-size: 1.3rem;
font-weight: 700;
color: #009688e0;
margin-bottom: 10px;
}
.travel-checklist-css-item-description {
color: #64748b;
line-height: 1.6;
margin-bottom: 15px;
}
.travel-checklist-css-item-description strong {
color: #3b82f6;
font-weight: 600;
}
.travel-checklist-css-item-details {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.travel-checklist-css-detail {
display: flex;
align-items: center;
gap: 8px;
color: #64748b;
font-size: 0.9rem;
}
.travel-checklist-css-detail-icon {
font-size: 1rem;
}
.travel-checklist-css-item-priority {
flex-shrink: 0;
}
.travel-checklist-css-priority-badge {
display: inline-block;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 700;
}
.travel-checklist-css-priority-badge.high {
background: #fee2e2;
color: #dc2626;
border: 1px solid #fecaca;
}
.travel-checklist-css-priority-badge.medium {
background: #fef3c7;
color: #d97706;
border: 1px solid #fde68a;
}
.travel-checklist-css-progress-summary {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
margin-top: 60px;
}
.travel-checklist-css-summary-card {
max-width: 800px;
margin: 0 auto;
}
.travel-checklist-css-summary-header {
text-align: center;
margin-bottom: 40px;
}
.travel-checklist-css-summary-title {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 10px;
}
.travel-checklist-css-summary-stats {
font-size: 1.5rem;
color: #3b82f6;
font-weight: 700;
}
.travel-checklist-css-stat-completed {
color: #3b82f6;
}
.travel-checklist-css-stat-total {
color: #64748b;
}
.travel-checklist-css-progress-circles {
display: flex;
justify-content: center;
gap: 60px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.travel-checklist-css-circle-container {
text-align: center;
}
.travel-checklist-css-progress-circle {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 15px;
}
.travel-checklist-css-circle-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.travel-checklist-css-circle-bg {
fill: none;
stroke: #e2e8f0;
stroke-width: 8;
}
.travel-checklist-css-circle-progress {
fill: none;
stroke: #3b82f6;
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 283;
stroke-dashoffset: 283;
transition: stroke-dashoffset 1s ease;
}
.travel-checklist-css-circle-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
}
.travel-checklist-css-circle-label {
color: #64748b;
font-weight: 600;
}
.travel-checklist-css-summary-actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.travel-checklist-css-reset-btn,
.travel-checklist-css-print-btn,
.travel-checklist-css-email-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 25px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid #e2e8f0;
background: white;
color: #64748b;
}
.travel-checklist-css-reset-btn:hover {
border-color: #ef4444;
color: #ef4444;
transform: translateY(-2px);
}
.travel-checklist-css-print-btn:hover {
border-color: #3b82f6;
color: #3b82f6;
transform: translateY(-2px);
}
.travel-checklist-css-email-btn:hover {
border-color: #10b981;
color: #10b981;
transform: translateY(-2px);
}
.travel-checklist-css-btn-icon {
font-size: 1.2rem;
}
/* Contract Section */
.travel-checklist-css-contract-section {
padding: 100px 0;
background: linear-gradient(135deg, #4caf50db 0%, #192049 100%);
color: white;
position: relative;
overflow: hidden;
}
.travel-checklist-css-contract-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.travel-checklist-css-contract-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}
.travel-checklist-css-contract-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 60px;
}
.travel-checklist-css-contract-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 30px;
transition: all 0.3s ease;
}
.travel-checklist-css-contract-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
border-color: rgba(56, 189, 248, 0.3);
}
.travel-checklist-css-contract-visual {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.travel-checklist-css-contract-number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0 150 136 / 72%);
color: #ffeb3b94;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
}
.travel-checklist-css-contract-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
opacity: 0.1;
}
.travel-checklist-css-contract-content {
color: #cbd5e1;
}
.travel-checklist-css-contract-title {
font-size: 1.3rem;
font-weight: 700;
color: white;
margin-bottom: 15px;
}
.travel-checklist-css-contract-list {
list-style: none;
padding: 0;
margin: 0;
}
.travel-checklist-css-contract-list li {
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
padding-left: 20px;
}
.travel-checklist-css-contract-list li:last-child {
border-bottom: none;
}
.travel-checklist-css-contract-list li::before {
content: '•';
color: #60a5fa;
position: absolute;
left: 0;
font-weight: bold;
}
.travel-checklist-css-contract-cta {
margin-top: 60px;
}
.travel-checklist-css-cta-card {
background: rgb(64 125 119);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: 16px;
padding: 30px;
display: flex;
gap: 20px;
align-items: flex-start;
}
.travel-checklist-css-cta-icon {
font-size: 2.5rem;
flex-shrink: 0;
color: #f59e0b;
}
.travel-checklist-css-cta-content {
flex: 1;
}
.travel-checklist-css-cta-title {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 15px;
}
.travel-checklist-css-cta-text {
color: #e2e8f0;
line-height: 1.6;
}
/* Timeline Section */
.travel-checklist-css-timeline-section {
padding: 100px 0;
background: #f1eeee;
}
.travel-checklist-css-highlight-text {
color: transparent;
background: linear-gradient(90deg, #10b981, #0d9488);
-webkit-background-clip: text;
background-clip: text;
}
.travel-checklist-css-timeline {
position: relative;
max-width: 900px;
margin: 60px auto 0;
}
.travel-checklist-css-timeline-track {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background: #e2e8f0;
transform: translateX(-50%);
border-radius: 2px;
}
.travel-checklist-css-timeline-progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
border-radius: 2px;
animation: travel-checklist-css-timeline-fill 2s ease-out forwards;
}
.travel-checklist-css-timeline-items {
position: relative;
z-index: 2;
}
.travel-checklist-css-timeline-item {
display: flex;
align-items: center;
margin-bottom: 60px;
}
.travel-checklist-css-timeline-item:nth-child(odd) {
flex-direction: row;
}
.travel-checklist-css-timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.travel-checklist-css-timeline-week {
width: 120px;
height: 120px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 800;
color: #009688e0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
border: 4px solid white;
}
.travel-checklist-css-timeline-card {
flex: 1;
background: #f2f3f3;
border-radius: 20px;
padding: 30px;
margin: 0 40px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.travel-checklist-css-timeline-card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}
.travel-checklist-css-timeline-title {
font-size: 1.5rem;
font-weight: 700;
color: #009688e0;
margin-bottom: 15px;
}
.travel-checklist-css-timeline-list {
list-style: none;
padding: 0;
margin: 0;
}
.travel-checklist-css-timeline-list li {
padding: 8px 0;
color: #475569;
border-bottom: 1px solid #e2e8f0;
position: relative;
padding-left: 25px;
}
.travel-checklist-css-timeline-list li:last-child {
border-bottom: none;
}
.travel-checklist-css-timeline-list li::before {
content: '✓';
color: #10b981;
position: absolute;
left: 0;
font-weight: bold;
}
.travel-checklist-css-timeline-tips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 60px;
}
.travel-checklist-css-tip-card {
background: #f0f9ff;
border-radius: 16px;
padding: 30px;
display: flex;
gap: 20px;
align-items: flex-start;
border-left: 4px solid #0ea5e9;
}
.travel-checklist-css-tip-icon {
font-size: 2rem;
color: #0ea5e9;
flex-shrink: 0;
}
.travel-checklist-css-tip-content {
flex: 1;
}
.travel-checklist-css-tip-title {
font-size: 1.3rem;
font-weight: 700;
color: #009688;
margin-bottom: 10px;
}
.travel-checklist-css-tip-text {
color: #475569;
line-height: 1.6;
}
/* Resources Section */
.travel-checklist-css-resources-section {
padding: 100px 0;
background: #f8fafc;
}
.travel-checklist-css-resources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 60px;
}
.travel-checklist-css-resource-card {
background: white;
border-radius: 20px;
padding: 30px;
display: flex;
gap: 25px;
transition: all 0.4s ease;
border: 2px solid transparent;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.travel-checklist-css-resource-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
border-color: #3b82f6;
}
.travel-checklist-css-resource-visual {
position: relative;
flex-shrink: 0;
}
.travel-checklist-css-resource-icon {
font-size: 3.5rem;
color: #3b82f6;
}
.travel-checklist-css-resource-badge {
position: absolute;
top: -10px;
right: -10px;
background: #10b981;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
}
.travel-checklist-css-resource-content {
flex: 1;
}
.travel-checklist-css-resource-title {
font-size: 1.3rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 10px;
}
.travel-checklist-css-resource-description {
color: #64748b;
line-height: 1.6;
margin-bottom: 20px;
}
.travel-checklist-css-resource-meta {
display: flex;
gap: 20px;
margin-bottom: 25px;
}
.travel-checklist-css-meta-item {
color: #94a3b8;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 5px;
}
.travel-checklist-css-download-resource {
width: 100%;
padding: 12px;
background: #3b82f6;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
}
.travel-checklist-css-download-resource:hover {
background: #2563eb;
transform: translateY(-2px);
}
/* CTA Section */
.travel-checklist-css-cta-section {
padding: 100px 0;
background: #f1f5f6;
border-top: 1px solid #e2e8f0;
}
.travel-checklist-css-cta-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.travel-checklist-css-cta-title {
font-size: 2.5rem;
font-weight: 800;
color: #ffeb3bd4;
margin-bottom: 20px;
}
.travel-checklist-css-cta-description {
font-size: 1.2rem;
color: #64748b;
margin-bottom: 40px;
line-height: 1.6;
}
.travel-checklist-css-cta-description strong {
color: #3b82f6;
font-weight: 600;
}
.travel-checklist-css-cta-actions {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 60px;
flex-wrap: wrap;
}
.travel-checklist-css-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 35px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.travel-checklist-css-cta-btn.primary {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
}
.travel-checklist-css-cta-btn.secondary {
background: white;
color: #3b82f6;
border: 2px solid #3b82f6;
}
.travel-checklist-css-cta-btn.primary:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
}
.travel-checklist-css-cta-btn.secondary:hover {
background: #3b82f6;
color: white;
transform: translateY(-3px);
}
.travel-checklist-css-seo-content {
background: #f1f5f9;
border-radius: 20px;
padding: 40px;
margin-top: 40px;
}
.travel-checklist-css-seo-title {
font-size: 1.5rem;
font-weight: 700;
color: #009688;
margin-bottom: 20px;
text-align: center;
}
.travel-checklist-css-seo-text {
color: #475569;
line-height: 1.6;
margin-bottom: 30px;
text-align: center;
}
.travel-checklist-css-keywords {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.travel-checklist-css-keyword {
background: white;
color: #475569;
padding: 10px 20px;
border-radius: 25px;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
cursor: pointer;
}
.travel-checklist-css-keyword:hover {
background: #3b82f6;
color: white;
border-color: #3b82f6;
transform: translateY(-2px);
}
/* Animations */
@keyframes travel-checklist-css-float-icon {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-30px) rotate(120deg);
}
66% {
transform: translateY(15px) rotate(240deg);
}
}
@keyframes travel-checklist-css-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes travel-checklist-css-underline {
0%, 100% {
transform: scaleX(1);
}
50% {
transform: scaleX(1.1);
}
}
@keyframes travel-checklist-css-pulse-current {
0%, 100% {
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
}
50% {
box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
}
}
@keyframes travel-checklist-css-timeline-fill {
from { height: 0; }
to { height: 100%; }
}
/* Responsive Design */
@media (max-width: 1200px) {
.travel-checklist-css-hero-visual {
position: relative;
right: auto;
top: auto;
transform: none;
width: 100%;
max-width: 500px;
margin: 40px auto 0;
}
.travel-checklist-css-checklist-preview {
transform: perspective(1000px) rotateY(0deg);
}
}
@media (max-width: 1024px) {
.travel-checklist-css-main-title {
font-size: 3rem;
}
.travel-checklist-css-section-title {
font-size: 2.5rem;
}
.travel-checklist-css-items-grid {
grid-template-columns: 1fr;
}
.travel-checklist-css-timeline-item {
flex-direction: column !important;
align-items: flex-start;
margin-bottom: 40px;
}
.travel-checklist-css-timeline-track {
left: 30px;
}
.travel-checklist-css-timeline-week {
margin-bottom: 20px;
}
.travel-checklist-css-timeline-card {
margin: 0 0 0 60px;
}
}
@media (max-width: 768px) {
.travel-checklist-css-main-title {
font-size: 2.5rem;
}
.travel-checklist-css-section-title {
font-size: 2rem;
}
.travel-checklist-css-cta-title {
font-size: 2rem;
}
.travel-checklist-css-hero-stats {
flex-direction: column;
gap: 30px;
}
.travel-checklist-css-stat-number {
font-size: 2.5rem;
}
.travel-checklist-css-category-tabs {
flex-direction: column;
align-items: center;
}
.travel-checklist-css-category-tab {
width: 100%;
max-width: 300px;
}
.travel-checklist-css-item-card {
flex-direction: column;
gap: 15px;
}
.travel-checklist-css-progress-circles {
flex-direction: column;
gap: 30px;
}
.travel-checklist-css-summary-actions {
flex-direction: column;
align-items: center;
}
.travel-checklist-css-reset-btn,
.travel-checklist-css-print-btn,
.travel-checklist-css-email-btn {
width: 100%;
max-width: 250px;
justify-content: center;
}
.travel-checklist-css-cta-actions {
flex-direction: column;
align-items: center;
}
.travel-checklist-css-cta-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
.travel-checklist-css-container {
padding: 0 20px;
}
.travel-checklist-css-hero-section,
.travel-checklist-css-checklist-section,
.travel-checklist-css-contract-section,
.travel-checklist-css-timeline-section,
.travel-checklist-css-resources-section,
.travel-checklist-css-cta-section {
padding: 80px 0;
}
}
@media (max-width: 480px) {
.travel-checklist-css-main-title {
font-size: 2rem;
}
.travel-checklist-css-section-title {
font-size: 1.7rem;
}
.travel-checklist-css-cta-title {
font-size: 1.8rem;
}
.travel-checklist-css-hero-description,
.travel-checklist-css-section-description {
font-size: 1.1rem;
}
.travel-checklist-css-contract-grid,
.travel-checklist-css-resources-grid,
.travel-checklist-css-timeline-tips {
grid-template-columns: 1fr;
}
.travel-checklist-css-contract-cta,
.travel-checklist-css-tip-card {
flex-direction: column;
text-align: center;
}
.travel-checklist-css-resource-card {
flex-direction: column;
text-align: center;
}
.travel-checklist-css-resource-visual {
margin: 0 auto 20px;
}
.travel-checklist-css-keywords {
flex-direction: column;
align-items: center;
}
.travel-checklist-css-keyword {
width: 100%;
text-align: center;
}
}
/* JavaScript Interactive States */
.travel-checklist-css-checkbox:checked ~ .travel-checklist-css-item-content .travel-checklist-css-item-title {
text-decoration: line-through;
color: #94a3b8;
}
.travel-checklist-css-checkbox:checked ~ .travel-checklist-css-item-content .travel-checklist-css-item-description {
color: #cbd5e1;
}
/* teaching-destinations.css */
.teaching-destinations {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: #2d3748;
line-height: 1.6;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* Enhanced Hero Section */
.teaching-destinations-hero {
position: relative;
min-height: 85vh;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
border-radius: 0 0 40px 40px;
overflow: hidden;
margin-bottom: 80px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 40px;
}
.teaching-destinations-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
}
.teaching-destinations-hero-content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.teaching-destinations-hero-text {
max-width: 650px;
color: white;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.teaching-destinations-hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 25px;
}
.teaching-destinations-title-line {
display: block;
color: white;
}
.teaching-destinations-highlight {
color: #fbbf24;
position: relative;
display: inline-block;
}
.teaching-destinations-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background: rgba(251, 191, 36, 0.3);
z-index: -1;
border-radius: 4px;
}
.teaching-destinations-hero-subtitle {
font-size: 1.3rem;
margin-bottom: 40px;
color: rgba(255, 255, 255, 0.95);
max-width: 600px;
}
.teaching-destinations-keyword {
color: #fbbf24;
font-weight: 600;
}
.teaching-destinations-hero-cta {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.teaching-destinations-btn {
padding: 18px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1.05rem;
}
.teaching-destinations-btn-primary {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}
.teaching-destinations-btn-primary:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 30px rgba(245, 158, 11, 0.5);
}
.teaching-destinations-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.teaching-destinations-btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.teaching-destinations-btn-icon {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.teaching-destinations-btn-primary:hover .teaching-destinations-btn-icon {
transform: translateX(5px);
}
/* Interactive World Map */
.teaching-destinations-world-map {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 500px;
height: 500px;
z-index: 1;
}
.teaching-destinations-map-container {
width: 100%;
height: 100%;
position: relative;
background: rgba(30, 58, 138, 0.3);
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.teaching-destinations-map-region {
position: absolute;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
.teaching-destinations-map-region:hover {
transform: scale(1.1);
z-index: 10;
}
.teaching-destinations-map-asia {
width: 180px;
height: 180px;
background: rgba(239, 68, 68, 0.2);
border: 2px solid rgba(239, 68, 68, 0.4);
top: 20%;
right: 15%;
}
.teaching-destinations-map-europe {
width: 120px;
height: 120px;
background: rgba(59, 130, 246, 0.2);
border: 2px solid rgba(59, 130, 246, 0.4);
top: 30%;
left: 40%;
}
.teaching-destinations-map-middle-east {
width: 100px;
height: 100px;
background: rgba(245, 158, 11, 0.2);
border: 2px solid rgba(245, 158, 11, 0.4);
top: 45%;
left: 55%;
}
.teaching-destinations-map-latin-america {
width: 140px;
height: 140px;
background: rgba(16, 185, 129, 0.2);
border: 2px solid rgba(16, 185, 129, 0.4);
bottom: 25%;
left: 25%;
}
.teaching-destinations-map-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
animation: teaching-destinations-pulse 2s infinite;
}
@keyframes teaching-destinations-pulse {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.3); opacity: 0; }
}
.teaching-destinations-map-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
font-size: 1.1rem;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.teaching-destinations-plane {
position: absolute;
font-size: 1.8rem;
animation: teaching-destinations-fly 8s linear infinite;
z-index: 5;
}
@keyframes teaching-destinations-fly {
0% { transform: translate(-100px, -100px) rotate(0deg); }
100% { transform: translate(600px, 600px) rotate(360deg); }
}
.teaching-destinations-plane-1 {
animation-delay: 0s;
animation-duration: 10s;
}
.teaching-destinations-plane-2 {
animation-delay: 3s;
animation-duration: 12s;
}
.teaching-destinations-plane-3 {
animation-delay: 6s;
animation-duration: 9s;
}
/* Why TEFL Section */
.teaching-destinations-why-section {
background: linear-gradient(to right, #f8fafc, #e2e8f0);
border-radius: 30px;
padding: 60px 50px;
margin-bottom: 80px;
}
.teaching-destinations-why-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.teaching-destinations-section-title {
font-size: 2.5rem;
color: #1e3a8a;
margin-bottom: 20px;
line-height: 1.2;
}
.teaching-destinations-why-description {
font-size: 1.1rem;
color: #4a5568;
margin-bottom: 30px;
}
.teaching-destinations-why-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.teaching-destinations-stat-card {
background: white;
padding: 25px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.teaching-destinations-stat-card:hover {
transform: translateY(-10px);
}
.teaching-destinations-stat-number {
font-size: 2.5rem;
font-weight: 800;
color: #2563eb;
margin-bottom: 10px;
}
.teaching-destinations-stat-label {
color: #4a5568;
font-weight: 600;
}
/* Destinations Showcase */
.teaching-destinations-showcase {
margin-bottom: 100px;
}
.teaching-destinations-section-header {
text-align: center;
margin-bottom: 60px;
}
.teaching-destinations-section-title-large {
font-size: 3rem;
margin-bottom: 15px;
}
.teaching-destinations-section-subtitle {
font-size: 1.2rem;
color: #4a5568;
max-width: 700px;
margin: 0 auto;
}
/* Region Sections */
.teaching-destinations-region-section {
margin-bottom: 100px;
padding: 40px;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.teaching-destinations-region-asia {
background: linear-gradient(135deg, #fef2f2, #03A9F4);
border-left: 6px solid #dc2626;
}
.teaching-destinations-region-europe {
background: linear-gradient(135deg, #eff6ff, #3F51B5);
border-left: 6px solid #2563eb;
}
.teaching-destinations-region-middle-east {
background: linear-gradient(135deg, #fffbeb, #FFC107);
border-left: 6px solid #d97706;
}
.teaching-destinations-region-latin-america {
background: linear-gradient(135deg, #f0fdf4, #607D8B);
border-left: 6px solid #16a34a;
}
.teaching-destinations-region-header {
margin-bottom: 50px;
}
.teaching-destinations-region-title-container {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.teaching-destinations-region-flag {
width: 60px;
height: 40px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.teaching-destinations-flag-asia {
background: linear-gradient(45deg, #ff0000, #ffff00, #ff0000);
}
.teaching-destinations-region-title {
font-size: 2.2rem;
color: #1e3a8a;
margin: 0;
}
.teaching-destinations-region-subtitle {
color: #64748b;
font-size: 1.1rem;
margin-top: 5px;
}
.teaching-destinations-region-summary {
background: rgba(255, 255, 255, 0.7);
padding: 25px;
border-radius: 15px;
font-size: 1.1rem;
line-height: 1.7;
max-width: 800px;
}
/* Country Cards - Creative Layout */
.teaching-destinations-country-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.teaching-destinations-country-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
}
.teaching-destinations-country-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.teaching-destinations-card-header {
padding: 25px 25px 15px;
display: flex;
align-items: center;
gap: 15px;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}
.teaching-destinations-country-flag {
width: 50px;
height: 35px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.teaching-destinations-flag-china {
background: linear-gradient(to bottom, #de2910 33%, #ffde00 33%, #ffde00 66%, #de2910 66%);
}
.teaching-destinations-flag-japan {
background: radial-gradient(circle at center, #bc002d 35%, white 35%);
}
.teaching-destinations-flag-korea {
background: linear-gradient(135deg, #cd2e3a 0%, #0047a0 50%, #cd2e3a 100%);
}
.teaching-destinations-country-title {
flex: 1;
}
.teaching-destinations-country-title h4 {
font-size: 1.5rem;
color: #1e3a8a;
margin: 0 0 5px 0;
}
.teaching-destinations-country-tag {
display: inline-block;
padding: 5px 12px;
background: #dc2626;
color: white;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.teaching-destinations-tag-popular {
background: #2563eb;
}
.teaching-destinations-tag-benefits {
background: #16a34a;
}
.teaching-destinations-card-content {
padding: 25px;
}
.teaching-destinations-country-image {
height: 150px;
border-radius: 12px;
margin-bottom: 20px;
background: linear-gradient(45deg, #6b7280, #9ca3af);
position: relative;
overflow: hidden;
}
.teaching-destinations-country-image::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.teaching-destinations-country-description {
color: #4a5568;
margin-bottom: 25px;
line-height: 1.7;
}
.teaching-destinations-country-info {
background: #f8fafc;
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
}
.teaching-destinations-info-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
.teaching-destinations-info-item:last-child {
border-bottom: none;
}
.teaching-destinations-info-label {
color: #64748b;
font-weight: 500;
}
.teaching-destinations-info-value {
color: #1e3a8a;
font-weight: 600;
}
.teaching-destinations-country-highlights {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.teaching-destinations-highlight-tag {
padding: 8px 15px;
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
}
/* Europe Grid */
.teaching-destinations-europe-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.teaching-destinations-europe-card {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
text-align: center;
}
.teaching-destinations-europe-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.teaching-destinations-europe-flag {
width: 60px;
height: 40px;
margin: 0 auto 20px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.teaching-destinations-flag-spain {
background: linear-gradient(to bottom, #aa151b 25%, #f1bf00 25%, #f1bf00 75%, #aa151b 75%);
}
.teaching-destinations-flag-italy {
background: linear-gradient(to right, #009246 33%, white 33%, white 66%, #ce2b37 66%);
}
.teaching-destinations-flag-france {
background: linear-gradient(to right, #002654 33%, white 33%, white 66%, #ce1126 66%);
}
.teaching-destinations-flag-czech {
background: linear-gradient(to bottom, #d7141a 50%, white 50%);
}
.teaching-destinations-flag-germany {
background: linear-gradient(#000000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%);
}
.teaching-destinations-flag-poland {
background: linear-gradient(#ffffff 50%, #dc143c 50%);
}
.teaching-destinations-flag-portugal {
background: linear-gradient(to right, #006600 40%, #ff0000 40%);
}
.teaching-destinations-flag-hungary {
background: linear-gradient(#ce2939 33%, #ffffff 33%, #ffffff 66%, #477050 66%);
}
.teaching-destinations-flag-greece {
background: linear-gradient(#0d5eaf 50%, #ffffff 50%);
}
.teaching-destinations-flag-netherlands {
background: linear-gradient(#ae1c28 33%, #ffffff 33%, #ffffff 66%, #21468b 66%);
}
.teaching-destinations-europe-card h4 {
color: #1e3a8a;
margin-bottom: 15px;
font-size: 1.3rem;
}
.teaching-destinations-europe-card p {
color: #64748b;
margin-bottom: 20px;
line-height: 1.6;
}
.teaching-destinations-europe-details {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 2px solid #e2e8f0;
color: #4a5568;
font-weight: 500;
}
.teaching-destinations-europe-demand {
background: #10b981;
color: white;
padding: 5px 12px;
border-radius: 15px;
font-size: 0.85rem;
}
/* Middle East Showcase */
.teaching-destinations-middle-east-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.teaching-destinations-middle-east-card {
background: linear-gradient(135deg, #1e293b, #334155);
color: white;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
}
.teaching-destinations-middle-east-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
.teaching-destinations-middle-east-content {
padding: 35px;
position: relative;
}
.teaching-destinations-middle-east-flag {
width: 70px;
height: 45px;
border-radius: 8px;
margin-bottom: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.teaching-destinations-flag-saudi {
background: linear-gradient(to bottom, #006c35 0%, white 50%, #006c35 100%);
}
.teaching-destinations-flag-uae {
background: linear-gradient(to right, #ff0000 25%, transparent 25%),
linear-gradient(#00732f 33%, #ffffff 33%, #ffffff 66%, #000000 66%);
}
.teaching-destinations-flag-qatar {
background: linear-gradient(to right, #8a1538 70%, #ffffff 70%);
}
.teaching-destinations-flag-oman {
background: linear-gradient(#ffffff 33%, #d40000 33%, #d40000 66%, #00732f 66%);
}
.teaching-destinations-flag-kuwait {
background: linear-gradient(#007a3d 33%, #ffffff 33%, #ffffff 66%, #ce1126 66%);
}
.teaching-destinations-flag-bahrain {
background: linear-gradient(to right, #ce1126 70%, #ffffff 70%);
}
.teaching-destinations-middle-east-card h4 {
font-size: 1.8rem;
margin-bottom: 15px;
color: #fbbf24;
}
.teaching-destinations-middle-east-salary {
font-size: 1.8rem;
font-weight: 800;
color: #10b981;
margin-bottom: 20px;
}
.teaching-destinations-middle-east-description {
color: #cbd5e1;
line-height: 1.7;
margin-bottom: 30px;
font-size: 1.05rem;
}
.teaching-destinations-middle-east-benefits {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.teaching-destinations-middle-east-benefits span {
background: rgba(255, 255, 255, 0.1);
padding: 10px 18px;
border-radius: 20px;
font-size: 0.95rem;
backdrop-filter: blur(10px);
}
/* Latin America Grid */
.teaching-destinations-latin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.teaching-destinations-latin-card {
background: white;
border-radius: 20px;
padding: 25px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.teaching-destinations-latin-card:hover {
transform: translateY(-10px) rotate(1deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.teaching-destinations-latin-flag {
width: 50px;
height: 35px;
border-radius: 6px;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.teaching-destinations-flag-mexico {
background: linear-gradient(to right, #006847 33%, white 33%, white 66%, #ce1126 66%);
}
.teaching-destinations-flag-brazil {
background: radial-gradient(circle at center, #009c3b 40%, #ffdf00 40%, #ffdf00 60%, #002776 60%);
}
.teaching-destinations-flag-argentina {
background: linear-gradient(to bottom, #74acdf 33%, white 33%, white 66%, #74acdf 66%);
}
.teaching-destinations-flag-colombia {
background: linear-gradient(to bottom, #fcd116 50%, #003893 50%);
}
.teaching-destinations-latin-info {
flex: 1;
}
.teaching-destinations-latin-card h4 {
color: #1e3a8a;
margin-bottom: 10px;
font-size: 1.3rem;
}
.teaching-destinations-latin-card p {
color: #64748b;
font-size: 0.95rem;
margin-bottom: 15px;
line-height: 1.5;
}
.teaching-destinations-latin-salary {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-weight: 600;
font-size: 0.95rem;
display: inline-block;
}
/* Certification CTA */
.teaching-destinations-cert-cta {
background: linear-gradient(135deg, #1e3a8a, #3730a3);
border-radius: 40px;
padding: 80px 60px;
margin-bottom: 80px;
color: white;
}
.teaching-destinations-cert-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.teaching-destinations-cert-text .teaching-destinations-section-title {
color: white;
font-size: 2.8rem;
margin-bottom: 25px;
}
.teaching-destinations-cert-description {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 35px;
line-height: 1.7;
}
.teaching-destinations-cert-features {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 40px;
}
.teaching-destinations-cert-feature {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.1rem;
color: white;
}
.teaching-destinations-cert-icon {
font-size: 1.2rem;
}
.teaching-destinations-btn-cta {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
padding: 22px 45px;
font-size: 1.2rem;
box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4);
}
.teaching-destinations-btn-cta:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 40px rgba(245, 158, 11, 0.5);
}
.teaching-destinations-cert-visual {
display: flex;
justify-content: center;
align-items: center;
}
.teaching-destinations-cert-badge {
width: 250px;
height: 250px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #1e3a8a;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
animation: teaching-destinations-float 3s ease-in-out infinite;
}
@keyframes teaching-destinations-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.teaching-destinations-badge-text {
font-size: 3.5rem;
font-weight: 900;
letter-spacing: 3px;
}
.teaching-destinations-badge-subtext {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 2px;
margin-top: 5px;
}
.teaching-destinations-badge-globe {
font-size: 3rem;
margin-top: 15px;
}
/* FAQ Section */
.teaching-destinations-faq {
background: #f8fafc;
border-radius: 30px;
padding: 60px 50px;
margin-bottom: 80px;
}
.teaching-destinations-faq .teaching-destinations-section-title {
text-align: center;
margin-bottom: 50px;
}
.teaching-destinations-faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.teaching-destinations-faq-item {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.teaching-destinations-faq-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.teaching-destinations-faq-item h4 {
color: #1e3a8a;
font-size: 1.3rem;
margin-bottom: 15px;
line-height: 1.4;
}
.teaching-destinations-faq-item p {
color: #4a5568;
line-height: 1.6;
}
/* Responsive Design */
@media (max-width: 1200px) {
.teaching-destinations-world-map {
position: relative;
right: auto;
top: auto;
transform: none;
width: 100%;
height: 400px;
margin-top: 40px;
order: 2;
}
.teaching-destinations-hero {
flex-direction: column;
padding: 40px 20px;
min-height: auto;
}
.teaching-destinations-hero-text {
max-width: 100%;
text-align: center;
}
.teaching-destinations-hero-title {
font-size: 2.8rem;
}
.teaching-destinations-why-content {
grid-template-columns: 1fr;
gap: 40px;
}
.teaching-destinations-cert-content {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
}
@media (max-width: 768px) {
.teaching-destinations-hero-title {
font-size: 2.2rem;
}
.teaching-destinations-section-title-large {
font-size: 2.2rem;
}
.teaching-destinations-section-title {
font-size: 2rem;
}
.teaching-destinations-hero-cta {
flex-direction: column;
align-items: center;
}
.teaching-destinations-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
.teaching-destinations-why-stats {
grid-template-columns: 1fr;
gap: 15px;
}
.teaching-destinations-region-section {
padding: 25px;
}
.teaching-destinations-country-cards {
grid-template-columns: 1fr;
}
.teaching-destinations-middle-east-showcase {
grid-template-columns: 1fr;
}
.teaching-destinations-europe-grid,
.teaching-destinations-latin-grid {
grid-template-columns: 1fr;
}
.teaching-destinations-cert-cta {
padding: 40px 25px;
}
.teaching-destinations-faq-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.teaching-destinations-hero-title {
font-size: 1.8rem;
}
.teaching-destinations-section-title {
font-size: 1.6rem;
}
.teaching-destinations-region-title {
font-size: 1.6rem;
}
.teaching-destinations-region-title-container {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.teaching-destinations-cert-badge {
width: 200px;
height: 200px;
}
.teaching-destinations-badge-text {
font-size: 2.5rem;
}
}
/* tefl-teaching-asia.css */
.tefl-teaching-asia {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: #2d3748;
line-height: 1.6;
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}
.tefl-teaching-asia-container {
max-width: 1200px;
margin: 0 auto;
}
/* Hero Section */
.tefl-teaching-asia-hero {
background: linear-gradient(135deg, #03A9F4 0%, #2563eb 100%);
border-radius: 0 0 30px 30px;
padding: 80px 40px;
color: white;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
overflow: hidden;
margin-bottom: 60px;
}
.tefl-teaching-asia-hero-content {
position: relative;
z-index: 2;
}
.tefl-teaching-asia-hero-title {
font-size: 3.2rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 25px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
color: white;
}
.tefl-teaching-asia-hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 40px;
max-width: 600px;
}
.tefl-teaching-asia-keyword {
color: #fbbf24;
font-weight: 600;
}
.tefl-teaching-asia-btn {
display: inline-block;
padding: 16px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1.05rem;
}
.tefl-teaching-asia-btn-primary {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.tefl-teaching-asia-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(245, 158, 11, 0.5);
}
.hero-image-business-new {
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.hero-image--business-new-wrapper {
flex: 1;
text-align: center;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.hero-image-business-new {
max-width: 90%;
}
}
/* Animated Map Visualization */
.tefl-teaching-asia-hero-visual {
position: relative;
height: 400px;
background: rgba(30, 58, 138, 0.3);
border-radius: 20px;
border: 2px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.tefl-teaching-asia-pulse-ring {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
border: 2px solid #FF5722;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: tefl-teaching-asia-pulse 3s infinite;
}
.tefl-teaching-asia-pulse-delay-1 {
animation-delay: 1s;
width: 320px;
height: 320px;
}
.tefl-teaching-asia-pulse-delay-2 {
animation-delay: 2s;
width: 340px;
height: 340px;
}
@keyframes tefl-teaching-asia-pulse {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}
.tefl-teaching-asia-map-marker {
position: absolute;
cursor: pointer;
transition: all 0.3s ease;
}
.tefl-teaching-asia-map-marker:hover {
transform: scale(1.2);
z-index: 10;
}
.tefl-teaching-asia-china-marker { top: 35%; left: 65%; }
.tefl-teaching-asia-japan-marker { top: 30%; left: 80%; }
.tefl-teaching-asia-korea-marker { top: 33%; left: 75%; }
.tefl-teaching-asia-vietnam-marker { top: 50%; left: 70%; }
.tefl-teaching-asia-marker-dot {
width: 20px;
height: 20px;
background: #ef4444;
border-radius: 50%;
margin: 0 auto 8px;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.7);
transition: all 0.3s ease;
}
.tefl-teaching-asia-map-marker:hover .tefl-teaching-asia-marker-dot {
background: #fbbf24;
transform: scale(1.3);
}
.tefl-teaching-asia-marker-label {
color: white;
font-weight: 600;
font-size: 0.9rem;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.6);
padding: 5px 10px;
border-radius: 15px;
white-space: nowrap;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
.tefl-teaching-asia-map-marker:hover .tefl-teaching-asia-marker-label {
opacity: 1;
transform: translateY(0);
}
/* Intro & Stats Section */
.tefl-teaching-asia-intro {
background: #f8fafc;
border-radius: 25px;
padding: 60px 40px;
margin-bottom: 60px;
}
.tefl-teaching-asia-section-title {
font-size: 2.4rem;
color: #1e3a8a;
margin-bottom: 20px;
line-height: 1.2;
}
.tefl-teaching-asia-highlight {
color: #dc2626;
font-weight: 700;
}
.tefl-teaching-asia-intro p {
font-size: 1.1rem;
color: #4a5568;
max-width: 900px;
margin-bottom: 40px;
line-height: 1.7;
}
.tefl-teaching-asia-stats {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 30px;
margin-top: 50px;
}
.tefl-teaching-asia-stat {
text-align: center;
flex: 1;
min-width: 200px;
}
.tefl-teaching-asia-stat-number {
font-size: 3rem;
font-weight: 800;
color: #2563eb;
margin-bottom: 10px;
line-height: 1;
}
.tefl-teaching-asia-stat-label {
color: #4a5568;
font-weight: 600;
font-size: 1.1rem;
}
/* Destinations Grid */
.tefl-teaching-asia-destinations {
margin-bottom: 80px;
}
.tefl-teaching-asia-section-subtitle {
font-size: 1.2rem;
color: #4a5568;
max-width: 800px;
margin-bottom: 50px;
}
.tefl-teaching-asia-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.tefl-teaching-asia-country-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
border: 1px solid #e2e8f0;
}
.tefl-teaching-asia-card-dark {
background: linear-gradient(135deg, #2196F3, #334155);
color: white;
}
.tefl-teaching-asia-card-dark .tefl-teaching-asia-country-desc,
.tefl-teaching-asia-card-dark .tefl-teaching-asia-detail-label,
.tefl-teaching-asia-card-dark .tefl-teaching-asia-key-info h4,
.tefl-teaching-asia-card-dark .tefl-teaching-asia-key-info p {
color: #e2e8f0;
}
.tefl-teaching-asia-country-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.tefl-teaching-asia-card-header {
padding: 25px 25px 15px;
position: relative;
}
.tefl-teaching-asia-flag {
width: 50px;
height: 35px;
border-radius: 6px;
margin-bottom: 15px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
background-size: cover;
}
.tefl-teaching-asia-flag-china {
background: linear-gradient(to bottom, #de2910 33%, #ffde00 33%, #ffde00 66%, #de2910 66%);
}
.tefl-teaching-asia-flag-korea {
background: linear-gradient(135deg, #cd2e3a 0%, #0047a0 50%, #cd2e3a 100%);
}
.tefl-teaching-asia-flag-japan {
background: radial-gradient(circle at center, #bc002d 35%, white 35%);
}
.tefl-teaching-asia-flag-vietnam {
background: linear-gradient(to bottom, #da251d 33%, #ff0 33%, #ff0 66%, #da251d 66%);
}
.tefl-teaching-asia-flag-thailand {
background: linear-gradient(to bottom, #a5191e 33%, white 33%, white 66%, #a5191e 66%);
}
.tefl-teaching-asia-flag-taiwan {
background: linear-gradient(to bottom, #fe0000 33%, #000095 33%, #000095 66%, #fe0000 66%);
}
.tefl-teaching-asia-flag-cambodia {
background: linear-gradient(to bottom, #032ea1 33%, #e00025 33%, #e00025 66%, #032ea1 66%);
}
.tefl-teaching-asia-flag-indonesia {
background: linear-gradient(to bottom, #ff0000 50%, white 50%);
}
.tefl-teaching-asia-card-header h3 {
font-size: 1.6rem;
color: #1e3a8a;
margin-bottom: 10px;
}
.tefl-teaching-asia-card-dark .tefl-teaching-asia-card-header h3 {
color: white;
}
.tefl-teaching-asia-demand-badge {
display: inline-block;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-top: 5px;
}
.tefl-teaching-asia-demand-high {
background: #dc2626;
color: white;
}
.tefl-teaching-asia-demand-medium {
background: #f59e0b;
color: white;
}
.tefl-teaching-asia-card-body {
padding: 0 25px 25px;
}
.tefl-teaching-asia-country-desc {
color: #4a5568;
margin-bottom: 25px;
font-size: 1rem;
line-height: 1.6;
}
.tefl-teaching-asia-country-details {
background: #f8fafc;
padding: 20px;
border-radius: 12px;
margin-bottom: 25px;
}
.tefl-teaching-asia-card-dark .tefl-teaching-asia-country-details {
background: rgba(255, 255, 255, 0.1);
}
.tefl-teaching-asia-detail {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
.tefl-teaching-asia-card-dark .tefl-teaching-asia-detail {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.tefl-teaching-asia-detail:last-child {
border-bottom: none;
}
.tefl-teaching-asia-detail-label {
color: #64748b;
font-weight: 500;
}
.tefl-teaching-asia-detail-value {
color: #1e3a8a;
font-weight: 600;
text-align: right;
}
.tefl-teaching-asia-card-dark .tefl-teaching-asia-detail-value {
color: #fbbf24;
}
.tefl-teaching-asia-benefit-yes {
color: #059669 !important;
}
.tefl-teaching-asia-benefit-no {
color: #FF9800 !important;
}
.tefl-teaching-asia-key-info {
border-top: 2px solid #e2e8f0;
padding-top: 20px;
}
.tefl-teaching-asia-card-dark .tefl-teaching-asia-key-info {
border-top-color: rgba(255, 255, 255, 0.2);
}
.tefl-teaching-asia-key-info h4 {
color: #1e3a8a;
font-size: 1.1rem;
margin-bottom: 10px;
}
.tefl-teaching-asia-key-info p {
color: #4a5568;
font-size: 0.95rem;
line-height: 1.6;
}
/* Mini Grid for Additional Countries */
.tefl-teaching-asia-mini-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
}
.tefl-teaching-asia-mini-card {
background: white;
border-radius: 15px;
padding: 25px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
}
.tefl-teaching-asia-mini-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.tefl-teaching-asia-mini-flag {
width: 40px;
height: 25px;
margin: 0 auto 15px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.tefl-teaching-asia-mini-card h4 {
color: #1e3a8a;
margin-bottom: 10px;
font-size: 1.2rem;
}
.tefl-teaching-asia-mini-card p {
color: #4a5568;
font-size: 0.9rem;
margin: 5px 0;
}
/* Requirements Section */
.tefl-teaching-asia-requirements {
background: linear-gradient(135deg, #fef2f2, #ffeb3b63);
border-radius: 30px;
padding: 70px 40px;
margin-bottom: 80px;
}
.tefl-teaching-asia-req-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.tefl-teaching-asia-req-list {
margin-top: 40px;
}
.tefl-teaching-asia-req-item {
display: flex;
gap: 20px;
margin-bottom: 30px;
align-items: flex-start;
}
.tefl-teaching-asia-req-icon {
font-size: 2rem;
flex-shrink: 0;
}
.tefl-teaching-asia-req-item h4 {
color: #1e3a8a;
margin-bottom: 8px;
font-size: 1.2rem;
}
.tefl-teaching-asia-req-item p {
color: #4a5568;
font-size: 1rem;
line-height: 1.6;
}
.tefl-teaching-asia-visual-card {
background: white;
border-radius: 20px;
padding: 35px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.tefl-teaching-asia-visual-card h3 {
color: #1e3a8a;
font-size: 1.5rem;
margin-bottom: 25px;
text-align: center;
}
.tefl-teaching-asia-benefit-list {
display: grid;
gap: 15px;
}
.tefl-teaching-asia-benefit-item {
padding: 15px 20px;
border-radius: 12px;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
}
.tefl-teaching-asia-benefit-yes {
background: #d1fae5;
color: #065f46;
border: 2px solid #10b981;
}
.tefl-teaching-asia-benefit-sometimes {
background: #fef3c7;
color: #92400e;
border: 2px solid #f59e0b;
}
.tefl-teaching-asia-benefit-item:hover {
transform: scale(1.03);
}
.tefl-teaching-asia-visual-note {
color: #6b7280;
font-size: 0.9rem;
font-style: italic;
margin-top: 25px;
text-align: center;
}
/* CTA Section */
.tefl-teaching-asia-cta {
background: linear-gradient(135deg, #2196F3, #00bcd4d9);
border-radius: 30px;
padding: 80px 40px;
color: white;
margin-bottom: 60px;
position: relative;
overflow: hidden;
}
.tefl-teaching-asia-cta-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.tefl-teaching-asia-cta-title {
font-size: 2.5rem;
margin-bottom: 20px;
line-height: 1.2;
color: white;
}
.tefl-teaching-asia-cta-text {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 35px;
line-height: 1.7;
}
.tefl-teaching-asia-btn-large {
padding: 20px 45px;
font-size: 1.2rem;
}
.tefl-teaching-asia-cta-note {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
margin-top: 20px;
font-style: italic;
}
.tefl-teaching-asia-cta-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 250px;
}
.tefl-teaching-asia-cta-glow {
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: tefl-teaching-asia-glow 3s ease-in-out infinite alternate;
}
@keyframes tefl-teaching-asia-glow {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.2); opacity: 0.9; }
}
.tefl-teaching-asia-cta-icon {
font-size: 5rem;
position: relative;
z-index: 2;
animation: tefl-teaching-asia-float 3s ease-in-out infinite;
}
@keyframes tefl-teaching-asia-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* Responsive Design */
@media (max-width: 1024px) {
.tefl-teaching-asia-hero {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
padding: 60px 30px;
}
.tefl-teaching-asia-hero-subtitle {
margin-left: auto;
margin-right: auto;
}
.tefl-teaching-asia-req-content,
.tefl-teaching-asia-cta-container {
grid-template-columns: 1fr;
text-align: center;
}
.tefl-teaching-asia-hero-visual {
height: 350px;
order: -1;
}
}
@media (max-width: 768px) {
.tefl-teaching-asia-hero-title {
font-size: 2.5rem;
}
.tefl-teaching-asia-section-title {
font-size: 2rem;
}
.tefl-teaching-asia-grid {
grid-template-columns: 1fr;
}
.tefl-teaching-asia-stats {
flex-direction: column;
align-items: center;
gap: 30px;
}
.tefl-teaching-asia-stat {
min-width: 100%;
}
.tefl-teaching-asia-cta-title {
font-size: 2rem;
}
.tefl-teaching-asia-requirements,
.tefl-teaching-asia-cta {
padding: 50px 25px;
}
}
@media (max-width: 480px) {
.tefl-teaching-asia-hero-title {
font-size: 2rem;
}
.tefl-teaching-asia-hero-subtitle {
font-size: 1.1rem;
}
.tefl-teaching-asia-section-title {
font-size: 1.7rem;
}
.tefl-teaching-asia-btn {
width: 100%;
text-align: center;
}
.tefl-teaching-asia-mini-grid {
grid-template-columns: 1fr;
}
}
/* tefl-teaching-middle-east.css */
.tefl-teaching-middle-east {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: #2d3748;
line-height: 1.6;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.tefl-middle-east-container {
max-width: 1200px;
margin: 0 auto;
}
/* Hero Section with Desert Theme */
.tefl-middle-east-hero {
background: linear-gradient(135deg, #4CAF50 0%, #03A9F4 50%, #3F51B5 100%);
border-radius: 0 0 40px 40px;
padding: 80px 0;
position: relative;
overflow: hidden;
min-height: 85vh;
display: flex;
align-items: center;
}
.tefl-middle-east-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
}
.tefl-middle-east-hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.tefl-middle-east-hero-text {
color: white;
}
.tefl-middle-east-hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 25px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
color: white;
}
.tefl-middle-east-title-line {
display: block;
}
.tefl-middle-east-title-highlight {
color: #fbbf24;
position: relative;
display: inline-block;
}
.tefl-middle-east-title-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background: rgba(251, 191, 36, 0.3);
z-index: -1;
border-radius: 4px;
}
.tefl-middle-east-hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 40px;
max-width: 600px;
}
.tefl-middle-east-keyword {
color: #fbbf24;
font-weight: 600;
}
.tefl-middle-east-hero-cta {
display: flex;
gap: 20px;
}
/* Buttons */
.tefl-middle-east-btn {
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1.05rem;
}
.tefl-middle-east-btn-primary {
background: linear-gradient(135deg, #03A9F4, #2196F3);
color: white;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.tefl-middle-east-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(245, 158, 11, 0.5);
}
.tefl-middle-east-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.tefl-middle-east-btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.tefl-middle-east-btn-large {
padding: 20px 45px;
font-size: 1.2rem;
}
.tefl-middle-east-btn-icon {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.tefl-middle-east-btn-primary:hover .tefl-middle-east-btn-icon {
transform: translateX(5px);
}
/* Hero Visual - Desert Animation */
.tefl-middle-east-hero-visual {
position: relative;
height: 400px;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(to bottom, #fef3c7, #fde68a);
}
.tefl-middle-east-dune {
position: absolute;
bottom: 0;
background: #d97706;
border-radius: 50% 50% 0 0;
animation: tefl-middle-east-dune-wave 8s ease-in-out infinite;
}
.tefl-middle-east-dune-1 {
width: 300px;
height: 120px;
left: 0;
animation-delay: 0s;
}
.tefl-middle-east-dune-2 {
width: 250px;
height: 100px;
left: 200px;
animation-delay: 2s;
background: #f59e0b;
}
.tefl-middle-east-dune-3 {
width: 280px;
height: 110px;
left: 400px;
animation-delay: 4s;
background: #b45309;
}
@keyframes tefl-middle-east-dune-wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.tefl-middle-east-sun {
position: absolute;
top: 50px;
right: 50px;
width: 80px;
height: 80px;
background: radial-gradient(circle, #fbbf24, #f59e0b);
border-radius: 50%;
box-shadow: 0 0 40px rgba(251, 191, 36, 0.8);
animation: tefl-middle-east-sun-pulse 4s ease-in-out infinite;
}
@keyframes tefl-middle-east-sun-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.tefl-middle-east-cityscape {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 150px;
background: linear-gradient(to top, #1e293b 0%, transparent 100%);
clip-path: polygon(0% 100%, 10% 80%, 20% 90%, 30% 70%, 40% 100%, 50% 60%, 60% 90%, 70% 50%, 80% 100%, 90% 40%, 100% 100%);
}
.tefl-middle-east-benefit-icon {
position: absolute;
font-size: 1.8rem;
animation: tefl-middle-east-float 6s ease-in-out infinite;
cursor: pointer;
z-index: 10;
}
.tefl-middle-east-benefit-icon::after {
content: attr(data-benefit);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
}
.tefl-middle-east-benefit-icon:hover::after {
opacity: 1;
}
.tefl-middle-east-benefit-1 {
top: 100px;
left: 100px;
animation-delay: 0s;
}
.tefl-middle-east-benefit-2 {
top: 200px;
left: 300px;
animation-delay: 2s;
}
.tefl-middle-east-benefit-3 {
top: 150px;
left: 500px;
animation-delay: 4s;
}
@keyframes tefl-middle-east-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}
/* Why Middle East Section */
.tefl-middle-east-why {
background: linear-gradient(135deg, #e0e5e7, #03A9F4);
border-radius: 30px;
padding: 80px 0;
margin: 60px 0;
}
.tefl-middle-east-why-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
align-items: start;
}
.tefl-middle-east-section-title {
font-size: 2.5rem;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.2;
}
.tefl-middle-east-why p {
font-size: 1.1rem;
color: #4b5563;
margin-bottom: 30px;
line-height: 1.7;
}
.tefl-middle-east-feature-list {
display: flex;
flex-direction: column;
gap: 25px;
margin-top: 40px;
}
.tefl-middle-east-feature {
display: flex;
gap: 20px;
align-items: flex-start;
}
.tefl-middle-east-feature-icon {
font-size: 2rem;
flex-shrink: 0;
}
.tefl-middle-east-feature-content h4 {
color: #1e293b;
margin-bottom: 8px;
font-size: 1.2rem;
}
.tefl-middle-east-feature-content p {
color: #6b7280;
font-size: 1rem;
margin-bottom: 0;
}
.tefl-middle-east-why-stats {
display: flex;
flex-direction: column;
gap: 20px;
}
.tefl-middle-east-stat-card {
background: white;
padding: 25px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.tefl-middle-east-stat-card:hover {
transform: translateY(-10px);
}
.tefl-middle-east-stat-number {
font-size: 2.5rem;
font-weight: 800;
color: #d97706;
margin-bottom: 10px;
}
.tefl-middle-east-stat-label {
color: #4b5563;
font-weight: 600;
font-size: 1.1rem;
}
/* Destinations Section */
.tefl-middle-east-destinations {
margin: 80px 0;
}
.tefl-middle-east-section-header {
text-align: center;
margin-bottom: 60px;
}
.tefl-middle-east-section-subtitle {
font-size: 1.2rem;
color: #6b7280;
max-width: 800px;
margin: 0 auto;
}
.tefl-middle-east-region-section {
margin-bottom: 80px;
}
.tefl-middle-east-region-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #f59e0b;
}
.tefl-middle-east-region-icon {
font-size: 2.5rem;
}
.tefl-middle-east-region-title {
font-size: 2rem;
color: #1e293b;
margin: 0;
}
.tefl-middle-east-region-subtitle {
color: #6b7280;
font-size: 1.1rem;
margin-top: 5px;
}
/* Luxury Grid */
.tefl-middle-east-luxury-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.tefl-middle-east-luxury-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
border: 2px solid #fde68a;
}
.tefl-middle-east-luxury-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border-color: #f59e0b;
}
.tefl-middle-east-luxury-card-header {
padding: 30px 30px 20px;
background: linear-gradient(135deg, #1e293b, #334155);
color: white;
display: flex;
align-items: center;
gap: 20px;
}
.tefl-middle-east-flag {
width: 60px;
height: 40px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.tefl-middle-east-flag-uae {
background: linear-gradient(to bottom, #ff0000 33%, #008000 33%, #008000 66%, #000000 66%);
}
.tefl-middle-east-flag-saudi {
background: linear-gradient(to bottom, #006400 0%, white 50%, #006400 100%);
}
.tefl-middle-east-flag-kuwait {
background: linear-gradient(to bottom, #007a3d 33%, white 33%, white 66%, #000000 66%);
}
.tefl-middle-east-flag-oman {
background: linear-gradient(to bottom, #db161b 0%, white 33%, white 66%, #009639 66%);
}
.tefl-middle-east-flag-bahrain {
background: linear-gradient(to right, #ce1126 0%, white 50%, #ce1126 50%);
}
.tefl-middle-east-flag-egypt {
background: linear-gradient(to bottom, #ce1126 33%, white 33%, white 66%, #000000 66%);
}
.tefl-middle-east-flag-turkey {
background: linear-gradient(to bottom, #e30a17 0%, white 50%, #e30a17 50%);
}
.tefl-middle-east-flag-jordan {
background: linear-gradient(to bottom, #000000 33%, white 33%, white 66%, #007a3d 66%);
}
.tefl-middle-east-country-title {
flex: 1;
}
.tefl-middle-east-country-title h4 {
font-size: 1.8rem;
margin: 0 0 10px 0;
color: white;
}
.tefl-middle-east-country-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.tefl-middle-east-tag {
padding: 6px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.tefl-middle-east-tag-luxury {
background: #f59e0b;
color: #1e293b;
}
.tefl-middle-east-tag-high-demand {
background: #10b981;
color: white;
}
.tefl-middle-east-luxury-card-body {
padding: 30px;
}
.tefl-middle-east-country-image {
height: 200px;
border-radius: 12px;
margin-bottom: 25px;
background: linear-gradient(45deg, #6b7280, #9ca3af);
position: relative;
overflow: hidden;
}
.tefl-middle-east-country-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
}
.tefl-middle-east-image-uae::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-middle-east-image-saudi::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-middle-east-detail-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 25px;
}
.tefl-middle-east-detail {
background: #f8fafc;
padding: 15px;
border-radius: 10px;
}
.tefl-middle-east-detail-label {
display: block;
color: #6b7280;
font-size: 0.9rem;
margin-bottom: 5px;
}
.tefl-middle-east-detail-value {
display: block;
color: #1e293b;
font-weight: 600;
font-size: 1.1rem;
}
.tefl-middle-east-benefits {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 25px;
}
.tefl-middle-east-benefit {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
}
.tefl-middle-east-benefit-included {
background: #d1fae5;
color: #065f46;
}
.tefl-middle-east-benefit-icon {
font-weight: bold;
}
.tefl-middle-east-country-description {
color: #4b5563;
line-height: 1.7;
margin: 0;
}
/* Established Markets Grid */
.tefl-middle-east-established-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.tefl-middle-east-established-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.tefl-middle-east-established-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.tefl-middle-east-established-card-header {
padding: 25px 25px 15px;
display: flex;
align-items: center;
gap: 15px;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}
.tefl-middle-east-established-card-header h4 {
font-size: 1.5rem;
color: #1e293b;
margin: 0;
}
.tefl-middle-east-established-card-body {
padding: 25px;
}
.tefl-middle-east-salary-display {
text-align: center;
margin-bottom: 20px;
padding: 15px;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-radius: 10px;
}
.tefl-middle-east-salary-amount {
font-size: 1.8rem;
font-weight: 800;
color: #b45309;
}
.tefl-middle-east-salary-period {
color: #6b7280;
font-size: 1rem;
}
.tefl-middle-east-established-details {
background: #f8fafc;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.tefl-middle-east-established-detail {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e5e7eb;
}
.tefl-middle-east-established-detail:last-child {
border-bottom: none;
}
.tefl-middle-east-established-label {
color: #6b7280;
font-weight: 500;
}
.tefl-middle-east-established-value {
color: #1e293b;
font-weight: 600;
}
.tefl-middle-east-established-description {
color: #6b7280;
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
/* Cultural Grid */
.tefl-middle-east-cultural-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.tefl-middle-east-cultural-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.tefl-middle-east-cultural-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.tefl-middle-east-cultural-card-header {
padding: 25px 25px 15px;
display: flex;
align-items: center;
gap: 15px;
background: #f8fafc;
}
.tefl-middle-east-cultural-card-header h4 {
font-size: 1.5rem;
color: #1e293b;
margin: 0;
}
.tefl-middle-east-cultural-card-body {
padding: 0 25px 25px;
}
.tefl-middle-east-cultural-image {
height: 150px;
border-radius: 10px;
margin-bottom: 20px;
background: linear-gradient(45deg, #6b7280, #9ca3af);
position: relative;
overflow: hidden;
}
.tefl-middle-east-cultural-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
}
.tefl-middle-east-image-egypt::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-middle-east-image-turkey::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-middle-east-image-jordan::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-middle-east-cultural-content {
text-align: center;
}
.tefl-middle-east-cultural-description {
color: #6b7280;
line-height: 1.6;
margin-bottom: 20px;
}
.tefl-middle-east-cultural-details {
background: #f8fafc;
padding: 15px;
border-radius: 10px;
}
.tefl-middle-east-cultural-detail {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e5e7eb;
}
.tefl-middle-east-cultural-detail:last-child {
border-bottom: none;
}
.tefl-middle-east-cultural-detail span {
color: #6b7280;
}
.tefl-middle-east-cultural-detail strong {
color: #1e293b;
}
/* Requirements Section */
.tefl-middle-east-requirements {
background: linear-gradient(135deg, #2196F3, #334155);
border-radius: 30px;
padding: 80px 0;
margin: 60px 0;
color: white;
}
.tefl-middle-east-req-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.tefl-middle-east-certificate {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
animation: tefl-middle-east-certificate-float 4s ease-in-out infinite;
}
@keyframes tefl-middle-east-certificate-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(2deg); }
}
.tefl-middle-east-certificate-title {
font-size: 4rem;
font-weight: 900;
color: #1e293b;
letter-spacing: 5px;
}
.tefl-middle-east-certificate-subtitle {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
letter-spacing: 3px;
margin-top: 5px;
}
.tefl-middle-east-certificate-seal {
position: absolute;
bottom: 207px;
right: 102px;
width: 80px;
height: 80px;
background: #dc2626;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid white;
}
.tefl-middle-east-seal-text {
color: white;
font-size: 0.7rem;
font-weight: 700;
text-align: center;
line-height: 1.2;
}
.tefl-middle-east-req-text .tefl-middle-east-section-title {
color: white;
}
.tefl-middle-east-req-text p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 40px;
}
.tefl-middle-east-req-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.tefl-middle-east-req-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.tefl-middle-east-req-number {
font-size: 2rem;
font-weight: 800;
color: #fbbf24;
flex-shrink: 0;
}
.tefl-middle-east-req-info h4 {
color: white;
margin-bottom: 8px;
font-size: 1.2rem;
}
.tefl-middle-east-req-info p {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
margin-bottom: 0;
line-height: 1.6;
}
/* CTA Section */
.tefl-middle-east-cta {
background: linear-gradient(135deg, #00BCD4, #0369a1);
border-radius: 30px;
padding: 80px 0;
margin-bottom: 60px;
color: white;
}
.tefl-middle-east-cta-title {
font-size: 2.8rem;
margin-bottom: 20px;
text-align: center;
color: white;
}
.tefl-middle-east-cta-text {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.95);
text-align: center;
max-width: 800px;
margin: 0 auto 40px;
line-height: 1.7;
}
.tefl-middle-east-cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.tefl-middle-east-cta-features {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.tefl-middle-east-cta-feature {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.9);
}
.tefl-middle-east-cta-feature-icon {
font-size: 1.2rem;
}
/* Responsive Design */
@media (max-width: 1024px) {
.tefl-middle-east-hero-content,
.tefl-middle-east-why-grid,
.tefl-middle-east-req-content {
grid-template-columns: 1fr;
gap: 40px;
}
.tefl-middle-east-hero {
min-height: auto;
padding: 60px 0;
}
.tefl-middle-east-hero-title {
font-size: 2.8rem;
text-align: center;
}
.tefl-middle-east-hero-subtitle {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.tefl-middle-east-hero-cta {
justify-content: center;
}
.tefl-middle-east-luxury-grid {
grid-template-columns: 1fr;
}
.tefl-middle-east-req-grid {
grid-template-columns: 1fr;
}
.tefl-middle-east-certificate {
margin: 0 auto;
}
}
@media (max-width: 768px) {
.tefl-middle-east-hero-title {
font-size: 2.2rem;
}
.tefl-middle-east-section-title {
font-size: 2rem;
}
.tefl-middle-east-detail-row {
grid-template-columns: 1fr;
}
.tefl-middle-east-benefits {
grid-template-columns: 1fr;
}
.tefl-middle-east-established-grid,
.tefl-middle-east-cultural-grid {
grid-template-columns: 1fr;
}
.tefl-middle-east-cta-title {
font-size: 2.2rem;
}
.tefl-middle-east-cta-buttons {
flex-direction: column;
align-items: center;
}
.tefl-middle-east-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 480px) {
.tefl-middle-east-hero-title {
font-size: 1.8rem;
}
.tefl-middle-east-section-title {
font-size: 1.6rem;
}
.tefl-middle-east-region-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.tefl-middle-east-cta-features {
flex-direction: column;
align-items: center;
gap: 20px;
}
.tefl-middle-east-certificate {
width: 250px;
height: 250px;
}
.tefl-middle-east-certificate-title {
font-size: 3rem;
}
}
/* tefl-teaching-latin.css */
.tefl-teaching-latin {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: #2d3748;
line-height: 1.6;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.tefl-teaching-latin-container {
max-width: 1200px;
margin: 0 auto;
}
/* Hero Section with Tropical Theme */
.tefl-teaching-latin-hero {
background: linear-gradient(135deg, #00BCD4 0%, #4caf50a8 50%, #3F51B5 100%);
border-radius: 0 0 40px 40px;
padding: 80px 0;
position: relative;
overflow: hidden;
min-height: 85vh;
display: flex;
align-items: center;
}
.tefl-teaching-latin-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
}
.tefl-teaching-latin-hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.tefl-teaching-latin-hero-text {
color: white;
}
.tefl-teaching-latin-hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 25px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
color: white;
}
.tefl-teaching-latin-title-line {
display: block;
}
.tefl-teaching-latin-title-highlight {
color: #fbbf24;
position: relative;
display: inline-block;
}
.tefl-teaching-latin-title-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background: rgba(251, 191, 36, 0.3);
z-index: -1;
border-radius: 4px;
}
.tefl-teaching-latin-hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 40px;
max-width: 600px;
}
.tefl-teaching-latin-keyword {
color: #fbbf24;
font-weight: 600;
}
.tefl-teaching-latin-hero-cta {
display: flex;
gap: 20px;
}
/* Buttons */
.tefl-teaching-latin-btn {
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1.05rem;
}
.tefl-teaching-latin-btn-primary {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.tefl-teaching-latin-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(245, 158, 11, 0.5);
}
.tefl-teaching-latin-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.tefl-teaching-latin-btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.tefl-teaching-latin-btn-large {
padding: 20px 45px;
font-size: 1.2rem;
}
.tefl-teaching-latin-btn-icon {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.tefl-teaching-latin-btn-primary:hover .tefl-teaching-latin-btn-icon {
transform: translateX(5px);
}
/* Hero Visual - Tropical Animation */
.tefl-teaching-latin-hero-visual {
position: relative;
height: 400px;
border-radius: 20px;
overflow: hidden;
}
.tefl-teaching-latin-leaf {
position: absolute;
font-size: 2rem;
animation: tefl-teaching-latin-leaf-float 8s ease-in-out infinite;
z-index: 5;
}
.tefl-teaching-latin-leaf-1 {
top: 50px;
left: 50px;
animation-delay: 0s;
}
.tefl-teaching-latin-leaf-2 {
top: 150px;
right: 100px;
animation-delay: 2s;
}
.tefl-teaching-latin-leaf-3 {
bottom: 100px;
left: 150px;
animation-delay: 4s;
}
@keyframes tefl-teaching-latin-leaf-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}
.tefl-teaching-latin-compass {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 4px solid #059669;
border-radius: 50%;
animation: tefl-teaching-latin-compass-spin 20s linear infinite;
}
.tefl-teaching-latin-compass-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.tefl-teaching-latin-compass-n {
font-size: 2rem;
font-weight: 800;
color: #065f46;
}
@keyframes tefl-teaching-latin-compass-spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.tefl-teaching-latin-cultural-icon {
position: absolute;
font-size: 1.8rem;
animation: tefl-teaching-latin-icon-bounce 6s ease-in-out infinite;
cursor: pointer;
z-index: 10;
}
.tefl-teaching-latin-cultural-icon::after {
content: attr(data-icon);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
}
.tefl-teaching-latin-cultural-icon:hover::after {
opacity: 1;
}
.tefl-teaching-latin-cultural-icon:nth-child(4) { top: 50px; right: 100px; animation-delay: 0s; }
.tefl-teaching-latin-cultural-icon:nth-child(5) { top: 30px; right: 200px; animation-delay: 1s; }
.tefl-teaching-latin-cultural-icon:nth-child(6) { bottom: 150px; left: 100px; animation-delay: 2s; }
.tefl-teaching-latin-cultural-icon:nth-child(7) { bottom: 100px; right: 150px; animation-delay: 3s; }
@keyframes tefl-teaching-latin-icon-bounce {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-15px) scale(1.1); }
}
/* Why Latin America Section */
.tefl-teaching-latin-why {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-radius: 30px;
padding: 80px 0;
margin: 60px 0;
}
.tefl-teaching-latin-why-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
align-items: start;
}
.tefl-teaching-latin-section-title {
font-size: 2.5rem;
color: #065f46;
margin-bottom: 20px;
line-height: 1.2;
}
.tefl-teaching-latin-why p {
font-size: 1.1rem;
color: #4b5563;
margin-bottom: 30px;
line-height: 1.7;
}
.tefl-teaching-latin-feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 40px;
}
.tefl-teaching-latin-feature {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.tefl-teaching-latin-feature:hover {
transform: translateY(-10px);
}
.tefl-teaching-latin-feature-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
.tefl-teaching-latin-feature h4 {
color: #065f46;
margin-bottom: 10px;
font-size: 1.2rem;
}
.tefl-teaching-latin-feature p {
color: #6b7280;
font-size: 1rem;
margin-bottom: 0;
line-height: 1.6;
}
.tefl-teaching-latin-why-stats {
display: flex;
flex-direction: column;
gap: 20px;
}
.tefl-teaching-latin-stat-card {
background: white;
padding: 25px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.tefl-teaching-latin-stat-card:hover {
transform: translateY(-10px);
}
.tefl-teaching-latin-stat-number {
font-size: 2.5rem;
font-weight: 800;
color: #059669;
margin-bottom: 10px;
}
.tefl-teaching-latin-stat-label {
color: #4b5563;
font-weight: 600;
font-size: 1.1rem;
}
/* Destinations Section */
.tefl-teaching-latin-destinations {
margin: 80px 0;
}
.tefl-teaching-latin-section-header {
text-align: center;
margin-bottom: 60px;
}
.tefl-teaching-latin-section-subtitle {
font-size: 1.2rem;
color: #6b7280;
max-width: 800px;
margin: 0 auto;
}
/* Popular Destinations Grid */
.tefl-teaching-latin-popular-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.tefl-teaching-latin-popular-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
border: 2px solid #d1fae5;
}
.tefl-teaching-latin-card-dark {
background: linear-gradient(135deg, #2196F3, #334155);
color: white;
border-color: #475569;
}
.tefl-teaching-latin-popular-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border-color: #10b981;
}
.tefl-teaching-latin-popular-header {
padding: 25px 25px 15px;
display: flex;
align-items: center;
gap: 15px;
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}
.tefl-teaching-latin-card-dark .tefl-teaching-latin-popular-header {
background: linear-gradient(135deg, #2196F3, #334155);
}
.tefl-teaching-latin-flag {
width: 50px;
height: 35px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.tefl-teaching-latin-flag-argentina {
background: linear-gradient(to bottom, #74acdf 33%, white 33%, white 66%, #74acdf 66%);
}
.tefl-teaching-latin-flag-brazil {
background: radial-gradient(circle at center, #009c3b 40%, #ffdf00 40%, #ffdf00 60%, #002776 60%);
}
.tefl-teaching-latin-flag-mexico {
background: linear-gradient(to right, #006847 33%, white 33%, white 66%, #ce1126 66%);
}
.tefl-teaching-latin-flag-costa-rica {
background: linear-gradient(to bottom, #002b7f 20%, white 20%, white 40%, #002b7f 40%, #002b7f 60%, white 60%, white 80%, #002b7f 80%);
}
.tefl-teaching-latin-flag-chile {
background: linear-gradient(to bottom, #0039a6 50%, white 50%);
}
.tefl-teaching-latin-flag-colombia {
background: linear-gradient(to bottom, #fcd116 50%, #003893 25%, #ce1126 25%);
}
.tefl-teaching-latin-flag-peru {
background: linear-gradient(to right, #d91023 33%, white 33%, white 66%, #d91023 66%);
}
.tefl-teaching-latin-flag-ecuador {
background: linear-gradient(to bottom, #ffdd00 25%, #004b87 25%, #004b87 50%, #ffdd00 50%, #ffdd00 75%, #da121a 75%);
}
.tefl-teaching-latin-popular-title {
flex: 1;
}
.tefl-teaching-latin-popular-title h3 {
font-size: 1.6rem;
color: #065f46;
margin: 0 0 5px 0;
}
.tefl-teaching-latin-card-dark .tefl-teaching-latin-popular-title h3 {
color: white;
}
.tefl-teaching-latin-popular-tag {
display: inline-block;
padding: 5px 12px;
background: #10b981;
color: white;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.tefl-teaching-latin-tag-high-demand {
background: #dc2626;
}
.tefl-teaching-latin-popular-body {
padding: 25px;
}
.tefl-teaching-latin-popular-image {
height: 150px;
border-radius: 12px;
margin-bottom: 20px;
background: linear-gradient(45deg, #6b7280, #9ca3af);
position: relative;
overflow: hidden;
}
.tefl-teaching-latin-popular-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
}
.tefl-teaching-latin-image-argentina::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-teaching-latin-image-brazil::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-teaching-latin-image-mexico::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-teaching-latin-image-costa-rica::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-teaching-latin-popular-details {
background: #f8fafc;
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
}
.tefl-teaching-latin-card-dark .tefl-teaching-latin-popular-details {
background: rgba(255, 255, 255, 0.1);
}
.tefl-teaching-latin-detail {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
.tefl-teaching-latin-card-dark .tefl-teaching-latin-detail {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.tefl-teaching-latin-detail:last-child {
border-bottom: none;
}
.tefl-teaching-latin-detail-label {
color: #64748b;
font-weight: 500;
}
.tefl-teaching-latin-card-dark .tefl-teaching-latin-detail-label {
color: rgba(255, 255, 255, 0.8);
}
.tefl-teaching-latin-detail-value {
color: #1e293b;
font-weight: 600;
text-align: right;
}
.tefl-teaching-latin-card-dark .tefl-teaching-latin-detail-value {
color: white;
}
.tefl-teaching-latin-popular-description {
color: #4b5563;
line-height: 1.6;
margin: 0;
}
.tefl-teaching-latin-card-dark .tefl-teaching-latin-popular-description {
color: rgba(255, 255, 255, 0.9);
}
/* Additional Countries Grid */
.tefl-teaching-latin-additional-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.tefl-teaching-latin-additional-card {
background: white;
border-radius: 15px;
padding: 25px;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
}
.tefl-teaching-latin-additional-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border-color: #10b981;
}
.tefl-teaching-latin-additional-flag {
width: 40px;
height: 25px;
margin: 0 auto 15px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.tefl-teaching-latin-additional-card h4 {
color: #065f46;
margin-bottom: 15px;
font-size: 1.3rem;
}
.tefl-teaching-latin-additional-details {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 15px;
}
.tefl-teaching-latin-additional-details span {
color: #6b7280;
font-size: 0.9rem;
}
.tefl-teaching-latin-additional-details span:last-child {
background: #f0fdf4;
padding: 5px 10px;
border-radius: 15px;
color: #059669;
font-weight: 600;
margin-top: 5px;
}
/* Teaching in Latin America Section */
.tefl-teaching-latin-teaching {
background: linear-gradient(135deg, #00bcd4c4, #334155);
border-radius: 30px;
padding: 80px 0;
margin: 60px 0;
color: white;
}
.tefl-teaching-latin-teaching-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.tefl-teaching-latin-teaching-text .tefl-teaching-latin-section-title {
color: white;
}
.tefl-teaching-latin-teaching-text p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 40px;
}
.tefl-teaching-latin-teaching-points {
display: flex;
flex-direction: column;
gap: 30px;
}
.tefl-teaching-latin-teaching-point {
display: flex;
gap: 20px;
align-items: flex-start;
}
.tefl-teaching-latin-teaching-icon {
font-size: 2rem;
flex-shrink: 0;
}
.tefl-teaching-latin-teaching-point h4 {
color: white;
margin-bottom: 8px;
font-size: 1.2rem;
}
.tefl-teaching-latin-teaching-point p {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
margin-bottom: 0;
line-height: 1.6;
}
.tefl-teaching-latin-visual-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 35px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tefl-teaching-latin-visual-card h3 {
color: white;
font-size: 1.5rem;
margin-bottom: 25px;
text-align: center;
}
.tefl-teaching-latin-visual-list {
display: grid;
gap: 20px;
}
.tefl-teaching-latin-visual-item {
display: flex;
gap: 15px;
align-items: center;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
transition: all 0.3s ease;
}
.tefl-teaching-latin-visual-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.tefl-teaching-latin-visual-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.tefl-teaching-latin-visual-item strong {
color: white;
display: block;
margin-bottom: 5px;
}
.tefl-teaching-latin-visual-item p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin: 0;
}
/* CTA Section */
.tefl-teaching-latin-cta {
background: linear-gradient(135deg, #00BCD4, #059669);
border-radius: 30px;
padding: 80px 0;
margin-bottom: 60px;
color: white;
}
.tefl-teaching-latin-cta-title {
font-size: 2.8rem;
margin-bottom: 20px;
text-align: center;
color: white;
}
.tefl-teaching-latin-cta-text {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.95);
text-align: center;
max-width: 800px;
margin: 0 auto 40px;
line-height: 1.7;
}
.tefl-teaching-latin-cta-buttons {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.tefl-teaching-latin-cta-features {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.tefl-teaching-latin-cta-feature {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.9);
}
.tefl-teaching-latin-cta-feature-icon {
font-size: 1.2rem;
}
/* Responsive Design */
@media (max-width: 1024px) {
.tefl-teaching-latin-hero-content,
.tefl-teaching-latin-why-content,
.tefl-teaching-latin-teaching-content {
grid-template-columns: 1fr;
gap: 40px;
}
.tefl-teaching-latin-hero {
min-height: auto;
padding: 60px 0;
}
.tefl-teaching-latin-hero-title {
font-size: 2.8rem;
text-align: center;
}
.tefl-teaching-latin-hero-subtitle {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.tefl-teaching-latin-hero-cta {
justify-content: center;
}
.tefl-teaching-latin-feature-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.tefl-teaching-latin-hero-title {
font-size: 2.2rem;
}
.tefl-teaching-latin-section-title {
font-size: 2rem;
}
.tefl-teaching-latin-popular-grid {
grid-template-columns: 1fr;
}
.tefl-teaching-latin-additional-grid {
grid-template-columns: repeat(2, 1fr);
}
.tefl-teaching-latin-cta-title {
font-size: 2.2rem;
}
.tefl-teaching-latin-cta-features {
flex-direction: column;
align-items: center;
gap: 20px;
}
}
@media (max-width: 480px) {
.tefl-teaching-latin-hero-title {
font-size: 1.8rem;
}
.tefl-teaching-latin-section-title {
font-size: 1.6rem;
}
.tefl-teaching-latin-additional-grid {
grid-template-columns: 1fr;
}
.tefl-teaching-latin-btn {
width: 100%;
justify-content: center;
}
.tefl-teaching-latin-hero-visual {
height: 300px;
}
}
/* tefl-teaching-europe.css */
.tefl-teaching-europe {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: #2d3748;
line-height: 1.6;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.tefl-teaching-europe-container {
max-width: 1200px;
margin: 0 auto;
}
/* Hero Section with European Architecture Theme */
.tefl-teaching-europe-hero {
background: linear-gradient(135deg, #00BCD4 0%, #2196F3 50%, #60a5fa 100%);
border-radius: 0 0 40px 40px;
padding: 80px 0;
position: relative;
overflow: hidden;
min-height: 85vh;
display: flex;
align-items: center;
}
.tefl-teaching-europe-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
}
.tefl-teaching-europe-hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.tefl-teaching-europe-hero-text {
color: white;
}
.tefl-teaching-europe-hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 25px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
color: white;
}
.tefl-teaching-europe-title-line {
display: block;
}
.tefl-teaching-europe-title-highlight {
color: #fbbf24;
position: relative;
display: inline-block;
}
.tefl-teaching-europe-title-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background: rgba(251, 191, 36, 0.3);
z-index: -1;
border-radius: 4px;
}
.tefl-teaching-europe-hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 40px;
max-width: 600px;
}
.tefl-teaching-europe-keyword {
color: #fbbf24;
font-weight: 600;
}
.tefl-teaching-europe-hero-cta {
display: flex;
gap: 20px;
}
.hero-image-eu {
height: auto;
display: block;
object-fit: contain;
}
.hero-image--eu-wrapper {
flex: 1;
text-align: center;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.hero-image-eu {
max-width: 90%;
}
}
/* Buttons */
.tefl-teaching-europe-btn {
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1.05rem;
}
.tefl-teaching-europe-btn-primary {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.tefl-teaching-europe-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(245, 158, 11, 0.5);
}
.tefl-teaching-europe-btn-large {
padding: 20px 45px;
font-size: 1.2rem;
}
.tefl-teaching-europe-btn-icon {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.tefl-teaching-europe-btn-primary:hover .tefl-teaching-europe-btn-icon {
transform: translateX(5px);
}
/* Hero Visual - European Architecture */
.tefl-teaching-europe-hero-visual {
position: relative;
height: 400px;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(to bottom, #93c5fd, #dbeafe);
}
.tefl-teaching-europe-architecture {
position: absolute;
bottom: 0;
background: #4f46e5;
border-radius: 10px 10px 0 0;
animation: tefl-teaching-europe-arch-glow 4s ease-in-out infinite;
}
.tefl-teaching-europe-arch-1 {
width: 80px;
height: 200px;
left: 100px;
animation-delay: 0s;
}
.tefl-teaching-europe-arch-2 {
width: 120px;
height: 250px;
left: 200px;
animation-delay: 1s;
background: #6366f1;
}
.tefl-teaching-europe-arch-3 {
width: 100px;
height: 180px;
left: 350px;
animation-delay: 2s;
background: #7c3aed;
}
@keyframes tefl-teaching-europe-arch-glow {
0%, 100% { opacity: 0.8; box-shadow: 0 0 20px rgba(79, 70, 229, 0.5); }
50% { opacity: 1; box-shadow: 0 0 30px rgba(79, 70, 229, 0.8); }
}
.tefl-teaching-europe-map-outline {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%, 68% 57%,
79% 91%, 50% 70%, 21% 91%, 32% 57%,
2% 35%, 39% 35%
);
}
.tefl-teaching-europe-cultural-icon {
position: absolute;
font-size: 1.8rem;
animation: tefl-teaching-europe-icon-float 6s ease-in-out infinite;
cursor: pointer;
z-index: 10;
}
.tefl-teaching-europe-cultural-icon::after {
content: attr(data-icon);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
}
.tefl-teaching-europe-cultural-icon:hover::after {
opacity: 1;
}
.tefl-teaching-europe-cultural-icon:nth-child(4) { top: 50px; right: 100px; animation-delay: 0s; }
.tefl-teaching-europe-cultural-icon:nth-child(5) { top: 150px; right: 50px; animation-delay: 1s; }
.tefl-teaching-europe-cultural-icon:nth-child(6) { bottom: 100px; left: 100px; animation-delay: 2s; }
.tefl-teaching-europe-cultural-icon:nth-child(7) { bottom: 50px; right: 150px; animation-delay: 3s; }
@keyframes tefl-teaching-europe-icon-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-15px) rotate(5deg); }
}
/* Why Europe Section */
.tefl-teaching-europe-why {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-radius: 30px;
padding: 80px 0;
margin: 60px 0;
}
.tefl-teaching-europe-why-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
align-items: start;
}
.tefl-teaching-europe-section-title {
font-size: 2.5rem;
color: #1e40af;
margin-bottom: 20px;
line-height: 1.2;
}
.tefl-teaching-europe-why p {
font-size: 1.1rem;
color: #4b5563;
margin-bottom: 30px;
line-height: 1.7;
}
.tefl-teaching-europe-benefits-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 40px;
}
.tefl-teaching-europe-benefit {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
text-align: center;
}
.tefl-teaching-europe-benefit:hover {
transform: translateY(-10px);
}
.tefl-teaching-europe-benefit-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
.tefl-teaching-europe-benefit h4 {
color: #1e40af;
margin-bottom: 10px;
font-size: 1.2rem;
}
.tefl-teaching-europe-benefit p {
color: #6b7280;
font-size: 1rem;
margin-bottom: 0;
line-height: 1.6;
}
.tefl-teaching-europe-why-stats {
display: flex;
flex-direction: column;
gap: 20px;
}
.tefl-teaching-europe-stat-card {
background: white;
padding: 25px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.tefl-teaching-europe-stat-card:hover {
transform: translateY(-10px);
}
.tefl-teaching-europe-stat-number {
font-size: 2.5rem;
font-weight: 800;
color: #3b82f6;
margin-bottom: 10px;
}
.tefl-teaching-europe-stat-label {
color: #4b5563;
font-weight: 600;
font-size: 1.1rem;
}
/* Destinations Section */
.tefl-teaching-europe-destinations {
margin: 80px 0;
}
.tefl-teaching-europe-section-header {
text-align: center;
margin-bottom: 60px;
}
.tefl-teaching-europe-section-subtitle {
font-size: 1.2rem;
color: #6b7280;
max-width: 800px;
margin: 0 auto;
}
.tefl-teaching-europe-region-section {
margin-bottom: 80px;
}
.tefl-teaching-europe-region-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #3b82f6;
}
.tefl-teaching-europe-region-icon {
font-size: 2.5rem;
}
.tefl-teaching-europe-region-title {
font-size: 2rem;
color: #1e293b;
margin: 0;
}
.tefl-teaching-europe-region-subtitle {
color: #6b7280;
font-size: 1.1rem;
margin-top: 5px;
}
/* Cards Grid */
.tefl-teaching-europe-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.tefl-teaching-europe-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
border: 2px solid #dbeafe;
}
.tefl-teaching-europe-card-dark {
background: linear-gradient(135deg, #1e293b, #334155);
color: white;
border-color: #475569;
}
.tefl-teaching-europe-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border-color: #3b82f6;
}
.tefl-teaching-europe-card-header {
padding: 25px 25px 15px;
display: flex;
align-items: center;
gap: 15px;
background: linear-gradient(135deg, #eff6ff, #dbeafe);
}
.tefl-teaching-europe-card-dark .tefl-teaching-europe-card-header {
background: linear-gradient(135deg, #334155, #475569);
}
.tefl-teaching-europe-flag {
width: 50px;
height: 35px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.tefl-teaching-europe-flag-spain {
background: linear-gradient(to bottom, #aa151b 25%, #f1bf00 25%, #f1bf00 75%, #aa151b 75%);
}
.tefl-teaching-europe-flag-italy {
background: linear-gradient(to right, #009246 33%, white 33%, white 66%, #ce2b37 66%);
}
.tefl-teaching-europe-flag-france {
background: linear-gradient(to right, #002654 33%, white 33%, white 66%, #ce1126 66%);
}
.tefl-teaching-europe-flag-czech {
background: linear-gradient(to bottom, #d7141a 50%, white 50%);
}
.tefl-teaching-europe-flag-poland {
background: linear-gradient(to bottom, #dc143c 50%, white 50%);
}
.tefl-teaching-europe-flag-hungary {
background: linear-gradient(to bottom, #cd2a3e 33%, white 33%, white 66%, #436f4d 66%);
}
.tefl-teaching-europe-flag-germany {
background: linear-gradient(to bottom, #000000 33%, #dd0000 33%, #dd0000 66%, #ffcc00 66%);
}
.tefl-teaching-europe-flag-netherlands {
background: linear-gradient(to bottom, #ae1c28 33%, white 33%, white 66%, #21468b 66%);
}
.tefl-teaching-europe-flag-sweden {
background: linear-gradient(to bottom, #006aa7 0%, #006aa7 40%, #fecc00 40%, #fecc00 60%, #006aa7 60%);
}
.tefl-teaching-europe-card-title {
flex: 1;
}
.tefl-teaching-europe-card-title h4 {
font-size: 1.6rem;
color: #1e40af;
margin: 0 0 5px 0;
}
.tefl-teaching-europe-card-dark .tefl-teaching-europe-card-title h4 {
color: white;
}
.tefl-teaching-europe-tag {
display: inline-block;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.tefl-teaching-europe-tag-popular {
background: #3b82f6;
color: white;
}
.tefl-teaching-europe-tag-cultural {
background: #8b5cf6;
color: white;
}
.tefl-teaching-europe-tag-competitive {
background: #10b981;
color: white;
}
.tefl-teaching-europe-card-body {
padding: 25px;
}
.tefl-teaching-europe-card-image {
height: 150px;
border-radius: 12px;
margin-bottom: 20px;
background: linear-gradient(45deg, #6b7280, #9ca3af);
position: relative;
overflow: hidden;
}
.tefl-teaching-europe-card-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
}
.tefl-teaching-europe-image-spain::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-teaching-europe-image-italy::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-teaching-europe-image-france::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 600;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tefl-teaching-europe-card-details {
background: #f8fafc;
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
}
.tefl-teaching-europe-card-dark .tefl-teaching-europe-card-details {
background: rgba(255, 255, 255, 0.1);
}
.tefl-teaching-europe-detail {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
.tefl-teaching-europe-card-dark .tefl-teaching-europe-detail {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.tefl-teaching-europe-detail:last-child {
border-bottom: none;
}
.tefl-teaching-europe-detail-label {
color: #64748b;
font-weight: 500;
}
.tefl-teaching-europe-card-dark .tefl-teaching-europe-detail-label {
color: rgba(255, 255, 255, 0.8);
}
.tefl-teaching-europe-detail-value {
color: #1e293b;
font-weight: 600;
text-align: right;
}
.tefl-teaching-europe-card-dark .tefl-teaching-europe-detail-value {
color: white;
}
.tefl-teaching-europe-card-description {
color: #4b5563;
line-height: 1.6;
margin-bottom: 20px;
}
.tefl-teaching-europe-card-dark .tefl-teaching-europe-card-description {
color: rgba(255, 255, 255, 0.9);
}
.tefl-teaching-europe-card-highlights {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.tefl-teaching-europe-highlight {
padding: 6px 12px;
background: #dbeafe;
color: #1e40af;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 500;
}
.tefl-teaching-europe-card-dark .tefl-teaching-europe-highlight {
background: rgba(59, 130, 246, 0.2);
color: #93c5fd;
}
/* Compact Cards for Central/Eastern Europe */
.tefl-teaching-europe-compact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.tefl-teaching-europe-compact-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
}
.tefl-teaching-europe-compact-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.tefl-teaching-europe-compact-header {
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
background: #f8fafc;
border-bottom: 2px solid #e2e8f0;
}
.tefl-teaching-europe-compact-header h4 {
font-size: 1.4rem;
color: #1e293b;
margin: 0;
}
.tefl-teaching-europe-compact-body {
padding: 20px;
}
.tefl-teaching-europe-salary-display {
font-size: 1.8rem;
font-weight: 800;
color: #3b82f6;
text-align: center;
margin-bottom: 20px;
padding: 15px;
background: #eff6ff;
border-radius: 10px;
}
.tefl-teaching-europe-compact-details {
background: #f8fafc;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
}
.tefl-teaching-europe-compact-detail {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
.tefl-teaching-europe-compact-detail:last-child {
border-bottom: none;
}
.tefl-teaching-europe-compact-detail span {
color: #64748b;
}
.tefl-teaching-europe-compact-detail strong {
color: #1e293b;
}
.tefl-teaching-europe-demand-high {
color: #10b981 !important;
}
.tefl-teaching-europe-demand-medium {
color: #f59e0b !important;
}
.tefl-teaching-europe-compact-card p {
color: #6b7280;
line-height: 1.6;
margin: 0;
}
/* Nordic Cards */
.tefl-teaching-europe-nordic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.tefl-teaching-europe-nordic-card {
background: white;
border-radius: 15px;
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid #dbeafe;
}
.tefl-teaching-europe-nordic-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
border-color: #3b82f6;
}
.tefl-teaching-europe-nordic-flag {
width: 60px;
height: 40px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.tefl-teaching-europe-nordic-content {
flex: 1;
}
.tefl-teaching-europe-nordic-card h4 {
color: #1e40af;
margin-bottom: 15px;
font-size: 1.5rem;
}
.tefl-teaching-europe-nordic-card p {
color: #6b7280;
line-height: 1.6;
margin-bottom: 20px;
}
.tefl-teaching-europe-nordic-salary {
background: linear-gradient(135deg, #3b82f6, #1e40af);
color: white;
padding: 10px 20px;
border-radius: 20px;
font-weight: 600;
font-size: 1.1rem;
}
/* Requirements Section */
.tefl-teaching-europe-requirements {
background: linear-gradient(135deg, #2196F3, #334155);
border-radius: 30px;
padding: 80px 0;
margin: 60px 0;
color: white;
}
.tefl-teaching-europe-req-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.tefl-teaching-europe-visual-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 35px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tefl-teaching-europe-visual-card h3 {
color: white;
font-size: 1.5rem;
margin-bottom: 25px;
text-align: center;
}
.tefl-teaching-europe-visual-list {
display: grid;
gap: 20px;
}
.tefl-teaching-europe-visual-item {
display: flex;
gap: 15px;
align-items: center;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
transition: all 0.3s ease;
}
.tefl-teaching-europe-visual-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.tefl-teaching-europe-visual-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.tefl-teaching-europe-visual-item strong {
color: white;
display: block;
margin-bottom: 5px;
}
.tefl-teaching-europe-visual-item p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin: 0;
}
.tefl-teaching-europe-req-text .tefl-teaching-europe-section-title {
color: white;
}
.tefl-teaching-europe-req-text p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 30px;
}
.tefl-teaching-europe-important-notes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin: 40px 0;
}
.tefl-teaching-europe-note {
background: rgba(255, 255, 255, 0.05);
padding: 25px;
border-radius: 15px;
border-left: 4px solid #3b82f6;
}
.tefl-teaching-europe-note h4 {
color: white;
margin-bottom: 10px;
font-size: 1.2rem;
}
.tefl-teaching-europe-note p {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
margin-bottom: 0;
}
.tefl-teaching-europe-seo-text {
background: rgba(255, 255, 255, 0.05);
padding: 25px;
border-radius: 15px;
margin-top: 30px;
}
.tefl-teaching-europe-seo-text p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: 0;
line-height: 1.7;
}
/* CTA Section */
.tefl-teaching-europe-cta {
background: linear-gradient(135deg, #00BCD4, #3b82f6);
border-radius: 30px;
padding: 80px 0;
margin-bottom: 60px;
color: white;
}
.tefl-teaching-europe-cta-title {
font-size: 2.8rem;
margin-bottom: 20px;
text-align: center;
color: white;
}
.tefl-teaching-europe-cta-text {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.95);
text-align: center;
max-width: 800px;
margin: 0 auto 40px;
line-height: 1.7;
}
.tefl-teaching-europe-cta-buttons {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.tefl-teaching-europe-cta-features {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.tefl-teaching-europe-cta-feature {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.9);
}
.tefl-teaching-europe-cta-feature-icon {
font-size: 1.2rem;
}
/* Responsive Design */
@media (max-width: 1024px) {
.tefl-teaching-europe-hero-content,
.tefl-teaching-europe-why-content,
.tefl-teaching-europe-req-content {
grid-template-columns: 1fr;
gap: 40px;
}
.tefl-teaching-europe-hero {
min-height: auto;
padding: 60px 0;
}
.tefl-teaching-europe-hero-title {
font-size: 2.8rem;
text-align: center;
}
.tefl-teaching-europe-hero-subtitle {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.tefl-teaching-europe-hero-cta {
justify-content: center;
}
.tefl-teaching-europe-benefits-grid {
grid-template-columns: 1fr;
}
.tefl-teaching-europe-important-notes {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.tefl-teaching-europe-hero-title {
font-size: 2.2rem;
}
.tefl-teaching-europe-section-title {
font-size: 2rem;
}
.tefl-teaching-europe-cards-grid {
grid-template-columns: 1fr;
}
.tefl-teaching-europe-compact-grid,
.tefl-teaching-europe-nordic-grid {
grid-template-columns: 1fr;
}
.tefl-teaching-europe-cta-title {
font-size: 2.2rem;
}
.tefl-teaching-europe-cta-features {
flex-direction: column;
align-items: center;
gap: 20px;
}
}
@media (max-width: 480px) {
.tefl-teaching-europe-hero-title {
font-size: 1.8rem;
}
.tefl-teaching-europe-section-title {
font-size: 1.6rem;
}
.tefl-teaching-europe-btn {
width: 100%;
justify-content: center;
}
.tefl-teaching-europe-hero-visual {
height: 300px;
}
.tefl-teaching-europe-region-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
/* tefl-comparison-css.css */
.tefl-comparison {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: #2d3748;
line-height: 1.6;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.tefl-comparison-container {
max-width: 1200px;
margin: 0 auto;
}
/* Hero Section */
.tefl-comparison-hero {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
border-radius: 0 0 30px 30px;
padding: 80px 0;
color: white;
position: relative;
overflow: hidden;
}
.tefl-comparison-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
}
.tefl-comparison-hero-title {
font-size: 4.2rem;
font-weight: 800;
margin-bottom: 20px;
line-height: 1.1;
color: azure;
}
.tefl-comparison-highlight {
color: #fbbf24;
position: relative;
display: inline-block;
}
.tefl-comparison-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background: rgba(251, 191, 36, 0.3);
z-index: -1;
border-radius: 4px;
}
.tefl-comparison-hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.tefl-comparison-keyword {
color: #fbbf24;
font-weight: 600;
}
.tefl-comparison-btn {
display: inline-flex;
align-items: center;
padding: 14px 28px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 1.05rem;
transition: all 0.3s ease;
border: 2px solid transparent;
cursor: pointer;
}
.tefl-comparison-btn-primary {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}
.tefl-comparison-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}
.tefl-comparison-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.tefl-comparison-btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.tefl-comparison-btn-outline {
background: transparent;
color: #4f46e5;
border: 2px solid #4f46e5;
}
.tefl-comparison-btn-outline:hover {
background: #4f46e5;
color: white;
}
.tefl-comparison-btn-premium {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}
.tefl-comparison-btn-premium:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
}
.tefl-comparison-btn-large {
padding: 18px 40px;
font-size: 1.2rem;
}
.tefl-comparison-btn-icon {
margin-left: 10px;
transition: transform 0.3s ease;
}
.tefl-comparison-btn-primary:hover .tefl-comparison-btn-icon {
transform: translateY(3px);
}
/* Hero Visual - Course Levels */
.tefl-comparison-hero-visual {
max-width: 600px;
margin: 0 auto;
}
.tefl-comparison-levels {
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 200px;
position: relative;
}
.tefl-comparison-level {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.tefl-comparison-level::before {
content: attr(data-level);
position: absolute;
top: -40px;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
}
.tefl-comparison-level-bar {
width: 60px;
background: linear-gradient(to top, rgba(251, 191, 36, 0.8), rgba(251, 191, 36, 0.4));
border-radius: 8px 8px 0 0;
transition: all 0.3s ease;
}
.tefl-comparison-level:hover .tefl-comparison-level-bar {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}
.tefl-comparison-level:nth-child(1) .tefl-comparison-level-bar {
height: 60px;
animation: tefl-comparison-pulse 3s infinite;
}
.tefl-comparison-level:nth-child(2) .tefl-comparison-level-bar {
height: 90px;
animation: tefl-comparison-pulse 3s infinite 0.5s;
}
.tefl-comparison-level:nth-child(3) .tefl-comparison-level-bar {
height: 150px;
animation: tefl-comparison-pulse 3s infinite 1s;
}
.tefl-comparison-level:nth-child(4) .tefl-comparison-level-bar {
height: 180px;
animation: tefl-comparison-pulse 3s infinite 1.5s;
}
@keyframes tefl-comparison-pulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
.tefl-comparison-level-label {
color: white;
font-weight: 700;
font-size: 1.2rem;
margin-top: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Section Headers */
.tefl-comparison-section-header {
text-align: center;
margin-bottom: 60px;
}
.tefl-comparison-section-title {
font-size: 2.5rem;
color: #1e293b;
margin-bottom: 15px;
line-height: 1.2;
}
.tefl-comparison-section-subtitle {
font-size: 1.2rem;
color: #64748b;
max-width: 700px;
margin: 0 auto;
}
/* Comparison Table */
.tefl-comparison-table-section {
padding: 80px 0;
background: #f8fafc;
}
.tefl-comparison-table-container {
overflow-x: auto;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
margin-bottom: 30px;
}
.tefl-comparison-table {
min-width: 900px;
background: white;
border-radius: 12px;
overflow: hidden;
}
.tefl-comparison-table-header {
display: grid;
grid-template-columns: 250px repeat(4, 1fr);
background: #1e293b;
color: white;
}
.tefl-comparison-table-corner {
padding: 25px;
border-right: 1px solid #334155;
}
.tefl-comparison-table-course {
padding: 25px;
text-align: center;
border-right: 1px solid #334155;
transition: all 0.3s ease;
}
.tefl-comparison-table-course:hover {
background: #334155;
}
.tefl-comparison-table-course:last-child {
border-right: none;
}
.tefl-comparison-table-course h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: azure;
}
.tefl-comparison-hours {
font-size: 1.1rem;
color: #94a3b8;
font-weight: 600;
}
.tefl-comparison-course-elementary {
border-top: 4px solid #60a5fa;
}
.tefl-comparison-course-foundation {
border-top: 4px solid #34d399;
}
.tefl-comparison-course-advanced {
border-top: 4px solid #f59e0b;
}
.tefl-comparison-course-master {
border-top: 4px solid #8b5cf6;
}
.tefl-comparison-table-body {
display: flex;
flex-direction: column;
}
.tefl-comparison-table-row {
display: grid;
grid-template-columns: 250px repeat(4, 1fr);
border-bottom: 1px solid #e2e8f0;
transition: background-color 0.3s ease;
}
.tefl-comparison-table-row:hover {
background-color: #f8fafc;
}
.tefl-comparison-table-row:last-child {
border-bottom: none;
}
.tefl-comparison-table-feature {
padding: 20px;
font-weight: 600;
color: #1e293b;
background: #f1f5f9;
display: flex;
align-items: center;
}
.tefl-comparison-table-value {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #e2e8f0;
text-align: center;
}
.tefl-comparison-table-value:last-child {
border-right: none;
}
.tefl-comparison-yes {
color: #059669;
font-weight: 600;
}
.tefl-comparison-no {
color: #dc2626;
font-weight: 600;
}
.tefl-comparison-limited {
color: #f59e0b;
font-weight: 600;
}
.tefl-comparison-table-cta .tefl-comparison-table-feature {
background: #1e293b;
color: white;
}
.tefl-comparison-table-notes {
background: white;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #f59e0b;
font-size: 0.95rem;
color: #475569;
}
/* Course Details */
.tefl-comparison-details {
padding: 80px 0;
}
.tefl-comparison-details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.tefl-comparison-detail-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.tefl-comparison-detail-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.tefl-comparison-detail-card-featured {
border-color: #f59e0b;
position: relative;
}
.tefl-comparison-detail-header {
padding: 25px;
color: white;
position: relative;
}
.tefl-comparison-elementary-header {
background: linear-gradient(135deg, #60a5fa, #3b82f6);
}
.tefl-comparison-foundation-header {
background: linear-gradient(135deg, #34d399, #10b981);
}
.tefl-comparison-advanced-header {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.tefl-comparison-master-header {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.tefl-comparison-detail-header h3 {
font-size: 1.4rem;
margin-bottom: 10px;
}
.tefl-comparison-detail-hours {
font-size: 1.1rem;
opacity: 0.9;
font-weight: 600;
}
.tefl-comparison-recommended-badge {
position: absolute;
top: 15px;
right: 15px;
background: white;
color: #d97706;
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
}
.tefl-comparison-detail-body {
padding: 25px;
}
.tefl-comparison-detail-body h4 {
color: #1e293b;
margin-bottom: 15px;
font-size: 1.1rem;
}
.tefl-comparison-detail-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.tefl-comparison-detail-list li {
padding: 8px 0;
padding-left: 24px;
position: relative;
color: #475569;
}
.tefl-comparison-detail-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #10b981;
font-weight: bold;
}
.tefl-comparison-detail-best-for {
background: #ecf4fd;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #3b82f6;
}
.tefl-comparison-detail-best-for h5 {
color: #1e293b;
margin-bottom: 8px;
font-size: 1rem;
}
.tefl-comparison-detail-best-for p {
color: #64748b;
font-size: 0.95rem;
margin: 0;
}
/* Specializations */
.tefl-comparison-specializations {
padding: 80px 0;
background: #ecf4fb;
}
.tefl-comparison-specializations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.tefl-comparison-specialization-card {
background: white;
border-radius: 12px;
padding: 30px;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.tefl-comparison-specialization-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: #e2e8f0;
}
.tefl-comparison-specialization-icon {
font-size: 3rem;
margin-bottom: 20px;
display: inline-block;
}
.tefl-comparison-specialization-card h3 {
color: #4a70ae;
margin-bottom: 10px;
font-size: 1.3rem;
}
.tefl-comparison-specialization-hours {
color: #f8fbff;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
padding: 5px 15px;
background: #83b3e4;
border-radius: 20px;
display: inline-block;
}
.tefl-comparison-specialization-desc {
color: #64748b;
margin-bottom: 25px;
line-height: 1.6;
}
.tefl-comparison-specialization-details {
background: #f8fafc;
padding: 20px;
border-radius: 8px;
text-align: left;
}
.tefl-comparison-specialization-detail {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
}
.tefl-comparison-specialization-detail:last-child {
border-bottom: none;
}
.tefl-comparison-specialization-label {
color: #64748b;
font-weight: 500;
}
.tefl-comparison-specialization-value {
color: #1e293b;
font-weight: 600;
margin-left: 20px;
}
.tefl-comparison-specializations-note {
background: white;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #8b5cf6;
font-size: 0.95rem;
color: #475569;
}
/* FAQ Section */
.tefl-comparison-faq {
padding: 80px 0;
}
.tefl-comparison-faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 30px;
}
.tefl-comparison-faq-item {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border-left: 4px solid #3b82f6;
}
.tefl-comparison-faq-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.tefl-comparison-faq-item h4 {
color: #1e293b;
margin-bottom: 15px;
font-size: 1.2rem;
}
.tefl-comparison-faq-item p {
color: #64748b;
line-height: 1.6;
margin: 0;
}
/* CTA Section */
.tefl-comparison-cta {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
border-radius: 30px;
padding: 80px 0;
color: white;
margin-bottom: 60px;
}
.tefl-comparison-cta-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.tefl-comparison-cta-title {
font-size: 2.5rem;
margin-bottom: 20px;
line-height: 1.2;
color: azure;
}
.tefl-comparison-cta-text {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 40px;
line-height: 1.7;
}
.tefl-comparison-cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
/* Responsive Design */
@media (max-width: 1024px) {
.tefl-comparison-hero-title {
font-size: 2.5rem;
}
.tefl-comparison-section-title {
font-size: 2.2rem;
}
.tefl-comparison-details-grid,
.tefl-comparison-specializations-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.tefl-comparison-hero {
padding: 60px 0;
}
.tefl-comparison-hero-title {
font-size: 2rem;
}
.tefl-comparison-section-title {
font-size: 1.8rem;
}
.tefl-comparison-details-grid,
.tefl-comparison-specializations-grid,
.tefl-comparison-faq-grid {
grid-template-columns: 1fr;
}
.tefl-comparison-levels {
height: 150px;
}
.tefl-comparison-level-bar {
width: 40px;
}
.tefl-comparison-cta-buttons {
flex-direction: column;
align-items: center;
}
.tefl-comparison-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 480px) {
.tefl-comparison-hero-title {
font-size: 1.8rem;
}
.tefl-comparison-section-title {
font-size: 1.6rem;
}
.tefl-comparison-levels {
height: 120px;
}
.tefl-comparison-level-bar {
width: 30px;
}
.tefl-comparison-level::before {
font-size: 0.8rem;
top: -35px;
}
.tefl-comparison-cta-title {
font-size: 2rem;
}
}
/* TEFL Teaching Resources Page Styles */
.teaching-resources-container {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
color: #333;
line-height: 1.6;
}
/* Hero Section */
.teaching-resources-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
margin-bottom: 80px;
padding: 40px 20px;
background: linear-gradient(135deg, #f5f9ff 0%, #e8f1ff 100%);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.teaching-resources-hero::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: rgba(74, 107, 255, 0.05);
border-radius: 50%;
top: -150px;
right: -100px;
}
.teaching-resources-hero-content {
flex: 1;
min-width: 300px;
z-index: 2;
}
.teaching-resources-hero-title {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 20px;
color: #1a237e;
line-height: 1.2;
animation: teaching-resources-fadeInUp 1s ease;
}
.teaching-resources-hero-text {
font-size: 1.2rem;
color: #444;
margin-bottom: 30px;
max-width: 600px;
animation: teaching-resources-fadeInUp 1s ease 0.2s both;
}
.teaching-resources-hero-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
animation: teaching-resources-fadeInUp 1s ease 0.4s both;
}
.teaching-resources-btn {
padding: 14px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
display: inline-block;
text-align: center;
border: 2px solid transparent;
cursor: pointer;
}
.teaching-resources-btn-primary {
background-color: #4a6bff;
color: white;
}
.teaching-resources-btn-primary:hover {
background-color: #3a5be0;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(74, 107, 255, 0.2);
}
.teaching-resources-btn-secondary {
background-color: transparent;
color: #4a6bff;
border-color: #4a6bff;
}
.teaching-resources-btn-secondary:hover {
background-color: #4a6bff;
color: white;
transform: translateY(-3px);
}
.teaching-resources-hero-visual {
flex: 1;
min-width: 300px;
height: 350px;
position: relative;
z-index: 1;
}
.teaching-resources-hero-image {
width: 100%;
height: 100%;
background: linear-gradient(45deg, #4a6bff, #6c8eff);
border-radius: 20px;
position: relative;
overflow: hidden;
animation: teaching-resources-float 6s ease-in-out infinite;
}
.teaching-resources-hero-image::before {
content: '';
position: absolute;
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
top: 40px;
left: 40px;
}
.teaching-resources-hero-image::after {
content: '';
position: absolute;
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
bottom: 60px;
right: 60px;
}
.teaching-resources-hero-decoration {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.teaching-resources-hero-dot {
position: absolute;
border-radius: 50%;
background: #ff9e4a;
animation: teaching-resources-pulse 2s infinite;
}
.teaching-resources-hero-dot-1 {
width: 20px;
height: 20px;
top: -10px;
right: 30%;
animation-delay: 0s;
}
.teaching-resources-hero-dot-2 {
width: 15px;
height: 15px;
bottom: 40px;
left: -7px;
background: #4ad4ff;
animation-delay: 0.5s;
}
.teaching-resources-hero-dot-3 {
width: 12px;
height: 12px;
bottom: 100px;
right: -6px;
background: #9d4aff;
animation-delay: 1s;
}
/* Certification Section */
.teaching-resources-certification {
margin-bottom: 100px;
padding: 0 20px;
}
.teaching-resources-certification-header {
text-align: center;
margin-bottom: 50px;
}
.teaching-resources-certification-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
color: #1a237e;
}
.teaching-resources-highlight {
color: #4a6bff;
position: relative;
display: inline-block;
}
.teaching-resources-highlight::after {
content: '';
position: absolute;
width: 100%;
height: 8px;
background: rgba(74, 107, 255, 0.2);
bottom: 5px;
left: 0;
z-index: -1;
border-radius: 4px;
}
.teaching-resources-certification-subtitle {
font-size: 1.2rem;
color: #555;
max-width: 700px;
margin: 0 auto;
}
.teaching-resources-certification-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.teaching-resources-certification-card {
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid #f0f0f0;
}
.teaching-resources-certification-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(74, 107, 255, 0.1);
border-color: #4a6bff;
}
.teaching-resources-certification-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #4a6bff, #6c8eff);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.teaching-resources-certification-card:hover::before {
transform: scaleX(1);
}
.teaching-resources-certification-card-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #f0f5ff, #e6eeff);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.teaching-resources-certification-card:hover .teaching-resources-certification-card-icon {
background: linear-gradient(135deg, #4a6bff, #6c8eff);
transform: rotate(5deg);
}
.teaching-resources-certification-card-icon svg {
width: 28px;
height: 28px;
fill: #4a6bff;
transition: all 0.3s ease;
}
.teaching-resources-certification-card:hover .teaching-resources-certification-card-icon svg {
fill: white;
}
.teaching-resources-certification-card-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 15px;
color: #1a237e;
}
.teaching-resources-certification-card-text {
color: #555;
line-height: 1.7;
}
/* Categories Section */
.teaching-resources-categories {
margin-bottom: 100px;
padding: 0 20px;
}
.teaching-resources-categories-title {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 15px;
color: #1a237e;
}
.teaching-resources-categories-subtitle {
text-align: center;
color: #555;
font-size: 1.2rem;
margin-bottom: 50px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.teaching-resources-categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.teaching-resources-category-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.4s ease;
border: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
}
.teaching-resources-category-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(74, 107, 255, 0.1);
}
.teaching-resources-category-card-content {
padding: 30px;
flex: 1;
}
.teaching-resources-category-card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
color: #1a237e;
transition: color 0.3s ease;
}
.teaching-resources-category-card:hover .teaching-resources-category-card-title {
color: #4a6bff;
}
.teaching-resources-category-card-text {
color: #555;
margin-bottom: 20px;
line-height: 1.7;
}
.teaching-resources-category-card-link {
color: #4a6bff;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.teaching-resources-category-card-link:hover {
gap: 12px;
color: #3a5be0;
}
.teaching-resources-category-card-visual {
height: 180px;
background-size: cover;
background-position: center;
transition: all 0.5s ease;
position: relative;
overflow: hidden;
}
.teaching-resources-category-card:hover .teaching-resources-category-card-visual {
transform: scale(1.05);
}
.teaching-resources-visual-1 {
background: linear-gradient(45deg, #4a6bff, #4ad4ff);
}
.teaching-resources-visual-2 {
background: linear-gradient(45deg, #ff9e4a, #ffd14a);
}
.teaching-resources-visual-3 {
background: linear-gradient(45deg, #9d4aff, #d44aff);
}
.teaching-resources-visual-4 {
background: linear-gradient(45deg, #4aff9d, #4ad4ff);
}
/* CTA Section */
.teaching-resources-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
padding: 60px 40px;
background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
border-radius: 20px;
margin-bottom: 40px;
color: white;
position: relative;
overflow: hidden;
}
.teaching-resources-cta::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
top: -200px;
right: -150px;
}
.teaching-resources-cta-content {
flex: 1;
min-width: 300px;
z-index: 2;
}
.teaching-resources-cta-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
}
.teaching-resources-cta-text {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 30px;
line-height: 1.7;
}
.teaching-resources-cta-features {
margin-bottom: 30px;
}
.teaching-resources-cta-feature {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 1.05rem;
}
.teaching-resources-cta-feature-check {
color: #4aff9d;
font-weight: bold;
font-size: 1.2rem;
}
.teaching-resources-btn-cta {
background-color: #4aff9d;
color: #1a237e;
font-weight: 700;
font-size: 1.1rem;
padding: 16px 40px;
border-radius: 50px;
border: none;
transition: all 0.3s ease;
}
.teaching-resources-btn-cta:hover {
background-color: #3ae08d;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(74, 255, 157, 0.3);
}
.teaching-resources-cta-visual {
flex: 1;
min-width: 300px;
height: 300px;
position: relative;
z-index: 1;
}
.teaching-resources-cta-image {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
animation: teaching-resources-float 8s ease-in-out infinite;
}
.teaching-resources-cta-image::before {
content: '';
position: absolute;
width: 120px;
height: 120px;
background: rgba(74, 255, 157, 0.2);
border-radius: 50%;
top: 40px;
left: 40px;
}
.teaching-resources-cta-image::after {
content: '';
position: absolute;
width: 80px;
height: 80px;
background: rgba(74, 107, 255, 0.2);
border-radius: 50%;
bottom: 60px;
right: 60px;
}
.teaching-resources-cta-decoration {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.teaching-resources-cta-circle {
position: absolute;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.1);
animation: teaching-resources-rotate 20s linear infinite;
}
.teaching-resources-cta-circle-1 {
width: 80px;
height: 80px;
top: -40px;
right: 30%;
}
.teaching-resources-cta-circle-2 {
width: 120px;
height: 120px;
bottom: -60px;
left: 10%;
animation-direction: reverse;
animation-duration: 25s;
}
/* Animations */
@keyframes teaching-resources-fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes teaching-resources-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
@keyframes teaching-resources-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
@keyframes teaching-resources-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.teaching-resources-hero-title {
font-size: 2.2rem;
}
.teaching-resources-hero-text {
font-size: 1.1rem;
}
.teaching-resources-certification-title,
.teaching-resources-categories-title,
.teaching-resources-cta-title {
font-size: 2rem;
}
.teaching-resources-hero,
.teaching-resources-cta {
padding: 30px 20px;
}
.teaching-resources-hero-buttons {
flex-direction: column;
align-items: stretch;
}
.teaching-resources-btn {
width: 100%;
margin-bottom: 10px;
}
.teaching-resources-certification-cards,
.teaching-resources-categories-grid {
grid-template-columns: 1fr;
}
.teaching-resources-hero-visual,
.teaching-resources-cta-visual {
height: 250px;
}
}
@media (max-width: 480px) {
.teaching-resources-hero-title {
font-size: 1.8rem;
}
.teaching-resources-certification-title,
.teaching-resources-categories-title,
.teaching-resources-cta-title {
font-size: 1.7rem;
}
.teaching-resources-container {
padding: 10px;
}
.teaching-resources-hero,
.teaching-resources-certification,
.teaching-resources-categories,
.teaching-resources-cta {
padding-left: 15px;
padding-right: 15px;
}
.teaching-resources-certification-card,
.teaching-resources-category-card-content {
padding: 20px;
}
}
/* TEFL FAQ Page Styles */
.teaching-resources-container {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
color: #333;
line-height: 1.6;
}
/* FAQ Hero Section */
.teaching-resources-faq-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
margin-bottom: 60px;
padding: 50px 30px;
background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
border-radius: 24px;
position: relative;
overflow: hidden;
}
.teaching-resources-faq-hero::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: rgba(74, 107, 255, 0.05);
border-radius: 50%;
top: -200px;
right: -100px;
}
.teaching-resources-faq-hero-content {
flex: 1;
min-width: 300px;
z-index: 2;
}
.teaching-resources-faq-hero-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 15px;
color: #1a237e;
line-height: 1.1;
animation: teaching-resources-faq-fadeInUp 1s ease;
}
.teaching-resources-faq-highlight {
color: #4a6bff;
position: relative;
display: inline-block;
}
.teaching-resources-faq-highlight::after {
content: '';
position: absolute;
width: 100%;
height: 8px;
background: rgba(74, 107, 255, 0.2);
bottom: 5px;
left: 0;
z-index: -1;
border-radius: 4px;
}
.teaching-resources-faq-hero-subtitle {
font-size: 1.3rem;
color: #555;
margin-bottom: 30px;
max-width: 600px;
animation: teaching-resources-faq-fadeInUp 1s ease 0.2s both;
}
.teaching-resources-faq-hero-search {
display: flex;
max-width: 500px;
margin-bottom: 40px;
animation: teaching-resources-faq-fadeInUp 1s ease 0.3s both;
border-radius: 50px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.teaching-resources-faq-search-input {
flex: 1;
padding: 16px 24px;
border: none;
font-size: 1rem;
background: white;
outline: none;
}
.teaching-resources-faq-search-btn {
padding: 16px 32px;
background: #4a6bff;
color: white;
border: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
}
.teaching-resources-faq-search-btn:hover {
background: #3a5be0;
}
.teaching-resources-faq-hero-stats {
display: flex;
gap: 40px;
flex-wrap: wrap;
animation: teaching-resources-faq-fadeInUp 1s ease 0.4s both;
}
.teaching-resources-faq-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.teaching-resources-faq-stat-number {
font-size: 2.2rem;
font-weight: 800;
color: #4a6bff;
line-height: 1;
margin-bottom: 5px;
}
.teaching-resources-faq-stat-label {
color: #666;
font-size: 0.95rem;
font-weight: 500;
}
.teaching-resources-faq-hero-visual {
flex: 1;
min-width: 300px;
height: 300px;
position: relative;
z-index: 1;
}
.teaching-resources-faq-hero-image {
width: 100%;
height: 100%;
background: linear-gradient(45deg, #e8f1ff, #2196F3);
border-radius: 20px;
position: relative;
overflow: hidden;
animation: teaching-resources-faq-float 8s ease-in-out infinite;
}
.teaching-resources-faq-hero-orb {
position: absolute;
border-radius: 50%;
animation: teaching-resources-faq-pulse 3s infinite;
}
.teaching-resources-faq-orb-1 {
width: 80px;
height: 80px;
background: rgba(74, 107, 255, 0.15);
top: 40px;
left: 40px;
animation-delay: 0s;
}
.teaching-resources-faq-orb-2 {
width: 120px;
height: 120px;
background: rgba(74, 212, 255, 0.1);
bottom: 40px;
right: 40px;
animation-delay: 0.5s;
}
.teaching-resources-faq-orb-3 {
width: 60px;
height: 60px;
background: rgba(157, 74, 255, 0.1);
top: 100px;
right: 80px;
animation-delay: 1s;
}
/* FAQ Categories Navigation */
.teaching-resources-faq-category-nav {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 40px;
padding: 20px;
background: white;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
position: sticky;
top: 20px;
z-index: 100;
}
.teaching-resources-faq-category-btn {
padding: 14px 28px;
border: 2px solid #e8f1ff;
background: white;
border-radius: 50px;
font-weight: 600;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.95rem;
white-space: nowrap;
}
.teaching-resources-faq-category-btn:hover {
border-color: #4a6bff;
color: #4a6bff;
transform: translateY(-2px);
}
.teaching-resources-faq-category-active {
background: #4a6bff;
color: white;
border-color: #4a6bff;
}
.teaching-resources-faq-category-active:hover {
background: #3a5be0;
border-color: #3a5be0;
color: white;
transform: none;
}
/* FAQ Categories */
.teaching-resources-faq-category {
display: none;
margin-bottom: 60px;
animation: teaching-resources-faq-fadeIn 0.5s ease;
}
.teaching-resources-faq-category-active {
display: block;
}
.teaching-resources-faq-category-header {
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f5ff;
background-color: white;
}
.teaching-resources-faq-category-title {
font-size: 2.2rem;
font-weight: 700;
color: #1a237e;
margin-bottom: 10px;
}
.teaching-resources-faq-category-description {
color: #666;
font-size: 1.1rem;
max-width: 700px;
}
/* FAQ Grid */
.teaching-resources-faq-grid {
display: grid;
gap: 20px;
background-color: white;
}
.teaching-resources-faq-item {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #f0f5ff;
transition: all 0.3s ease;
}
.teaching-resources-faq-item:hover {
box-shadow: 0 10px 25px rgba(74, 107, 255, 0.1);
border-color: #e8f1ff;
transform: translateY(-2px);
}
.teaching-resources-faq-question {
padding: 24px 30px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background: linear-gradient(90deg, #f8fbff, #f0f7ff);
transition: all 0.3s ease;
}
.teaching-resources-faq-question:hover {
background: linear-gradient(90deg, #f0f7ff, #e8f1ff);
}
.teaching-resources-faq-question-text {
font-size: 1.3rem;
font-weight: 600;
color: #1a237e;
margin: 0;
flex: 1;
padding-right: 20px;
}
.teaching-resources-faq-toggle {
font-size: 1.8rem;
font-weight: 300;
color: #4a6bff;
transition: all 0.3s ease;
min-width: 30px;
text-align: center;
}
.teaching-resources-faq-answer {
padding: 0 30px;
max-height: 0;
overflow: hidden;
transition: all 0.5s ease;
opacity: 0;
}
.teaching-resources-faq-item.active .teaching-resources-faq-answer {
padding: 0 30px 30px;
max-height: 2000px;
opacity: 1;
}
.teaching-resources-faq-item.active .teaching-resources-faq-toggle {
transform: rotate(45deg);
}
.teaching-resources-faq-answer p {
color: #555;
margin-bottom: 20px;
line-height: 1.7;
}
.teaching-resources-faq-list {
margin: 20px 0;
padding-left: 20px;
}
.teaching-resources-faq-list li {
margin-bottom: 10px;
color: #555;
line-height: 1.6;
}
/* FAQ Answer Components */
.teaching-resources-faq-answer-note {
background: rgba(74, 107, 255, 0.08);
border-radius: 12px;
padding: 15px 20px;
margin: 20px 0;
display: flex;
align-items: flex-start;
gap: 15px;
border-left: 4px solid #4a6bff;
}
.teaching-resources-faq-note-icon {
font-size: 1.5rem;
margin-top: 2px;
}
.teaching-resources-faq-note-text {
color: #444;
font-weight: 500;
flex: 1;
}
.teaching-resources-faq-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 20px 0;
}
.teaching-resources-faq-comparison-item {
background: white;
padding: 20px;
border-radius: 12px;
border: 1px solid #e8f1ff;
text-align: center;
}
.teaching-resources-faq-comparison-item h4 {
color: #1a237e;
margin-bottom: 10px;
font-size: 1.1rem;
}
.teaching-resources-faq-comparison-item p {
color: #666;
margin: 0;
font-size: 0.95rem;
}
.teaching-resources-faq-checklist {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.teaching-resources-faq-checklist-item {
display: flex;
align-items: center;
gap: 12px;
color: #555;
}
.teaching-resources-faq-checklist-icon {
color: #4aff9d;
font-weight: bold;
font-size: 1.2rem;
min-width: 20px;
}
.teaching-resources-faq-price-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 20px 0;
}
.teaching-resources-faq-price-card {
background: white;
padding: 25px;
border-radius: 16px;
border: 1px solid #e8f1ff;
text-align: center;
transition: all 0.3s ease;
}
.teaching-resources-faq-price-card:hover {
border-color: #4a6bff;
transform: translateY(-5px);
}
.teaching-resources-faq-price-card h4 {
color: #1a237e;
margin-bottom: 15px;
font-size: 1.2rem;
}
.teaching-resources-faq-price {
font-size: 2rem;
font-weight: 800;
color: #4a6bff;
margin-bottom: 10px;
}
.teaching-resources-faq-price-card p {
color: #666;
margin: 0;
font-size: 0.95rem;
}
.teaching-resources-faq-benefits {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
.teaching-resources-faq-benefit {
display: flex;
gap: 20px;
align-items: flex-start;
background: rgba(248, 251, 255, 0.8);
padding: 20px;
border-radius: 12px;
}
.teaching-resources-faq-benefit-icon {
font-size: 2rem;
min-width: 50px;
text-align: center;
}
.teaching-resources-faq-benefit-content h4 {
color: #1a237e;
margin-bottom: 8px;
font-size: 1.2rem;
}
.teaching-resources-faq-benefit-content p {
color: #555;
margin: 0;
font-size: 0.95rem;
}
.teaching-resources-faq-note-box {
background: rgba(255, 242, 226, 0.8);
border-radius: 12px;
padding: 20px;
margin: 20px 0;
border-left: 4px solid #ff9e4a;
}
.teaching-resources-faq-note-box h4 {
color: #e65100;
margin-bottom: 10px;
font-size: 1.1rem;
}
.teaching-resources-faq-tech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
margin: 20px 0;
}
.teaching-resources-faq-tech-item {
text-align: center;
padding: 20px 15px;
background: white;
border-radius: 12px;
border: 1px solid #e8f1ff;
transition: all 0.3s ease;
}
.teaching-resources-faq-tech-item:hover {
border-color: #4a6bff;
transform: translateY(-5px);
}
.teaching-resources-faq-tech-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
.teaching-resources-faq-tech-item h4 {
color: #1a237e;
margin-bottom: 10px;
font-size: 1.1rem;
}
.teaching-resources-faq-tech-item p {
color: #666;
margin: 0;
font-size: 0.9rem;
}
.teaching-resources-faq-destinations {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 20px 0;
}
.teaching-resources-faq-destination {
background: white;
padding: 20px;
border-radius: 12px;
border: 1px solid #e8f1ff;
}
.teaching-resources-faq-destination h4 {
color: #1a237e;
margin-bottom: 10px;
font-size: 1.2rem;
}
.teaching-resources-faq-destination p {
color: #555;
margin: 0;
font-size: 0.95rem;
}
.teaching-resources-faq-salary-table {
border-radius: 12px;
overflow: hidden;
border: 1px solid #e8f1ff;
margin: 20px 0;
background: white;
}
.teaching-resources-faq-salary-row {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
border-bottom: 1px solid #f0f5ff;
}
.teaching-resources-faq-salary-row:last-child {
border-bottom: none;
}
.teaching-resources-faq-salary-header {
background: #f8fbff;
font-weight: 600;
color: #1a237e;
}
.teaching-resources-faq-salary-cell {
padding: 15px 20px;
color: #555;
}
.teaching-resources-faq-salary-header .teaching-resources-faq-salary-cell {
color: #1a237e;
}
.teaching-resources-faq-requirements {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
.teaching-resources-faq-requirement {
background: white;
padding: 20px;
border-radius: 12px;
border: 1px solid #e8f1ff;
}
.teaching-resources-faq-requirement-title {
color: #1a237e;
font-weight: 600;
margin-bottom: 10px;
font-size: 1.1rem;
padding-bottom: 10px;
border-bottom: 2px solid #f0f5ff;
}
.teaching-resources-faq-requirement-countries {
color: #555;
line-height: 1.6;
}
/* FAQ CTA Section */
.teaching-resources-faq-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
padding: 60px 40px;
background: linear-gradient(135deg, #2196F3 0%, #3F51B5 100%);
border-radius: 24px;
color: white;
position: relative;
overflow: hidden;
margin-top: 40px;
}
.teaching-resources-faq-cta::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
top: -150px;
right: -100px;
}
.teaching-resources-faq-cta-content {
flex: 1;
min-width: 300px;
z-index: 2;
}
.teaching-resources-faq-cta-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
color: aqua;
}
.teaching-resources-faq-cta-text {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 30px;
line-height: 1.7;
}
.teaching-resources-faq-cta-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.teaching-resources-faq-cta-btn {
padding: 16px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
display: inline-block;
text-align: center;
border: 2px solid transparent;
}
.teaching-resources-faq-cta-btn-primary {
background-color: #4aff9d;
color: #1a237e;
}
.teaching-resources-faq-cta-btn-primary:hover {
background-color: #3ae08d;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(74, 255, 157, 0.2);
}
.teaching-resources-faq-cta-btn-secondary {
background-color: transparent;
color: white;
border-color: rgba(255, 255, 255, 0.3);
}
.teaching-resources-faq-cta-btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: white;
transform: translateY(-3px);
}
.teaching-resources-faq-cta-visual {
flex: 1;
min-width: 300px;
height: 200px;
position: relative;
z-index: 1;
}
.teaching-resources-faq-cta-graphic {
width: 100%;
height: 100%;
position: relative;
}
.teaching-resources-faq-cta-circle {
position: absolute;
border-radius: 50%;
border: 2px solid rgb(3 169 244 / 85%);
animation: teaching-resources-faq-rotate 20s linear infinite;
}
.teaching-resources-faq-cta-circle-1 {
width: 100px;
height: 100px;
top: 0;
left: 50%;
}
.teaching-resources-faq-cta-circle-2 {
width: 70px;
height: 70px;
bottom: 30px;
left: 20%;
animation-direction: reverse;
animation-duration: 15s;
}
.teaching-resources-faq-cta-circle-3 {
width: 50px;
height: 50px;
top: 50px;
right: 30px;
animation-duration: 25s;
}
.teaching-resources-faq-cta-circle-4 {
width: 80px;
height: 80px;
top: 150px;
right: 50px;
animation-duration: 25s;
}
/* Animations */
@keyframes teaching-resources-faq-fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes teaching-resources-faq-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes teaching-resources-faq-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
@keyframes teaching-resources-faq-pulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.1);
opacity: 0.5;
}
}
@keyframes teaching-resources-faq-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.teaching-resources-faq-hero-title {
font-size: 2.2rem;
}
.teaching-resources-faq-hero-subtitle {
font-size: 1.1rem;
}
.teaching-resources-faq-category-title,
.teaching-resources-faq-cta-title {
font-size: 1.8rem;
}
.teaching-resources-faq-hero-search {
flex-direction: column;
border-radius: 12px;
}
.teaching-resources-faq-search-input,
.teaching-resources-faq-search-btn {
width: 100%;
border-radius: 0;
}
.teaching-resources-faq-search-input {
border-radius: 12px 12px 0 0;
}
.teaching-resources-faq-search-btn {
border-radius: 0 0 12px 12px;
}
.teaching-resources-faq-hero-stats {
gap: 30px;
}
.teaching-resources-faq-stat-number {
font-size: 1.8rem;
}
.teaching-resources-faq-category-nav {
justify-content: center;
padding: 15px;
}
.teaching-resources-faq-category-btn {
padding: 12px 20px;
font-size: 0.9rem;
}
.teaching-resources-faq-question-text {
font-size: 1.1rem;
}
.teaching-resources-faq-salary-row {
grid-template-columns: 1fr;
border-bottom: 2px solid #f0f5ff;
}
.teaching-resources-faq-salary-header {
display: none;
}
.teaching-resources-faq-salary-cell {
padding: 10px 15px;
border-bottom: 1px solid #f0f5ff;
}
.teaching-resources-faq-salary-cell:before {
content: attr(data-label);
font-weight: 600;
color: #1a237e;
display: block;
margin-bottom: 5px;
font-size: 0.9rem;
}
.teaching-resources-faq-cta-buttons {
flex-direction: column;
}
.teaching-resources-faq-cta-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.teaching-resources-faq-hero-title {
font-size: 1.8rem;
}
.teaching-resources-container {
padding: 10px;
}
.teaching-resources-faq-hero,
.teaching-resources-faq-cta {
padding: 30px 20px;
}
.teaching-resources-faq-category-title {
font-size: 1.5rem;
}
.teaching-resources-faq-question {
padding: 20px;
}
.teaching-resources-faq-answer {
padding: 0 20px;
}
.teaching-resources-faq-item.active .teaching-resources-faq-answer {
padding: 0 20px 20px;
}
}
/* TEFL Brochure Download Page Styles */
.brochure-css-container {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
color: #333;
line-height: 1.6;
background: #f8fbff;
}
/* Hero Section */
.brochure-css-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
margin-bottom: 80px;
padding: 60px 40px;
background: linear-gradient(135deg, #d5e9ec 0%, #6e80e742 100%);
border-radius: 24px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 60px rgba(74, 107, 255, 0.08);
}
.brochure-css-hero::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(74, 107, 255, 0.05) 0%, transparent 70%);
top: -200px;
right: -150px;
}
.brochure-css-hero-content {
flex: 1;
min-width: 300px;
z-index: 2;
}
.brochure-css-hero-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(135deg, #4CAF50, #536bf2);
color: #f0f0f7d6;
font-weight: 700;
font-size: 0.9rem;
border-radius: 50px;
margin-bottom: 25px;
animation: brochure-css-pulse 2s infinite;
box-shadow: 0 5px 15px rgba(74, 255, 157, 0.3);
}
@keyframes brochure-css-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.brochure-css-hero-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 20px;
color: #1a237e;
line-height: 1.1;
animation: brochure-css-fadeInUp 1s ease;
}
.brochure-css-hero-highlight {
color: #ff9800;
position: relative;
display: inline-block;
}
.brochure-css-hero-highlight::after {
content: '';
position: absolute;
width: 100%;
height: 8px;
background: rgba(74, 107, 255, 0.15);
bottom: 8px;
left: 0;
z-index: -1;
border-radius: 4px;
}
.brochure-css-hero-subtitle {
font-size: 1.2rem;
color: #555;
margin-bottom: 30px;
max-width: 600px;
animation: brochure-css-fadeInUp 1s ease 0.2s both;
}
.brochure-css-hero-features {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
animation: brochure-css-fadeInUp 1s ease 0.4s both;
}
.brochure-css-hero-feature {
display: flex;
align-items: center;
gap: 12px;
background: white;
padding: 12px 20px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #e8f1ff;
transition: all 0.3s ease;
}
.brochure-css-hero-feature:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(74, 107, 255, 0.1);
border-color: #4a6bff;
}
.brochure-css-hero-feature-icon {
font-size: 1.5rem;
}
.brochure-css-hero-feature-text {
font-weight: 500;
color: #444;
}
.brochure-css-hero-visual {
flex: 1;
min-width: 300px;
height: 350px;
position: relative;
z-index: 1;
}
.brochure-css-hero-brochure {
width: 100%;
height: 100%;
position: relative;
perspective: 1000px;
animation: brochure-css-float 6s ease-in-out infinite;
}
@keyframes brochure-css-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.brochure-css-brochure-cover {
position: absolute;
width: 70%;
height: 85%;
background: linear-gradient(135deg, #4a6bff, #6c8eff);
border-radius: 12px 4px 4px 12px;
right: 0;
top: 50%;
transform: translateY(-50%);
padding: 30px;
box-shadow: 0 20px 40px rgba(74, 107, 255, 0.3);
display: flex;
flex-direction: column;
justify-content: center;
z-index: 2;
}
.brochure-css-brochure-title {
color: white;
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.2;
}
.brochure-css-brochure-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
}
.brochure-css-brochure-decoration {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
border-radius: 12px 4px 4px 12px;
}
.brochure-css-brochure-circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
.brochure-css-circle-1 {
width: 60px;
height: 60px;
top: 30px;
left: 30px;
}
.brochure-css-circle-2 {
width: 40px;
height: 40px;
bottom: 40px;
right: 40px;
}
.brochure-css-brochure-line {
position: absolute;
width: 80%;
height: 2px;
background: rgba(255, 255, 255, 0.2);
bottom: 100px;
left: 10%;
}
.brochure-css-brochure-pages {
position: absolute;
width: 70%;
height: 85%;
background: white;
border-radius: 12px 4px 4px 12px;
right: -15px;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.brochure-css-brochure-page {
position: absolute;
width: 100%;
height: 100%;
background: white;
border-radius: 12px 4px 4px 12px;
border: 1px solid #e8f1ff;
}
.brochure-css-brochure-page:nth-child(2) {
transform: translateX(-5px);
opacity: 0.8;
}
.brochure-css-brochure-page:nth-child(3) {
transform: translateX(-10px);
opacity: 0.6;
}
.brochure-css-hero-ornaments {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.brochure-css-hero-ornament {
position: absolute;
border-radius: 50%;
background: rgb(251 242 165);
animation: brochure-css-rotate 20s linear infinite;
}
.brochure-css-ornament-1 {
width: 30px;
height: 30px;
top: 20px;
left: 20px;
animation-duration: 25s;
}
.brochure-css-ornament-2 {
width: 50px;
height: 50px;
bottom: 40px;
left: 50px;
animation-direction: reverse;
}
.brochure-css-ornament-3 {
width: 20px;
height: 20px;
top: 100px;
right: 80px;
animation-duration: 30s;
}
@keyframes brochure-css-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Download Section */
.brochure-css-download-section {
margin-bottom: 80px;
}
.brochure-css-download-container {
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
border: 1px solid #e8f1ff;
}
.brochure-css-download-header {
padding: 40px 40px 20px;
text-align: center;
background: linear-gradient(135deg, #8bc34a9e, #2196F3);
}
.brochure-css-download-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a237e;
margin-bottom: 15px;
}
.brochure-css-download-subtitle {
color: #444444;
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.brochure-css-download-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 600px;
}
.brochure-css-download-form-container {
padding: 40px;
background: white;
border-right: 1px solid #f0f5ff;
}
.brochure-css-form-header {
margin-bottom: 30px;
text-align: center;
}
.brochure-css-form-icon {
font-size: 3rem;
margin-bottom: 15px;
animation: brochure-css-bounce 2s infinite;
}
@keyframes brochure-css-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.brochure-css-form-title {
font-size: 1.8rem;
font-weight: 700;
color: #1a237e;
margin-bottom: 10px;
}
.brochure-css-form-subtitle {
color: #666;
font-size: 1rem;
}
.brochure-css-download-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.brochure-css-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.brochure-css-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.brochure-css-form-label {
font-weight: 600;
color: #444;
font-size: 0.95rem;
}
.brochure-css-input-wrapper {
position: relative;
display: flex;
align-items: center;
background: white;
border: 2px solid #e8f1ff;
border-radius: 12px;
padding: 0 15px;
transition: all 0.3s ease;
}
.brochure-css-input-wrapper:focus-within {
border-color: #4a6bff;
box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.1);
}
.brochure-css-input-icon {
font-size: 1.2rem;
margin-right: 12px;
color: #666;
}
.brochure-css-form-input,
.brochure-css-form-select,
.brochure-css-form-textarea {
flex: 1;
padding: 16px 0;
border: none;
background: transparent;
font-size: 1rem;
color: #333;
outline: none;
font-family: inherit;
}
.brochure-css-form-textarea {
resize: vertical;
min-height: 60px;
padding: 16px 0;
}
.brochure-css-form-select {
appearance: none;
cursor: pointer;
}
.brochure-css-select-arrow {
position: absolute;
right: 15px;
color: #666;
pointer-events: none;
transition: transform 0.3s ease;
}
.brochure-css-input-wrapper:focus-within .brochure-css-select-arrow {
transform: rotate(180deg);
}
.brochure-css-checkbox-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 5px;
}
.brochure-css-checkbox-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
padding: 8px 0;
}
.brochure-css-checkbox {
display: none;
}
.brochure-css-checkbox-custom {
width: 20px;
height: 20px;
border: 2px solid #e8f1ff;
border-radius: 6px;
position: relative;
transition: all 0.3s ease;
flex-shrink: 0;
}
.brochure-css-checkbox:checked + .brochure-css-checkbox-custom {
background: #4a6bff;
border-color: #4a6bff;
}
.brochure-css-checkbox:checked + .brochure-css-checkbox-custom::after {
content: '✓';
position: absolute;
color: white;
font-size: 0.9rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.brochure-css-checkbox-text {
color: #444;
font-size: 0.95rem;
}
.brochure-css-privacy {
margin: 10px 0;
}
.brochure-css-privacy-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
padding: 15px;
background: #f8fbff;
border-radius: 12px;
border: 1px solid #e8f1ff;
}
.brochure-css-privacy-checkbox {
display: none;
}
.brochure-css-privacy-custom {
width: 20px;
height: 20px;
border: 2px solid #e8f1ff;
border-radius: 6px;
position: relative;
transition: all 0.3s ease;
flex-shrink: 0;
margin-top: 2px;
}
.brochure-css-privacy-checkbox:checked + .brochure-css-privacy-custom {
background: #4a6bff;
border-color: #4a6bff;
}
.brochure-css-privacy-checkbox:checked + .brochure-css-privacy-custom::after {
content: '✓';
position: absolute;
color: white;
font-size: 0.9rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.brochure-css-privacy-text {
color: #555;
font-size: 0.9rem;
line-height: 1.5;
}
.brochure-css-form-submit {
padding: 18px 30px;
background: linear-gradient(135deg, #111a43, #6c8eff);
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 10px;
}
.brochure-css-form-submit:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(74, 107, 255, 0.3);
background: linear-gradient(135deg, #3a5be0, #5a7eff);
}
.brochure-css-submit-icon {
font-size: 1.3rem;
}
.brochure-css-submit-text {
flex: 1;
text-align: center;
}
.brochure-css-form-note {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: #f0f7ff;
border-radius: 12px;
margin-top: 15px;
}
.brochure-css-note-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.brochure-css-note-text {
color: #555;
font-size: 0.9rem;
}
/* Benefits Sidebar */
.brochure-css-download-benefits {
padding: 40px;
background: linear-gradient(135deg, #f8fbff, #f0f7ff);
overflow-y: auto;
}
.brochure-css-benefits-title {
font-size: 1.8rem;
font-weight: 700;
color: #1a237e;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #e8f1ff;
}
.brochure-css-benefits-list {
display: flex;
flex-direction: column;
gap: 25px;
margin-bottom: 40px;
}
.brochure-css-benefit {
display: flex;
gap: 20px;
padding: 20px;
background: white;
border-radius: 16px;
border: 1px solid #e8f1ff;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.brochure-css-benefit:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(74, 107, 255, 0.1);
border-color: #4a6bff;
}
.brochure-css-benefit::before {
content: '';
position: absolute;
width: 4px;
height: 100%;
background: #4a6bff;
left: 0;
top: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.brochure-css-benefit:hover::before {
opacity: 1;
}
.brochure-css-benefit-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.brochure-css-benefit-icon-inner {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #111a43, #6c8eff);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
z-index: 2;
}
.brochure-css-benefit-icon::before {
content: '';
position: absolute;
width: 50px;
height: 50px;
background: rgba(74, 107, 255, 0.1);
border-radius: 50%;
z-index: 1;
animation: brochure-css-pulse-icon 2s infinite;
}
@keyframes brochure-css-pulse-icon {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
.brochure-css-benefit-content {
flex: 1;
}
.brochure-css-benefit-heading {
font-size: 1.2rem;
font-weight: 600;
color: #1a237e;
margin-bottom: 8px;
}
.brochure-css-benefit-text {
color: #555;
font-size: 0.95rem;
line-height: 1.6;
}
.brochure-css-file-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 40px;
}
.brochure-css-file-detail {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: white;
border-radius: 16px;
border: 1px solid #e8f1ff;
}
.brochure-css-file-icon {
font-size: 2rem;
flex-shrink: 0;
}
.brochure-css-file-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.brochure-css-file-type {
font-weight: 600;
color: #1a237e;
font-size: 1rem;
}
.brochure-css-file-size {
color: #666;
font-size: 0.9rem;
}
/* Features Section */
.brochure-css-features-section {
margin-bottom: 80px;
padding: 60px 40px;
background: white;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
border: 1px solid #e8f1ff;
}
.brochure-css-features-header {
text-align: center;
margin-bottom: 50px;
}
.brochure-css-features-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a237e;
margin-bottom: 15px;
}
.brochure-css-features-highlight {
color: #ff9800;
position: relative;
}
.brochure-css-features-highlight::after {
content: '';
position: absolute;
width: 100%;
height: 8px;
background: rgba(74, 107, 255, 0.15);
bottom: 5px;
left: 0;
z-index: -1;
border-radius: 4px;
}
.brochure-css-features-subtitle {
color: #666;
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.brochure-css-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.brochure-css-feature-card {
padding: 30px;
background: #f8fbff;
border-radius: 20px;
border: 1px solid #e8f1ff;
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.brochure-css-feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(74, 107, 255, 0.1);
border-color: #4a6bff;
}
.brochure-css-feature-card-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
position: relative;
}
.brochure-css-feature-card-icon-bg {
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0.1;
position: absolute;
top: 0;
left: 0;
animation: brochure-css-pulse-icon 3s infinite;
}
.brochure-css-feature-card-icon-text {
position: relative;
font-size: 2rem;
line-height: 80px;
}
.brochure-css-feature-card-title {
font-size: 1.3rem;
font-weight: 600;
color: #1a237e;
margin-bottom: 15px;
}
.brochure-css-feature-card-text {
color: #555;
font-size: 0.95rem;
line-height: 1.6;
}
.brochure-css-feature-card-decoration {
position: absolute;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #4a6bff, #6c8eff);
bottom: 0;
left: 0;
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: left;
}
.brochure-css-feature-card:hover .brochure-css-feature-card-decoration {
transform: scaleX(1);
}
.brochure-css-features-cta {
text-align: center;
padding: 40px;
background: linear-gradient(135deg, #f8fbff, #f0f7ff);
border-radius: 20px;
border: 2px dashed #4a6bff;
}
.brochure-css-features-cta-text {
font-size: 1.2rem;
color: #555;
margin-bottom: 25px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.brochure-css-features-cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 35px;
background: linear-gradient(135deg, #4a6bff, #6c8eff);
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.brochure-css-features-cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(74, 107, 255, 0.3);
background: linear-gradient(135deg, #3a5be0, #5a7eff);
}
.brochure-css-cta-button-icon {
font-size: 1.3rem;
}
/* Testimonials */
.brochure-css-testimonials {
margin-bottom: 80px;
padding: 60px 40px;
background: linear-gradient(135deg, #f8fbff, #f0f7ff);
border-radius: 24px;
}
.brochure-css-testimonials-header {
text-align: center;
margin-bottom: 50px;
}
.brochure-css-testimonials-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a237e;
margin-bottom: 15px;
}
.brochure-css-testimonials-subtitle {
color: #666;
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.brochure-css-testimonials-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.brochure-css-testimonial {
background: white;
padding: 30px;
border-radius: 20px;
border: 1px solid #e8f1ff;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.brochure-css-testimonial:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(74, 107, 255, 0.1);
}
.brochure-css-testimonial-content {
position: relative;
margin-bottom: 25px;
}
.brochure-css-testimonial-quote {
position: absolute;
font-size: 4rem;
color: rgba(74, 107, 255, 0.1);
top: -20px;
left: -10px;
line-height: 1;
}
.brochure-css-testimonial-text {
color: #555;
font-size: 1rem;
line-height: 1.7;
padding-left: 20px;
}
.brochure-css-testimonial-author {
display: flex;
align-items: center;
gap: 15px;
padding-top: 20px;
border-top: 1px solid #f0f5ff;
}
.brochure-css-testimonial-avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #4a6bff, #6c8eff);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
flex-shrink: 0;
}
.brochure-css-testimonial-info {
display: flex;
flex-direction: column;
gap: 5px;
}
.brochure-css-testimonial-name {
font-weight: 600;
color: #1a237e;
font-size: 1.1rem;
}
.brochure-css-testimonial-role {
color: #666;
font-size: 0.9rem;
}
/* Final CTA */
.brochure-css-final-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
padding: 60px 40px;
background: linear-gradient(135deg, #4CAF50 0%, #3F51B5 100%);
border-radius: 24px;
color: white;
position: relative;
overflow: hidden;
}
.brochure-css-final-cta::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
top: -150px;
right: -100px;
}
.brochure-css-final-cta-content {
flex: 1;
min-width: 300px;
z-index: 2;
}
.brochure-css-final-cta-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
color: #ffeb3be3;
}
.brochure-css-final-cta-text {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 30px;
line-height: 1.7;
}
.brochure-css-final-cta-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 25px;
}
.brochure-css-final-cta-button {
padding: 18px 32px;
border-radius: 12px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 12px;
border: 2px solid transparent;
cursor: pointer;
}
.brochure-css-final-cta-primary {
background: #0f661273;
color: #eaeaf0;
}
.brochure-css-final-cta-primary:hover {
background: linear-gradient(135deg, #ff980094, #ff9800ad);
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(74, 255, 157, 0.3);
}
.brochure-css-final-cta-secondary {
background: transparent;
color: white;
border-color: rgba(255, 255, 255, 0.3);
}
.brochure-css-final-cta-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
transform: translateY(-3px);
}
.brochure-css-final-cta-icon {
font-size: 1.3rem;
}
.brochure-css-final-cta-guarantee {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.brochure-css-guarantee-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.brochure-css-guarantee-text {
font-size: 0.95rem;
opacity: 0.9;
}
.brochure-css-final-cta-visual {
flex: 1;
min-width: 300px;
height: 200px;
position: relative;
z-index: 1;
}
.brochure-css-final-cta-graphic {
width: 100%;
height: 100%;
position: relative;
}
.brochure-css-final-cta-dot {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: brochure-css-pulse 2s infinite;
}
.brochure-css-dot-1 {
width: 60px;
height: 60px;
top: -90px;
left: 30px;
animation-delay: 0s;
}
.brochure-css-dot-2 {
width: 60px;
height: 60px;
top: 60px;
right: 40px;
animation-delay: 0.3s;
}
.brochure-css-dot-3 {
width: 100px;
height: 100px;
bottom: 75px;
left: 100px;
animation-delay: 0.6s;
}
.brochure-css-dot-4 {
width: 45px;
height: 45px;
bottom: 191px;
right: 100px;
animation-delay: 0.9s;
}
.brochure-css-final-cta-arrow {
position: absolute;
width: 250px;
height: 250px;
background: url('data:image/svg+xml,') no-repeat center;
background-size: contain;
top: 44%;
left: 33%;
transform: translate(-50%, -50%);
animation: brochure-css-rotate 10s linear infinite;
}
/* Mobile Responsive */
@media (max-width: 992px) {
.brochure-css-download-content {
grid-template-columns: 1fr;
}
.brochure-css-download-form-container {
border-right: none;
border-bottom: 1px solid #f0f5ff;
}
}
@media (max-width: 768px) {
.brochure-css-hero-title {
font-size: 2.2rem;
}
.brochure-css-download-title,
.brochure-css-features-title,
.brochure-css-testimonials-title,
.brochure-css-final-cta-title {
font-size: 2rem;
}
.brochure-css-hero,
.brochure-css-features-section,
.brochure-css-testimonials,
.brochure-css-final-cta {
padding: 40px 20px;
}
.brochure-css-form-row {
grid-template-columns: 1fr;
}
.brochure-css-download-form-container,
.brochure-css-download-benefits {
padding: 30px 20px;
}
.brochure-css-features-grid {
grid-template-columns: 1fr;
}
.brochure-css-testimonials-container {
grid-template-columns: 1fr;
}
.brochure-css-final-cta-buttons {
flex-direction: column;
}
.brochure-css-final-cta-button {
width: 100%;
justify-content: center;
}
.brochure-css-file-info {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.brochure-css-hero-title {
font-size: 1.8rem;
}
.brochure-css-container {
padding: 10px;
}
.brochure-css-hero-brochure {
height: 250px;
}
.brochure-css-hero-visual {
height: 250px;
}
.brochure-css-download-title,
.brochure-css-features-title,
.brochure-css-testimonials-title,
.brochure-css-final-cta-title {
font-size: 1.6rem;
}
.brochure-css-hero-features {
flex-direction: column;
}
}
/* Form Validation Styles */
.brochure-css-form-input:invalid:not(:focus):not(:placeholder-shown) {
border-color: #ff4757;
}
.brochure-css-form-input:valid:not(:focus):not(:placeholder-shown) {
border-color: #2ed573;
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
/* Contact Us Page Styles */
.contact-us-container {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
color: #333;
line-height: 1.6;
}
/* Hero Section */
.contact-us-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
margin-bottom: 80px;
padding: 60px 40px;
background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
border-radius: 24px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 60px rgba(74, 107, 255, 0.08);
}
.contact-us-hero::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(74, 107, 255, 0.05) 0%, transparent 70%);
top: -150px;
right: -100px;
}
.contact-us-hero-content {
flex: 1;
min-width: 300px;
z-index: 2;
}
.contact-us-hero-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(135deg, #4a6bff, #6c8eff);
color: white;
font-weight: 700;
font-size: 0.9rem;
border-radius: 50px;
margin-bottom: 25px;
animation: contact-us-pulse 2s infinite;
}
@keyframes contact-us-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
}
.contact-us-hero-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 20px;
color: #1a237e;
line-height: 1.1;
}
.contact-us-hero-highlight {
color: #4a6bff;
position: relative;
display: inline-block;
}
.contact-us-hero-highlight::after {
content: '';
position: absolute;
width: 100%;
height: 8px;
background: rgba(74, 107, 255, 0.15);
bottom: 8px;
left: 0;
z-index: -1;
border-radius: 4px;
}
.contact-us-hero-subtitle {
font-size: 1.2rem;
color: #555;
margin-bottom: 30px;
max-width: 600px;
}
.contact-us-hero-stats {
display: flex;
gap: 40px;
flex-wrap: wrap;
margin-top: 30px;
}
.contact-us-stat {
display: flex;
flex-direction: column;
}
.contact-us-stat-number {
font-size: 2.2rem;
font-weight: 800;
color: #4a6bff;
line-height: 1;
margin-bottom: 5px;
}
.contact-us-stat-label {
color: #666;
font-size: 0.95rem;
font-weight: 500;
max-width: 100px;
}
.contact-us-hero-visual {
flex: 1;
min-width: 300px;
height: 350px;
position: relative;
z-index: 1;
}
.contact-us-hero-globe {
width: 100%;
height: 100%;
position: relative;
}
.contact-us-globe-base {
position: absolute;
width: 400px;
height: 400px;
background: linear-gradient(135deg, #e8f1ff, #f0f7ff);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: inset 0 0 50px rgba(74, 107, 255, 0.1);
}
.contact-us-globe-sphere {
position: absolute;
width: 300px;
height: 300px;
background: linear-gradient(135deg, #4a6bff, #6c8eff);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: contact-us-rotate 20s linear infinite;
box-shadow: 0 20px 40px rgba(74, 107, 255, 0.3);
}
@keyframes contact-us-rotate {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.contact-us-globe-line {
position: absolute;
background: rgba(255, 255, 255, 0.1);
}
.contact-us-globe-line-1 {
width: 180px;
height: 1px;
top: 50%;
left: 10px;
}
.contact-us-globe-line-2 {
width: 1px;
height: 180px;
left: 50%;
top: 10px;
}
.contact-us-globe-line-3 {
width: 200px;
height: 200px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: contact-us-rotate 20s linear infinite;
}
.contact-us-globe-marker {
position: absolute;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
cursor: pointer;
animation: contact-us-float 3s ease-in-out infinite;
}
@keyframes contact-us-float {
0%, 100% { transform: translate(-50%, -50%) translateY(0); }
50% { transform: translate(-50%, -50%) translateY(-10px); }
}
.contact-us-marker-pin {
position: absolute;
width: 20px;
height: 20px;
background: #ff9e4a;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.contact-us-marker-pulse {
position: absolute;
width: 100px;
height: 100px;
background: #ff9e4a;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: contact-us-pulse-marker 2s infinite;
}
@keyframes contact-us-pulse-marker {
0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.7; }
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
.contact-us-marker-london {
top: 40%;
left: 50%;
animation-delay: 0s;
}
.contact-us-marker-newyork {
top: 45%;
left: 25%;
animation-delay: 0.5s;
}
.contact-us-marker-sydney {
top: 65%;
left: 85%;
animation-delay: 1s;
}
.contact-us-marker-dubai {
top: 50%;
left: 60%;
animation-delay: 1.5s;
}
.contact-us-hero-connections {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.contact-us-connection {
position: absolute;
background: rgba(74, 107, 255, 0.1);
transform-origin: left;
animation: contact-us-connection-glow 3s ease-in-out infinite;
}
@keyframes contact-us-connection-glow {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.contact-us-connection-1 {
width: 100px;
height: 2px;
top: 40%;
left: 50%;
transform: rotate(30deg);
animation-delay: 0s;
}
.contact-us-connection-2 {
width: 120px;
height: 2px;
top: 45%;
left: 25%;
transform: rotate(-20deg);
animation-delay: 1s;
}
.contact-us-connection-3 {
width: 150px;
height: 2px;
top: 65%;
left: 85%;
transform: rotate(45deg);
animation-delay: 2s;
}
/* Global Offices Section */
.contact-us-offices {
margin-bottom: 80px;
}
.contact-us-offices-header {
text-align: center;
margin-bottom: 50px;
}
.contact-us-offices-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a237e;
margin-bottom: 15px;
}
.contact-us-offices-highlight {
color: var(--cu-burgundy);
position: relative;
}
.contact-us-offices-highlight::after {
content: '';
position: absolute;
width: 100%;
height: 8px;
background: rgba(74, 107, 255, 0.15);
bottom: 5px;
left: 0;
z-index: -1;
border-radius: 4px;
}
.contact-us-offices-subtitle {
color: #666;
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.contact-us-offices-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.contact-us-office-card {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 2px solid #e8f1ff;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.contact-us-office-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(74, 107, 255, 0.15);
border-color: var(--cu-burgundy);
}
.contact-us-office-card::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
background: #be3144;
top: 0;
left: 0;
transform: scaleX(0);
transition: transform 0.4s ease;
transform-origin: left;
}
.contact-us-office-card:hover::before {
transform: scaleX(1);
}
.contact-us-office-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 2px solid #dc613521;
}
.contact-us-office-flag {
font-size: 2rem;
}
.contact-us-office-time {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.contact-us-office-time-label {
font-size: 0.8rem;
color: #666;
margin-bottom: 4px;
}
.contact-us-office-time-value {
font-weight: 700;
color: #4a6bff;
font-size: 1.1rem;
}
.contact-us-office-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--cu-burgundy);
margin-bottom: 20px;
}
.contact-us-office-details {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 25px;
}
.contact-us-office-detail {
display: flex;
gap: 15px;
align-items: flex-start;
}
.contact-us-office-icon {
font-size: 1.2rem;
color: #4a6bff;
flex-shrink: 0;
margin-top: 2px;
}
.contact-us-office-text {
color: #555;
font-size: 0.95rem;
line-height: 1.5;
}
.contact-us-office-specialization {
background: #f8fbff;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
border: 1px solid #e8f1ff;
}
.contact-us-office-badge {
display: inline-block;
padding: 6px 15px;
background: linear-gradient(135deg, #4a6bff, #6c8eff);
color: white;
font-weight: 600;
font-size: 0.85rem;
border-radius: 50px;
margin-bottom: 10px;
}
.contact-us-office-desc {
color: #555;
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
.contact-us-office-button {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #4a6bff, #6c8eff);
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-us-office-button:hover {
background: linear-gradient(135deg, #3a5be0, #5a7eff);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(74, 107, 255, 0.3);
}
.contact-us-office-button::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
top: 0;
left: -100%;
transition: left 0.6s ease;
}
.contact-us-office-button:hover::after {
left: 100%;
}
/* Contact Form Section */
.contact-us-form-section {
margin-bottom: 80px;
}
.contact-us-form-container {
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
border: 1px solid #e8f1ff;
}
.contact-us-form-header {
padding: 40px 40px 20px;
text-align: center;
background: linear-gradient(135deg, #f8fbff, #d7dee5);
}
.contact-us-form-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a237e;
margin-bottom: 15px;
}
.contact-us-form-highlight {
color: #4a6bff;
position: relative;
}
.contact-us-form-highlight::after {
content: '';
position: absolute;
width: 100%;
height: 8px;
background: rgba(74, 107, 255, 0.15);
bottom: 5px;
left: 0;
z-index: -1;
border-radius: 4px;
}
.contact-us-form-subtitle {
color: #666;
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.contact-us-form-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0;
}
.contact-us-form {
padding: 40px;
border-right: 1px solid #f0f5ff;
}
.contact-us-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 25px;
}
.contact-us-form-group {
margin-bottom: 30px;
position: relative;
}
.contact-us-form-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-weight: 600;
color: #444;
font-size: 0.95rem;
}
.contact-us-label-text {
flex: 1;
}
.contact-us-label-icon {
font-size: 1.2rem;
opacity: 0.7;
}
.contact-us-form-input,
.contact-us-form-select,
.contact-us-form-textarea {
width: 100%;
padding: 16px 20px;
border: 2px solid #e8f1ff;
border-radius: 12px;
font-size: 1rem;
color: #333;
background: white;
transition: all 0.3s ease;
font-family: inherit;
}
.contact-us-form-input:focus,
.contact-us-form-select:focus,
.contact-us-form-textarea:focus {
outline: none;
border-color: #4a6bff;
box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.1);
}
.contact-us-input-focus {
position: absolute;
width: 0;
height: 2px;
background: #4a6bff;
bottom: 0;
left: 50%;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.contact-us-form-input:focus ~ .contact-us-input-focus,
.contact-us-form-select:focus ~ .contact-us-input-focus,
.contact-us-form-textarea:focus ~ .contact-us-input-focus {
width: 100%;
}
.contact-us-form-select {
appearance: none;
cursor: pointer;
padding-right: 50px;
}
.contact-us-select-arrow {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: #666;
pointer-events: none;
transition: transform 0.3s ease;
}
.contact-us-form-select:focus + .contact-us-select-arrow {
transform: translateY(-50%) rotate(180deg);
}
.contact-us-office-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.contact-us-office-option input {
display: none;
}
.contact-us-office-label {
display: flex;
align-items: center;
gap: 10px;
padding: 15px;
border: 2px solid #e8f1ff;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.contact-us-office-option input:checked + .contact-us-office-label {
border-color: #4a6bff;
background: #f8fbff;
}
.contact-us-office-radio {
width: 20px;
height: 20px;
border: 2px solid #e8f1ff;
border-radius: 50%;
position: relative;
transition: all 0.3s ease;
}
.contact-us-office-option input:checked + .contact-us-office-label .contact-us-office-radio {
border-color: #4a6bff;
}
.contact-us-office-option input:checked + .contact-us-office-label .contact-us-office-radio::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #4a6bff;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contact-us-office-name {
font-weight: 600;
color: #1a237e;
flex: 1;
}
.contact-us-office-timezone {
color: #666;
font-size: 0.9rem;
}
.contact-us-inquiry-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.contact-us-inquiry-option input {
display: none;
}
.contact-us-inquiry-label {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
border: 2px solid #e8f1ff;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
height: 100%;
}
.contact-us-inquiry-option input:checked + .contact-us-inquiry-label {
border-color: #4a6bff;
background: #f8fbff;
transform: translateY(-2px);
}
.contact-us-inquiry-icon {
font-size: 1.8rem;
flex-shrink: 0;
}
.contact-us-inquiry-content {
flex: 1;
}
.contact-us-inquiry-title {
font-weight: 600;
color: #1a237e;
margin-bottom: 5px;
font-size: 1rem;
}
.contact-us-inquiry-desc {
color: #666;
font-size: 0.85rem;
line-height: 1.4;
}
.contact-us-message-wrapper {
position: relative;
}
.contact-us-form-textarea {
resize: vertical;
min-height: 120px;
padding-bottom: 40px;
}
.contact-us-message-counter {
position: absolute;
bottom: 10px;
right: 15px;
font-size: 0.85rem;
color: #999;
}
.contact-us-time-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.contact-us-time-option input {
display: none;
}
.contact-us-time-label {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
border: 2px solid #e8f1ff;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.contact-us-time-option input:checked + .contact-us-time-label {
border-color: #4a6bff;
background: #f8fbff;
}
.contact-us-time-checkbox {
width: 18px;
height: 18px;
border: 2px solid #e8f1ff;
border-radius: 4px;
position: relative;
transition: all 0.3s ease;
}
.contact-us-time-option input:checked + .contact-us-time-label .contact-us-time-checkbox {
border-color: #4a6bff;
background: #4a6bff;
}
.contact-us-time-option input:checked + .contact-us-time-label .contact-us-time-checkbox::after {
content: '✓';
position: absolute;
color: white;
font-size: 0.8rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contact-us-time-text {
font-size: 0.9rem;
color: #555;
}
.contact-us-consent {
margin: 30px 0;
padding: 20px;
background: #eff4f9;
border-radius: 12px;
border: 1px solid #e8f1ff;
}
.contact-us-consent-label {
display: flex;
align-items: flex-start;
gap: 15px;
cursor: pointer;
}
#contact-consent {
display: none;
}
.contact-us-consent-checkbox {
width: 20px;
height: 20px;
border: 2px solid #7e9bc8;
border-radius: 4px;
position: relative;
transition: all 0.3s ease;
flex-shrink: 0;
margin-top: 2px;
}
#contact-consent:checked + .contact-us-consent-checkbox {
border-color: #4a6bff;
background: #4a6bff;
}
#contact-consent:checked + .contact-us-consent-checkbox::after {
content: '✓';
position: absolute;
color: white;
font-size: 0.9rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contact-us-consent-text {
color: #555;
font-size: 0.9rem;
line-height: 1.5;
}
.contact-us-form-actions {
margin-top: 30px;
}
.contact-us-submit-button {
width: 100%;
padding: 20px;
background: linear-gradient(135deg, #4a6bff, #6c8eff);
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
position: relative;
overflow: hidden;
}
.contact-us-submit-button:hover {
background: linear-gradient(135deg, #3a5be0, #5a7eff);
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(74, 107, 255, 0.3);
}
.contact-us-submit-icon {
font-size: 1.3rem;
}
.contact-us-submit-loader {
display: none;
width: 20px;
height: 20px;
border: 2px solid transparent;
border-top-color: white;
border-radius: 50%;
animation: contact-us-spin 1s linear infinite;
}
@keyframes contact-us-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.contact-us-submit-button.loading .contact-us-submit-text {
opacity: 0.7;
}
.contact-us-submit-button.loading .contact-us-submit-loader {
display: block;
}
.contact-us-form-note {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: #f0f7ff;
border-radius: 12px;
margin-top: 20px;
}
.contact-us-note-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.contact-us-note-text {
color: #555;
font-size: 0.9rem;
}
/* Form Info Sidebar */
.contact-us-form-info {
padding: 40px;
background: linear-gradient(135deg, #f8fbff, #f0f7ff);
display: flex;
flex-direction: column;
gap: 30px;
}
.contact-us-info-card {
background: white;
border-radius: 16px;
padding: 25px;
text-align: center;
border: 1px solid #e8f1ff;
transition: all 0.3s ease;
}
.contact-us-info-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(74, 107, 255, 0.1);
border-color: var(--cu-burgundy);
}
.contact-us-info-icon {
font-size: 3rem;
margin-bottom: 15px;
animation: contact-us-bounce 2s infinite;
}
@keyframes contact-us-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.contact-us-info-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--cu-burgundy);
margin-bottom: 10px;
}
.contact-us-info-text {
color: #666;
font-size: 0.9rem;
margin-bottom: 15px;
line-height: 1.5;
}
.contact-us-info-phone {
font-size: 1.5rem;
font-weight: 800;
color: #4a6bff;
margin: 10px 0;
}
.contact-us-info-email {
font-size: 1.1rem;
font-weight: 600;
color: var(--cu-burgundy);
margin: 10px 0;
word-break: break-word;
}
.contact-us-info-hours,
.contact-us-info-response {
color: #666;
font-size: 0.85rem;
margin-top: 5px;
}
.contact-us-chat-button {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #d5572a, #a35539ad);
color: #f3f3f5f2;
border: none;
border-radius: 12px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 15px 0;
}
.contact-us-chat-button:hover {
background: linear-gradient(135deg, #FFC107, #FF9800);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(74, 255, 157, 0.3);
}
.contact-us-chat-icon {
font-size: 1.2rem;
}
.contact-us-chat-status {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}
.contact-us-status-dot {
width: 8px;
height: 8px;
background: #4aff9d;
border-radius: 50%;
animation: contact-us-pulse 2s infinite;
}
.contact-us-status-text {
font-size: 0.85rem;
color: #666;
}
/* FAQ Section */
.contact-us-faq {
margin-bottom: 80px;
padding: 60px 40px;
background: linear-gradient(135deg, #f8fbff, #d7dee5);
border-radius: 24px;
}
.contact-us-faq-header {
text-align: center;
margin-bottom: 50px;
}
.contact-us-faq-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a237e;
margin-bottom: 15px;
}
.contact-us-faq-highlight {
color: #4a6bff;
position: relative;
}
.contact-us-faq-highlight::after {
content: '';
position: absolute;
width: 100%;
height: 8px;
background: rgba(74, 107, 255, 0.15);
bottom: 5px;
left: 0;
z-index: -1;
border-radius: 4px;
}
.contact-us-faq-subtitle {
color: #666;
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.contact-us-faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.contact-us-faq-item {
background: white;
border-radius: 20px;
padding: 30px;
border: 1px solid #e8f1ff;
transition: all 0.3s ease;
}
.contact-us-faq-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(74, 107, 255, 0.1);
border-color: #4a6bff;
}
.contact-us-faq-question {
display: flex;
gap: 15px;
align-items: flex-start;
margin-bottom: 20px;
}
.contact-us-faq-icon {
font-size: 2rem;
flex-shrink: 0;
}
.contact-us-faq-question-text {
font-size: 1.2rem;
font-weight: 600;
color: #1a237e;
margin: 0;
line-height: 1.3;
}
.contact-us-faq-answer {
color: #555;
font-size: 0.95rem;
line-height: 1.6;
}
.contact-us-faq-list {
margin: 15px 0;
padding-left: 20px;
}
.contact-us-faq-list li {
margin-bottom: 8px;
color: #555;
}
.contact-us-faq-timeline {
margin: 20px 0;
}
.contact-us-timeline-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px 0;
border-bottom: 1px solid #f0f5ff;
}
.contact-us-timeline-item:last-child {
border-bottom: none;
}
.contact-us-timeline-time {
font-weight: 700;
color: #4a6bff;
min-width: 120px;
}
.contact-us-timeline-desc {
color: #555;
font-size: 0.9rem;
}
.contact-us-faq-advice {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.contact-us-advice-item {
display: flex;
gap: 12px;
align-items: flex-start;
}
.contact-us-advice-icon {
color: #4aff9d;
font-weight: bold;
font-size: 1.1rem;
flex-shrink: 0;
margin-top: 2px;
}
.contact-us-advice-text {
color: #555;
font-size: 0.9rem;
}
.contact-us-faq-languages {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 15px 0;
}
.contact-us-language {
background: #f8fbff;
padding: 10px 15px;
border-radius: 8px;
border: 1px solid #e8f1ff;
}
.contact-us-language-name {
font-weight: 600;
color: #1a237e;
display: block;
}
.contact-us-language-level {
font-size: 0.8rem;
color: #666;
display: block;
margin-top: 2px;
}
.contact-us-faq-note {
font-style: italic;
color: #666;
font-size: 0.9rem;
margin-top: 15px;
padding: 12px;
background: #f8fbff;
border-radius: 8px;
border-left: 3px solid #4a6bff;
}
/* Map Visualization */
.contact-us-map {
margin-bottom: 40px;
}
.contact-us-map-container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
padding: 60px 40px;
background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
border: 1px solid #e8f1ff;
}
.contact-us-map-visual {
flex: 1;
min-width: 300px;
height: 300px;
position: relative;
}
.contact-us-map-base {
width: 100%;
height: 100%;
background: #e8f1ff;
border-radius: 20px;
position: relative;
overflow: hidden;
}
.contact-us-map-path {
position: absolute;
background: linear-gradient(90deg, transparent, #4a6bff, transparent);
border-radius: 2px;
animation: contact-us-map-glow 3s ease-in-out infinite;
}
@keyframes contact-us-map-glow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}
.contact-us-map-path-1 {
width: 150px;
height: 2px;
top: 40%;
left: 20%;
transform: rotate(30deg);
animation-delay: 0s;
}
.contact-us-map-path-2 {
width: 180px;
height: 2px;
top: 60%;
left: 40%;
transform: rotate(-20deg);
animation-delay: 1s;
}
.contact-us-map-path-3 {
width: 120px;
height: 2px;
top: 30%;
left: 60%;
transform: rotate(45deg);
animation-delay: 2s;
}
.contact-us-map-marker {
position: absolute;
transform: translate(-50%, -50%);
animation: contact-us-marker-pulse 2s infinite;
}
@keyframes contact-us-marker-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
}
.contact-us-map-marker-dot {
width: 16px;
height: 16px;
background: #ff9e4a;
border-radius: 50%;
position: relative;
z-index: 2;
}
.contact-us-map-marker-label {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 5px 12px;
border-radius: 6px;
font-weight: 600;
color: #1a237e;
font-size: 0.85rem;
white-space: nowrap;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
}
.contact-us-map-marker:hover .contact-us-map-marker-label {
opacity: 1;
}
.contact-us-map-marker-london {
top: 40%;
left: 50%;
animation-delay: 0s;
}
.contact-us-map-marker-newyork {
top: 45%;
left: 25%;
animation-delay: 0.5s;
}
.contact-us-map-marker-sydney {
top: 70%;
left: 85%;
animation-delay: 1s;
}
.contact-us-map-marker-dubai {
top: 55%;
left: 65%;
animation-delay: 1.5s;
}
.contact-us-map-content {
flex: 1;
min-width: 300px;
}
.contact-us-map-title {
font-size: 2rem;
font-weight: 700;
color: #1a237e;
margin-bottom: 20px;
}
.contact-us-map-text {
color: #555;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 30px;
}
.contact-us-map-stats {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.contact-us-map-stat {
display: flex;
flex-direction: column;
}
.contact-us-map-stat-number {
font-size: 2.2rem;
font-weight: 800;
color: #4a6bff;
line-height: 1;
margin-bottom: 5px;
}
.contact-us-map-stat-label {
color: #666;
font-size: 0.9rem;
font-weight: 500;
max-width: 100px;
}
/* Mobile Responsive */
@media (max-width: 992px) {
.contact-us-form-content {
grid-template-columns: 1fr;
}
.contact-us-form {
border-right: none;
border-bottom: 1px solid #f0f5ff;
}
}
@media (max-width: 768px) {
.contact-us-hero-title {
font-size: 2.2rem;
}
.contact-us-offices-title,
.contact-us-form-title,
.contact-us-faq-title,
.contact-us-map-title {
font-size: 2rem;
}
.contact-us-hero,
.contact-us-faq,
.contact-us-map-container {
padding: 40px 20px;
}
.contact-us-form-row {
grid-template-columns: 1fr;
}
.contact-us-office-selector,
.contact-us-inquiry-grid,
.contact-us-time-selector {
grid-template-columns: 1fr;
}
.contact-us-office-grid {
grid-template-columns: 1fr;
}
.contact-us-faq-grid {
grid-template-columns: 1fr;
}
.contact-us-form,
.contact-us-form-info {
padding: 30px 20px;
}
.contact-us-hero-visual {
height: 300px;
}
}
@media (max-width: 480px) {
.contact-us-hero-title {
font-size: 1.8rem;
}
.contact-us-container {
padding: 10px;
}
.contact-us-offices-title,
.contact-us-form-title,
.contact-us-faq-title,
.contact-us-map-title {
font-size: 1.6rem;
}
.contact-us-hero-stats,
.contact-us-map-stats {
gap: 20px;
}
.contact-us-stat-number,
.contact-us-map-stat-number {
font-size: 1.8rem;
}
.contact-us-globe-sphere {
width: 150px;
height: 150px;
}
.contact-us-globe-base {
width: 200px;
height: 200px;
}
}
/* Success Message Styles */
.contact-us-success-message {
background: linear-gradient(135deg, #f0fff4, #e8f7ec);
border: 2px solid #2ed573;
border-radius: 16px;
padding: 25px;
margin-top: 20px;
display: flex;
gap: 20px;
align-items: center;
animation: contact-us-fadeIn 0.5s ease;
}
@keyframes contact-us-fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.contact-us-success-icon {
font-size: 2.5rem;
flex-shrink: 0;
}
.contact-us-success-content h4 {
color: #1a237e;
margin-bottom: 10px;
font-size: 1.2rem;
}
.contact-us-success-content p {
color: #555;
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
}
/* Form Validation Styles */
.contact-us-form-input:invalid:not(:focus):not(:placeholder-shown),
.contact-us-form-select:invalid:not(:focus) {
border-color: #ff4757;
}
.contact-us-form-input:valid:not(:focus):not(:placeholder-shown),
.contact-us-form-select:valid:not(:focus) {
border-color: #2ed573;
}
/* Masters-TEFL Course Page Styles */
/* Section Base */
.Masters-TEFL-section {
padding: 5rem 1.5rem;
box-sizing: border-box;
max-width: 1280px;
margin: 0 auto;
width: 100%;
}
/* === Curriculum Modules Grid === */
.masters-tefl-modules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.8rem;
margin-top: 3rem;
}
.masters-tefl-module-card {
background: rgba(45, 55, 72, 0.7);
border: 1px solid #4a5568;
border-radius: 15px;
padding: 1.8rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.masters-tefl-module-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: #4299e1;
}
.masters-tefl-featured-card {
border: 2px solid #4299e1;
background: rgba(66, 153, 225, 0.08);
}
.masters-tefl-hero {
text-align: center;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 20px;
margin: 1rem auto;
padding: 4rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
.masters-tefl-hero-content {
max-width: 800px;
}
.Masters-TEFL-container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.Masters-TEFL-section-header {
text-align: center;
margin-bottom: 60px;
}
.Masters-TEFL-section-title {
font-family: 'Montserrat', sans-serif;
font-size: 2.8rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: #1e293b;
}
.Masters-TEFL-highlight {
color: #ff9800;
position: relative;
display: inline-block;
}
.Masters-TEFL-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background-color: rgba(59, 130, 246, 0.15);
z-index: -1;
border-radius: 4px;
}
.Masters-TEFL-section-subtitle {
font-size: 1.2rem;
color: #64748b;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
/* Hero Section */
.Masters-TEFL-hero {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 100px 0 60px;
position: relative;
}
.Masters-TEFL-hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 40%;
height: 100%;
background: linear-gradient(45deg, #1e293b 0%, #334155 100%);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 25% 0);
z-index: 1;
}
.Masters-TEFL-hero-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
position: relative;
z-index: 2;
}
.Masters-TEFL-hero-content {
flex: 1;
max-width: 600px;
}
.Masters-TEFL-hero-visual {
flex: 1;
position: relative;
}
.Masters-TEFL-hero-badge {
background: white;
display: inline-flex;
align-items: center;
padding: 12px 20px;
border-radius: 50px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
gap: 15px;
}
.Masters-TEFL-hero-badge span {
font-weight: 600;
color: #1e293b;
}
.Masters-TEFL-stars {
display: flex;
align-items: center;
gap: 5px;
}
.Masters-TEFL-stars i {
color: #fbbf24;
font-size: 0.9rem;
}
.Masters-TEFL-stars span {
margin-left: 8px;
font-size: 0.9rem;
color: #64748b;
}
.Masters-TEFL-main-title {
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 25px;
color: #1a237e;
}
.Masters-TEFL-hero-subtitle {
font-size: 1.3rem;
color: #475569;
line-height: 1.6;
margin-bottom: 40px;
}
.Masters-TEFL-hero-cta {
display: flex;
gap: 20px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.Masters-TEFL-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 35px;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
gap: 12px;
border: none;
cursor: pointer;
}
.Masters-TEFL-primary-btn {
background: linear-gradient(135deg, #FFEB3B 0%, #FF9800 100%);
color: white;
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}
.Masters-TEFL-primary-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.4);
}
.Masters-TEFL-secondary-btn {
background: white;
color: #3b82f6;
border: 2px solid #3b82f6;
}
.Masters-TEFL-secondary-btn:hover {
background: #3b82f6;
color: white;
transform: translateY(-5px);
}
.Masters-TEFL-hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-top: 40px;
}
.Masters-TEFL-stat {
text-align: center;
}
.Masters-TEFL-stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: #ff9800;
line-height: 1;
margin-bottom: 8px;
}
.Masters-TEFL-stat-label {
font-size: 0.95rem;
color: #64748b;
font-weight: 500;
}
.Masters-TEFL-certificate-preview {
position: relative;
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
transform: perspective(1000px) rotateY(-5deg);
transition: transform 0.5s ease;
}
.Masters-TEFL-certificate-preview:hover {
transform: perspective(1000px) rotateY(0deg);
}
.Masters-TEFL-certificate-image {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-radius: 12px;
padding: 30px;
border: 2px dashed #cbd5e1;
}
.Masters-TEFL-certificate-content {
text-align: center;
position: relative;
}
.Masters-TEFL-certificate-content h3 {
color: #ff9800;
font-size: 1.8rem;
margin-bottom: 10px;
}
.Masters-TEFL-certificate-content p {
color: #64748b;
margin-bottom: 25px;
}
.Masters-TEFL-certificate-details {
text-align: left;
background: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.Masters-TEFL-certificate-seal {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #FFEB3B 0%, #FF9800 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
color: white;
font-size: 2rem;
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}
.Masters-TEFL-floating-element {
position: absolute;
background: white;
padding: 12px 20px;
border-radius: 50px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
z-index: 10;
animation: float 6s ease-in-out infinite;
}
.Masters-TEFL-floating-element i {
color: #ff9800;
}
.Masters-TEFL-floating-1 {
top: -20px;
left: -20px;
animation-delay: 0s;
}
.Masters-TEFL-floating-2 {
top: 50%;
right: -30px;
transform: translateY(-50%);
animation-delay: 2s;
}
.Masters-TEFL-floating-3 {
bottom: -20px;
left: 30px;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.Masters-TEFL-scroll-indicator {
text-align: center;
margin-top: 60px;
color: #64748b;
position: relative;
z-index: 2;
}
.Masters-TEFL-scroll-line {
width: 1px;
height: 50px;
background: #cbd5e1;
margin: 10px auto 0;
position: relative;
}
.Masters-TEFL-scroll-line::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 20px;
background: #3b82f6;
animation: scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown {
0% { top: 0; opacity: 1; }
100% { top: 30px; opacity: 0; }
}
/* Trust Section */
.Masters-TEFL-trust-section {
background: #f9fafb;
padding: 40px 20px;
border-bottom: 1px solid #e5e7eb;
}
.Masters-TEFL-trust-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.Masters-TEFL-trust-title {
font-size: 14px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 25px 0;
font-weight: 600;
}
.Masters-TEFL-trust-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
flex-wrap: wrap;
}
.Masters-TEFL-trust-logo {
color: #9ca3af;
font-size: 16px;
font-weight: 700;
opacity: 0.6;
transition: opacity 0.3s ease;
}
.Masters-TEFL-trust-logo:hover {
opacity: 1;
}
/* Overview Section */
.Masters-TEFL-overview-section {
padding: 100px 20px;
background: #ffffff;
}
.Masters-TEFL-overview-container {
max-width: 1200px;
margin: 0 auto;
}
.Masters-TEFL-section-header {
text-align: center;
margin-bottom: 60px;
}
.Masters-TEFL-section-tag {
display: inline-block;
background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
color: #ffffff;
padding: 8px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.Masters-TEFL-section-title {
font-size: 42px;
font-weight: 800;
color: #1a237e;
margin: 0 0 20px 0;
line-height: 1.2;
}
.Masters-TEFL-section-description {
font-size: 18px;
color: #6b7280;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
}
.Masters-TEFL-overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.Masters-TEFL-overview-card {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 20px;
padding: 40px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.Masters-TEFL-overview-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.Masters-TEFL-overview-card:hover::before {
transform: scaleX(1);
}
.Masters-TEFL-overview-card:hover {
border-color: #667eea;
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
}
.Masters-TEFL-card-icon-wrapper {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
transition: transform 0.3s ease;
}
.Masters-TEFL-overview-card:hover .Masters-TEFL-card-icon-wrapper {
transform: rotateY(360deg);
}
.Masters-TEFL-card-icon {
width: 35px;
height: 35px;
stroke: #ffffff;
stroke-width: 2px;
}
.Masters-TEFL-card-title {
font-size: 22px;
font-weight: 700;
color: #1f2937;
margin: 0 0 15px 0;
}
.Masters-TEFL-card-text {
font-size: 16px;
color: #6b7280;
line-height: 1.6;
margin: 0 0 20px 0;
}
.Masters-TEFL-card-list {
list-style: none;
padding: 0;
margin: 0;
}
.Masters-TEFL-card-list li {
font-size: 15px;
color: #4b5563;
padding: 8px 0;
padding-left: 30px;
position: relative;
}
.Masters-TEFL-card-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #10b981;
font-weight: 700;
font-size: 18px;
}
/* Curriculum Section */
.Masters-TEFL-curriculum-section {
padding: 100px 20px;
background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}
.Masters-TEFL-curriculum-container {
max-width: 1200px;
margin: 0 auto;
}
.Masters-TEFL-curriculum-grid {
display: grid;
gap: 25px;
}
.Masters-TEFL-curriculum-column {
display: flex;
flex-direction: column;
gap: 20px;
}
.Masters-TEFL-module-card {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 15px;
padding: 25px;
transition: all 0.3s ease;
cursor: pointer;
}
.Masters-TEFL-module-card:hover {
border-color: #667eea;
transform: translateX(10px);
box-shadow: -5px 5px 20px rgba(102, 126, 234, 0.15);
}
.Masters-TEFL-module-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
}
.Masters-TEFL-module-number {
background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
color: #ffffff;
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 16px;
flex-shrink: 0;
}
.Masters-TEFL-module-title {
font-size: 18px;
font-weight: 700;
color: #1f2937;
margin: 0;
}
.Masters-TEFL-module-desc {
font-size: 14px;
color: #6b7280;
line-height: 1.5;
margin: 0 0 15px 0;
}
.Masters-TEFL-module-duration {
display: flex;
align-items: center;
gap: 8px;
color: #9ca3af;
font-size: 13px;
font-weight: 600;
}
.Masters-TEFL-clock-icon {
width: 16px;
height: 16px;
}
/* How It Works Section */
.Masters-TEFL-how-it-works-section {
padding: 100px 20px;
background: linear-gradient(90deg, #00bcd4d1, #3f1192a8);
position: relative;
overflow: hidden;
}
.Masters-TEFL-how-it-works-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 10% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
}
.Masters-TEFL-how-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.Masters-TEFL-how-it-works-section .Masters-TEFL-section-title {
color: #ffffff;
}
.Masters-TEFL-how-it-works-section .Masters-TEFL-section-description {
color: #d1d5db;
}
.Masters-TEFL-steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-top: 60px;
}
.Masters-TEFL-step-item {
position: relative;
}
.Masters-TEFL-step-number {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #2196F3 0%, #03d6f1 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: 800;
color: #ffffff;
margin: 0 auto 25px;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
position: relative;
z-index: 2;
}
.Masters-TEFL-step-content {
text-align: center;
}
.Masters-TEFL-step-title {
font-size: 22px;
font-weight: 700;
color: #ffffff;
margin: 0 0 15px 0;
}
.Masters-TEFL-step-description {
font-size: 16px;
color: #d1d5db;
line-height: 1.6;
margin: 0;
}
.Masters-TEFL-step-connector {
position: absolute;
top: 40px;
left: 100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #667eea, transparent);
z-index: 1;
}
.Masters-TEFL-step-item:last-child .Masters-TEFL-step-connector {
display: none;
}
/* Destinations Section */
.Masters-TEFL-destinations-section {
padding: 100px 20px;
background: #ffffff;
}
.Masters-TEFL-destinations-container {
max-width: 1200px;
margin: 0 auto;
}
.Masters-TEFL-destinations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.Masters-TEFL-destination-card {
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
cursor: pointer;
}
.Masters-TEFL-destination-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.Masters-TEFL-destination-image {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.Masters-TEFL-destination-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
transition: background 0.3s ease;
}
.Masters-TEFL-destination-card:hover .Masters-TEFL-destination-image::before {
background: rgba(0, 0, 0, 0.2);
}
.Masters-TEFL-destination-flag {
font-size: 60px;
position: relative;
z-index: 1;
transition: transform 0.3s ease;
}
.Masters-TEFL-destination-card:hover .Masters-TEFL-destination-flag {
transform: scale(1.2);
}
.Masters-TEFL-destination-content {
padding: 25px;
}
.Masters-TEFL-destination-name {
font-size: 22px;
font-weight: 700;
color: #1f2937;
margin: 0 0 12px 0;
}
.Masters-TEFL-destination-info {
font-size: 15px;
color: #6b7280;
line-height: 1.5;
margin: 0 0 15px 0;
}
.Masters-TEFL-destination-stats {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.Masters-TEFL-stat-badge {
background: #f3f4f6;
color: #4b5563;
padding: 6px 14px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
}
.Masters-TEFL-destinations-cta {
text-align: center;
}
/* Testimonials Section */
.Masters-TEFL-testimonials-section {
padding: 100px 20px;
background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}
.Masters-TEFL-testimonials-container {
max-width: 1200px;
margin: 0 auto;
}
.Masters-TEFL-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.Masters-TEFL-testimonial-card {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 20px;
padding: 35px;
transition: all 0.3s ease;
}
.Masters-TEFL-testimonial-card:hover {
border-color: #fbbf24;
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(251, 191, 36, 0.15);
}
.Masters-TEFL-testimonial-rating {
margin-bottom: 20px;
}
.Masters-TEFL-star {
color: #fbbf24;
font-size: 20px;
margin-right: 3px;
}
.Masters-TEFL-testimonial-text {
font-size: 16px;
color: #4b5563;
line-height: 1.7;
margin: 0 0 25px 0;
font-style: italic;
}
.Masters-TEFL-testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.Masters-TEFL-author-avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
}
.Masters-TEFL-author-name {
font-size: 16px;
font-weight: 700;
color: #1f2937;
margin: 0 0 5px 0;
}
.Masters-TEFL-author-location {
font-size: 14px;
color: #6b7280;
margin: 0;
}
/* Pricing Section */
.Masters-TEFL-pricing-section {
padding: 100px 20px;
background: linear-gradient(135deg, #57bf5bb3 0%, #3247bad9 100%);
position: relative;
overflow: hidden;
}
.Masters-TEFL-pricing-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(251, 191, 36, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(102, 126, 234, 0.1) 0%, transparent 50%);
}
.Masters-TEFL-pricing-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.Masters-TEFL-pricing-section .Masters-TEFL-section-title {
color: #ffffff;
}
.Masters-TEFL-pricing-section .Masters-TEFL-section-description {
color: #d1d5db;
}
.Masters-TEFL-pricing-card-container {
display: flex;
justify-content: center;
margin-top: 60px;
}
.Masters-TEFL-pricing-card {
background: #ffffff;
border-radius: 25px;
padding: 50px 40px;
max-width: 500px;
width: 100%;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.Masters-TEFL-pricing-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
color: #ffffff;
padding: 10px 25px;
border-radius: 50px;
font-size: 14px;
font-weight: 700;
box-shadow: 0 5px 20px rgba(239, 68, 68, 0.4);
}
.Masters-TEFL-pricing-title {
font-size: 28px;
font-weight: 800;
color: #ff9800;
margin: 20px 0 10px 0;
text-align: center;
}
.Masters-TEFL-pricing-description {
font-size: 16px;
color: #6b7280;
text-align: center;
margin: 0 0 30px 0;
}
.Masters-TEFL-pricing-amount {
text-align: center;
margin-bottom: 20px;
}
.Masters-TEFL-old-price {
font-size: 24px;
color: #9ca3af;
text-decoration: line-through;
margin-right: 10px;
}
.Masters-TEFL-current-price {
font-size: 56px;
font-weight: 800;
color: #ff9800;
display: block;
line-height: 1;
margin: 10px 0;
}
.Masters-TEFL-price-period {
font-size: 16px;
color: #6b7280;
display: block;
}
.Masters-TEFL-pricing-savings {
text-align: center;
margin-bottom: 30px;
}
.Masters-TEFL-savings-badge {
display: inline-block;
background: #dcfce7;
color: #16a34a;
padding: 10px 20px;
border-radius: 50px;
font-size: 15px;
font-weight: 700;
}
.Masters-TEFL-pricing-features {
list-style: none;
padding: 0;
margin: 0 0 35px 0;
}
.Masters-TEFL-feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #f3f4f6;
}
.Masters-TEFL-feature-item:last-child {
border-bottom: none;
}
.Masters-TEFL-check-icon {
width: 20px;
height: 20px;
stroke: #10b981;
stroke-width: 3px;
flex-shrink: 0;
}
.Masters-TEFL-feature-item span {
font-size: 15px;
color: #4b5563;
font-weight: 500;
}
.Masters-TEFL-pricing-cta {
width: 100%;
background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
color: #ffffff;
padding: 18px 32px;
border-radius: 50px;
font-size: 18px;
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.Masters-TEFL-pricing-cta:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
.Masters-TEFL-pricing-guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 25px;
color: #6b7280;
font-size: 14px;
font-weight: 600;
}
.Masters-TEFL-faq-item.active .Masters-TEFL-faq-icon {
transform: rotate(180deg);
}
.Masters-TEFL-faq-icon {
transition: transform 0.3s ease;
}
.Masters-TEFL-shield-icon {
width: 20px;
height: 20px;
stroke: #10b981;
}
.Masters-TEFL-payment-options {
text-align: center;
margin-top: 50px;
}
.Masters-TEFL-payment-title {
font-size: 16px;
color: #d1d5db;
margin: 0 0 20px 0;
}
.Masters-TEFL-payment-icons {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
}
.Masters-TEFL-payment-icon {
color: #dde1e991;
font-size: 15px;
font-weight: 600;
}
/* FAQ Section */
.Masters-TEFL-faq-section {
padding: 100px 20px;
background: #ffffff;
}
.Masters-TEFL-faq-container {
max-width: 900px;
margin: 0 auto;
}
.Masters-TEFL-faq-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
.Masters-TEFL-faq-item {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
}
.Masters-TEFL-faq-item:hover {
border-color: #667eea;
}
.Masters-TEFL-faq-question {
padding: 25px 30px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.Masters-TEFL-faq-question h4 {
font-size: 18px;
font-weight: 700;
color: #1f2937;
margin: 0;
flex: 1;
}
.Masters-TEFL-faq-icon {
width: 24px;
height: 24px;
stroke: #667eea;
stroke-width: 2px;
transition: transform 0.3s ease;
flex-shrink: 0;
margin-left: 15px;
}
.Masters-TEFL-faq-item:hover .Masters-TEFL-faq-icon {
transform: rotate(180deg);
}
.Masters-TEFL-faq-answer {
padding: 0 30px 25px;
display: none;
}
.Masters-TEFL-faq-answer p {
font-size: 16px;
color: #6b7280;
line-height: 1.7;
margin: 0;
}
/* Final CTA Section */
.Masters-TEFL-final-cta-section {
padding: 100px 20px;
background: linear-gradient(135deg, #4CAF50 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}
.Masters-TEFL-final-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}
.Masters-TEFL-final-cta-container {
max-width: 900px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.Masters-TEFL-cta-content {
margin-bottom: 40px;
}
.Masters-TEFL-cta-title {
font-size: 48px;
font-weight: 800;
color: #ffc107;
margin: 0 0 20px 0;
line-height: 1.2;
}
.Masters-TEFL-cta-subtitle {
font-size: 22px;
color: #ffffff;
margin: 0 0 40px 0;
opacity: 0.95;
}
.Masters-TEFL-cta-benefits {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.Masters-TEFL-cta-benefit {
display: flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
.Masters-TEFL-benefit-icon {
width: 24px;
height: 24px;
}
.Masters-TEFL-cta-buttons {
display: flex;
gap: 15px;
justify-content: center;
margin-bottom: 25px;
flex-wrap: wrap;
}
.Masters-TEFL-btn-primary-large {
background: #fbbf24;
color: #fcfcfc;
padding: 20px 40px;
border-radius: 50px;
font-size: 18px;
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3);
}
.Masters-TEFL-btn-primary-large:hover {
background: #f59e0b;
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(251, 191, 36, 0.4);
}
.Masters-TEFL-btn-secondary-large {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: #ffffff;
padding: 20px 40px;
border-radius: 50px;
font-size: 18px;
font-weight: 700;
border: 2px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.Masters-TEFL-btn-secondary-large:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-3px);
}
.Masters-TEFL-cta-note {
font-size: 16px;
color: #ffffff;
font-weight: 600;
margin: 0;
}
.Masters-TEFL-cta-trust-badges {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.Masters-TEFL-trust-badge-item {
display: flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
}
.Masters-TEFL-trust-badge-item svg {
width: 24px;
height: 24px;
stroke: #ffffff;
}
/* Animations */
@keyframes Masters-TEFL-fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes Masters-TEFL-fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes Masters-TEFL-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes Masters-TEFL-shine {
0% {
left: -100%;
}
100% {
left: 200%;
}
}
/* Mobile Responsive Styles */
@media (max-width: 1024px) {
.Masters-TEFL-hero-container {
grid-template-columns: 1fr;
gap: 40px;
}
.Masters-TEFL-hero-title {
font-size: 42px;
}
.Masters-TEFL-section-title {
font-size: 36px;
}
.Masters-TEFL-curriculum-grid {
grid-template-columns: 1fr;
}
.Masters-TEFL-overview-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.Masters-TEFL-hero-section {
padding: 60px 20px 120px;
}
.Masters-TEFL-hero-title {
font-size: 32px;
}
.Masters-TEFL-hero-subtitle {
font-size: 20px;
}
.Masters-TEFL-hero-description {
font-size: 16px;
}
.Masters-TEFL-hero-stats {
gap: 20px;
}
.Masters-TEFL-stat-number {
font-size: 28px;
}
.Masters-TEFL-hero-cta {
flex-direction: column;
}
.Masters-TEFL-btn-primary,
.Masters-TEFL-btn-secondary {
width: 100%;
text-align: center;
}
.Masters-TEFL-section-title {
font-size: 28px;
}
.Masters-TEFL-section-description {
font-size: 16px;
}
.Masters-TEFL-overview-grid {
grid-template-columns: 1fr;
}
.Masters-TEFL-overview-card {
padding: 30px;
}
.Masters-TEFL-steps-container {
grid-template-columns: 1fr;
}
.Masters-TEFL-step-connector {
display: none;
}
.Masters-TEFL-destinations-grid {
grid-template-columns: 1fr;
}
.Masters-TEFL-testimonials-grid {
grid-template-columns: 1fr;
}
.Masters-TEFL-cta-title {
font-size: 32px;
}
.Masters-TEFL-cta-subtitle {
font-size: 18px;
}
.Masters-TEFL-cta-benefits {
flex-direction: column;
gap: 15px;
}
.Masters-TEFL-cta-buttons {
flex-direction: column;
}
.Masters-TEFL-btn-primary-large,
.Masters-TEFL-btn-secondary-large {
width: 100%;
}
.Masters-TEFL-trust-logos {
gap: 30px;
}
.Masters-TEFL-pricing-card {
padding: 40px 25px;
}
.Masters-TEFL-current-price {
font-size: 42px;
}
}
@media (max-width: 480px) {
.Masters-TEFL-hero-title {
font-size: 28px;
}
.Masters-TEFL-section-title {
font-size: 24px;
}
.Masters-TEFL-overview-card {
padding: 25px;
}
.Masters-TEFL-module-card {
padding: 20px;
}
.Masters-TEFL-testimonial-card {
padding: 25px;
}
.Masters-TEFL-cta-title {
font-size: 26px;
}
}
/* ===================================
Advanced 120-Hour Online TEFL Course Styles
All classes prefixed with advanced-tefl
Different design from Masters page
=================================== */
/* Hero Section - Split Design */
.advanced-tefl-hero-section {
background: linear-gradient(135deg, #4caf50c2 0%, #213295d4 100%);
padding: 80px 20px;
position: relative;
overflow: hidden;
}
.advanced-tefl-hero-section::after {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.advanced-tefl-hero-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.advanced-tefl-hero-left {
animation: advanced-tefl-slideInLeft 0.8s ease-out;
}
.advanced-tefl-label-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 30px;
color: #ffffff;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 25px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.advanced-tefl-badge-dot {
width: 8px;
height: 8px;
background: #fbbf24;
border-radius: 50%;
animation: advanced-tefl-blink 2s infinite;
}
.advanced-tefl-main-title {
font-size: 52px;
font-weight: 900;
color: #ffffff;
line-height: 1.1;
margin: 0 0 25px 0;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.advanced-tefl-lead-text {
font-size: 19px;
color: rgba(255, 255, 255, 0.95);
line-height: 1.7;
margin: 0 0 40px 0;
}
.advanced-tefl-key-points {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}
.advanced-tefl-point-item {
display: flex;
align-items: center;
gap: 20px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.advanced-tefl-point-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(10px);
}
.advanced-tefl-point-icon {
width: 50px;
height: 50px;
background: #ffffff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.advanced-tefl-point-icon svg {
width: 28px;
height: 28px;
stroke: #10b981;
stroke-width: 2.5px;
}
.advanced-tefl-point-content h3 {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin: 0 0 5px 0;
}
.advanced-tefl-point-content p {
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
.advanced-tefl-cta-row {
display: flex;
gap: 15px;
margin-bottom: 35px;
flex-wrap: wrap;
}
.advanced-tefl-primary-btn {
background: #009688bd;
color: #ededee;
padding: 18px 36px;
border-radius: 12px;
font-size: 17px;
font-weight: 800;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3);
}
.advanced-tefl-primary-btn:hover {
background: #f59e0b;
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(251, 191, 36, 0.4);
}
.advanced-tefl-secondary-btn {
background: transparent;
color: #ffffff;
padding: 18px 36px;
border-radius: 12px;
font-size: 17px;
font-weight: 700;
border: 2px solid rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
}
.advanced-tefl-secondary-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.6);
}
.advanced-tefl-play-icon {
width: 18px;
height: 18px;
}
.advanced-tefl-trust-row {
display: flex;
gap: 40px;
align-items: center;
flex-wrap: wrap;
}
.advanced-tefl-rating-stars,
.advanced-tefl-student-count {
display: flex;
flex-direction: column;
gap: 5px;
}
.advanced-tefl-rating-stars span,
.advanced-tefl-student-count span {
color: #fbbf24c2;
font-size: 20px;
font-weight: 800;
}
.advanced-tefl-rating-stars p,
.advanced-tefl-student-count p {
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
margin: 0;
}
.advanced-tefl-hero-right {
position: relative;
animation: advanced-tefl-slideInRight 0.8s ease-out;
}
.advanced-tefl-image-card {
position: relative;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}
.advanced-tefl-hero-img {
width: 100%;
display: block;
border-radius: 25px;
}
.advanced-tefl-floating-badge {
position: absolute;
background: #ffffff;
padding: 15px 20px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 12px;
animation: advanced-tefl-float 3s ease-in-out infinite;
}
.advanced-tefl-badge-1 {
top: 20px;
left: -20px;
}
.advanced-tefl-badge-2 {
top: 50%;
right: -30px;
animation-delay: 1s;
}
.advanced-tefl-badge-3 {
bottom: 30px;
left: -25px;
animation-delay: 2s;
}
.advanced-tefl-badge-icon {
font-size: 24px;
}
.advanced-tefl-floating-badge strong {
font-size: 14px;
color: #1f2937;
display: block;
margin: 0;
}
.advanced-tefl-floating-badge p {
font-size: 12px;
color: #6b7280;
margin: 0;
}
/* Features Bar */
.advanced-tefl-features-bar {
background: #1e5f59e3;
padding: 30px 20px;
border-bottom: 3px solid #009688;
}
.advanced-tefl-features-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.advanced-tefl-feature-box {
display: flex;
align-items: center;
gap: 12px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
}
.advanced-tefl-feature-box svg {
width: 24px;
height: 24px;
stroke: #10b981;
flex-shrink: 0;
}
/* Difference Section */
.advanced-tefl-difference-section {
padding: 100px 20px;
background: #ffffff;
}
.advanced-tefl-difference-container {
max-width: 1200px;
margin: 0 auto;
}
.advanced-tefl-difference-header {
text-align: center;
margin-bottom: 60px;
}
.advanced-tefl-subheading {
display: inline-block;
background: #10b981a3;
color: #ffffff;
padding: 8px 20px;
border-radius: 8px;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
.advanced-tefl-heading {
font-size: 44px;
font-weight: 900;
color: var(--adv-teal);
margin: 0;
line-height: 1.2;
}
.advanced-tefl-difference-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.advanced-tefl-diff-card {
background: #f9fafb;
padding: 35px;
border-radius: 20px;
border-left: 5px solid #e5e7eb;
transition: all 0.4s ease;
position: relative;
}
.advanced-tefl-card-accent-1 {
border-left-color: #10b981;
}
.advanced-tefl-card-accent-2 {
border-left-color: #3b82f6;
}
.advanced-tefl-card-accent-3 {
border-left-color: #f59e0b;
}
.advanced-tefl-card-accent-4 {
border-left-color: #ef4444;
}
.advanced-tefl-diff-card:hover {
background: #ffffff;
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.advanced-tefl-diff-number {
font-size: 48px;
font-weight: 900;
color: #e5e7eb;
line-height: 1;
margin-bottom: 15px;
}
.advanced-tefl-diff-title {
font-size: 22px;
font-weight: 800;
color: #1f2937;
margin: 0 0 15px 0;
}
.advanced-tefl-diff-text {
font-size: 15px;
color: #6b7280;
line-height: 1.7;
margin: 0 0 20px 0;
}
.advanced-tefl-diff-list {
list-style: none;
padding: 0;
margin: 0;
}
.advanced-tefl-diff-list li {
font-size: 14px;
color: #4b5563;
padding: 8px 0;
padding-left: 25px;
position: relative;
}
.advanced-tefl-diff-list li::before {
content: '→';
position: absolute;
left: 0;
color: #10b981;
font-weight: 700;
font-size: 16px;
}
/* Modules Section */
.advanced-tefl-modules-section {
padding: 100px 20px;
background: linear-gradient(180deg, #dee5ec 0%, #a1dfa438 100%);
}
.advanced-tefl-modules-container {
max-width: 1200px;
margin: 0 auto;
}
.advanced-tefl-modules-intro {
text-align: center;
margin-bottom: 60px;
}
.advanced-tefl-intro-text {
font-size: 17px;
color: #6b7280;
line-height: 1.7;
max-width: 800px;
margin: 20px auto 0;
}
.advanced-tefl-modules-layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: 40px;
}
.advanced-tefl-modules-sidebar {
display: flex;
flex-direction: column;
gap: 25px;
}
.advanced-tefl-sidebar-stat {
text-align: center;
}
.advanced-tefl-stat-circle {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #10b981a1 0%, #059669ba 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: 900;
color: #ffffff;
margin: 0 auto 15px;
box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}
.advanced-tefl-sidebar-stat p {
font-size: 14px;
color: #6b7280;
font-weight: 700;
margin: 0;
}
.advanced-tefl-modules-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.advanced-tefl-module-item {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 15px;
padding: 25px;
transition: all 0.3s ease;
}
.advanced-tefl-module-item:hover {
border-color: #10b981;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
}
.advanced-tefl-module-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
gap: 15px;
}
.advanced-tefl-module-left {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.advanced-tefl-module-num {
background: #10b981ad;
color: #ffffff;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
flex-shrink: 0;
}
.advanced-tefl-module-name {
font-size: 18px;
font-weight: 700;
color: #1f2937;
margin: 0;
}
.advanced-tefl-module-hours {
background: #f3f4f6;
color: #6b7280;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.advanced-tefl-module-description {
font-size: 15px;
color: #6b7280;
line-height: 1.6;
margin: 0;
}
/* Comparison Section */
.advanced-tefl-comparison-section {
padding: 100px 20px;
background: #1f2937;
}
.advanced-tefl-comparison-container {
max-width: 1000px;
margin: 0 auto;
}
.advanced-tefl-comparison-header {
text-align: center;
margin-bottom: 60px;
}
.advanced-tefl-comparison-section .advanced-tefl-heading {
color: #ffffff;
}
.advanced-tefl-comparison-table {
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.advanced-tefl-table-header {
display: grid;
grid-template-columns: 2fr 1.5fr 1.5fr;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
}
.advanced-tefl-table-cell {
padding: 20px 25px;
font-weight: 700;
font-size: 16px;
}
.advanced-tefl-table-row {
display: grid;
grid-template-columns: 2fr 1.5fr 1.5fr;
border-bottom: 1px solid #e5e7eb;
}
.advanced-tefl-table-row:last-child {
border-bottom: none;
}
.advanced-tefl-table-row:nth-child(even) {
background: #f9fafb;
}
.advanced-tefl-table-row .advanced-tefl-table-cell {
padding: 20px 25px;
font-size: 15px;
color: #4b5563;
display: flex;
align-items: center;
}
.advanced-tefl-feature-col {
font-weight: 600;
color: #1f2937;
}
.advanced-tefl-our-col {
font-weight: 700;
color: #10b981;
}
.advanced-tefl-highlight {
background: #dcfce7;
color: #166534;
padding: 6px 14px;
border-radius: 8px;
font-weight: 800;
}
.advanced-tefl-check {
color: #10b981;
font-size: 20px;
margin-right: 8px;
}
.advanced-tefl-cross {
color: #ef4444;
font-size: 20px;
}
/* Success Stories */
.advanced-tefl-stories-section {
padding: 100px 20px;
background: #ffffff;
}
.advanced-tefl-stories-container {
max-width: 1200px;
margin: 0 auto;
}
.advanced-tefl-stories-header {
text-align: center;
margin-bottom: 60px;
}
.advanced-tefl-stories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.advanced-tefl-story-card {
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
border-radius: 20px;
padding: 35px;
border: 2px solid #e5e7eb;
transition: all 0.4s ease;
}
.advanced-tefl-story-card:hover {
border-color: #10b981;
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(16, 185, 129, 0.15);
}
.advanced-tefl-story-header {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.advanced-tefl-story-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
flex-shrink: 0;
border: 3px solid #10b981;
}
.advanced-tefl-story-info h4 {
font-size: 18px;
font-weight: 800;
color: #1f2937;
margin: 0 0 5px 0;
}
.advanced-tefl-story-info p {
font-size: 14px;
color: #6b7280;
margin: 0 0 8px 0;
}
.advanced-tefl-story-rating {
color: #fbbf24;
font-size: 16px;
}
.advanced-tefl-story-quote {
font-size: 15px;
color: #4b5563;
line-height: 1.7;
margin: 0 0 20px 0;
font-style: italic;
}
.advanced-tefl-story-meta {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.advanced-tefl-story-meta span {
background: #f3f4f6;
color: #6b7280;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
/* Pricing Section */
.advanced-tefl-pricing-section {
padding: 100px 20px;
background: linear-gradient(180deg, #f9fafb 0%, #f7c2c2 100%);
}
.advanced-tefl-pricing-container {
max-width: 900px;
margin: 0 auto;
}
.advanced-tefl-pricing-header {
text-align: center;
margin-bottom: 60px;
}
.advanced-tefl-pricing-desc {
font-size: 17px;
color: #6b7280;
margin: 15px 0 0 0;
}
.advanced-tefl-pricing-box {
background: #ffffff;
border-radius: 25px;
padding: 0;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
}
.advanced-tefl-price-badge {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #ffffff;
text-align: center;
padding: 12px;
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}
.advanced-tefl-price-main {
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
border-bottom: 2px solid #f3f4f6;
}
.advanced-tefl-price-left h3 {
font-size: 26px;
font-weight: 800;
color: #1f2937;
margin: 0 0 10px 0;
}
.advanced-tefl-price-left p {
font-size: 15px;
color: #6b7280;
margin: 0;
}
.advanced-tefl-price-right {
text-align: right;
}
.advanced-tefl-price-original {
font-size: 20px;
color: #9ca3af;
text-decoration: line-through;
margin-bottom: 5px;
}
.advanced-tefl-price-current {
font-size: 48px;
font-weight: 900;
color: #10b981;
line-height: 1;
}
.advanced-tefl-price-save {
background: #dcfce7;
color: #166534;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 800;
display: inline-block;
margin-top: 8px;
}
.advanced-tefl-price-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 40px;
border-bottom: 2px solid #f3f4f6;
}
.advanced-tefl-price-col h4 {
font-size: 16px;
font-weight: 800;
color: #1f2937;
margin: 0 0 15px 0;
}
.advanced-tefl-price-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.advanced-tefl-price-col li {
font-size: 14px;
color: #4b5563;
padding: 8px 0;
}
.advanced-tefl-price-cta {
padding: 40px;
text-align: center;
}
.advanced-tefl-enroll-btn {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
padding: 20px 50px;
border-radius: 12px;
font-size: 20px;
font-weight: 800;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
width: 100%;
max-width: 400px;
}
.advanced-tefl-enroll-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.4);
}
.advanced-tefl-guarantee-text {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #6b7280;
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.advanced-tefl-guarantee-text svg {
width: 20px;
height: 20px;
stroke: #10b981;
}
.advanced-tefl-payment-methods {
text-align: center;
margin-top: 40px;
}
.advanced-tefl-payment-methods p {
font-size: 14px;
color: #6b7280;
margin: 0 0 15px 0;
font-weight: 600;
}
.advanced-tefl-payment-logos {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.advanced-tefl-payment-logos span {
font-size: 14px;
color: #9ca3af;
font-weight: 600;
}
/* FAQ Section */
.advanced-tefl-faq-section {
padding: 100px 20px;
background: #ffffff;
}
.advanced-tefl-faq-container {
max-width: 900px;
margin: 0 auto;
}
.advanced-tefl-faq-header {
text-align: center;
margin-bottom: 60px;
}
.advanced-tefl-faq-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.advanced-tefl-faq-item {
border-left: 4px solid #10b981;
background: #f9fafb;
padding: 25px 30px;
border-radius: 12px;
transition: all 0.3s ease;
}
.advanced-tefl-faq-item:hover {
background: #ffffff;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.advanced-tefl-faq-q {
font-size: 18px;
font-weight: 700;
color: #1f2937;
margin: 0 0 12px 0;
}
.advanced-tefl-faq-a {
font-size: 15px;
color: #6b7280;
line-height: 1.7;
margin: 0;
}
/* CTA Banner */
.advanced-tefl-cta-banner {
background: linear-gradient(135deg, #c3dce8 0%, #2196F3 100%);
padding: 80px 20px;
position: relative;
overflow: hidden;
}
.advanced-tefl-cta-banner::before {
content: '';
position: absolute;
top: -50%;
left: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.advanced-tefl-cta-container {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.advanced-tefl-cta-content {
text-align: center;
}
.advanced-tefl-cta-title {
font-size: 44px;
font-weight: 900;
color: #ffffff;
margin: 0 0 20px 0;
line-height: 1.2;
}
.advanced-tefl-cta-text {
font-size: 19px;
color: rgba(255, 255, 255, 0.95);
margin: 0 0 40px 0;
line-height: 1.6;
}
.advanced-tefl-cta-buttons {
display: flex;
gap: 15px;
justify-content: center;
margin-bottom: 30px;
flex-wrap: wrap;
}
.advanced-tefl-cta-primary {
background: #fbbf24;
color: #1f2937;
padding: 20px 40px;
border-radius: 12px;
font-size: 18px;
font-weight: 800;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3);
}
.advanced-tefl-cta-primary:hover {
background: #f59e0b;
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(251, 191, 36, 0.4);
}
.advanced-tefl-cta-outline {
background: transparent;
color: #ffffff;
padding: 20px 40px;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
border: 2px solid rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
}
.advanced-tefl-cta-outline:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.6);
}
.advanced-tefl-cta-trust {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.advanced-tefl-cta-trust span {
color: rgba(255, 255, 255, 0.95);
font-size: 15px;
font-weight: 600;
}
/* Animations */
@keyframes advanced-tefl-slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes advanced-tefl-slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes advanced-tefl-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes advanced-tefl-blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
/* Mobile Responsive */
@media (max-width: 1024px) {
.advanced-tefl-hero-container {
grid-template-columns: 1fr;
}
.advanced-tefl-modules-layout {
grid-template-columns: 1fr;
}
.advanced-tefl-modules-sidebar {
flex-direction: row;
justify-content: center;
}
.advanced-tefl-table-header,
.advanced-tefl-table-row {
grid-template-columns: 2fr 1fr 1fr;
}
}
@media (max-width: 768px) {
.advanced-tefl-main-title {
font-size: 36px;
}
.advanced-tefl-heading {
font-size: 32px;
}
.advanced-tefl-cta-row {
flex-direction: column;
}
.advanced-tefl-primary-btn,
.advanced-tefl-secondary-btn {
width: 100%;
justify-content: center;
}
.advanced-tefl-difference-grid {
grid-template-columns: 1fr;
}
.advanced-tefl-features-container {
grid-template-columns: 1fr;
}
.advanced-tefl-stories-grid {
grid-template-columns: 1fr;
}
.advanced-tefl-price-main {
flex-direction: column;
text-align: center;
}
.advanced-tefl-price-right {
text-align: center;
}
.advanced-tefl-price-features {
grid-template-columns: 1fr;
}
.advanced-tefl-table-header,
.advanced-tefl-table-row {
grid-template-columns: 1fr;
}
.advanced-tefl-table-cell {
padding: 15px;
}
.advanced-tefl-basic-col,
.advanced-tefl-our-col {
border-top: 1px solid #e5e7eb;
}
.advanced-tefl-cta-title {
font-size: 32px;
}
.advanced-tefl-cta-buttons {
flex-direction: column;
}
.advanced-tefl-cta-primary,
.advanced-tefl-cta-outline {
width: 100%;
}
}
@media (max-width: 480px) {
.advanced-tefl-main-title {
font-size: 28px;
}
.advanced-tefl-heading {
font-size: 26px;
}
.advanced-tefl-point-item {
flex-direction: column;
text-align: center;
}
.advanced-tefl-diff-card {
padding: 25px;
}
.advanced-tefl-module-header {
flex-direction: column;
align-items: flex-start;
}
.advanced-tefl-module-left {
flex-direction: column;
align-items: flex-start;
}
.advanced-tefl-story-header {
flex-direction: column;
align-items: center;
text-align: center;
}
}
/* Foundation TEFL Course - Custom Styles */
.foundation-tefl-hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
padding: 4rem 2rem;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
overflow: hidden;
}
.foundation-tefl-hero-content {
position: relative;
z-index: 2;
max-width: 650px;
margin-left: 5%;
}
.foundation-tefl-hero-badge {
display: inline-block;
margin-bottom: 1.5rem;
animation: foundation-tefl-badge-pulse 2s infinite;
}
@keyframes foundation-tefl-badge-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.foundation-tefl-badge-text {
background: linear-gradient(90deg, #3498db, #2ecc71);
color: white;
padding: 0.6rem 1.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}
.foundation-tefl-hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.5rem;
color: #2c3e50;
}
.foundation-tefl-highlight {
color: #e74c3c;
position: relative;
}
.foundation-tefl-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background-color: rgba(231, 76, 60, 0.2);
z-index: -1;
}
.foundation-tefl-hero-subtitle {
font-size: 1.25rem;
line-height: 1.6;
margin-bottom: 2rem;
color: #34495e;
}
.foundation-tefl-hero-actions {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.foundation-tefl-btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
}
.foundation-tefl-btn-primary {
background: linear-gradient(135deg, #4CAF50, #2196F3);
color: white;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}
.foundation-tefl-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}
.foundation-tefl-btn-secondary {
background: transparent;
color: #2c3e50;
border: 2px solid #3498db;
}
.foundation-tefl-btn-secondary:hover {
background: rgba(52, 152, 219, 0.1);
transform: translateY(-3px);
}
.foundation-tefl-hero-features {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.foundation-tefl-feature-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: #2c3e50;
font-weight: 600;
}
.foundation-tefl-icon {
color: #3498db;
font-size: 1.2rem;
}
.foundation-tefl-hero-visual {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 40%;
height: 70%;
z-index: 1;
}
.foundation-tefl-visual-element {
position: absolute;
border-radius: 10px;
}
.foundation-tefl-visual-1 {
top: 10%;
right: 10%;
width: 200px;
height: 200px;
background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(46, 204, 113, 0.1) 100%);
animation: foundation-tefl-float 6s ease-in-out infinite;
}
.foundation-tefl-visual-2 {
bottom: 10%;
right: 30%;
width: 150px;
height: 150px;
background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(155, 89, 182, 0.1) 100%);
animation: foundation-tefl-float 8s ease-in-out infinite reverse;
}
.foundation-tefl-visual-3 {
top: 40%;
right: 5%;
width: 120px;
height: 120px;
background: linear-gradient(135deg, rgba(241, 196, 15, 0.1) 0%, rgba(230, 126, 34, 0.1) 100%);
animation: foundation-tefl-float 7s ease-in-out infinite;
}
@keyframes foundation-tefl-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}
.foundation-tefl-visual-circle,
.foundation-tefl-visual-square,
.foundation-tefl-visual-triangle {
width: 100%;
height: 100%;
position: relative;
}
.foundation-tefl-visual-circle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
border-radius: 50%;
background: linear-gradient(135deg, #3498db, #2ecc71);
opacity: 0.7;
}
.foundation-tefl-visual-square::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 70%;
height: 70%;
background: linear-gradient(135deg, #e74c3c, #9b59b6);
opacity: 0.7;
}
.foundation-tefl-visual-triangle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86.6px solid #f1c40f;
opacity: 0.7;
}
.foundation-tefl-intro {
padding: 6rem 2rem;
background: linear-gradient(135deg, #03A9F4, #ff5722d6);
color: white;
}
.foundation-tefl-container {
max-width: 1200px;
margin: 0 auto;
}
.foundation-tefl-section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #ff9800eb;
}
.foundation-tefl-intro .foundation-tefl-section-title {
color: white;
}
.foundation-tefl-text-accent {
color: #009688;
}
.foundation-tefl-intro-text {
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 3rem;
max-width: 800px;
color: #ecf0f1;
}
.foundation-tefl-stats {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
margin-top: 4rem;
}
.foundation-tefl-stat {
text-align: center;
flex: 1;
min-width: 150px;
}
.foundation-tefl-stat-number {
font-size: 3.5rem;
font-weight: 800;
color: #f1c40f;
margin-bottom: 0.5rem;
font-family: 'Arial Black', sans-serif;
}
.foundation-tefl-stat-label {
font-size: 1.1rem;
color: #bdc3c7;
font-weight: 600;
}
.foundation-tefl-center {
text-align: center;
}
.foundation-tefl-curriculum {
padding: 6rem 2rem;
background-color: #e8f0f8d9;
}
.foundation-tefl-section-subtitle {
font-size: 1.2rem;
color: #7f8c8d;
max-width: 700px;
margin: 0 auto 4rem;
line-height: 1.6;
}
.foundation-tefl-curriculum-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1rem;
}
.foundation-tefl-module-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
position: relative;
border-top: 5px solid #3498db;
}
.foundation-tefl-module-card:nth-child(2) {
border-top-color: #2ecc71;
}
.foundation-tefl-module-card:nth-child(3) {
border-top-color: #e74c3c;
}
.foundation-tefl-module-card:nth-child(4) {
border-top-color: #f39c12;
}
.foundation-tefl-module-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.foundation-tefl-module-header {
padding: 1.5rem 1.5rem 0;
display: flex;
align-items: center;
gap: 1rem;
}
.foundation-tefl-module-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #3498db, #2ecc71);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.3rem;
}
.foundation-tefl-module-card:nth-child(2) .foundation-tefl-module-icon {
background: linear-gradient(135deg, #2ecc71, #1abc9c);
}
.foundation-tefl-module-card:nth-child(3) .foundation-tefl-module-icon {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}
.foundation-tefl-module-card:nth-child(4) .foundation-tefl-module-icon {
background: linear-gradient(135deg, #f39c12, #d35400);
}
.foundation-tefl-module-title {
font-size: 1.4rem;
font-weight: 700;
color: #2c3e50;
margin: 0;
}
.foundation-tefl-module-content {
padding: 1.5rem;
}
.foundation-tefl-module-content p {
color: #7f8c8d;
line-height: 1.6;
margin-bottom: 1rem;
}
.foundation-tefl-module-list {
list-style: none;
padding: 0;
margin: 0;
}
.foundation-tefl-module-list li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: #34495e;
}
.foundation-tefl-module-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #2ecc71;
font-weight: bold;
}
.foundation-tefl-module-hours {
background: #f8f9fa;
padding: 0.8rem 1.5rem;
font-weight: 700;
color: #2c3e50;
border-top: 1px solid #eee;
}
.foundation-tefl-certification {
padding: 6rem 2rem;
background: linear-gradient(135deg, #03A9F4 0%, #16213ed9 100%);
color: white;
}
.foundation-tefl-certification-content {
max-width: 1200px;
margin: 0 auto;
}
.foundation-tefl-certification .foundation-tefl-section-title {
color: white;
margin-bottom: 1.5rem;
}
.foundation-tefl-certification-text {
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 4rem;
max-width: 800px;
color: #bdc3c7;
}
.foundation-tefl-certificate-preview {
display: flex;
justify-content: center;
margin-bottom: 5rem;
}
.foundation-tefl-certificate {
perspective: 1000px;
}
.foundation-tefl-certificate-border {
background: white;
border-radius: 15px;
padding: 3rem;
color: #2c3e50;
max-width: 600px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
transform-style: preserve-3d;
animation: foundation-tefl-certificate-tilt 20s infinite linear;
}
@keyframes foundation-tefl-certificate-tilt {
0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
25% { transform: rotateY(2deg) rotateX(1deg); }
50% { transform: rotateY(0deg) rotateX(2deg); }
75% { transform: rotateY(-2deg) rotateX(1deg); }
}
.foundation-tefl-certificate-header {
text-align: center;
margin-bottom: 2rem;
border-bottom: 2px solid #3498db;
padding-bottom: 1rem;
}
.foundation-tefl-certificate-title {
font-size: 2.5rem;
font-weight: 800;
color: #2c3e50;
margin: 0;
}
.foundation-tefl-certificate-subtitle {
font-size: 1.2rem;
color: #7f8c8d;
margin: 0.5rem 0 0;
}
.foundation-tefl-certificate-body {
margin-bottom: 2rem;
}
.foundation-tefl-certificate-body p {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.foundation-tefl-certificate-name {
font-weight: 700;
color: #e74c3c;
text-decoration: underline;
}
.foundation-tefl-certificate-details {
display: flex;
justify-content: space-between;
margin-top: 2rem;
flex-wrap: wrap;
gap: 1rem;
}
.foundation-tefl-certificate-details p {
display: flex;
align-items: center;
gap: 0.5rem;
color: #3498db;
font-weight: 600;
}
.foundation-tefl-certificate-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #eee;
padding-top: 1.5rem;
}
.foundation-tefl-certificate-seal {
font-size: 3rem;
color: #f1c40f;
}
.foundation-tefl-certificate-accreditation {
font-weight: 700;
color: #2ecc71;
font-size: 1.2rem;
}
.foundation-tefl-certification-benefits {
margin-top: 5rem;
}
.foundation-tefl-benefits-title {
font-size: 2rem;
margin-bottom: 3rem;
text-align: center;
color: white;
}
.foundation-tefl-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.foundation-tefl-benefit {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 2rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.foundation-tefl-benefit:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
border-color: #3498db;
}
.foundation-tefl-benefit-icon {
font-size: 2.5rem;
color: #3498db;
margin-bottom: 1.5rem;
}
.foundation-tefl-benefit-heading {
font-size: 1.5rem;
margin-bottom: 1rem;
color: white;
}
.foundation-tefl-benefit-text {
color: #bdc3c7;
line-height: 1.6;
}
.foundation-tefl-enroll {
padding: 6rem 2rem;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.foundation-tefl-enroll-wrapper {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.foundation-tefl-pricing {
margin: 3rem 0;
}
.foundation-tefl-price-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
}
.foundation-tefl-price-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.foundation-tefl-price-header {
background: linear-gradient(135deg, #4CAF50, #2196F3);
color: white;
padding: 2rem;
text-align: center;
}
.foundation-tefl-price-title {
font-size: 1.8rem;
margin-bottom: 1rem;
font-weight: 700;
color: #fff;
}
.foundation-tefl-price-amount {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.2rem;
}
.foundation-tefl-price-currency {
font-size: 1.8rem;
margin-top: 0.5rem;
}
.foundation-tefl-price-value {
font-size: 4rem;
font-weight: 800;
line-height: 1;
}
.foundation-tefl-price-period {
font-size: 1rem;
color: #bdc3c7;
margin-top: 1.5rem;
}
.foundation-tefl-price-features {
padding: 2rem;
}
.foundation-tefl-price-list {
list-style: none;
padding: 0;
margin: 0;
}
.foundation-tefl-price-list li {
padding: 0.8rem 0;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
color: #2c3e50;
}
.foundation-tefl-price-check {
color: #2ecc71;
margin-right: 1rem;
font-size: 1.2rem;
}
.foundation-tefl-price-action {
padding: 0 2rem 2rem;
}
.foundation-tefl-btn-large {
width: 100%;
text-align: center;
padding: 1.2rem;
font-size: 1.1rem;
}
.foundation-tefl-guarantee {
display: flex;
align-items: center;
gap: 1.5rem;
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
margin-top: 3rem;
}
.foundation-tefl-guarantee-icon {
font-size: 2.5rem;
color: #2ecc71;
}
.foundation-tefl-guarantee-title {
font-size: 1.4rem;
margin-bottom: 0.5rem;
color: #2c3e50;
}
.foundation-tefl-guarantee-text {
color: #7f8c8d;
line-height: 1.6;
}
.foundation-tefl-faq {
background: white;
border-radius: 15px;
padding: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.foundation-tefl-faq-title {
font-size: 2rem;
margin-bottom: 2rem;
color: #009688;
text-align: center;
}
.foundation-tefl-faq-item {
border-bottom: 1px solid #eee;
margin-bottom: 1rem;
}
.foundation-tefl-faq-question {
padding: 1.5rem 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.foundation-tefl-faq-question h4 {
margin: 0;
font-size: 1.2rem;
font-weight: 600;
color: #2c3e50;
transition: color 0.3s ease;
}
.foundation-tefl-faq-question:hover h4 {
color: #3498db;
}
.foundation-tefl-faq-icon {
color: #3498db;
transition: transform 0.3s ease;
}
.foundation-tefl-faq-item.active .foundation-tefl-faq-icon {
transform: rotate(180deg);
}
.foundation-tefl-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.foundation-tefl-faq-item.active .foundation-tefl-faq-answer {
max-height: 500px;
}
.foundation-tefl-faq-answer p {
padding: 0 0 1.5rem;
margin: 0;
color: #7f8c8d;
line-height: 1.6;
}
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.foundation-tefl-hero-title {
font-size: 2.8rem;
}
.foundation-tefl-hero-visual {
width: 50%;
}
.foundation-tefl-enroll-wrapper {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 768px) {
.foundation-tefl-hero {
flex-direction: column;
text-align: center;
padding: 3rem 1.5rem;
}
.foundation-tefl-hero-content {
margin-left: 0;
max-width: 100%;
}
.foundation-tefl-hero-visual {
position: relative;
width: 100%;
height: 200px;
top: 0;
right: 0;
transform: none;
margin-top: 3rem;
}
.foundation-tefl-visual-1,
.foundation-tefl-visual-2,
.foundation-tefl-visual-3 {
position: relative;
display: inline-block;
margin: 0 1rem;
width: 100px;
height: 100px;
}
.foundation-tefl-hero-actions {
justify-content: center;
}
.foundation-tefl-hero-features {
justify-content: center;
}
.foundation-tefl-stats {
justify-content: center;
}
.foundation-tefl-stat {
min-width: 120px;
}
.foundation-tefl-certificate-border {
padding: 2rem;
}
.foundation-tefl-certificate-title {
font-size: 2rem;
}
.foundation-tefl-certificate-details {
flex-direction: column;
}
}
@media (max-width: 480px) {
.foundation-tefl-hero-title {
font-size: 2.2rem;
}
.foundation-tefl-section-title {
font-size: 2rem;
}
.foundation-tefl-btn {
width: 100%;
text-align: center;
}
.foundation-tefl-hero-actions {
flex-direction: column;
}
.foundation-tefl-curriculum-grid {
grid-template-columns: 1fr;
}
.foundation-tefl-benefits-grid {
grid-template-columns: 1fr;
}
.foundation-tefl-visual-element {
width: 80px;
height: 80px;
margin: 0 0.5rem;
}
}
/* Elementary TEFL Course - Custom Styles */
.elementary-tefl-hero {
min-height: 90vh;
background: linear-gradient(135deg, #03A9F4 0%, #607D8B 30%, #3F51B5 100%);
color: white;
padding: 4rem 2rem;
position: relative;
overflow: hidden;
}
.elementary-tefl-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
}
.elementary-tefl-hero-container {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.elementary-tefl-hero-content {
animation: elementary-tefl-fade-in 1s ease-out;
}
@keyframes elementary-tefl-fade-in {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.elementary-tefl-tagline {
margin-bottom: 1.5rem;
}
.elementary-tefl-tagline-text {
background: linear-gradient(90deg, #FFEB3B, #ff9800de);
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 1px;
display: inline-block;
animation: elementary-tefl-pulse 2s infinite;
}
@keyframes elementary-tefl-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.5); }
70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
}
.elementary-tefl-hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.5rem;
color: #fff;
}
.elementary-tefl-highlight {
color: #f2b55b;
position: relative;
display: inline-block;
}
.elementary-tefl-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background-color: rgba(255, 152, 0, 0.3);
z-index: -1;
border-radius: 4px;
}
.elementary-tefl-hero-description {
font-size: 1.25rem;
line-height: 1.6;
margin-bottom: 2.5rem;
opacity: 0.9;
}
.elementary-tefl-hero-cta {
display: flex;
gap: 1.5rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.elementary-tefl-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 1.2rem 2.5rem;
border-radius: 10px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
border: none;
cursor: pointer;
}
.elementary-tefl-cta-primary {
background: linear-gradient(90deg, #03A9F4, #3f51b5d4);
color: white;
box-shadow: 0 6px 20px rgba(255, 87, 34, 0.4);
}
.elementary-tefl-cta-primary:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(255, 87, 34, 0.6);
}
.elementary-tefl-cta-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.elementary-tefl-cta-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
border-color: #ff9800;
}
.elementary-tefl-hero-metrics {
display: flex;
gap: 3rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.elementary-tefl-metric {
text-align: center;
}
.elementary-tefl-metric-value {
font-size: 2.5rem;
font-weight: 800;
color: #ffeb3bc7;
margin-bottom: 0.5rem;
font-family: 'Arial Black', sans-serif;
}
.elementary-tefl-metric-label {
font-size: 0.9rem;
opacity: 0.8;
font-weight: 600;
}
.elementary-tefl-hero-visual {
position: relative;
}
.elementary-tefl-hero-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2.5rem;
color: #1a237e;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
transform: rotate(3deg);
animation: elementary-tefl-card-float 6s ease-in-out infinite;
position: relative;
z-index: 2;
overflow: hidden;
}
@keyframes elementary-tefl-card-float {
0%, 100% { transform: rotate(3deg) translateY(0); }
50% { transform: rotate(3deg) translateY(-15px); }
}
.elementary-tefl-card-header {
margin-bottom: 2rem;
border-bottom: 2px solid rgba(26, 35, 126, 0.1);
padding-bottom: 1.5rem;
}
.elementary-tefl-card-title {
font-size: 1.8rem;
font-weight: 700;
margin: 0;
color: #1a237e;
}
.elementary-tefl-card-body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.elementary-tefl-card-feature {
display: flex;
align-items: flex-start;
gap: 1.2rem;
}
.elementary-tefl-card-icon {
font-size: 1.8rem;
color: #f9e328;
margin-top: 0.2rem;
flex-shrink: 0;
}
.elementary-tefl-card-feature-content h4 {
margin: 0 0 0.5rem;
font-size: 1.2rem;
color: #1a237e;
}
.elementary-tefl-card-feature-content p {
margin: 0;
color: #5c6bc0;
font-size: 0.95rem;
}
.elementary-tefl-card-footer {
margin-top: 2rem;
}
.elementary-tefl-card-badge {
display: inline-block;
background: linear-gradient(90deg, #4caf50, #2e7d32);
color: white;
padding: 0.6rem 1.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.elementary-tefl-floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.elementary-tefl-floating-element {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
.elementary-tefl-float-1 {
width: 80px;
height: 80px;
top: -20px;
right: 30%;
animation: elementary-tefl-float-1 8s ease-in-out infinite;
}
.elementary-tefl-float-2 {
width: 120px;
height: 120px;
bottom: 10%;
right: -40px;
animation: elementary-tefl-float-2 10s ease-in-out infinite;
}
.elementary-tefl-float-3 {
width: 60px;
height: 60px;
top: 40%;
left: -20px;
animation: elementary-tefl-float-3 7s ease-in-out infinite;
}
@keyframes elementary-tefl-float-1 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-30px) rotate(180deg); }
}
@keyframes elementary-tefl-float-2 {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(20px) scale(1.1); }
}
@keyframes elementary-tefl-float-3 {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(30px); }
}
.elementary-tefl-why {
padding: 6rem 2rem;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
}
.elementary-tefl-container {
max-width: 1200px;
margin: 0 auto;
}
.elementary-tefl-why-header {
text-align: center;
margin-bottom: 4rem;
}
.elementary-tefl-section-title {
font-size: 2.8rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: #1a237e;
line-height: 1.2;
}
.elementary-tefl-accent {
color: #ff9800;
}
.elementary-tefl-section-subtitle {
font-size: 1.2rem;
color: #5c6bc0;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.elementary-tefl-why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
margin-bottom: 5rem;
}
.elementary-tefl-why-card {
perspective: 1000px;
height: 100%;
}
.elementary-tefl-why-card-inner {
background: white;
border-radius: 15px;
padding: 2.5rem;
height: 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.5s ease;
position: relative;
overflow: hidden;
}
.elementary-tefl-why-card-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #ff9800, #ff5722);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.elementary-tefl-why-card:hover .elementary-tefl-why-card-inner {
transform: translateY(-15px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.elementary-tefl-why-card:hover .elementary-tefl-why-card-inner::before {
transform: scaleX(1);
}
.elementary-tefl-why-icon {
font-size: 3rem;
color: #ff9800;
margin-bottom: 1.5rem;
}
.elementary-tefl-why-title {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 1.2rem;
color: #1a237e;
}
.elementary-tefl-why-description {
color: #5c6bc0;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.elementary-tefl-why-list {
list-style: none;
padding: 0;
margin: 0;
}
.elementary-tefl-why-list li {
padding: 0.5rem 0;
padding-left: 1.8rem;
position: relative;
color: #3949ab;
}
.elementary-tefl-why-list li::before {
content: '▶';
position: absolute;
left: 0;
color: #ff9800;
font-size: 0.8rem;
}
.elementary-tefl-why-stats {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 3rem;
background: white;
border-radius: 15px;
padding: 3rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.elementary-tefl-why-stat {
text-align: center;
flex: 1;
min-width: 180px;
}
.elementary-tefl-stat-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(135deg, #1a237e, #3949ab);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2.2rem;
font-weight: 800;
box-shadow: 0 10px 20px rgba(26, 35, 126, 0.2);
transition: all 0.3s ease;
}
.elementary-tefl-why-stat:hover .elementary-tefl-stat-circle {
transform: scale(1.1);
background: linear-gradient(135deg, #ff9800, #ff5722);
}
.elementary-tefl-stat-text {
font-weight: 600;
color: #1a237e;
font-size: 1.1rem;
}
.elementary-tefl-syllabus {
padding: 6rem 2rem;
background: white;
}
.elementary-tefl-syllabus-header {
text-align: center;
margin-bottom: 5rem;
}
.elementary-tefl-syllabus-timeline {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.elementary-tefl-timeline-track {
position: absolute;
left: 40px;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to bottom, #ff9800, #ff5722);
border-radius: 2px;
}
.elementary-tefl-timeline-item {
display: flex;
margin-bottom: 3rem;
position: relative;
}
.elementary-tefl-timeline-marker {
width: 80px;
flex-shrink: 0;
position: relative;
}
.elementary-tefl-timeline-dot {
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
border: 4px solid #ff9800;
position: absolute;
left: 28px;
top: 0;
z-index: 2;
box-shadow: 0 0 0 8px rgba(255, 152, 0, 0.2);
animation: elementary-tefl-dot-pulse 2s infinite;
}
@keyframes elementary-tefl-dot-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.5); }
70% { box-shadow: 0 0 0 12px rgba(255, 152, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
}
.elementary-tefl-timeline-line {
position: absolute;
left: 40px;
top: 24px;
bottom: -3rem;
width: 4px;
background: rgba(255, 152, 0, 0.3);
}
.elementary-tefl-timeline-item:last-child .elementary-tefl-timeline-line {
display: none;
}
.elementary-tefl-timeline-content {
flex: 1;
padding-left: 2rem;
}
.elementary-tefl-module {
background: #f8f9fa;
border-radius: 15px;
overflow: hidden;
border-left: 5px solid #ff9800;
transition: all 0.3s ease;
}
.elementary-tefl-module:hover {
transform: translateX(10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.elementary-tefl-module-header {
background: white;
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
border-bottom: 1px solid #eee;
}
.elementary-tefl-module-number {
background: #1a237e;
color: white;
padding: 0.4rem 1rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
}
.elementary-tefl-module-title {
font-size: 1.5rem;
font-weight: 700;
color: #1a237e;
margin: 0;
flex: 1;
}
.elementary-tefl-module-hours {
background: rgba(255, 152, 0, 0.1);
color: #ff9800;
padding: 0.4rem 1rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
}
.elementary-tefl-module-body {
padding: 1.5rem;
}
.elementary-tefl-module-body p {
color: #5c6bc0;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.elementary-tefl-module-topics {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.elementary-tefl-topic {
background: white;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
color: #3949ab;
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
}
.elementary-tefl-topic:hover {
background: #ff9800;
color: white;
border-color: #ff9800;
transform: translateY(-3px);
}
.elementary-tefl-syllabus-cta {
text-align: center;
margin-top: 4rem;
padding: 2rem;
background: linear-gradient(90deg, rgba(255, 152, 0, 0.1), rgba(26, 35, 126, 0.1));
border-radius: 15px;
}
.elementary-tefl-syllabus-cta p {
font-size: 1.3rem;
color: #1a237e;
margin: 0;
}
.elementary-tefl-inline-link {
color: #ff9800;
font-weight: 700;
text-decoration: none;
border-bottom: 2px dotted #ff9800;
transition: all 0.3s ease;
}
.elementary-tefl-inline-link:hover {
color: #ff5722;
border-bottom: 2px solid #ff5722;
}
.elementary-tefl-certificate {
padding: 6rem 2rem;
background: linear-gradient(135deg, #1a237ec2 0%, #283593 100%);
color: white;
}
.elementary-tefl-certificate-wrapper {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.elementary-tefl-certificate-content .elementary-tefl-section-title {
color: white;
}
.elementary-tefl-certificate-description {
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 3rem;
opacity: 0.9;
}
.elementary-tefl-certificate-features {
margin-bottom: 3rem;
}
.elementary-tefl-certificate-feature {
display: flex;
gap: 1.2rem;
margin-bottom: 1.8rem;
align-items: flex-start;
}
.elementary-tefl-certificate-feature i {
color: #4caf50;
font-size: 1.5rem;
margin-top: 0.3rem;
flex-shrink: 0;
}
.elementary-tefl-certificate-feature h4 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: white;
}
.elementary-tefl-certificate-feature p {
opacity: 0.8;
margin: 0;
line-height: 1.5;
}
.elementary-tefl-certificate-verification {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 1.8rem;
border-left: 4px solid #4caf50;
}
.elementary-tefl-certificate-verification h4 {
font-size: 1.3rem;
margin-bottom: 0.8rem;
color: white;
}
.elementary-tefl-certificate-verification p {
opacity: 0.8;
margin-bottom: 1.2rem;
line-height: 1.5;
}
.elementary-tefl-verification-link {
display: inline-flex;
align-items: center;
gap: 0.8rem;
color: #4caf50;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.elementary-tefl-verification-link:hover {
color: #81c784;
gap: 1.2rem;
}
.elementary-tefl-certificate-visual {
position: relative;
}
.elementary-tefl-certificate-card {
position: relative;
transform: rotate(-5deg);
animation: elementary-tefl-certificate-tilt 20s infinite linear;
}
@keyframes elementary-tefl-certificate-tilt {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(-3deg); }
}
.elementary-tefl-certificate-card-inner {
background: white;
border-radius: 20px;
padding: 2.5rem;
color: #1a237e;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 2;
overflow: hidden;
}
.elementary-tefl-certificate-card-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.1;
z-index: 1;
}
.elementary-tefl-certificate-card-header {
text-align: center;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.elementary-tefl-certificate-card-logo {
font-size: 3rem;
font-weight: 900;
color: #ff9800;
margin-bottom: 0.5rem;
letter-spacing: 3px;
}
.elementary-tefl-certificate-card-title {
font-size: 1rem;
color: #5c6bc0;
font-weight: 600;
letter-spacing: 1px;
}
.elementary-tefl-certificate-card-body {
position: relative;
z-index: 2;
}
.elementary-tefl-certificate-card-award {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid rgba(26, 35, 126, 0.1);
}
.elementary-tefl-certificate-card-award h3 {
font-size: 1.8rem;
color: #1a237e;
margin-bottom: 0.5rem;
font-weight: 800;
}
.elementary-tefl-certificate-card-award p {
color: #5c6bc0;
font-size: 1.1rem;
margin: 0;
}
.elementary-tefl-certificate-card-recipient {
text-align: center;
margin-bottom: 2rem;
}
.elementary-tefl-certificate-card-recipient p {
color: #5c6bc0;
margin-bottom: 0.5rem;
}
.elementary-tefl-certificate-card-recipient h4 {
font-size: 1.8rem;
color: #1a237e;
margin: 0;
font-weight: 700;
padding: 0.8rem;
background: rgba(255, 152, 0, 0.1);
border-radius: 8px;
border: 2px dashed #ff9800;
}
.elementary-tefl-certificate-card-details {
text-align: center;
color: #5c6bc0;
line-height: 1.6;
margin-bottom: 2.5rem;
padding: 0 1rem;
}
.elementary-tefl-certificate-card-signatures {
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #eee;
}
.elementary-tefl-signature {
text-align: center;
flex: 1;
}
.elementary-tefl-signature-line {
width: 120px;
height: 1px;
background: #1a237e;
margin: 0 auto 0.5rem;
}
.elementary-tefl-signature p {
color: #5c6bc0;
font-size: 0.9rem;
margin: 0;
}
.elementary-tefl-certificate-card-footer {
background: #f8f9fa;
padding: 1.2rem;
border-radius: 10px;
text-align: center;
position: relative;
z-index: 2;
}
.elementary-tefl-certificate-card-id {
font-size: 0.9rem;
color: #5c6bc0;
}
.elementary-tefl-certificate-card-id strong {
color: #1a237e;
}
.elementary-tefl-certificate-shine {
position: absolute;
top: -20px;
right: -20px;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
z-index: 1;
}
.elementary-tefl-enroll {
padding: 6rem 2rem;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
}
.elementary-tefl-enroll-header {
text-align: center;
margin-bottom: 4rem;
}
.elementary-tefl-enroll-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 5rem;
}
.elementary-tefl-pricing-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
}
.elementary-tefl-pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10px;
background: linear-gradient(90deg, #ff9800, #ff5722);
z-index: 2;
}
.elementary-tefl-pricing-card-header {
padding: 2.5rem 2.5rem 1.5rem;
text-align: center;
border-bottom: 1px solid #eee;
}
.elementary-tefl-pricing-title {
font-size: 2rem;
font-weight: 800;
color: #1a237e;
margin-bottom: 1rem;
}
.elementary-tefl-pricing-badge {
display: inline-block;
background: linear-gradient(90deg, #4caf50, #2e7d32);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.elementary-tefl-pricing-price {
padding: 2rem 2.5rem;
text-align: center;
background: linear-gradient(135deg, rgba(26, 35, 126, 0.05), rgba(255, 152, 0, 0.05));
border-bottom: 1px solid #eee;
}
.elementary-tefl-price-old {
font-size: 1.5rem;
color: #999;
text-decoration: line-through;
margin-bottom: 0.5rem;
}
.elementary-tefl-price-current {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.2rem;
margin-bottom: 0.5rem;
}
.elementary-tefl-price-currency {
font-size: 2rem;
color: #1a237e;
margin-top: 0.5rem;
}
.elementary-tefl-price-amount {
font-size: 5rem;
font-weight: 900;
color: #ff9800;
line-height: 1;
}
.elementary-tefl-price-note {
color: #5c6bc0;
font-size: 1.1rem;
}
.elementary-tefl-pricing-features {
padding: 2.5rem;
}
.elementary-tefl-pricing-features-title {
font-size: 1.4rem;
color: #1a237e;
margin-bottom: 1.5rem;
font-weight: 700;
}
.elementary-tefl-pricing-list {
list-style: none;
padding: 0;
margin: 0;
}
.elementary-tefl-pricing-list li {
padding: 0.8rem 0;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: center;
color: #1a237e;
}
.elementary-tefl-pricing-list li:last-child {
border-bottom: none;
}
.elementary-tefl-pricing-list li i {
color: #4caf50;
margin-right: 1rem;
font-size: 1.2rem;
}
.elementary-tefl-pricing-cta {
padding: 0 2.5rem 2.5rem;
}
.elementary-tefl-enroll-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: linear-gradient(90deg, #1a237e, #3949ab);
color: white;
padding: 1.5rem;
border-radius: 12px;
font-weight: 700;
font-size: 1.2rem;
text-decoration: none;
transition: all 0.3s ease;
margin-bottom: 1rem;
box-shadow: 0 8px 25px rgba(26, 35, 126, 0.3);
}
.elementary-tefl-enroll-btn:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(26, 35, 126, 0.4);
background: linear-gradient(90deg, #ff9800, #ff5722);
}
.elementary-tefl-pricing-note {
text-align: center;
color: #5c6bc0;
font-size: 0.9rem;
margin: 0;
}
.elementary-tefl-enroll-benefits {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.elementary-tefl-benefits-title {
font-size: 2rem;
color: #1a237e;
margin-bottom: 0.5rem;
font-weight: 800;
}
.elementary-tefl-benefits-list {
display: flex;
flex-direction: column;
gap: 1.8rem;
}
.elementary-tefl-benefit-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.elementary-tefl-benefit-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #ff9800, #ff5722);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
flex-shrink: 0;
}
.elementary-tefl-benefit-content h4 {
font-size: 1.3rem;
color: #1a237e;
margin-bottom: 0.5rem;
font-weight: 700;
}
.elementary-tefl-benefit-content p {
color: #5c6bc0;
line-height: 1.6;
margin: 0;
}
.elementary-tefl-guarantee-box {
background: linear-gradient(135deg, #1a237e, #3949ab);
color: white;
border-radius: 15px;
padding: 2rem;
display: flex;
gap: 1.5rem;
align-items: center;
margin-top: 1rem;
}
.elementary-tefl-guarantee-icon {
font-size: 2.5rem;
color: #ff9800;
flex-shrink: 0;
}
.elementary-tefl-guarantee-content h4 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: white;
}
.elementary-tefl-guarantee-content p {
opacity: 0.9;
margin: 0;
line-height: 1.5;
}
.elementary-tefl-faq {
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}
.elementary-tefl-faq-title {
font-size: 2rem;
color: #1a237e;
margin-bottom: 2.5rem;
text-align: center;
font-weight: 800;
}
.elementary-tefl-faq-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
.elementary-tefl-faq-item {
border: 2px solid #f0f0f0;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.elementary-tefl-faq-item:hover {
border-color: #ff9800;
}
.elementary-tefl-faq-question {
padding: 1.5rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: #f8f9fa;
}
.elementary-tefl-faq-question h4 {
margin: 0;
font-size: 1.2rem;
font-weight: 600;
color: #1a237e;
flex: 1;
}
.elementary-tefl-faq-question i {
color: #ff9800;
transition: transform 0.3s ease;
margin-left: 1rem;
}
.elementary-tefl-faq-item.active .elementary-tefl-faq-question i {
transform: rotate(180deg);
}
.elementary-tefl-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.elementary-tefl-faq-item.active .elementary-tefl-faq-answer {
max-height: 500px;
}
.elementary-tefl-faq-answer p {
padding: 1.5rem;
margin: 0;
color: #5c6bc0;
line-height: 1.6;
border-top: 1px solid #f0f0f0;
}
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.elementary-tefl-hero-container {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.elementary-tefl-hero-title {
font-size: 2.8rem;
}
.elementary-tefl-hero-cta {
justify-content: center;
}
.elementary-tefl-hero-metrics {
justify-content: center;
}
.elementary-tefl-certificate-wrapper,
.elementary-tefl-enroll-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 768px) {
.elementary-tefl-hero {
padding: 3rem 1.5rem;
}
.elementary-tefl-section-title {
font-size: 2.2rem;
}
.elementary-tefl-hero-title {
font-size: 2.3rem;
}
.elementary-tefl-cta-btn {
width: 100%;
justify-content: center;
}
.elementary-tefl-hero-card {
transform: rotate(0);
animation: none;
}
.elementary-tefl-why-grid {
grid-template-columns: 1fr;
}
.elementary-tefl-timeline-track {
left: 20px;
}
.elementary-tefl-timeline-dot {
left: 8px;
}
.elementary-tefl-timeline-line {
left: 20px;
}
.elementary-tefl-timeline-content {
padding-left: 1rem;
}
.elementary-tefl-module-header {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
.elementary-tefl-faq {
padding: 2rem;
}
}
@media (max-width: 480px) {
.elementary-tefl-hero-title {
font-size: 1.8rem;
}
.elementary-tefl-section-title {
font-size: 1.8rem;
}
.elementary-tefl-hero-metrics {
gap: 2rem;
}
.elementary-tefl-metric-value {
font-size: 2rem;
}
.elementary-tefl-why-stats {
padding: 2rem 1rem;
}
.elementary-tefl-stat-circle {
width: 100px;
height: 100px;
font-size: 1.8rem;
}
.elementary-tefl-price-amount {
font-size: 4rem;
}
}
/* Business English TEFL Course - Custom Styles */
.business-tefl-hero {
min-height: 90vh;
background: linear-gradient(135deg, #2196F3 0%, #607D8B 50%, #3F51B5 100%);
color: white;
padding: 4rem 2rem;
position: relative;
overflow: hidden;
}
.business-tefl-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(33, 158, 188, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(231, 111, 81, 0.1) 0%, transparent 50%);
}
.business-tefl-container {
max-width: 1300px;
margin: 0 auto;
}
.business-tefl-hero-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.business-tefl-hero-content {
animation: business-tefl-fade-in 1s ease-out;
}
@keyframes business-tefl-fade-in {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
.business-tefl-hero-badge {
margin-bottom: 2rem;
}
.business-tefl-badge-text {
background: linear-gradient(90deg, #607D8B, #363f71);
padding: 0.7rem 1.8rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 1px;
display: inline-block;
box-shadow: 0 4px 15px rgba(33, 158, 188, 0.3);
animation: business-tefl-badge-glow 3s infinite;
}
@keyframes business-tefl-badge-glow {
0%, 100% { box-shadow: 0 4px 15px rgba(33, 158, 188, 0.3); }
50% { box-shadow: 0 4px 25px rgba(33, 158, 188, 0.5); }
}
.business-tefl-hero-title {
font-size: 3.8rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
background: linear-gradient(90deg, #ffffff, #e0e1dd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.business-tefl-highlight {
color: #ff9e00;
}
.business-tefl-hero-subtitle {
font-size: 1.3rem;
line-height: 1.7;
margin-bottom: 2.5rem;
opacity: 0.9;
max-width: 90%;
}
.business-tefl-hero-stats {
display: flex;
gap: 3rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.business-tefl-stat {
text-align: center;
}
.business-tefl-stat-number {
font-size: 3rem;
font-weight: 800;
color: #ffc107ed;
margin-bottom: 0.5rem;
font-family: 'Arial Black', sans-serif;
line-height: 1;
}
.business-tefl-stat-label {
font-size: 0.95rem;
opacity: 0.8;
font-weight: 600;
max-width: 120px;
}
.business-tefl-hero-actions {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.business-tefl-btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 1.2rem 2.5rem;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
border: none;
cursor: pointer;
}
.business-tefl-btn-primary {
background: linear-gradient(90deg, #607D8B, #363f71);
color: #fff;
box-shadow: 0 6px 20px rgba(255, 158, 0, 0.4);
}
.business-tefl-btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(255, 158, 0, 0.6);
background: linear-gradient(90deg, #FFEB3B, #FF9800);
}
.business-tefl-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.business-tefl-btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
border-color: #ff9e00;
}
.business-tefl-hero-note {
display: flex;
align-items: center;
gap: 0.8rem;
color: #ffc107ed;
font-weight: 600;
}
.business-tefl-hero-note i {
font-size: 1.2rem;
}
.business-tefl-hero-visual {
position: relative;
}
.business-tefl-visual-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2.5rem;
color: #0d1b2a;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 2;
transform: rotate(-2deg);
animation: business-tefl-card-float 8s ease-in-out infinite;
}
@keyframes business-tefl-card-float {
0%, 100% { transform: rotate(-2deg) translateY(0); }
50% { transform: rotate(-2deg) translateY(-20px); }
}
.business-tefl-card-inner {
position: relative;
z-index: 2;
}
.business-tefl-card-header {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid rgba(13, 27, 42, 0.1);
}
.business-tefl-card-title {
font-size: 1.8rem;
font-weight: 800;
color: #ffc107;
margin: 0;
}
.business-tefl-card-features {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.business-tefl-card-feature {
display: flex;
align-items: center;
gap: 1.2rem;
}
.business-tefl-card-feature i {
font-size: 1.8rem;
color: #219ebc;
width: 40px;
text-align: center;
}
.business-tefl-card-feature span {
font-weight: 700;
color: #1b263b;
font-size: 1.1rem;
}
.business-tefl-floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.business-tefl-float-1,
.business-tefl-float-2,
.business-tefl-float-3 {
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #219ebc, #023e8a);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.8rem;
box-shadow: 0 10px 20px rgba(33, 158, 188, 0.3);
}
.business-tefl-float-1 {
top: -135px;
right: 30%;
animation: business-tefl-float-1 10s ease-in-out infinite;
}
.business-tefl-float-2 {
bottom: 20%;
left: -70px;
animation: business-tefl-float-2 12s ease-in-out infinite;
}
.business-tefl-float-3 {
top: 40%;
right: -60px;
animation: business-tefl-float-3 9s ease-in-out infinite;
}
@keyframes business-tefl-float-1 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-30px) rotate(180deg); }
}
@keyframes business-tefl-float-2 {
0%, 100% { transform: translateX(0) scale(1); }
50% { transform: translateX(30px) scale(1.1); }
}
@keyframes business-tefl-float-3 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(20px); }
}
.business-tefl-overview {
padding: 6rem 2rem;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.business-tefl-overview-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.business-tefl-section-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: #FFC107;
line-height: 1.2;
}
.business-tefl-accent {
color: #FFC107;
}
.business-tefl-section-subtitle {
font-size: 1.2rem;
color: #415a77;
line-height: 1.7;
}
.business-tefl-overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
margin-bottom: 5rem;
}
.business-tefl-overview-card {
background: white;
border-radius: 15px;
padding: 2.5rem 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
border-top: 5px solid transparent;
}
.business-tefl-overview-card:nth-child(1) {
border-top-color: #219ebc;
}
.business-tefl-overview-card:nth-child(2) {
border-top-color: #ff9e00;
}
.business-tefl-overview-card:nth-child(3) {
border-top-color: #e76f51;
}
.business-tefl-overview-card:nth-child(4) {
border-top-color: #2a9d8f;
}
.business-tefl-overview-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.business-tefl-overview-icon {
font-size: 3rem;
color: #219ebc;
margin-bottom: 1.5rem;
}
.business-tefl-overview-card:nth-child(2) .business-tefl-overview-icon {
color: #ff9e00;
}
.business-tefl-overview-card:nth-child(3) .business-tefl-overview-icon {
color: #e76f51;
}
.business-tefl-overview-card:nth-child(4) .business-tefl-overview-icon {
color: #2a9d8f;
}
.business-tefl-overview-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1.2rem;
color: #0d1b2a;
}
.business-tefl-overview-desc {
color: #415a77;
line-height: 1.6;
margin: 0;
}
.business-tefl-overview-cta {
background: linear-gradient(90deg, #03A9F4, #1b263b);
border-radius: 20px;
padding: 3.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
color: white;
box-shadow: 0 15px 40px rgba(13, 27, 42, 0.2);
}
.business-tefl-cta-content {
flex: 1;
min-width: 300px;
}
.business-tefl-cta-title {
font-size: 2rem;
font-weight: 800;
margin-bottom: 1rem;
color: white;
}
.business-tefl-cta-text {
font-size: 1.1rem;
opacity: 0.9;
line-height: 1.6;
margin: 0;
}
.business-tefl-btn-accent {
background: linear-gradient(90deg, #ff9e00, #ff9100);
color: #fff;
padding: 1.3rem 3rem;
font-size: 1.2rem;
box-shadow: 0 6px 20px rgba(255, 158, 0, 0.4);
white-space: nowrap;
}
.business-tefl-btn-accent:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(255, 158, 0, 0.6);
}
.business-tefl-curriculum {
padding: 6rem 2rem;
background: white;
}
.business-tefl-curriculum-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.business-tefl-module-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
}
.business-tefl-module-card {
background: #f8f9fa;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
border: 2px solid #e9ecef;
height: 100%;
display: flex;
flex-direction: column;
}
.business-tefl-module-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border-color: #219ebc;
}
.business-tefl-module-highlight {
border-color: #ff9e00;
background: #fff8e1;
}
.business-tefl-module-highlight:hover {
border-color: #ff9100;
box-shadow: 0 15px 35px rgba(255, 158, 0, 0.15);
}
.business-tefl-module-special {
border-color: #2a9d8f;
background: #e8f4f3;
}
.business-tefl-module-special:hover {
border-color: #21867a;
}
.business-tefl-module-header {
padding: 1.8rem 1.8rem 1rem;
background: white;
border-bottom: 2px solid #e9ecef;
display: flex;
align-items: flex-start;
gap: 1.2rem;
}
.business-tefl-module-highlight .business-tefl-module-header {
background: #fff8e1;
}
.business-tefl-module-special .business-tefl-module-header {
background: #e8f4f3;
}
.business-tefl-module-number {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #219ebc, #023e8a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 800;
font-size: 1.2rem;
flex-shrink: 0;
}
.business-tefl-module-highlight .business-tefl-module-number {
background: linear-gradient(135deg, #ff9e00, #ff8500);
}
.business-tefl-module-special .business-tefl-module-number {
background: linear-gradient(135deg, #2a9d8f, #21867a);
}
.business-tefl-module-title {
font-size: 1.4rem;
font-weight: 700;
color: #0d1b2a;
margin: 0;
line-height: 1.3;
}
.business-tefl-module-body {
padding: 1.5rem 1.8rem;
flex-grow: 1;
}
.business-tefl-module-list {
list-style: none;
padding: 0;
margin: 0;
}
.business-tefl-module-list li {
padding: 0.7rem 0;
border-bottom: 1px dashed #dee2e6;
color: #415a77;
display: flex;
align-items: flex-start;
line-height: 1.5;
}
.business-tefl-module-list li:last-child {
border-bottom: none;
}
.business-tefl-topic {
display: inline-block;
background: #e9ecef;
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 700;
color: #219ebc;
margin-right: 0.8rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
.business-tefl-module-highlight .business-tefl-topic {
background: #ffeeba;
color: #ff9e00;
}
.business-tefl-module-special .business-tefl-topic {
background: #d1e7e5;
color: #2a9d8f;
}
.business-tefl-module-footer {
padding: 1rem 1.8rem;
background: white;
border-top: 1px solid #e9ecef;
}
.business-tefl-module-highlight .business-tefl-module-footer {
background: #fff8e1;
}
.business-tefl-module-special .business-tefl-module-footer {
background: #e8f4f3;
}
.business-tefl-module-tag {
display: inline-block;
padding: 0.4rem 1.2rem;
background: #e9ecef;
color: #415a77;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
}
.business-tefl-module-highlight .business-tefl-module-tag {
background: #ffeeba;
color: #ff9e00;
}
.business-tefl-module-special .business-tefl-module-tag {
background: #d1e7e5;
color: #2a9d8f;
}
.business-tefl-curriculum-notes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
background: linear-gradient(135deg, rgba(33, 158, 188, 0.1), rgba(255, 158, 0, 0.1));
border-radius: 15px;
padding: 2.5rem;
}
.business-tefl-note {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.business-tefl-note i {
font-size: 2rem;
color: #219ebc;
margin-top: 0.3rem;
flex-shrink: 0;
}
.business-tefl-note p {
margin: 0;
color: #0d1b2a;
font-size: 1.1rem;
line-height: 1.6;
}
.business-tefl-career {
padding: 6rem 2rem;
background: linear-gradient(135deg, #476585 0%, #1b263b 100%);
color: white;
}
.business-tefl-career-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: start;
}
.business-tefl-career-content .business-tefl-section-title {
color: white;
}
.business-tefl-career-intro {
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 4rem;
opacity: 0.9;
}
.business-tefl-career-paths {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.business-tefl-career-path {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.business-tefl-career-path:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
border-color: #ff9e00;
}
.business-tefl-path-icon {
font-size: 2.5rem;
color: #ff9e00;
margin-bottom: 1.2rem;
}
.business-tefl-path-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 0.8rem;
color: white;
}
.business-tefl-path-desc {
font-size: 0.95rem;
opacity: 0.8;
line-height: 1.5;
margin-bottom: 1.2rem;
}
.business-tefl-path-salary {
font-size: 1.3rem;
font-weight: 800;
color: #ff9e00;
}
.business-tefl-career-benefits {
margin-top: 4rem;
}
.business-tefl-benefits-title {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 2rem;
color: white;
}
.business-tefl-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.business-tefl-benefit {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 1.8rem;
border-left: 4px solid #ff9e00;
}
.business-tefl-benefit i {
font-size: 2rem;
color: #ff9e00;
margin-bottom: 1rem;
}
.business-tefl-benefit h4 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.8rem;
color: white;
}
.business-tefl-benefit p {
font-size: 0.95rem;
opacity: 0.8;
line-height: 1.5;
margin: 0;
}
.business-tefl-certificate-display {
position: relative;
}
.business-tefl-certificate-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
color: #0d1b2a;
position: sticky;
top: 2rem;
}
.business-tefl-certificate-header {
background: linear-gradient(90deg, #219ebc, #023e8a);
padding: 2rem;
text-align: center;
color: white;
}
.business-tefl-certificate-badge {
display: inline-block;
background: #ff9e00;
color: #f4f8fc;
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-weight: 800;
font-size: 0.9rem;
margin-bottom: 1rem;
letter-spacing: 1px;
}
.business-tefl-certificate-title {
font-size: 1.8rem;
font-weight: 800;
margin: 0;
line-height: 1.3;
color: #fff;
}
.business-tefl-certificate-body {
padding: 2.5rem 2rem;
}
.business-tefl-certificate-detail {
display: flex;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid #e9ecef;
}
.business-tefl-certificate-detail:last-child {
border-bottom: none;
}
.business-tefl-detail-label {
font-weight: 600;
color: #415a77;
}
.business-tefl-detail-value {
font-weight: 700;
color: #0d1b2a;
text-align: right;
}
.business-tefl-certificate-footer {
background: #f8f9fa;
padding: 1.8rem 2rem;
display: flex;
gap: 1.5rem;
align-items: center;
border-top: 1px solid #e9ecef;
}
.business-tefl-certificate-seal {
font-size: 3rem;
color: #ff9e00;
flex-shrink: 0;
}
.business-tefl-certificate-footer p {
margin: 0;
font-size: 0.95rem;
color: #415a77;
line-height: 1.5;
}
.business-tefl-enroll {
padding: 6rem 2rem;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.business-tefl-enroll-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.business-tefl-pricing-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 5rem;
}
.business-tefl-pricing-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
position: relative;
}
.business-tefl-pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(90deg, #219ebc, #ff9e00);
}
.business-tefl-pricing-header {
padding: 2.5rem 2.5rem 1.5rem;
text-align: center;
border-bottom: 1px solid #e9ecef;
}
.business-tefl-pricing-title {
font-size: 2rem;
font-weight: 800;
color: #ff9e00;
margin-bottom: 1rem;
}
.business-tefl-pricing-badge {
display: inline-block;
background: linear-gradient(90deg, #ff9e00, #ff8500);
color: #eaecef;
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-weight: 800;
font-size: 0.9rem;
box-shadow: 0 4px 15px rgba(255, 158, 0, 0.3);
}
.business-tefl-pricing-price {
padding: 2.5rem;
text-align: center;
background: linear-gradient(135deg, rgba(33, 158, 188, 0.05), rgba(255, 158, 0, 0.05));
border-bottom: 1px solid #e9ecef;
}
.business-tefl-price-old {
font-size: 1.5rem;
color: #999;
text-decoration: line-through;
margin-bottom: 0.5rem;
}
.business-tefl-price-current {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.2rem;
margin-bottom: 0.5rem;
}
.business-tefl-price-currency {
font-size: 2rem;
color: #0d1b2a;
margin-top: 0.8rem;
}
.business-tefl-price-amount {
font-size: 5.5rem;
font-weight: 900;
color: #009688;
line-height: 1;
}
.business-tefl-price-note {
color: #415a77;
font-size: 1.1rem;
}
.business-tefl-pricing-features {
padding: 2.5rem;
}
.business-tefl-features-title {
font-size: 1.5rem;
color: #0d1b2a;
margin-bottom: 1.5rem;
font-weight: 800;
}
.business-tefl-features-list {
list-style: none;
padding: 0;
margin: 0;
}
.business-tefl-features-list li {
padding: 0.8rem 0;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: flex-start;
color: #0d1b2a;
line-height: 1.5;
}
.business-tefl-features-list li:last-child {
border-bottom: none;
}
.business-tefl-features-list li i {
color: #2a9d8f;
margin-right: 1rem;
font-size: 1.2rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
.business-tefl-pricing-cta {
padding: 0 2.5rem 2.5rem;
}
.business-tefl-enroll-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: linear-gradient(90deg, #FFC107, #3F51B5);
color: white;
padding: 1.5rem;
border-radius: 12px;
font-weight: 800;
font-size: 1.2rem;
text-decoration: none;
transition: all 0.3s ease;
margin-bottom: 1.2rem;
box-shadow: 0 8px 25px rgba(13, 27, 42, 0.3);
}
.business-tefl-enroll-btn:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(13, 27, 42, 0.4);
background: linear-gradient(90deg, #219ebc, #023e8a);
}
.business-tefl-pricing-guarantee {
text-align: center;
color: #415a77;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
}
.business-tefl-pricing-guarantee i {
color: #2a9d8f;
}
.business-tefl-enroll-info {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.business-tefl-info-card {
background: white;
border-radius: 15px;
padding: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border-left: 5px solid #219ebc;
}
.business-tefl-info-title {
font-size: 1.6rem;
font-weight: 800;
color: #0d1b2a;
margin-bottom: 1.5rem;
}
.business-tefl-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.business-tefl-info-list li {
padding: 0.7rem 0;
display: flex;
align-items: flex-start;
color: #415a77;
}
.business-tefl-info-list li i {
color: #2a9d8f;
margin-right: 1rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
.business-tefl-support {
background: linear-gradient(135deg, rgba(33, 158, 188, 0.1), rgba(255, 158, 0, 0.1));
border-radius: 15px;
padding: 2.5rem;
display: flex;
gap: 1.5rem;
align-items: center;
}
.business-tefl-support-icon {
font-size: 3rem;
color: #219ebc;
flex-shrink: 0;
}
.business-tefl-support-content {
flex: 1;
}
.business-tefl-support-content h4 {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.8rem;
color: #0d1b2a;
}
.business-tefl-support-content p {
color: #415a77;
line-height: 1.5;
margin-bottom: 1.2rem;
}
.business-tefl-support-link {
display: inline-flex;
align-items: center;
gap: 0.8rem;
color: #219ebc;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
}
.business-tefl-support-link:hover {
color: #023e8a;
gap: 1.2rem;
}
.business-tefl-faq {
background: white;
border-radius: 20px;
padding: 3.5rem;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}
.business-tefl-faq-title {
font-size: 2.2rem;
color: #FFC107;
margin-bottom: 3rem;
text-align: center;
font-weight: 800;
}
.business-tefl-faq-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.business-tefl-faq-item {
border: 2px solid #e9ecef;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.business-tefl-faq-item:hover {
border-color: #219ebc;
}
.business-tefl-faq-question {
padding: 1.8rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: #f8f9fa;
}
.business-tefl-faq-question h4 {
margin: 0;
font-size: 1.2rem;
font-weight: 700;
color: #0d1b2a;
flex: 1;
}
.business-tefl-faq-question i {
color: #219ebc;
transition: transform 0.3s ease;
margin-left: 1rem;
flex-shrink: 0;
}
.business-tefl-faq-item.active .business-tefl-faq-question i {
transform: rotate(180deg);
}
.business-tefl-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.business-tefl-faq-item.active .business-tefl-faq-answer {
max-height: 500px;
}
.business-tefl-faq-answer p {
padding: 1.8rem;
margin: 0;
color: #415a77;
line-height: 1.7;
border-top: 1px solid #e9ecef;
}
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.business-tefl-hero-wrapper {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
}
.business-tefl-hero-subtitle {
max-width: 100%;
}
.business-tefl-hero-stats {
justify-content: center;
}
.business-tefl-career-wrapper,
.business-tefl-pricing-section {
grid-template-columns: 1fr;
gap: 3rem;
}
.business-tefl-module-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
@media (max-width: 768px) {
.business-tefl-hero {
padding: 3rem 1.5rem;
}
.business-tefl-hero-title {
font-size: 2.5rem;
}
.business-tefl-section-title {
font-size: 2.2rem;
}
.business-tefl-hero-actions {
flex-direction: column;
}
.business-tefl-btn {
width: 100%;
justify-content: center;
}
.business-tefl-visual-card {
transform: rotate(0);
animation: none;
}
.business-tefl-overview-grid {
grid-template-columns: 1fr;
}
.business-tefl-overview-cta {
padding: 2.5rem;
flex-direction: column;
text-align: center;
}
.business-tefl-cta-content {
min-width: 100%;
}
.business-tefl-btn-accent {
width: 100%;
}
.business-tefl-module-grid {
grid-template-columns: 1fr;
}
.business-tefl-faq {
padding: 2.5rem;
}
}
@media (max-width: 480px) {
.business-tefl-hero-title {
font-size: 2rem;
}
.business-tefl-section-title {
font-size: 1.8rem;
}
.business-tefl-hero-stats {
flex-direction: column;
gap: 2rem;
align-items: center;
}
.business-tefl-stat-number {
font-size: 2.5rem;
}
.business-tefl-price-amount {
font-size: 4rem;
}
.business-tefl-certificate-card {
position: relative;
top: 0;
}
}
/* Young Learners TEFL Course - Custom Styles */
.young-tefl-hero {
min-height: 90vh;
background: linear-gradient(135deg, #03A9F4 0%, #8BC34A 50%, #4054c2 100%);
color: white;
padding: 4rem 2rem;
position: relative;
overflow: hidden;
}
.young-tefl-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 10% 20%, rgba(255, 200, 87, 0.2) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(72, 187, 120, 0.15) 0%, transparent 40%);
}
.young-tefl-container {
max-width: 1300px;
margin: 0 auto;
}
.young-tefl-hero-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.young-tefl-hero-content {
animation: young-tefl-fade-in 1s ease-out;
}
@keyframes young-tefl-fade-in {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.young-tefl-hero-badge {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.young-tefl-badge-text {
background: linear-gradient(90deg, #f72585, #b5179e);
padding: 0.7rem 1.8rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 1px;
display: inline-block;
box-shadow: 0 4px 15px rgba(247, 37, 133, 0.3);
animation: young-tefl-badge-bounce 2s infinite;
}
@keyframes young-tefl-badge-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.young-tefl-badge-age {
background: rgba(255, 255, 255, 0.2);
padding: 0.7rem 1.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.young-tefl-hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
color: white;
}
.young-tefl-highlight {
color: #ffd166;
position: relative;
display: inline-block;
}
.young-tefl-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background-color: rgba(255, 209, 102, 0.3);
z-index: -1;
border-radius: 4px;
}
.young-tefl-hero-subtitle {
font-size: 1.3rem;
line-height: 1.7;
margin-bottom: 2.5rem;
opacity: 0.9;
}
.young-tefl-age-groups {
display: flex;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.young-tefl-age-group {
display: flex;
align-items: center;
gap: 1.2rem;
background: rgba(255, 255, 255, 0.1);
padding: 1.2rem 1.8rem;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
flex: 1;
min-width: 250px;
}
.young-tefl-age-icon {
font-size: 2.5rem;
color: #ffd166;
}
.young-tefl-age-info h4 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 0.3rem;
color: white;
}
.young-tefl-age-info p {
margin: 0;
opacity: 0.8;
font-size: 0.95rem;
}
.young-tefl-hero-actions {
display: flex;
gap: 1.5rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.young-tefl-btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 1.2rem 2.5rem;
border-radius: 15px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
border: none;
cursor: pointer;
}
.young-tefl-btn-primary {
background: linear-gradient(90deg, #f1379e, #FFC107);
color: #ffffff;
box-shadow: 0 6px 20px rgba(255, 209, 102, 0.4);
}
.young-tefl-btn-primary:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 10px 25px rgba(255, 209, 102, 0.6);
}
.young-tefl-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.young-tefl-btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
border-color: #ffd166;
}
.young-tefl-hero-features {
display: flex;
gap: 2.5rem;
}
.young-tefl-feature {
display: flex;
align-items: center;
gap: 0.8rem;
color: white;
font-weight: 600;
}
.young-tefl-feature i {
color: #ffd166;
font-size: 1.3rem;
}
.young-tefl-hero-visual {
position: relative;
height: 500px;
}
.young-tefl-visual-main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.young-tefl-shape {
position: absolute;
border-radius: 20px;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.young-tefl-shape-1 {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #4cc9f0, #4895ef);
top: 10%;
left: 10%;
animation-name: young-tefl-float-1;
box-shadow: 0 10px 20px rgba(76, 201, 240, 0.3);
}
.young-tefl-shape-2 {
width: 90px;
height: 90px;
background: linear-gradient(135deg, #f72585, #b5179e);
bottom: 10%;
right: -5%;
animation-name: young-tefl-float-2;
box-shadow: 0 10px 20px rgba(247, 37, 133, 0.3);
}
.young-tefl-shape-3 {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #ffd166, #ffc43d);
top: 50%;
left: 5%;
animation-name: young-tefl-float-3;
box-shadow: 0 10px 20px rgba(255, 209, 102, 0.3);
}
.young-tefl-shape-4 {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #72efdd, #4cc9f0);
bottom: 10%;
left: 20%;
animation-name: young-tefl-float-4;
box-shadow: 0 10px 20px rgba(114, 239, 221, 0.3);
}
@keyframes young-tefl-float-1 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}
@keyframes young-tefl-float-2 {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(15px) scale(1.1); }
}
@keyframes young-tefl-float-3 {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(20px); }
}
@keyframes young-tefl-float-4 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-15px) rotate(-10deg); }
}
.young-tefl-character {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.young-tefl-character-1 {
color: #4361ee;
top: 30%;
right: 20%;
animation-name: young-tefl-character-bounce-1;
}
.young-tefl-character-2 {
color: #f72585;
bottom: 49%;
right: -4%;
animation-name: young-tefl-character-bounce-2;
}
.young-tefl-character-3 {
color: #ffd166;
top: 60%;
left: 15%;
animation-name: young-tefl-character-bounce-3;
}
@keyframes young-tefl-character-bounce-1 {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-15px) rotate(10deg); }
75% { transform: translateY(10px) rotate(-10deg); }
}
@keyframes young-tefl-character-bounce-2 {
0%, 100% { transform: translateX(0) scale(1); }
50% { transform: translateX(15px) scale(1.05); }
}
@keyframes young-tefl-character-bounce-3 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.young-tefl-visual-card {
position: absolute;
bottom: 58px;
right: 66px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2rem;
width: 300px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
transform: rotate(3deg);
animation: young-tefl-card-wiggle 5s infinite;
}
@keyframes young-tefl-card-wiggle {
0%, 100% { transform: rotate(3deg); }
50% { transform: rotate(1deg); }
}
.young-tefl-card-content {
text-align: center;
}
.young-tefl-card-title {
font-size: 1.5rem;
font-weight: 800;
color: #3a0ca3;
margin-bottom: 0.8rem;
}
.young-tefl-card-text {
color: #7209b7;
margin-bottom: 1.5rem;
line-height: 1.5;
}
.young-tefl-card-stats {
display: flex;
justify-content: center;
gap: 2rem;
}
.young-tefl-card-stat {
text-align: center;
}
.young-tefl-stat-number {
font-size: 2rem;
font-weight: 800;
color: #f72585;
line-height: 1;
margin-bottom: 0.3rem;
}
.young-tefl-stat-label {
font-size: 0.9rem;
color: #4361ee;
font-weight: 600;
}
.young-tefl-importance {
padding: 6rem 2rem;
background: linear-gradient(135deg, #f8f7ff 0%, #eae6ff 100%);
}
.young-tefl-importance-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.young-tefl-section-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: #3a0ca3;
line-height: 1.2;
}
.young-tefl-accent {
color: #f72585;
}
.young-tefl-section-subtitle {
font-size: 1.2rem;
color: #7209b7;
line-height: 1.7;
}
.young-tefl-importance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-bottom: 5rem;
}
.young-tefl-importance-card {
background: white;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.young-tefl-importance-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.young-tefl-importance-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: linear-gradient(90deg, #f72585, #4361ee);
}
.young-tefl-importance-icon {
font-size: 3.5rem;
color: #f72585;
margin-bottom: 1.5rem;
}
.young-tefl-importance-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1.2rem;
color: #3a0ca3;
}
.young-tefl-importance-desc {
color: #7209b7;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.young-tefl-importance-list {
list-style: none;
padding: 0;
margin: 0;
}
.young-tefl-importance-list li {
padding: 0.5rem 0;
padding-left: 1.8rem;
position: relative;
color: #4361ee;
font-weight: 500;
}
.young-tefl-importance-list li::before {
content: '★';
position: absolute;
left: 0;
color: #ffd166;
}
.young-tefl-statistics {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 3rem;
background: white;
border-radius: 20px;
padding: 3.5rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.young-tefl-statistic {
text-align: center;
flex: 1;
min-width: 200px;
}
.young-tefl-statistic-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(135deg, #f72585, #b5179e);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2.5rem;
font-weight: 800;
box-shadow: 0 15px 30px rgba(247, 37, 133, 0.2);
transition: all 0.3s ease;
}
.young-tefl-statistic:hover .young-tefl-statistic-circle {
transform: scale(1.1);
background: linear-gradient(135deg, #4361ee, #3a0ca3);
}
.young-tefl-statistic-label {
font-weight: 600;
color: #3a0ca3;
font-size: 1.1rem;
line-height: 1.5;
max-width: 250px;
margin: 0 auto;
}
.young-tefl-curriculum {
padding: 6rem 2rem;
background: white;
}
.young-tefl-curriculum-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.young-tefl-module-tabs {
background: #f8f7ff;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
margin-bottom: 4rem;
}
.young-tefl-tab-nav {
display: flex;
background: white;
border-bottom: 2px solid #eae6ff;
overflow-x: auto;
}
.young-tefl-tab-button {
flex: 1;
padding: 1.5rem 2rem;
background: none;
border: none;
font-size: 1.1rem;
font-weight: 700;
color: #7209b7;
cursor: pointer;
transition: all 0.3s ease;
min-width: 200px;
white-space: nowrap;
position: relative;
}
.young-tefl-tab-button:hover {
background: #f8f7ff;
color: #f72585;
}
.young-tefl-tab-button.active {
color: #f72585;
}
.young-tefl-tab-button.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #f72585, #ffd166);
}
.young-tefl-tab-content {
padding: 3rem;
}
.young-tefl-tab-pane {
display: none;
}
.young-tefl-tab-pane.active {
display: block;
animation: young-tefl-fade-in 0.5s ease;
}
.young-tefl-module-list {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.young-tefl-module-item {
display: flex;
gap: 2rem;
align-items: flex-start;
background: white;
padding: 2rem;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border-left: 5px solid #4cc9f0;
}
.young-tefl-module-item:hover {
transform: translateX(10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.young-tefl-module-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #4cc9f0, #4895ef);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
flex-shrink: 0;
}
.young-tefl-module-details {
flex: 1;
}
.young-tefl-module-title {
font-size: 1.5rem;
font-weight: 800;
color: #3a0ca3;
margin-bottom: 1rem;
}
.young-tefl-module-desc {
color: #7209b7;
line-height: 1.6;
margin-bottom: 1.2rem;
}
.young-tefl-module-topics {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.young-tefl-module-topics li {
background: #f0f7ff;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
color: #4361ee;
font-weight: 500;
list-style: none;
}
.young-tefl-curriculum-highlight {
background: linear-gradient(90deg, #ffd166, #ffc43d);
border-radius: 25px;
padding: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
color: #3a0ca3;
box-shadow: 0 15px 35px rgba(255, 209, 102, 0.3);
}
.young-tefl-highlight-content {
flex: 1;
min-width: 300px;
}
.young-tefl-highlight-title {
font-size: 2rem;
font-weight: 800;
margin-bottom: 1rem;
color: #f72585;
}
.young-tefl-highlight-text {
font-size: 1.2rem;
line-height: 1.6;
margin: 0;
}
.young-tefl-highlight-visual {
flex-shrink: 0;
}
.young-tefl-highlight-icons {
display: flex;
gap: 1.5rem;
font-size: 3.5rem;
color: #f72585;
}
.young-tefl-highlight-icons i {
animation: young-tefl-icon-spin 8s infinite linear;
}
@keyframes young-tefl-icon-spin {
0% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(90deg) scale(1.1); }
50% { transform: rotate(180deg) scale(1); }
75% { transform: rotate(270deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}
.young-tefl-resources {
padding: 6rem 2rem;
background: linear-gradient(135deg, #f0f7ff 0%, #e0eeff 100%);
}
.young-tefl-resources-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.young-tefl-resources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
}
.young-tefl-resource-card {
background: white;
border-radius: 20px;
padding: 2.5rem;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
border-top: 8px solid transparent;
}
.young-tefl-resource-card:nth-child(1) {
border-top-color: #f72585;
}
.young-tefl-resource-card:nth-child(2) {
border-top-color: #4cc9f0;
}
.young-tefl-resource-card:nth-child(3) {
border-top-color: #ffd166;
}
.young-tefl-resource-card:nth-child(4) {
border-top-color: #72efdd;
}
.young-tefl-resource-card:nth-child(5) {
border-top-color: #4361ee;
}
.young-tefl-resource-card:nth-child(6) {
border-top-color: #b5179e;
}
.young-tefl-resource-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.young-tefl-resource-icon {
font-size: 3.5rem;
color: #4361ee;
margin-bottom: 1.5rem;
}
.young-tefl-resource-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1rem;
color: #3a0ca3;
}
.young-tefl-resource-desc {
color: #7209b7;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.young-tefl-resource-count {
display: inline-block;
background: #f0f7ff;
padding: 0.6rem 1.5rem;
border-radius: 50px;
font-weight: 800;
color: #f72585;
font-size: 1.1rem;
}
.young-tefl-resources-cta {
text-align: center;
}
.young-tefl-cta-bubble {
display: inline-flex;
align-items: center;
gap: 1.5rem;
background: white;
padding: 2rem 3rem;
border-radius: 50px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
max-width: 600px;
}
.young-tefl-cta-bubble i {
font-size: 3rem;
color: #ffd166;
flex-shrink: 0;
}
.young-tefl-cta-bubble p {
margin: 0;
font-size: 1.3rem;
font-weight: 700;
color: #3a0ca3;
line-height: 1.5;
}
.young-tefl-career {
padding: 6rem 2rem;
background: linear-gradient(135deg, #607D8B 0%, #4361ee 100%);
color: white;
}
.young-tefl-career-wrapper {
max-width: 1200px;
margin: 0 auto;
}
.young-tefl-career-content .young-tefl-section-title {
color: white;
text-align: center;
margin-bottom: 1.5rem;
}
.young-tefl-career-intro {
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 4rem;
text-align: center;
opacity: 0.9;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.young-tefl-job-types {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 2.5rem;
margin-bottom: 5rem;
}
.young-tefl-job-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.young-tefl-job-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-10px);
border-color: #ffd166;
}
.young-tefl-job-icon {
font-size: 2.5rem;
color: #ffd166;
margin-bottom: 1.5rem;
}
.young-tefl-job-content h3 {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1rem;
color: white;
}
.young-tefl-job-desc {
opacity: 0.9;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.young-tefl-job-salary {
font-size: 1.3rem;
font-weight: 800;
color: #ffd166;
}
.young-tefl-certificate-preview {
display: flex;
justify-content: center;
}
.young-tefl-certificate {
background: white;
border-radius: 25px;
padding: 3rem;
color: #3a0ca3;
max-width: 600px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
transform: rotate(2deg);
animation: young-tefl-certificate-float 10s infinite ease-in-out;
}
@keyframes young-tefl-certificate-float {
0%, 100% { transform: rotate(2deg) translateY(0); }
50% { transform: rotate(2deg) translateY(-15px); }
}
.young-tefl-certificate-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 3px solid #ffd166;
}
.young-tefl-certificate-title {
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 0.5rem;
color: #f72585;
}
.young-tefl-certificate-subtitle {
font-size: 1.2rem;
color: #7209b7;
font-weight: 600;
}
.young-tefl-certificate-body {
text-align: center;
}
.young-tefl-certificate-details {
margin-bottom: 2.5rem;
}
.young-tefl-certificate-detail {
display: flex;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px dashed #eae6ff;
}
.young-tefl-detail-label {
font-weight: 700;
color: #f72585;
}
.young-tefl-detail-value {
font-weight: 800;
color: #3a0ca3;
}
.young-tefl-certificate-badges {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
.young-tefl-certificate-badge {
background: #f0f7ff;
padding: 0.6rem 1.5rem;
border-radius: 50px;
font-weight: 700;
color: #4361ee;
font-size: 0.9rem;
}
.young-tefl-enroll {
padding: 6rem 2rem;
background: linear-gradient(135deg, #f8f7ff 0%, #eae6ff 100%);
}
.young-tefl-enroll-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.young-tefl-enroll-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.young-tefl-pricing-card {
background: white;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
position: relative;
}
.young-tefl-pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10px;
background: linear-gradient(90deg, #f72585, #ffd166, #4cc9f0);
}
.young-tefl-pricing-header {
padding: 2.5rem 2.5rem 1.5rem;
text-align: center;
border-bottom: 1px solid #eae6ff;
position: relative;
}
.young-tefl-pricing-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, #f72585, #b5179e);
color: white;
padding: 0.5rem 2rem;
border-radius: 50px;
font-weight: 800;
font-size: 0.9rem;
box-shadow: 0 5px 15px rgba(247, 37, 133, 0.3);
}
.young-tefl-pricing-title {
font-size: 2rem;
font-weight: 800;
color: #3a0ca3;
margin-top: 0.5rem;
}
.young-tefl-pricing-price {
padding: 2.5rem;
text-align: center;
background: linear-gradient(135deg, rgba(247, 37, 133, 0.05), rgba(255, 209, 102, 0.05));
border-bottom: 1px solid #eae6ff;
}
.young-tefl-price-old {
font-size: 1.5rem;
color: #999;
text-decoration: line-through;
margin-bottom: 0.5rem;
}
.young-tefl-price-current {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.2rem;
margin-bottom: 0.5rem;
}
.young-tefl-price-currency {
font-size: 2rem;
color: #3a0ca3;
margin-top: 0.8rem;
}
.young-tefl-price-amount {
font-size: 5.5rem;
font-weight: 900;
color: #f72585;
line-height: 1;
}
.young-tefl-price-note {
color: #7209b7;
font-size: 1.1rem;
}
.young-tefl-pricing-features {
padding: 2.5rem;
}
.young-tefl-features-title {
font-size: 1.5rem;
color: #3a0ca3;
margin-bottom: 1.5rem;
font-weight: 800;
}
.young-tefl-features-list {
list-style: none;
padding: 0;
margin: 0;
}
.young-tefl-features-list li {
padding: 0.8rem 0;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: flex-start;
color: #3a0ca3;
line-height: 1.5;
}
.young-tefl-features-list li:last-child {
border-bottom: none;
}
.young-tefl-features-list li i {
color: #4cc9f0;
margin-right: 1rem;
font-size: 1.2rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
.young-tefl-pricing-cta {
padding: 0 2.5rem 2.5rem;
}
.young-tefl-enroll-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: linear-gradient(90deg, #f72585, #b5179e);
color: white;
padding: 1.5rem;
border-radius: 15px;
font-weight: 800;
font-size: 1.2rem;
text-decoration: none;
transition: all 0.3s ease;
margin-bottom: 1.2rem;
box-shadow: 0 8px 25px rgba(247, 37, 133, 0.3);
}
.young-tefl-enroll-btn:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 12px 30px rgba(247, 37, 133, 0.4);
background: linear-gradient(90deg, #4361ee, #3a0ca3);
}
.young-tefl-pricing-note {
text-align: center;
color: #7209b7;
font-size: 1rem;
}
.young-tefl-enroll-benefits {
display: flex;
flex-direction: column;
gap: 3rem;
}
.young-tefl-benefits-intro {
text-align: center;
}
.young-tefl-benefits-title {
font-size: 2rem;
color: #3a0ca3;
margin-bottom: 1rem;
font-weight: 800;
}
.young-tefl-benefits-text {
color: #7209b7;
line-height: 1.6;
margin: 0;
}
.young-tefl-testimonials {
display: flex;
flex-direction: column;
gap: 2rem;
}
.young-tefl-testimonial {
background: white;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
border-left: 5px solid #ffd166;
}
.young-tefl-testimonial-content p {
font-size: 1.1rem;
color: #3a0ca3;
line-height: 1.6;
margin-bottom: 1.5rem;
font-style: italic;
}
.young-tefl-testimonial-author {
display: flex;
align-items: center;
gap: 1.2rem;
}
.young-tefl-author-avatar {
font-size: 3rem;
color: #4cc9f0;
}
.young-tefl-author-info h4 {
font-size: 1.2rem;
font-weight: 800;
margin-bottom: 0.3rem;
color: #3a0ca3;
}
.young-tefl-author-info p {
margin: 0;
color: #7209b7;
font-size: 0.95rem;
}
.young-tefl-guarantee {
background: linear-gradient(90deg, #4361ee, #3a0ca3);
border-radius: 20px;
padding: 2.5rem;
display: flex;
gap: 1.5rem;
align-items: center;
color: white;
}
.young-tefl-guarantee-icon {
font-size: 3rem;
color: #ffd166;
flex-shrink: 0;
}
.young-tefl-guarantee-content h4 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: white;
}
.young-tefl-guarantee-text {
opacity: 0.9;
margin: 0;
line-height: 1.5;
}
.young-tefl-faq-preview {
background: white;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.young-tefl-faq-title {
font-size: 1.5rem;
color: #3a0ca3;
margin-bottom: 1.5rem;
font-weight: 800;
text-align: center;
}
.young-tefl-faq-item {
border: 2px solid #eae6ff;
border-radius: 15px;
overflow: hidden;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.young-tefl-faq-item:hover {
border-color: #4cc9f0;
}
.young-tefl-faq-question {
padding: 1.5rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: #f8f7ff;
}
.young-tefl-faq-question h5 {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #3a0ca3;
flex: 1;
}
.young-tefl-faq-question i {
color: #f72585;
transition: transform 0.3s ease;
margin-left: 1rem;
}
.young-tefl-faq-item.active .young-tefl-faq-question i {
transform: rotate(180deg);
}
.young-tefl-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.young-tefl-faq-item.active .young-tefl-faq-answer {
max-height: 300px;
}
.young-tefl-faq-answer p {
padding: 1.5rem;
margin: 0;
color: #7209b7;
line-height: 1.6;
border-top: 1px solid #eae6ff;
}
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.young-tefl-hero-wrapper {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
}
.young-tefl-age-groups {
justify-content: center;
}
.young-tefl-hero-actions {
justify-content: center;
}
.young-tefl-hero-features {
justify-content: center;
}
.young-tefl-enroll-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.young-tefl-hero-visual {
height: 400px;
}
}
@media (max-width: 768px) {
.young-tefl-hero {
padding: 3rem 1.5rem;
}
.young-tefl-hero-title {
font-size: 2.5rem;
}
.young-tefl-section-title {
font-size: 2.2rem;
}
.young-tefl-btn {
width: 100%;
justify-content: center;
}
.young-tefl-tab-nav {
flex-direction: column;
}
.young-tefl-tab-button {
min-width: 100%;
}
.young-tefl-module-item {
flex-direction: column;
text-align: center;
align-items: center;
}
.young-tefl-module-icon {
margin-bottom: 1.5rem;
}
.young-tefl-resources-grid {
grid-template-columns: 1fr;
}
.young-tefl-cta-bubble {
flex-direction: column;
text-align: center;
padding: 2rem;
}
.young-tefl-job-types {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.young-tefl-hero-title {
font-size: 2rem;
}
.young-tefl-section-title {
font-size: 1.8rem;
}
.young-tefl-age-group {
min-width: 100%;
}
.young-tefl-statistic-circle {
width: 120px;
height: 120px;
font-size: 2rem;
}
.young-tefl-price-amount {
font-size: 4rem;
}
.young-tefl-certificate {
padding: 2rem;
}
.young-tefl-certificate-title {
font-size: 1.8rem;
}
}
/* Online TEFL Teaching Course - Custom Styles */
.online-tefl-hero {
min-height: 90vh;
background: linear-gradient(135deg, #3F51B5 0%, #436778 50%, #132a53 100%);
color: white;
padding: 4rem 2rem;
position: relative;
overflow: hidden;
}
.online-tefl-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 10% 30%, rgba(100, 255, 218, 0.1) 0%, transparent 40%),
radial-gradient(circle at 90% 70%, rgba(23, 42, 58, 0.2) 0%, transparent 40%);
}
.online-tefl-container {
max-width: 1300px;
margin: 0 auto;
}
.online-tefl-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.online-tefl-hero-content {
animation: online-tefl-fade-in 1s ease-out;
}
@keyframes online-tefl-fade-in {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.online-tefl-hero-badge {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.online-tefl-badge-text {
background: linear-gradient(90deg, #64ffda, #52d7b7);
padding: 0.7rem 1.8rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 1px;
color: #0a192f;
display: inline-block;
box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3);
animation: online-tefl-badge-pulse 2s infinite;
}
@keyframes online-tefl-badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.online-tefl-badge-live {
background: rgba(255, 255, 255, 0.1);
padding: 0.7rem 1.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
border: 1px solid rgba(100, 255, 218, 0.3);
backdrop-filter: blur(10px);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.online-tefl-hero-title {
font-size: 3.8rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
color: white;
}
.online-tefl-highlight {
color: #64ffda;
position: relative;
display: inline-block;
}
.online-tefl-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background-color: rgba(100, 255, 218, 0.3);
z-index: -1;
border-radius: 4px;
}
.online-tefl-hero-subtitle {
font-size: 1.3rem;
line-height: 1.7;
margin-bottom: 2.5rem;
opacity: 0.9;
}
.online-tefl-hero-stats {
display: flex;
gap: 3rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.online-tefl-stat {
text-align: center;
}
.online-tefl-stat-number {
font-size: 3rem;
font-weight: 800;
color: #64ffda;
margin-bottom: 0.5rem;
font-family: 'Arial Black', sans-serif;
line-height: 1;
}
.online-tefl-stat-label {
font-size: 0.95rem;
opacity: 0.8;
font-weight: 600;
max-width: 120px;
}
.online-tefl-hero-actions {
display: flex;
gap: 1.5rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.online-tefl-btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 1.2rem 2.5rem;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
border: none;
cursor: pointer;
}
.online-tefl-btn-primary {
background: linear-gradient(90deg, #64ffda, #52d7b7);
color: #088579;
box-shadow: 0 6px 20px rgba(100, 255, 218, 0.4);
}
.online-tefl-btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(100, 255, 218, 0.6);
background: linear-gradient(90deg, #52d7b7, #45c9a8);
}
.online-tefl-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 2px solid rgba(100, 255, 218, 0.3);
backdrop-filter: blur(10px);
}
.online-tefl-btn-secondary:hover {
background: rgba(100, 255, 218, 0.1);
transform: translateY(-5px);
border-color: #64ffda;
}
.online-tefl-hero-features {
display: flex;
gap: 2.5rem;
flex-wrap: wrap;
}
.online-tefl-feature {
display: flex;
align-items: center;
gap: 0.8rem;
color: white;
font-weight: 600;
}
.online-tefl-feature i {
color: #64ffda;
font-size: 1.2rem;
}
.online-tefl-hero-visual {
position: relative;
}
.online-tefl-device-display {
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.online-tefl-device-screen {
background: #1e2d3d;
border-radius: 15px;
padding: 1.5rem;
position: relative;
z-index: 2;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
transform: rotate(2deg);
animation: online-tefl-screen-float 8s infinite ease-in-out;
}
@keyframes online-tefl-screen-float {
0%, 100% { transform: rotate(2deg) translateY(0); }
50% { transform: rotate(2deg) translateY(-15px); }
}
.online-tefl-screen-content {
background: #0a192f;
border-radius: 10px;
overflow: hidden;
height: 300px;
}
.online-tefl-screen-header {
background: #112240;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.online-tefl-screen-dots {
display: flex;
gap: 0.5rem;
}
.online-tefl-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.online-tefl-dot.red { background: #ff5f56; }
.online-tefl-dot.yellow { background: #ffbd2e; }
.online-tefl-dot.green { background: #27ca3f; }
.online-tefl-screen-title {
color: #64ffda;
font-weight: 600;
font-size: 0.9rem;
}
.online-tefl-screen-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
height: calc(100% - 50px);
}
.online-tefl-screen-users {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.online-tefl-user {
text-align: center;
flex: 1;
min-width: 80px;
}
.online-tefl-user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: #233554;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.5rem;
color: #64ffda;
font-size: 1.5rem;
}
.online-tefl-user-name {
color: #8892b0;
font-size: 0.8rem;
font-weight: 600;
}
.online-tefl-screen-chat {
background: #112240;
border-radius: 10px;
padding: 1rem;
flex-grow: 1;
}
.online-tefl-chat-message {
margin-bottom: 0.8rem;
}
.online-tefl-chat-name {
color: #64ffda;
font-weight: 600;
margin-right: 0.5rem;
}
.online-tefl-chat-text {
color: #ccd6f6;
}
.online-tefl-device-frame {
position: absolute;
top: -134px;
left: -10px;
right: -10px;
bottom: -184px;
border: 2px solid #64ffda;
border-radius: 20px;
z-index: 1;
opacity: 0.5;
}
.online-tefl-platform-icons {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.online-tefl-platform {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: #64ffda;
}
.online-tefl-platform i {
font-size: 2rem;
background: rgba(100, 255, 218, 0.1);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(100, 255, 218, 0.3);
}
.online-tefl-platform span {
font-size: 0.9rem;
font-weight: 600;
}
.online-tefl-intro {
padding: 6rem 2rem;
background: linear-gradient(135deg, #CDDC39 0%, #607D8B 50%, #2d363b 100%);
color: white;
}
.online-tefl-intro-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: start;
}
.online-tefl-section-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: white;
line-height: 1.2;
}
.online-tefl-accent {
color: #64ffda;
}
.online-tefl-intro-description {
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 3rem;
opacity: 0.9;
}
.online-tefl-market-stats {
display: flex;
gap: 3rem;
flex-wrap: wrap;
}
.online-tefl-market-stat {
flex: 1;
min-width: 150px;
}
.online-tefl-market-number {
font-size: 2.5rem;
font-weight: 800;
color: #64ffda;
margin-bottom: 0.5rem;
line-height: 1;
}
.online-tefl-market-label {
font-size: 0.95rem;
opacity: 0.8;
line-height: 1.4;
}
.online-tefl-intro-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 2.5rem;
border: 1px solid rgba(100, 255, 218, 0.1);
backdrop-filter: blur(10px);
position: sticky;
top: 2rem;
}
.online-tefl-card-inner h3 {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 2rem;
color: white;
text-align: center;
}
.online-tefl-card-list {
list-style: none;
padding: 0;
margin: 0;
}
.online-tefl-card-list li {
display: flex;
gap: 1.2rem;
margin-bottom: 1.8rem;
align-items: flex-start;
}
.online-tefl-card-list li:last-child {
margin-bottom: 0;
}
.online-tefl-card-list li i {
color: #64ffda;
font-size: 1.5rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
.online-tefl-card-list li h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.3rem;
color: white;
}
.online-tefl-card-list li p {
margin: 0;
opacity: 0.8;
font-size: 0.9rem;
line-height: 1.5;
}
.online-tefl-curriculum {
padding: 6rem 2rem;
background: linear-gradient(135deg, #4caf50db 0%, #3f5762 50%, #222e72d1 100%);
color: white;
}
.online-tefl-curriculum-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.online-tefl-section-subtitle {
font-size: 1.2rem;
color: #cbd4ee;
line-height: 1.7;
}
.online-tefl-modules {
display: flex;
flex-direction: column;
gap: 3rem;
max-width: 1000px;
margin: 0 auto 5rem;
}
.online-tefl-module {
display: flex;
gap: 3rem;
position: relative;
}
.online-tefl-module-sidebar {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 60px;
}
.online-tefl-module-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #64ffda, #52d7b7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 800;
color: #0a192f;
margin-bottom: 1rem;
box-shadow: 0 8px 20px rgba(100, 255, 218, 0.3);
}
.online-tefl-module-line {
width: 3px;
flex-grow: 1;
background: linear-gradient(to bottom, #64ffda, transparent);
}
.online-tefl-module:last-child .online-tefl-module-line {
display: none;
}
.online-tefl-module-content {
flex: 1;
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 2.5rem;
border: 1px solid rgba(100, 255, 218, 0.1);
transition: all 0.3s ease;
}
.online-tefl-module:hover .online-tefl-module-content {
background: rgba(255, 255, 255, 0.05);
border-color: #64ffda;
transform: translateX(10px);
}
.online-tefl-module-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid rgba(100, 255, 218, 0.2);
}
.online-tefl-module-title {
font-size: 1.8rem;
font-weight: 800;
color: white;
margin: 0;
flex: 1;
}
.online-tefl-module-hours {
background: rgba(100, 255, 218, 0.1);
color: #64ffda;
padding: 0.5rem 1.2rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
flex-shrink: 0;
}
.online-tefl-module-description {
font-size: 1.1rem;
color: #cbd4ee;
line-height: 1.6;
margin-bottom: 2rem;
}
.online-tefl-module-topics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
@media (max-width: 768px) {
.online-tefl-module-topics {
grid-template-columns: 1fr;
}
}
.online-tefl-topic-category h4 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 1.2rem;
color: #64ffda;
}
.online-tefl-topic-list {
list-style: none;
padding: 0;
margin: 0;
}
.online-tefl-topic-list li {
padding: 0.7rem 0;
border-bottom: 1px solid rgba(136, 146, 176, 0.1);
display: flex;
align-items: center;
gap: 0.8rem;
color: #ccd6f6;
}
.online-tefl-topic-list li:last-child {
border-bottom: none;
}
.online-tefl-topic-list li i {
color: #64ffda;
font-size: 1rem;
flex-shrink: 0;
}
.online-tefl-module-outcome {
background: rgba(100, 255, 218, 0.05);
border-radius: 15px;
padding: 1.5rem;
border-left: 4px solid #64ffda;
}
.online-tefl-outcome-title {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #64ffda;
}
.online-tefl-module-outcome p {
margin: 0;
color: #ccd6f6;
line-height: 1.5;
}
.online-tefl-certification-badge {
background: linear-gradient(90deg, rgba(100, 255, 218, 0.1), rgba(23, 42, 58, 0.2));
border-radius: 20px;
padding: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
border: 1px solid rgba(100, 255, 218, 0.2);
}
.online-tefl-badge-content {
flex: 1;
min-width: 300px;
}
.online-tefl-badge-title {
font-size: 2rem;
font-weight: 800;
margin-bottom: 1rem;
color: white;
}
.online-tefl-badge-text {
font-size: 1.2rem;
color: #009688e8;
line-height: 1.6;
margin: 0;
}
.online-tefl-badge-icon {
font-size: 5rem;
color: #64ffda;
flex-shrink: 0;
}
.online-tefl-platforms {
padding: 6rem 2rem;
background: #4453a7f5;
color: white;
}
.online-tefl-platforms-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.online-tefl-platforms-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-bottom: 5rem;
}
.online-tefl-platform-card {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 2.5rem;
border: 1px solid rgba(100, 255, 218, 0.1);
transition: all 0.3s ease;
}
.online-tefl-platform-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.05);
border-color: #64ffda;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.online-tefl-platform-icon {
font-size: 3rem;
color: #64ffda;
margin-bottom: 1.5rem;
}
.online-tefl-platform-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1.2rem;
color: white;
}
.online-tefl-platform-desc {
color: #aab4d0;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.online-tefl-platform-features {
list-style: none;
padding: 0;
margin: 0;
}
.online-tefl-platform-features li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: #ccd6f6;
}
.online-tefl-platform-features li::before {
content: '▸';
position: absolute;
left: 0;
color: #64ffda;
}
.online-tefl-equipment-guide {
background: rgba(255, 255, 255, 0.03);
border-radius: 25px;
padding: 3.5rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: center;
border: 1px solid rgba(100, 255, 218, 0.1);
}
.online-tefl-equipment-content h3 {
font-size: 2rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: white;
}
.online-tefl-equipment-text {
font-size: 1.2rem;
color: #8892b0;
line-height: 1.6;
margin-bottom: 2.5rem;
}
.online-tefl-equipment-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.online-tefl-equipment-item {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(100, 255, 218, 0.05);
padding: 1rem 1.5rem;
border-radius: 10px;
border: 1px solid rgba(100, 255, 218, 0.1);
}
.online-tefl-equipment-item i {
color: #64ffda;
font-size: 1.2rem;
}
.online-tefl-equipment-item span {
font-weight: 600;
color: white;
}
.online-tefl-equipment-visual {
position: relative;
height: 200px;
}
.online-tefl-setup-display {
position: relative;
width: 100%;
height: 100%;
}
.online-tefl-setup-monitor {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 100px;
background: #112240;
border-radius: 10px;
border: 2px solid #64ffda;
}
.online-tefl-setup-screen {
width: 90%;
height: 70%;
background: #0a192f;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.online-tefl-setup-camera {
position: absolute;
top: 30px;
right: 30px;
width: 20px;
height: 20px;
background: #233554;
border-radius: 50%;
border: 2px solid #64ffda;
}
.online-tefl-setup-light {
position: absolute;
bottom: 40px;
left: 40px;
width: 30px;
height: 30px;
background: #ffbd2e;
border-radius: 50%;
box-shadow: 0 0 20px rgba(255, 189, 46, 0.5);
}
.online-tefl-setup-microphone {
position: absolute;
bottom: 40px;
right: 40px;
width: 15px;
height: 25px;
background: #233554;
border-radius: 10px;
border: 2px solid #64ffda;
}
.online-tefl-career {
padding: 6rem 2rem;
background: linear-gradient(135deg, #607D8B 0%, #040f4d 100%);
color: white;
}
.online-tefl-career-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.online-tefl-career-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-bottom: 5rem;
}
.online-tefl-career-path {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(100, 255, 218, 0.1);
transition: all 0.3s ease;
}
.online-tefl-career-path:hover {
transform: translateY(-10px);
border-color: #64ffda;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.online-tefl-path-header {
background: rgba(100, 255, 218, 0.1);
padding: 2rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
.online-tefl-path-icon {
font-size: 2.5rem;
color: #64ffda;
}
.online-tefl-path-title {
font-size: 1.5rem;
font-weight: 800;
color: white;
margin: 0;
}
.online-tefl-path-body {
padding: 2rem;
}
.online-tefl-path-desc {
color: #8892b0;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.online-tefl-path-list {
list-style: none;
padding: 0;
margin: 0 0 2rem;
}
.online-tefl-path-list li {
padding: 0.7rem 0;
border-bottom: 1px solid rgba(136, 146, 176, 0.1);
color: #ccd6f6;
}
.online-tefl-path-list li:last-child {
border-bottom: none;
}
.online-tefl-path-earnings {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(100, 255, 218, 0.05);
padding: 1rem 1.5rem;
border-radius: 10px;
border: 1px solid rgba(100, 255, 218, 0.1);
}
.online-tefl-earnings-label {
font-weight: 600;
color: #8892b0;
}
.online-tefl-earnings-amount {
font-size: 1.3rem;
font-weight: 800;
color: #64ffda;
}
.online-tefl-job-support {
background: rgba(255, 255, 255, 0.03);
border-radius: 25px;
padding: 3.5rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: center;
border: 1px solid rgba(100, 255, 218, 0.1);
}
.online-tefl-support-content h3 {
font-size: 2rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: white;
}
.online-tefl-support-text {
font-size: 1.2rem;
color: #8892b0;
line-height: 1.6;
margin-bottom: 2.5rem;
}
.online-tefl-support-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.online-tefl-support-feature {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(100, 255, 218, 0.05);
padding: 1rem 1.5rem;
border-radius: 10px;
border: 1px solid rgba(100, 255, 218, 0.1);
}
.online-tefl-support-feature i {
color: #64ffda;
font-size: 1.2rem;
}
.online-tefl-support-feature span {
font-weight: 600;
color: white;
}
.online-tefl-support-certificate {
position: relative;
}
.online-tefl-certificate-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 2rem;
border: 2px solid rgba(100, 255, 218, 0.2);
backdrop-filter: blur(10px);
transform: rotate(3deg);
animation: online-tefl-certificate-rotate 20s infinite linear;
}
@keyframes online-tefl-certificate-rotate {
0%, 100% { transform: rotate(3deg); }
50% { transform: rotate(1deg); }
}
.online-tefl-certificate-header {
text-align: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(100, 255, 218, 0.2);
}
.online-tefl-certificate-header h4 {
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 0.5rem;
color: white;
}
.online-tefl-certificate-header p {
color: #64ffda;
font-size: 0.9rem;
margin: 0;
}
.online-tefl-certificate-body {
display: flex;
flex-direction: column;
gap: 1rem;
}
.online-tefl-certificate-detail {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
}
.online-tefl-certificate-detail span {
color: #8892b0;
}
.online-tefl-certificate-detail strong {
color: white;
font-weight: 700;
text-align: right;
max-width: 150px;
}
.online-tefl-enroll {
padding: 6rem 2rem;
background: #1f3e57de;
color: white;
}
.online-tefl-enroll-header {
text-align: center;
margin-bottom: 5rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.online-tefl-enroll-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.online-tefl-pricing-card {
background: rgba(255, 255, 255, 0.03);
border-radius: 25px;
overflow: hidden;
border: 1px solid rgba(100, 255, 218, 0.1);
position: relative;
}
.online-tefl-pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #64ffda, #52d7b7);
}
.online-tefl-pricing-header {
padding: 2.5rem 2.5rem 1.5rem;
text-align: center;
position: relative;
}
.online-tefl-pricing-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, #64ffda, #52d7b7);
color: #0a192f;
padding: 0.5rem 2rem;
border-radius: 50px;
font-weight: 800;
font-size: 0.9rem;
box-shadow: 0 5px 15px rgba(100, 255, 218, 0.3);
}
.online-tefl-pricing-title {
font-size: 2rem;
font-weight: 800;
margin-top: 0.5rem;
color: white;
}
.online-tefl-pricing-price {
padding: 2.5rem;
text-align: center;
background: rgba(100, 255, 218, 0.05);
border-top: 1px solid rgba(100, 255, 218, 0.1);
border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}
.online-tefl-price-old {
font-size: 1.5rem;
color: #8892b0;
text-decoration: line-through;
margin-bottom: 0.5rem;
}
.online-tefl-price-current {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.2rem;
margin-bottom: 0.5rem;
}
.online-tefl-price-currency {
font-size: 2rem;
color: white;
margin-top: 0.8rem;
}
.online-tefl-price-amount {
font-size: 5.5rem;
font-weight: 900;
color: #64ffda;
line-height: 1;
}
.online-tefl-price-note {
color: #8892b0;
font-size: 1.1rem;
}
.online-tefl-pricing-features {
padding: 2.5rem;
}
.online-tefl-features-title {
font-size: 1.5rem;
color: white;
margin-bottom: 1.5rem;
font-weight: 800;
}
.online-tefl-features-list {
list-style: none;
padding: 0;
margin: 0;
}
.online-tefl-features-list li {
padding: 0.8rem 0;
border-bottom: 1px solid rgba(136, 146, 176, 0.1);
display: flex;
align-items: flex-start;
color: #ccd6f6;
line-height: 1.5;
}
.online-tefl-features-list li:last-child {
border-bottom: none;
}
.online-tefl-features-list li i {
color: #64ffda;
margin-right: 1rem;
font-size: 1.2rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
.online-tefl-pricing-cta {
padding: 0 2.5rem 2.5rem;
}
.online-tefl-enroll-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: linear-gradient(90deg, #64ffda, #52d7b7);
color: #088579;
padding: 1.5rem;
border-radius: 12px;
font-weight: 800;
font-size: 1.2rem;
text-decoration: none;
transition: all 0.3s ease;
margin-bottom: 1.2rem;
box-shadow: 0 8px 25px rgba(100, 255, 218, 0.3);
}
.online-tefl-enroll-btn:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(100, 255, 218, 0.4);
background: linear-gradient(90deg, #52d7b7, #45c9a8);
}
.online-tefl-pricing-note {
text-align: center;
color: #8892b0;
font-size: 1rem;
}
.online-tefl-enroll-benefits {
display: flex;
flex-direction: column;
gap: 3rem;
}
.online-tefl-benefits-header {
text-align: center;
}
.online-tefl-benefits-title {
font-size: 2rem;
color: white;
margin-bottom: 1rem;
font-weight: 800;
}
.online-tefl-benefits-text {
color: #8892b0;
line-height: 1.6;
margin: 0;
}
.online-tefl-demo-preview {
background: rgba(100, 255, 218, 0.05);
border-radius: 20px;
padding: 2rem;
border: 1px solid rgba(100, 255, 218, 0.1);
}
.online-tefl-demo-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.2rem;
}
.online-tefl-demo-header h4 {
font-size: 1.3rem;
font-weight: 800;
margin: 0;
color: white;
}
.online-tefl-demo-header i {
color: #64ffda;
font-size: 1.5rem;
}
.online-tefl-demo-content p {
color: #8892b0;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.online-tefl-demo-link {
display: inline-flex;
align-items: center;
gap: 0.8rem;
color: #64ffda;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
}
.online-tefl-demo-link:hover {
color: #52d7b7;
gap: 1.2rem;
}
.online-tefl-testimonial {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 2rem;
border-left: 4px solid #64ffda;
}
.online-tefl-testimonial-content p {
font-size: 1.1rem;
color: #ccd6f6;
line-height: 1.6;
margin-bottom: 1.5rem;
font-style: italic;
}
.online-tefl-testimonial-author {
display: flex;
align-items: center;
gap: 1.2rem;
}
.online-tefl-author-avatar {
font-size: 2.5rem;
color: #64ffda;
}
.online-tefl-author-info h5 {
font-size: 1.2rem;
font-weight: 800;
margin-bottom: 0.3rem;
color: white;
}
.online-tefl-author-info p {
color: #8892b0;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.online-tefl-author-rating {
color: #ffbd2e;
font-size: 0.9rem;
}
.online-tefl-faq-summary {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 2rem;
border: 1px solid rgba(100, 255, 218, 0.1);
}
.online-tefl-faq-title {
font-size: 1.5rem;
color: white;
margin-bottom: 1.5rem;
font-weight: 800;
text-align: center;
}
.online-tefl-faq-item {
border-bottom: 1px solid rgba(136, 146, 176, 0.1);
margin-bottom: 1rem;
}
.online-tefl-faq-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.online-tefl-faq-question {
padding: 1rem 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.online-tefl-faq-question h5 {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #ccd6f6;
flex: 1;
}
.online-tefl-faq-question i {
color: #64ffda;
transition: transform 0.3s ease;
margin-left: 1rem;
}
.online-tefl-faq-item.active .online-tefl-faq-question i {
transform: rotate(180deg);
}
.online-tefl-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.online-tefl-faq-item.active .online-tefl-faq-answer {
max-height: 300px;
}
.online-tefl-faq-answer p {
padding: 1rem 0;
margin: 0;
color: #8892b0;
line-height: 1.6;
}
.online-tefl-guarantee {
background: linear-gradient(90deg, rgba(100, 255, 218, 0.1), rgba(23, 42, 58, 0.2));
border-radius: 20px;
padding: 2rem;
border: 1px solid rgba(100, 255, 218, 0.2);
}
.online-tefl-guarantee-content h4 {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 0.8rem;
color: white;
}
.online-tefl-guarantee-content p {
color: #8892b0;
line-height: 1.6;
margin: 0;
}
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.online-tefl-hero-grid {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
}
.online-tefl-hero-stats {
justify-content: center;
}
.online-tefl-hero-actions {
justify-content: center;
}
.online-tefl-hero-features {
justify-content: center;
}
.online-tefl-intro-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.online-tefl-enroll-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.online-tefl-module {
flex-direction: column;
gap: 1.5rem;
}
.online-tefl-module-sidebar {
flex-direction: row;
width: 100%;
justify-content: center;
gap: 1rem;
}
.online-tefl-module-line {
width: 100%;
height: 3px;
margin-top: 30px;
}
}
@media (max-width: 768px) {
.online-tefl-hero {
padding: 3rem 1.5rem;
}
.online-tefl-hero-title {
font-size: 2.5rem;
}
.online-tefl-section-title {
font-size: 2.2rem;
}
.online-tefl-btn {
width: 100%;
justify-content: center;
}
.online-tefl-platforms-grid {
grid-template-columns: 1fr;
}
.online-tefl-equipment-guide {
grid-template-columns: 1fr;
gap: 2rem;
}
.online-tefl-job-support {
grid-template-columns: 1fr;
gap: 2rem;
}
.online-tefl-career-options {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.online-tefl-hero-title {
font-size: 2rem;
}
.online-tefl-section-title {
font-size: 1.8rem;
}
.online-tefl-hero-stats {
flex-direction: column;
gap: 2rem;
align-items: center;
}
.online-tefl-stat-number {
font-size: 2.5rem;
}
.online-tefl-price-amount {
font-size: 4rem;
}
.online-tefl-module-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
/* Course Comparison Page - Custom Styles */
.course-comp-new-hero {
min-height: 80vh;
background: linear-gradient(135deg, #4CAF50 0%, #147aa8 50%, #171b31 100%);
color: white;
padding: 4rem 2rem;
position: relative;
overflow: hidden;
}
.course-comp-new-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(229, 9, 20, 0.1) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(46, 196, 182, 0.1) 0%, transparent 40%);
}
.course-comp-new-container {
max-width: 1400px;
margin: 0 auto;
}
.course-comp-new-hero-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
animation: course-comp-new-fade-in 1s ease-out;
}
@keyframes course-comp-new-fade-in {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.course-comp-new-hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
color: #ff9800d6;
}
.course-comp-new-highlight {
color: #00BCD4;
position: relative;
display: inline-block;
}
.course-comp-new-highlight::after {
content: '';
position: absolute;
bottom: 4px;
left: 0;
width: 100%;
height: 8px;
background-color: #ff9800;
z-index: -1;
border-radius: 4px;
}
.course-comp-new-hero-subtitle {
font-size: 1.3rem;
line-height: 1.7;
margin-bottom: 3rem;
opacity: 0.9;
}
.course-comp-new-hero-stats {
display: flex;
justify-content: center;
gap: 4rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.course-comp-new-stat {
text-align: center;
}
.course-comp-new-stat-number {
font-size: 3rem;
font-weight: 800;
color: #ff9800;
margin-bottom: 0.5rem;
font-family: 'Arial Black', sans-serif;
line-height: 1;
}
.course-comp-new-stat-label {
font-size: 1rem;
opacity: 0.8;
font-weight: 600;
}
.course-comp-new-hero-cta {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-bottom: 4rem;
flex-wrap: wrap;
}
.course-comp-new-btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 1.2rem 2.5rem;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
border: none;
cursor: pointer;
}
.course-comp-new-btn-primary {
background: linear-gradient(90deg, #03A9F4, #00BCD4);
color: white;
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.4);
}
.course-comp-new-btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(229, 9, 20, 0.6);
background: linear-gradient(90deg, #FFEB3B, #FF9800);
}
.course-comp-new-btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: white;
border: 2px solid rgb(59 232 225 / 30%);
backdrop-filter: blur(10px);
}
.course-comp-new-btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
border-color: #FFEB3B;
}
.course-comp-new-hero-visual {
position: relative;
z-index: 2;
max-width: 500px;
margin: 0 auto;
}
.course-comp-new-visual-card {
background: rgb(210 245 249);
border-radius: 20px;
padding: 2.5rem;
color: #16213e;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
transform: rotate(-2deg);
animation: course-comp-new-card-float 8s infinite ease-in-out;
}
@keyframes course-comp-new-card-float {
0%, 100% { transform: rotate(-2deg) translateY(0); }
50% { transform: rotate(-2deg) translateY(-15px); }
}
.course-comp-new-card-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid rgba(22, 33, 62, 0.1);
}
.course-comp-new-card-title {
font-size: 1.8rem;
font-weight: 800;
color: #ff9800;
margin: 0;
}
.course-comp-new-card-body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.course-comp-new-card-item {
display: flex;
align-items: center;
gap: 1.2rem;
}
.course-comp-new-card-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #FFC107, #FF9800);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
flex-shrink: 0;
}
.course-comp-new-card-content h4 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.3rem;
color: #16213e;
}
.course-comp-new-card-content p {
margin: 0;
color: #0f3460;
font-size: 0.95rem;
opacity: 0.8;
}
.course-comp-new-intro {
padding: 6rem 2rem;
background: #e9ebee;
}
.course-comp-new-intro-content {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.course-comp-new-section-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: #16213e;
line-height: 1.2;
}
.course-comp-new-accent {
color: #00BCD4;
}
.course-comp-new-intro-text {
font-size: 1.2rem;
color: #0f3460;
line-height: 1.7;
margin-bottom: 5rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.course-comp-new-intro-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
}
.course-comp-new-intro-card {
background: white;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-top: 5px solid transparent;
}
.course-comp-new-intro-card:nth-child(1) {
border-top-color: #e50914;
}
.course-comp-new-intro-card:nth-child(2) {
border-top-color: #2ec4b6;
}
.course-comp-new-intro-card:nth-child(3) {
border-top-color: #ff9e00;
}
.course-comp-new-intro-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.course-comp-new-intro-icon {
font-size: 3.5rem;
color: #e50914;
margin-bottom: 1.5rem;
}
.course-comp-new-intro-card:nth-child(2) .course-comp-new-intro-icon {
color: #2ec4b6;
}
.course-comp-new-intro-card:nth-child(3) .course-comp-new-intro-icon {
color: #ff9e00;
}
.course-comp-new-intro-card-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1.2rem;
color: #16213e;
}
.course-comp-new-intro-card-text {
color: #0f3460;
line-height: 1.6;
margin: 0;
}
.course-comp-new-main {
padding: 6rem 2rem;
background: linear-gradient(135deg, #2337a8db 0%, #00968887 100%);
color: white;
}
.course-comp-new-main-header {
text-align: center;
margin-bottom: 5rem;
}
.course-comp-new-main .course-comp-new-section-title {
color: white;
}
.course-comp-new-section-subtitle {
font-size: 1.2rem;
color: #fff;
line-height: 1.7;
max-width: 800px;
margin: 0 auto;
}
.course-comp-new-table-container {
overflow-x: auto;
margin-bottom: 5rem;
border-radius: 20px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}
.course-comp-new-table-wrapper {
min-width: 1000px;
}
.course-comp-new-table {
width: 100%;
border-collapse: collapse;
background: white;
color: #16213e;
}
.course-comp-new-table-header {
background: #3288f1;
color: white;
padding: 1.5rem;
font-size: 1.2rem;
font-weight: 800;
text-align: left;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.course-comp-new-table-col {
vertical-align: top;
width: 22%;
border-right: 1px solid #eee;
}
.course-comp-new-table-col:last-child {
border-right: none;
}
.course-comp-new-course-header {
padding: 2rem;
text-align: center;
border-bottom: 1px solid #FFC107;
}
.course-comp-new-course-badge {
display: inline-block;
background: linear-gradient(90deg, #FFC107, #FFC107);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-weight: 800;
font-size: 0.9rem;
margin-bottom: 1rem;
box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
}
.course-comp-new-course-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
color: #16213e;
}
.course-comp-new-course-hours {
font-size: 1.3rem;
font-weight: 800;
color: #2ec4b6;
}
.course-comp-new-table-row {
border-bottom: 1px solid #eee;
}
.course-comp-new-table-row:last-child {
border-bottom: none;
}
.course-comp-new-table-feature {
background: #f8f9fa;
padding: 1.5rem;
font-weight: 700;
color: #0f3460;
border-right: 1px solid #eee;
width: 12%;
}
.course-comp-new-table-data {
padding: 1.5rem;
vertical-align: top;
}
.course-comp-new-feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.course-comp-new-feature-list li {
padding: 0.5rem 0;
color: #0f3460;
position: relative;
padding-left: 1.2rem;
}
.course-comp-new-feature-list li::before {
content: '•';
position: absolute;
left: 0;
color: #e50914;
font-weight: bold;
}
.course-comp-new-feature-badge {
display: inline-block;
background: rgba(46, 196, 182, 0.1);
color: #2ec4b6;
padding: 0.4rem 1rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.course-comp-new-certificate {
display: flex;
align-items: center;
gap: 0.8rem;
color: #0f3460;
font-weight: 600;
}
.course-comp-new-certificate i {
color: #ff9800;
font-size: 1.3rem;
}
.course-comp-new-accreditation {
display: flex;
align-items: center;
gap: 0.8rem;
color: #0f3460;
font-weight: 600;
}
.course-comp-new-accreditation i {
color: #2ec4b6;
font-size: 1.3rem;
}
.course-comp-new-price {
text-align: center;
}
.course-comp-new-price-old {
font-size: 1.2rem;
color: #999;
text-decoration: line-through;
margin-bottom: 0.3rem;
}
.course-comp-new-price-current {
font-size: 2rem;
font-weight: 800;
color: #ff9800;
}
.course-comp-new-table-action {
background: #f8f9fa;
}
.course-comp-new-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
padding: 1rem 1.5rem;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1rem;
border: none;
cursor: pointer;
width: 100%;
}
.course-comp-new-action-primary {
background: linear-gradient(90deg, #e50914, #b81d24);
color: white;
box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
}
.course-comp-new-action-primary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(229, 9, 20, 0.4);
}
.course-comp-new-action-secondary {
background: linear-gradient(90deg, #2ec4b6, #1fa89c);
color: white;
box-shadow: 0 4px 15px rgba(46, 196, 182, 0.3);
}
.course-comp-new-action-secondary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(46, 196, 182, 0.4);
}
.course-comp-new-action-tertiary {
background: linear-gradient(90deg, #ff9e00, #e68a00);
color: white;
box-shadow: 0 4px 15px rgba(255, 158, 0, 0.3);
}
.course-comp-new-action-tertiary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 158, 0, 0.4);
}
.course-comp-new-action-quaternary {
background: linear-gradient(90deg, #4361ee, #3a56d4);
color: white;
box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}
.course-comp-new-action-quaternary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
}
.course-comp-new-recommendation {
max-width: 800px;
margin: 0 auto;
}
.course-comp-new-recommendation-card {
background: rgb(43 136 148 / 35%);
border-radius: 20px;
padding: 2.5rem;
display: flex;
gap: 2rem;
align-items: center;
border: 1px solid rgba(229, 9, 20, 0.2);
backdrop-filter: blur(10px);
}
.course-comp-new-recommendation-icon {
font-size: 3rem;
color: #ff9e00;
flex-shrink: 0;
}
.course-comp-new-recommendation-content {
flex: 1;
}
.course-comp-new-recommendation-title {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 1rem;
color: white;
}
.course-comp-new-recommendation-text {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin: 0;
}
.course-comp-new-specializations {
padding: 6rem 2rem;
background: #f8f9fa;
}
.course-comp-new-specializations-header {
text-align: center;
margin-bottom: 5rem;
}
.course-comp-new-specializations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
margin-bottom: 5rem;
}
.course-comp-new-specialization-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-top: 8px solid transparent;
}
.course-comp-new-specialization-card:nth-child(1) {
border-top-color: #e50914;
}
.course-comp-new-specialization-card:nth-child(2) {
border-top-color: #2ec4b6;
}
.course-comp-new-specialization-card:nth-child(3) {
border-top-color: #ff9e00;
}
.course-comp-new-specialization-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.course-comp-new-specialization-header {
padding: 2.5rem 2.5rem 1.5rem;
text-align: center;
border-bottom: 1px solid #eee;
}
.course-comp-new-specialization-icon {
font-size: 3.5rem;
color: #e50914;
margin-bottom: 1.5rem;
}
.course-comp-new-specialization-card:nth-child(2) .course-comp-new-specialization-icon {
color: #2ec4b6;
}
.course-comp-new-specialization-card:nth-child(3) .course-comp-new-specialization-icon {
color: #ff9e00;
}
.course-comp-new-specialization-title {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 0.5rem;
color: #16213e;
}
.course-comp-new-specialization-hours {
font-size: 1.2rem;
font-weight: 800;
color: #0f3460;
opacity: 0.8;
}
.course-comp-new-specialization-body {
padding: 2.5rem;
}
.course-comp-new-specialization-desc {
color: #0f3460;
line-height: 1.6;
margin-bottom: 2rem;
}
.course-comp-new-features-title {
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 1.2rem;
color: #16213e;
}
.course-comp-new-features-list {
list-style: none;
padding: 0;
margin: 0 0 2.5rem;
}
.course-comp-new-features-list li {
padding: 0.7rem 0;
border-bottom: 1px solid #eee;
display: flex;
align-items: flex-start;
gap: 0.8rem;
color: #0f3460;
}
.course-comp-new-features-list li:last-child {
border-bottom: none;
}
.course-comp-new-features-list li i {
color: #2ec4b6;
font-size: 1.1rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
.course-comp-new-specialization-price {
text-align: center;
margin-bottom: 2rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 15px;
}
.course-comp-new-specialization-price-old {
font-size: 1.3rem;
color: #999;
text-decoration: line-through;
margin-bottom: 0.3rem;
}
.course-comp-new-specialization-price-current {
font-size: 2.5rem;
font-weight: 800;
color: #ff9800;
margin-bottom: 0.5rem;
}
.course-comp-new-specialization-price-note {
color: #0f3460;
font-size: 0.95rem;
opacity: 0.8;
}
.course-comp-new-specialization-action {
text-align: center;
}
.course-comp-new-specialization-btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(90deg, #2196F3, #0f3460);
color: white;
padding: 1.2rem 2.5rem;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
border: none;
cursor: pointer;
box-shadow: 0 6px 20px rgba(22, 33, 62, 0.3);
}
.course-comp-new-specialization-btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(22, 33, 62, 0.4);
background: linear-gradient(90deg, #0f3460, #0a264e);
}
.course-comp-new-specializations-note {
background: white;
border-radius: 20px;
padding: 3.5rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
border-left: 5px solid #2ec4b6;
}
.course-comp-new-note-content h3 {
font-size: 2rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: #16213e;
}
.course-comp-new-note-text {
color: #0f3460;
line-height: 1.6;
margin: 0;
font-size: 1.1rem;
}
.course-comp-new-note-visual {
text-align: center;
}
.course-comp-new-visual-icons {
display: flex;
justify-content: center;
gap: 2rem;
font-size: 3.5rem;
color: #ff9800;
}
.course-comp-new-visual-icons i {
animation: course-comp-new-icon-bounce 3s infinite;
}
@keyframes course-comp-new-icon-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.course-comp-new-guide {
padding: 6rem 2rem;
background: linear-gradient(135deg, #2196F3 0%, #0f3460 100%);
color: white;
}
.course-comp-new-guide-header {
text-align: center;
margin-bottom: 5rem;
}
.course-comp-new-guide .course-comp-new-section-title {
color: white;
}
.course-comp-new-guide .course-comp-new-section-subtitle {
color: rgba(255, 255, 255, 0.9);
}
.course-comp-new-guide-steps {
display: flex;
flex-direction: column;
gap: 3rem;
max-width: 800px;
margin: 0 auto 5rem;
}
.course-comp-new-step {
display: flex;
gap: 2.5rem;
align-items: flex-start;
}
.course-comp-new-step-number {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #e50914, #b81d24);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
color: white;
flex-shrink: 0;
box-shadow: 0 10px 20px rgba(229, 9, 20, 0.3);
}
.course-comp-new-step:nth-child(2) .course-comp-new-step-number {
background: linear-gradient(135deg, #2ec4b6, #1fa89c);
}
.course-comp-new-step:nth-child(3) .course-comp-new-step-number {
background: linear-gradient(135deg, #ff9e00, #e68a00);
}
.course-comp-new-step:nth-child(4) .course-comp-new-step-number {
background: linear-gradient(135deg, #4361ee, #3a56d4);
}
.course-comp-new-step-content {
flex: 1;
}
.course-comp-new-step-title {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 1rem;
color: white;
}
.course-comp-new-step-text {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin: 0;
font-size: 1.1rem;
}
.course-comp-new-faq {
background: rgba(255, 255, 255, 0.1);
border-radius: 25px;
padding: 3.5rem;
backdrop-filter: blur(10px);
border: 1px solid #FFC107;
}
.course-comp-new-faq-title {
font-size: 2.2rem;
color: white;
margin-bottom: 3rem;
text-align: center;
font-weight: 800;
}
.course-comp-new-faq-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.course-comp-new-faq-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.course-comp-new-faq-item:hover {
border-color: #ffc107;
}
.course-comp-new-faq-question {
padding: 1.8rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255, 255, 255, 0.1);
}
.course-comp-new-faq-question h4 {
margin: 0;
font-size: 1.2rem;
font-weight: 700;
color: white;
flex: 1;
}
.course-comp-new-faq-question i {
color: #ffc107;
transition: transform 0.3s ease;
margin-left: 1rem;
}
.course-comp-new-faq-item.active .course-comp-new-faq-question i {
transform: rotate(180deg);
}
.course-comp-new-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.course-comp-new-faq-item.active .course-comp-new-faq-answer {
max-height: 500px;
}
.course-comp-new-faq-answer p {
padding: 1.8rem;
margin: 0;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.course-comp-new-cta {
padding: 6rem 2rem;
background-color: white;
color: black;
}
.course-comp-new-cta-content {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.course-comp-new-cta-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: #FF9800;
}
.course-comp-new-cta-description {
font-size: 1.3rem;
line-height: 1.7;
margin-bottom: 3rem;
opacity: 0.9;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.course-comp-new-cta-features {
display: flex;
justify-content: center;
gap: 3rem;
margin-bottom: 4rem;
flex-wrap: wrap;
}
.course-comp-new-cta-feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
.course-comp-new-cta-feature i {
font-size: 2.5rem;
color: #ff9e00;
}
.course-comp-new-cta-feature span {
font-weight: 700;
font-size: 1.1rem;
}
.course-comp-new-cta-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.course-comp-new-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 1.3rem 3rem;
border-radius: 12px;
font-weight: 800;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.2rem;
border: none;
cursor: pointer;
}
.course-comp-new-cta-primary {
background: #00bcd4;
color: white;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.course-comp-new-cta-primary:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
background: #ff9800;
}
.course-comp-new-cta-secondary {
background: #ff9800;
color: white;
border: 2px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
}
.course-comp-new-cta-secondary:hover {
background: #00bcd4;
transform: translateY(-5px);
border-color: white;
}
/* Mobile Responsiveness */
@media (max-width: 1200px) {
.course-comp-new-table-wrapper {
min-width: 900px;
}
}
@media (max-width: 1024px) {
.course-comp-new-hero-title {
font-size: 2.8rem;
}
.course-comp-new-section-title {
font-size: 2.5rem;
}
.course-comp-new-specializations-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.course-comp-new-specializations-note {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
}
@media (max-width: 768px) {
.course-comp-new-hero {
padding: 3rem 1.5rem;
}
.course-comp-new-hero-title {
font-size: 2.2rem;
}
.course-comp-new-section-title {
font-size: 2rem;
}
.course-comp-new-hero-stats {
flex-direction: column;
gap: 2rem;
align-items: center;
}
.course-comp-new-hero-cta {
flex-direction: column;
align-items: center;
}
.course-comp-new-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
.course-comp-new-intro-grid {
grid-template-columns: 1fr;
}
.course-comp-new-step {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.5rem;
}
.course-comp-new-step-number {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.course-comp-new-cta-features {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.course-comp-new-cta-actions {
flex-direction: column;
align-items: center;
}
.course-comp-new-cta-btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 480px) {
.course-comp-new-hero-title {
font-size: 1.8rem;
}
.course-comp-new-section-title {
font-size: 1.6rem;
}
.course-comp-new-stat-number {
font-size: 2.5rem;
}
.course-comp-new-specializations-grid {
grid-template-columns: 1fr;
}
.course-comp-new-faq {
padding: 2rem;
}
.course-comp-new-faq-title {
font-size: 1.8rem;
}
.course-comp-new-cta-title {
font-size: 2.2rem;
}
}
/* =============================================
Foundation 60-Hour Online TEFL Course
CSS File: found-up.css
Aesthetic: Warm Bauhaus / Modern Education
Fonts: Fraunces (display) + Outfit (body)
Palette: Ivory + Cobalt Blue + Amber Gold
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,600;1,9..144,700&family=Outfit:wght@300;400;500;600;700&display=swap');
/* =============================================
CSS VARIABLES
============================================= */
.fc-wrap {
--fc-ivory: #F8F7F4;
--fc-ivory-deep: #F0EDE6;
--fc-ivory-border: #E4DFDA;
--fc-white: #FFFFFF;
--fc-blue: #2563EB;
--fc-blue-dark: #1D4ED8;
--fc-blue-light: #3B82F6;
--fc-blue-pale: #EFF6FF;
--fc-blue-mid: #DBEAFE;
--fc-amber: #D97706;
--fc-amber-light: #F59E0B;
--fc-amber-pale: #FFFBEB;
--fc-ink: #18181B;
--fc-ink-mid: #3F3F46;
--fc-ink-soft: #71717A;
--fc-navy: #0F172A;
--fc-font-display: 'Fraunces', Georgia, serif;
--fc-font-body: 'Outfit', system-ui, sans-serif;
--fc-r: 14px;
--fc-r-lg: 20px;
--fc-shadow: 0 4px 24px rgba(0,0,0,0.07);
--fc-shadow-md: 0 8px 40px rgba(0,0,0,0.1);
--fc-shadow-blue: 0 8px 32px rgba(37,99,235,0.22);
font-family: var(--fc-font-body);
color: var(--fc-ink);
background: var(--fc-ivory);
overflow-x: hidden;
}
/* =============================================
SHARED UTILITIES
============================================= */
.fc-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--fc-font-body);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #009688;
background: var(--fc-blue-pale);
border: 1px solid var(--fc-blue-mid);
padding: 6px 14px;
border-radius: 100px;
margin-bottom: 16px;
}
.fc-eyebrow-light {
color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.2);
}
.fc-section-title {
font-family: var(--fc-font-display);
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 700;
line-height: 1.18;
color: #ff9800eb;
margin: 0 0 18px;
}
.fc-section-title em {
font-style: italic;
color: #009688;
}
.fc-title-light { color: var(--fc-white); }
.fc-title-light em { color: var(--fc-amber-light); }
.fc-body-text {
font-size: 16px;
line-height: 1.75;
color: var(--fc-ink-mid);
margin: 0 0 16px;
}
.fc-body-text:last-child { margin-bottom: 0; }
.fc-text-light { color: rgba(255,255,255,0.78); }
/* =============================================
HERO
============================================= */
.fc-hero {
position: relative;
background: var(--fc-ivory);
min-height: 640px;
overflow: hidden;
}
/* Subtle crosshatch background texture */
.fc-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(37,99,235,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(37,99,235,0.03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
}
.fc-hero-geo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.fc-hero-inner {
position: relative;
z-index: 1;
max-width: 1280px;
margin: 0 auto;
padding: 80px 48px 100px;
display: grid;
grid-template-columns: 1fr 520px;
gap: 60px;
align-items: center;
}
/* Eyebrow inside hero */
.fc-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fc-ink-mid);
background: var(--fc-white);
border: 1.5px solid var(--fc-ivory-border);
padding: 8px 16px 8px 12px;
border-radius: 100px;
width: fit-content;
margin-bottom: 24px;
animation: fcFadeUp 0.6s ease both;
box-shadow: var(--fc-shadow);
}
.fc-eyebrow-dot {
width: 8px;
height: 8px;
background: var(--fc-blue);
border-radius: 50%;
display: inline-block;
animation: fcPulse 2s ease infinite;
}
.fc-eyebrow-tag {
background: var(--fc-amber-pale);
color: var(--fc-amber);
border: 1px solid rgba(217,119,6,0.2);
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 100px;
letter-spacing: 0.06em;
}
@keyframes fcPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.4); }
50% { box-shadow: 0 0 0 5px rgba(37,99,235,0); }
}
.fc-hero-title {
font-family: var(--fc-font-display);
font-size: clamp(42px, 5.5vw, 78px);
font-weight: 900;
line-height: 1.0;
letter-spacing: -0.02em;
color: #ff9800d6;
margin: 0 0 24px;
animation: fcFadeUp 0.7s 0.08s ease both;
}
.fc-hero-title em {
font-style: italic;
color: #009688;
position: relative;
}
.fc-hero-desc {
font-size: 17px;
line-height: 1.7;
color: var(--fc-ink-mid);
max-width: 520px;
margin: 0 0 28px;
font-weight: 300;
animation: fcFadeUp 0.7s 0.16s ease both;
}
.fc-hero-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 36px;
animation: fcFadeUp 0.7s 0.22s ease both;
}
.fc-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--fc-white);
border: 1.5px solid var(--fc-ivory-border);
color: var(--fc-ink-mid);
font-size: 12.5px;
font-weight: 500;
padding: 7px 14px;
border-radius: 100px;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.fc-chip svg { color: var(--fc-blue); }
.fc-hero-cta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
animation: fcFadeUp 0.7s 0.28s ease both;
}
/* Buttons */
.fc-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: #009688;
color: var(--fc-white);
font-family: var(--fc-font-body);
font-size: 15px;
font-weight: 600;
padding: 16px 28px;
border-radius: var(--fc-r);
text-decoration: none;
transition: all 0.25s ease;
box-shadow: var(--fc-shadow-blue);
}
.fc-btn-primary:hover {
background: var(--fc-blue-dark);
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(37,99,235,0.32);
}
.fc-btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--fc-ink-mid);
font-family: var(--fc-font-body);
font-size: 15px;
font-weight: 600;
padding: 16px 24px;
border: 1.5px solid var(--fc-ivory-border);
border-radius: var(--fc-r);
text-decoration: none;
transition: all 0.2s ease;
}
.fc-btn-ghost:hover {
border-color: var(--fc-blue);
color: var(--fc-blue);
background: var(--fc-blue-pale);
}
/* ---- Hero right ---- */
.fc-hero-right {
animation: fcFadeLeft 0.8s 0.2s ease both;
}
.fc-hero-img-stack {
position: relative;
}
.fc-hero-img-main {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: var(--fc-r-lg);
display: block;
box-shadow: var(--fc-shadow-md);
}
.fc-float-card {
position: absolute;
background: var(--fc-white);
border-radius: 14px;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
border: 1px solid rgba(255,255,255,0.8);
animation: fcFloat 4s ease-in-out infinite;
}
.fc-float-card strong {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--fc-ink);
line-height: 1.2;
}
.fc-float-card span {
display: block;
font-size: 11.5px;
color: var(--fc-ink-soft);
}
.fc-float-1 {
top: 5%;
left: -20px;
animation-delay: 0s;
}
.fc-float-2 {
bottom: 10%;
right: -20px;
animation-delay: 2s;
}
.fc-float-icon {
width: 42px;
height: 42px;
background: var(--fc-blue-pale);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--fc-blue);
flex-shrink: 0;
}
/* Ring chart */
.fc-float-ring {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.fc-ring-svg {
width: 44px;
height: 44px;
position: absolute;
top: 0;
left: 0;
}
.fc-float-ring span {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--fc-blue) !important;
position: relative;
z-index: 1;
}
/* Dot grid decoration */
.fc-dot-grid {
position: absolute;
bottom: -24px;
right: -24px;
width: 120px;
height: 120px;
z-index: -1;
opacity: 0.8;
}
@keyframes fcFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Scroll hint */
.fc-scroll-hint {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
animation: fcFadeUp 1s 0.8s ease both;
}
.fc-scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, var(--fc-blue), transparent);
animation: fcScrollLine 1.5s ease-in-out infinite;
}
.fc-scroll-hint span {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fc-ink-soft);
font-weight: 600;
}
@keyframes fcScrollLine {
0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
50% { transform: scaleY(1); opacity: 1; }
100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}
/* =============================================
TRUST BAR
============================================= */
.fc-trust-bar {
background: var(--fc-white);
border-top: 1px solid var(--fc-ivory-border);
border-bottom: 1px solid var(--fc-ivory-border);
padding: 16px 48px;
}
.fc-trust-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
justify-content: center;
}
.fc-trust-label {
font-size: 12px;
font-weight: 600;
color: var(--fc-ink-soft);
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.fc-trust-logos {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.fc-trust-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
font-weight: 500;
color: var(--fc-ink-mid);
}
.fc-trust-item svg { color: var(--fc-blue); }
.fc-trust-sep {
color: var(--fc-ivory-border);
font-size: 20px;
}
.fc-trust-rating {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.fc-stars {
display: flex;
gap: 2px;
}
.fc-trust-rating span {
font-size: 13px;
font-weight: 600;
color: var(--fc-ink-mid);
}
/* =============================================
OVERVIEW
============================================= */
.fc-overview {
padding: 100px 48px;
background: var(--fc-white);
}
.fc-overview-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 480px 1fr;
gap: 72px;
align-items: center;
}
.fc-img-frame {
position: relative;
}
.fc-overview-img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
border-radius: var(--fc-r-lg);
display: block;
box-shadow: var(--fc-shadow-md);
}
.fc-frame-accent {
position: absolute;
width: 50px;
height: 50px;
border-color: var(--fc-blue);
border-style: solid;
}
.fc-frame-tl {
top: -12px;
left: -12px;
border-width: 3px 0 0 3px;
border-radius: 4px 0 0 0;
}
.fc-frame-br {
bottom: -12px;
right: -12px;
border-width: 0 3px 3px 0;
border-radius: 0 0 4px 0;
}
.fc-img-stat-pill {
position: absolute;
background: var(--fc-white);
border-radius: 50px;
padding: 10px 16px 10px 12px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 6px 24px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.9);
animation: fcFloat 4.5s ease-in-out infinite;
}
.fc-img-stat-pill strong { display: block; font-size: 12px; font-weight: 700; color: var(--fc-ink); }
.fc-img-stat-pill span { display: block; font-size: 10.5px; color: var(--fc-ink-soft); }
.fc-stat-a { bottom: 32px; left: -24px; animation-delay: 0.5s; }
.fc-stat-b { top: 32px; right: -24px; animation-delay: 2.5s; }
.fc-overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 32px;
}
.fc-ov-item {
display: flex;
align-items: flex-start;
gap: 14px;
}
.fc-ov-icon {
width: 46px;
height: 46px;
background: var(--fc-blue-pale);
border: 1.5px solid var(--fc-blue-mid);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #009688;
flex-shrink: 0;
margin-top: 2px;
}
.fc-ov-item strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--fc-ink);
margin-bottom: 4px;
}
.fc-ov-item p {
font-size: 13.5px;
color: var(--fc-ink-soft);
line-height: 1.6;
margin: 0;
}
/* =============================================
CURRICULUM
============================================= */
.fc-curriculum {
background: var(--fc-navy);
position: relative;
padding: 100px 48px;
overflow: hidden;
}
/* Fine dot pattern on dark bg */
.fc-curriculum::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
background-size: 24px 24px;
pointer-events: none;
}
.fc-curriculum-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.fc-wave-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
}
.fc-wave-bot {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
}
.fc-curriculum-inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.fc-curriculum-header {
text-align: center;
max-width: 700px;
margin: 0 auto 60px;
}
.fc-modules-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--fc-r-lg);
overflow: hidden;
}
.fc-module {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
padding: 36px 32px;
display: flex;
gap: 20px;
transition: background 0.25s ease, transform 0.25s ease;
opacity: 0;
transform: translateY(20px);
}
.fc-module.fc-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease, background 0.25s ease;
}
.fc-module:hover {
background: rgba(37,99,235,0.08);
}
.fc-module-num {
font-family: var(--fc-font-display);
font-size: 52px;
font-weight: 900;
color: rgba(37,99,235,0.2);
line-height: 1;
flex-shrink: 0;
width: 56px;
text-align: right;
margin-top: -6px;
}
.fc-module-content {
flex: 1;
}
.fc-module-icon {
width: 44px;
height: 44px;
background: rgba(37,99,235,0.15);
border: 1px solid rgba(37,99,235,0.25);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #60A5FA;
margin-bottom: 16px;
}
.fc-module h3 {
font-family: var(--fc-font-display);
font-size: 18px;
font-weight: 700;
color: var(--fc-white);
margin: 0 0 10px;
line-height: 1.3;
}
.fc-module p {
font-size: 14px;
line-height: 1.65;
color: rgba(255,255,255,0.6);
margin: 0 0 14px;
}
.fc-module-topics {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.fc-module-topics li {
font-size: 12.5px;
color: rgba(255,255,255,0.5);
padding-left: 16px;
position: relative;
}
.fc-module-topics li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background: var(--fc-blue-light);
border-radius: 50%;
}
/* =============================================
DETAILS
============================================= */
.fc-details {
padding: 100px 48px;
background: var(--fc-ivory);
position: relative;
overflow: hidden;
}
/* Geometric accent shapes */
.fc-details::before {
content: '';
position: absolute;
right: -100px;
top: 50%;
transform: translateY(-50%);
width: 400px;
height: 400px;
border-radius: 50%;
border: 60px solid rgba(37,99,235,0.04);
pointer-events: none;
}
.fc-details::after {
content: '';
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 120px;
height: 120px;
border: 2px solid rgba(217,119,6,0.1);
pointer-events: none;
}
.fc-details-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 400px;
gap: 72px;
align-items: start;
position: relative;
z-index: 1;
}
.fc-inclusions {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.fc-inclusion-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
color: var(--fc-ink-mid);
line-height: 1.5;
}
.fc-inc-check {
width: 24px;
height: 24px;
background: var(--fc-blue);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--fc-white);
margin-top: 1px;
}
/* Price card */
.fc-price-card {
background: var(--fc-white);
border-radius: var(--fc-r-lg);
border: 1.5px solid var(--fc-ivory-border);
box-shadow: var(--fc-shadow-md);
overflow: hidden;
position: sticky;
top: 24px;
}
.fc-price-header {
background: linear-gradient(135deg, var(--fc-blue) 0%, var(--fc-blue-dark) 100%);
padding: 32px 28px 28px;
text-align: center;
position: relative;
overflow: hidden;
}
.fc-price-header::before {
content: '';
position: absolute;
top: -40px;
right: -40px;
width: 120px;
height: 120px;
background: rgba(255,255,255,0.07);
border-radius: 50%;
}
.fc-price-badge {
display: inline-block;
background: rgba(255,255,255,0.15);
color: rgba(255,255,255,0.9);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 16px;
}
.fc-price-main {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 4px;
}
.fc-price-currency {
font-family: var(--fc-font-display);
font-size: 28px;
font-weight: 700;
color: rgba(255,255,255,0.75);
margin-top: 8px;
}
.fc-price-num {
font-family: var(--fc-font-display);
font-size: 72px;
font-weight: 900;
color: var(--fc-white);
line-height: 1;
}
.fc-price-note {
display: block;
font-size: 12px;
color: rgba(255,255,255,0.65);
margin-top: 8px;
}
.fc-price-body {
padding: 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.fc-price-spec {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--fc-ivory-border);
font-size: 14px;
}
.fc-price-spec:last-of-type { border-bottom: none; }
.fc-spec-label {
display: flex;
align-items: center;
gap: 8px;
color: var(--fc-ink-soft);
font-weight: 400;
}
.fc-spec-label svg { color: var(--fc-blue); }
.fc-spec-val {
font-weight: 700;
color: var(--fc-ink);
}
.fc-btn-enroll {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--fc-blue);
color: var(--fc-white);
font-family: var(--fc-font-body);
font-size: 15px;
font-weight: 700;
padding: 18px;
border-radius: 12px;
text-decoration: none;
transition: all 0.25s ease;
margin-top: 8px;
box-shadow: var(--fc-shadow-blue);
}
.fc-btn-enroll:hover {
background: var(--fc-blue-dark);
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(37,99,235,0.3);
}
.fc-price-guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12.5px;
color: var(--fc-ink-soft);
text-align: center;
margin: 4px 0 0;
}
.fc-price-guarantee svg { color: var(--fc-blue); }
/* Upgrade card */
.fc-upgrade-card {
background: var(--fc-amber-pale);
border: 1.5px solid rgba(217,119,6,0.2);
border-radius: var(--fc-r);
padding: 20px;
display: flex;
align-items: flex-start;
gap: 14px;
margin-top: 16px;
}
.fc-upgrade-icon {
width: 44px;
height: 44px;
background: var(--fc-amber-light);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--fc-white);
flex-shrink: 0;
}
.fc-upgrade-card h4 {
font-size: 14.5px;
font-weight: 700;
color: var(--fc-ink);
margin: 0 0 6px;
}
.fc-upgrade-card p {
font-size: 13px;
color: var(--fc-ink-mid);
margin: 0;
line-height: 1.55;
}
/* =============================================
WHO IS IT FOR
============================================= */
.fc-who {
padding: 100px 48px;
background: var(--fc-white);
}
.fc-who-inner { max-width: 1280px; margin: 0 auto; }
.fc-who-header {
text-align: center;
max-width: 680px;
margin: 0 auto 56px;
}
.fc-who-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.fc-who-card {
border-radius: var(--fc-r-lg);
overflow: hidden;
border: 1.5px solid var(--fc-ivory-border);
background: var(--fc-ivory);
transition: box-shadow 0.25s ease, transform 0.25s ease;
opacity: 0;
transform: translateY(24px);
}
.fc-who-card.fc-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
}
.fc-who-card:hover {
box-shadow: var(--fc-shadow-md);
transform: translateY(-4px) !important;
}
.fc-who-img {
height: 220px;
overflow: hidden;
}
.fc-who-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.fc-who-card:hover .fc-who-img img {
transform: scale(1.06);
}
.fc-who-body {
padding: 22px 20px 24px;
}
.fc-who-body h3 {
font-family: var(--fc-font-display);
font-size: 18px;
font-weight: 700;
color: var(--fc-ink);
margin: 0 0 10px;
}
.fc-who-body p {
font-size: 13.5px;
color: var(--fc-ink-mid);
line-height: 1.65;
margin: 0;
}
/* =============================================
DESTINATIONS STRIP
============================================= */
.fc-destinations {
padding: 80px 0;
background: var(--fc-ivory);
overflow: hidden;
}
.fc-dest-header {
text-align: center;
padding: 0 48px;
max-width: 680px;
margin: 0 auto 48px;
}
.fc-dest-strip {
display: flex;
gap: 0;
overflow-x: auto;
padding: 0 48px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.fc-dest-strip::-webkit-scrollbar { display: none; }
.fc-dest-item {
position: relative;
min-width: 300px;
height: 420px;
border-radius: var(--fc-r-lg);
overflow: hidden;
flex-shrink: 0;
margin-right: 16px;
scroll-snap-align: start;
opacity: 0;
transform: scale(0.95);
}
.fc-dest-item.fc-revealed {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.fc-dest-item:last-child { margin-right: 0; }
.fc-dest-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.fc-dest-item:hover img {
transform: scale(1.06);
}
.fc-dest-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
padding: 48px 20px 20px;
display: flex;
flex-direction: column;
gap: 3px;
}
.fc-dest-label strong {
font-family: var(--fc-font-display);
font-size: 20px;
font-weight: 700;
color: var(--fc-white);
}
.fc-dest-label span {
font-size: 13px;
color: rgba(255,255,255,0.75);
font-weight: 500;
}
/* =============================================
TESTIMONIALS
============================================= */
.fc-testimonials {
padding: 100px 48px;
background: var(--fc-ivory-deep);
position: relative;
overflow: hidden;
}
/* Large decorative quote behind section */
.fc-testimonials::before {
content: '"';
position: absolute;
top: -20px;
left: -10px;
font-family: var(--fc-font-display);
font-size: 300px;
font-weight: 900;
color: rgba(37,99,235,0.04);
line-height: 1;
pointer-events: none;
user-select: none;
}
.fc-test-inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.fc-test-inner > .fc-section-title {
text-align: center;
margin-bottom: 48px;
}
.fc-test-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.fc-test-card {
background: var(--fc-white);
border-radius: var(--fc-r-lg);
padding: 32px 28px;
border: 1.5px solid var(--fc-ivory-border);
box-shadow: var(--fc-shadow);
display: flex;
flex-direction: column;
gap: 16px;
transition: box-shadow 0.25s, transform 0.25s;
opacity: 0;
transform: translateY(20px);
}
.fc-test-card.fc-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s, transform 0.25s;
}
.fc-test-card:hover {
box-shadow: var(--fc-shadow-md);
transform: translateY(-4px) !important;
}
.fc-test-quote-mark { display: flex; }
.fc-test-stars { display: flex; gap: 3px; }
.fc-test-card blockquote {
font-family: var(--fc-font-display);
font-style: italic;
font-size: 15.5px;
line-height: 1.68;
color: var(--fc-ink-mid);
margin: 0;
flex: 1;
}
.fc-test-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--fc-ivory-border);
}
.fc-test-author img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--fc-ivory-border);
}
.fc-test-author strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--fc-ink);
}
.fc-test-author span {
display: block;
font-size: 12px;
color: var(--fc-ink-soft);
}
/* =============================================
FAQ STRIP
============================================= */
.fc-faq-strip {
padding: 100px 48px;
background: var(--fc-white);
}
.fc-faq-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 380px 1fr;
gap: 72px;
align-items: start;
}
.fc-faq-left {
position: sticky;
top: 24px;
}
.fc-faq-img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: var(--fc-r-lg);
margin-top: 28px;
display: block;
box-shadow: var(--fc-shadow-md);
}
.fc-faq-right {
display: flex;
flex-direction: column;
gap: 0;
}
.fc-faq-item {
border-bottom: 1.5px solid var(--fc-ivory-border);
overflow: hidden;
}
.fc-faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 0;
background: none;
border: none;
font-family: var(--fc-font-body);
font-size: 16px;
font-weight: 600;
color: var(--fc-ink);
text-align: left;
cursor: pointer;
transition: color 0.2s;
}
.fc-faq-q:hover { color: var(--fc-blue); }
.fc-faq-item.open .fc-faq-q { color: var(--fc-blue); }
.fc-faq-icon {
flex-shrink: 0;
color: var(--fc-blue);
transition: transform 0.3s ease;
}
.fc-faq-item.open .fc-faq-icon { transform: rotate(180deg); }
.fc-faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.fc-faq-item.open .fc-faq-a { max-height: 400px; }
.fc-faq-a p {
font-size: 15px;
line-height: 1.75;
color: var(--fc-ink-mid);
margin: 0 0 22px;
padding-top: 2px;
}
/* =============================================
BOTTOM CTA
============================================= */
.fc-bottom-cta {
background: #375fb6;
position: relative;
overflow: hidden;
padding: 100px 48px;
}
/* Repeating diagonal lines texture */
.fc-bottom-cta::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 20px,
rgba(255,255,255,0.02) 20px,
rgba(255,255,255,0.02) 21px
);
pointer-events: none;
}
.fc-cta-geo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.fc-cta-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.fc-cta-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.9);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 100px;
margin-bottom: 28px;
}
.fc-cta-title {
font-family: var(--fc-font-display);
font-size: clamp(28px, 4vw, 48px);
font-weight: 900;
line-height: 1.15;
color: var(--fc-white);
margin: 0 0 20px;
}
.fc-cta-title em {
font-style: italic;
color: var(--fc-amber-light);
}
.fc-cta-sub {
font-size: 17px;
line-height: 1.7;
color: rgba(255,255,255,0.75);
margin: 0 0 40px;
font-weight: 300;
}
.fc-cta-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.fc-btn-cta-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--fc-white);
color: var(--fc-blue);
font-family: var(--fc-font-body);
font-size: 16px;
font-weight: 700;
padding: 18px 32px;
border-radius: var(--fc-r);
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.fc-btn-cta-primary:hover {
background: var(--fc-ivory);
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(0,0,0,0.2);
}
.fc-btn-cta-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.1);
color: var(--fc-white);
font-family: var(--fc-font-body);
font-size: 16px;
font-weight: 600;
padding: 18px 28px;
border: 1.5px solid rgba(255,255,255,0.3);
border-radius: var(--fc-r);
text-decoration: none;
transition: all 0.2s ease;
backdrop-filter: blur(8px);
}
.fc-btn-cta-ghost:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.5);
}
.fc-cta-features {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.fc-cta-features span {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: rgba(255,255,255,0.7);
font-weight: 500;
}
.fc-cta-features span svg { color: rgba(255,255,255,0.85); }
/* =============================================
ANIMATIONS
============================================= */
@keyframes fcFadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fcFadeLeft {
from { opacity: 0; transform: translateX(32px); }
to { opacity: 1; transform: translateX(0); }
}
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 1180px) {
.fc-hero-inner {
grid-template-columns: 1fr;
gap: 48px;
padding: 64px 40px 80px;
}
.fc-hero-img-main { aspect-ratio: 16/9; }
.fc-float-1 { top: auto; bottom: 16px; left: 16px; }
.fc-float-2 { right: 16px; bottom: 80px; }
.fc-overview-inner { grid-template-columns: 1fr; gap: 48px; }
.fc-overview-img { aspect-ratio: 16/9; }
.fc-modules-grid { grid-template-columns: 1fr; }
.fc-details-inner { grid-template-columns: 1fr; }
.fc-price-card { position: static; }
.fc-who-grid { grid-template-columns: repeat(2, 1fr); }
.fc-test-grid { grid-template-columns: 1fr; }
.fc-faq-inner { grid-template-columns: 1fr; }
.fc-faq-left { position: static; }
.fc-faq-img { display: none; }
}
@media (max-width: 768px) {
.fc-hero-inner { padding: 48px 24px 64px; }
.fc-trust-bar { padding: 16px 24px; }
.fc-trust-rating { margin-left: 0; }
.fc-overview,
.fc-curriculum,
.fc-details,
.fc-who,
.fc-destinations,
.fc-testimonials,
.fc-faq-strip,
.fc-bottom-cta { padding: 64px 24px; }
.fc-who-grid { grid-template-columns: 1fr; }
.fc-overview-grid { grid-template-columns: 1fr; }
.fc-dest-strip { padding: 0 24px; }
.fc-dest-item { min-width: 260px; }
.fc-cta-actions { flex-direction: column; }
.fc-btn-cta-primary,
.fc-btn-cta-ghost { width: 100%; justify-content: center; }
.fc-hero-chips { gap: 8px; }
.fc-float-1, .fc-float-2 { display: none; }
}
/* =============================================
TEFL Partner Programme Page
CSS: part-up1.css
Aesthetic: Premium Corporate / Luxury SaaS
Fonts: Syne (display) + Nunito Sans (body)
Palette: Deep Charcoal + Emerald + Off-white
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,300&display=swap');
/* =============================================
CSS VARIABLES
============================================= */
.pp-wrap {
--pp-charcoal: #0F1117;
--pp-charcoal-mid: #1A1D27;
--pp-charcoal-soft: #252836;
--pp-charcoal-border: #2E3245;
--pp-white: #FFFFFF;
--pp-offwhite: #F5F4F1;
--pp-offwhite-deep: #EDEBE6;
--pp-border: #E6E3DC;
--pp-emerald: #10B981;
--pp-emerald-dark: #059669;
--pp-emerald-light: #34D399;
--pp-emerald-pale: #ECFDF5;
--pp-emerald-glow: rgba(16,185,129,0.15);
--pp-blue: #3B82F6;
--pp-blue-pale: #EFF6FF;
--pp-amber: #D97706;
--pp-amber-pale: #FFFBEB;
--pp-purple: #7C3AED;
--pp-purple-pale: #F5F3FF;
--pp-slate: #475569;
--pp-slate-pale: #F1F5F9;
--pp-rose: #E11D48;
--pp-rose-pale: #FFF1F2;
--pp-ink: #111827;
--pp-ink-mid: #374151;
--pp-ink-soft: #6B7280;
--pp-font-display: 'Syne', system-ui, sans-serif;
--pp-font-body: 'Nunito Sans', system-ui, sans-serif;
--pp-r: 12px;
--pp-r-lg: 20px;
--pp-shadow: 0 4px 20px rgba(0,0,0,0.06);
--pp-shadow-md: 0 8px 40px rgba(0,0,0,0.1);
--pp-shadow-dark: 0 8px 40px rgba(0,0,0,0.3);
--pp-shadow-em: 0 8px 32px rgba(16,185,129,0.2);
font-family: var(--pp-font-body);
color: var(--pp-ink);
background: var(--pp-offwhite);
overflow-x: hidden;
}
/* =============================================
SHARED
============================================= */
.pp-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--pp-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pp-emerald);
background: var(--pp-emerald-pale);
border: 1px solid rgba(16,185,129,0.2);
padding: 6px 14px;
border-radius: 100px;
margin-bottom: 18px;
}
.pp-eyebrow-light {
color: var(--pp-emerald-light);
background: rgba(52,211,153,0.1);
border-color: rgba(52,211,153,0.2);
}
.pp-section-title {
font-family: var(--pp-font-display);
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 800;
line-height: 1.15;
color: var(--pp-ink);
margin: 0 0 18px;
letter-spacing: -0.02em;
}
.pp-section-title em {
font-style: normal;
color: var(--pp-emerald-dark);
position: relative;
}
.pp-title-light { color: var(--pp-white); }
.pp-title-light em { color: var(--pp-emerald-light); }
.pp-section-sub {
font-size: 16.5px;
line-height: 1.75;
color: var(--pp-ink-mid);
max-width: 640px;
margin: 0;
font-weight: 300;
}
/* Buttons */
.pp-btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--pp-emerald);
color: var(--pp-white);
font-family: var(--pp-font-body);
font-size: 15px;
font-weight: 700;
padding: 16px 28px;
border-radius: var(--pp-r);
text-decoration: none;
transition: all 0.25s ease;
box-shadow: var(--pp-shadow-em);
}
.pp-btn-primary:hover {
background: var(--pp-emerald-dark);
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(16,185,129,0.3);
}
.pp-btn-outline {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
color: rgba(255,255,255,0.8);
font-family: var(--pp-font-body);
font-size: 15px;
font-weight: 600;
padding: 16px 28px;
border: 1.5px solid rgba(255,255,255,0.2);
border-radius: var(--pp-r);
text-decoration: none;
transition: all 0.2s ease;
}
.pp-btn-outline:hover {
border-color: rgba(255,255,255,0.5);
color: var(--pp-white);
background: rgba(255,255,255,0.07);
}
/* =============================================
HERO
============================================= */
.pp-hero {
background: #28396af7;
position: relative;
overflow: hidden;
min-height: 680px;
}
.pp-hero-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.pp-hero-inner {
position: relative;
z-index: 1;
max-width: 1320px;
margin: 0 auto;
padding: 90px 56px 100px;
display: grid;
grid-template-columns: 1fr 500px;
gap: 64px;
align-items: center;
}
.pp-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(52,211,153,0.1);
border: 1px solid rgba(52,211,153,0.25);
color: var(--pp-emerald-light);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 100px;
margin-bottom: 28px;
animation: ppFadeUp 0.6s ease both;
}
.pp-hero-title {
font-family: var(--pp-font-display);
font-size: clamp(44px, 6vw, 82px);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.03em;
color: var(--pp-white);
margin: 0 0 24px;
animation: ppFadeUp 0.7s 0.08s ease both;
}
.pp-hero-title em {
font-style: normal;
color: var(--pp-emerald-light);
display: block;
}
.pp-hero-sub {
font-size: 17px;
line-height: 1.72;
color: rgba(255,255,255,0.62);
max-width: 560px;
margin: 0 0 36px;
font-weight: 300;
animation: ppFadeUp 0.7s 0.16s ease both;
}
.pp-hero-meta {
display: flex;
align-items: center;
gap: 28px;
margin-bottom: 40px;
animation: ppFadeUp 0.7s 0.22s ease both;
}
.pp-meta-item {
display: flex;
flex-direction: column;
gap: 3px;
}
.pp-meta-num {
font-family: var(--pp-font-display);
font-size: 26px;
font-weight: 800;
color: var(--pp-emerald-light);
line-height: 1;
letter-spacing: -0.02em;
}
.pp-meta-label {
font-size: 11.5px;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.pp-meta-div {
width: 1px;
height: 36px;
background: rgba(255,255,255,0.1);
}
.pp-hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
animation: ppFadeUp 0.7s 0.28s ease both;
}
/* Network visual */
.pp-hero-visual {
position: relative;
animation: ppFadeLeft 0.9s 0.2s ease both;
}
.pp-network {
position: relative;
width: 100%;
aspect-ratio: 1;
max-width: 420px;
margin: 0 auto;
}
.pp-network-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Centre node */
.pp-node {
position: absolute;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.pp-node-center {
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--pp-emerald);
box-shadow: 0 0 0 10px rgba(16,185,129,0.12), 0 0 0 20px rgba(16,185,129,0.06);
color: var(--pp-white);
animation: ppPulseRing 3s ease infinite;
}
.pp-node-center svg { color: var(--pp-white); }
.pp-node-center span {
font-family: var(--pp-font-display);
font-size: 11px;
font-weight: 800;
color: var(--pp-white);
letter-spacing: 0.1em;
}
@keyframes ppPulseRing {
0%, 100% { box-shadow: 0 0 0 10px rgba(16,185,129,0.12), 0 0 0 20px rgba(16,185,129,0.06); }
50% { box-shadow: 0 0 0 16px rgba(16,185,129,0.08), 0 0 0 30px rgba(16,185,129,0.03); }
}
.pp-node-sm {
width: 52px;
height: 52px;
background: #4caf50ab;
border: 1.5px solid var(--pp-charcoal-border);
color: rgba(255,255,255,0.6);
animation: ppNodeFloat 4s ease-in-out infinite;
animation-delay: var(--d, 0s);
}
.pp-node-sm:hover {
background: var(--pp-emerald-glow);
border-color: var(--pp-emerald);
color: var(--pp-emerald-light);
}
@keyframes ppNodeFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* Node positions (% of container) */
.pp-node-tl { top: 12%; left: 12%; }
.pp-node-tr { top: 12%; right: 12%; }
.pp-node-ml { top: 50%; left: 5%; transform: translateY(-50%); }
.pp-node-mr { top: 50%; right: 5%; transform: translateY(-50%); }
.pp-node-bl { bottom: 12%; left: 22%; }
.pp-node-br { bottom: 10%; right: 20%; }
.pp-node-label {
position: absolute;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
}
.pp-nl-tl { top: 6%; left: 5%; }
.pp-nl-tr { top: 6%; right: 5%; }
.pp-nl-ml { top: 44%; left: -2%; }
.pp-nl-mr { top: 44%; right: 0%; }
.pp-nl-bl { bottom: 5%; left: 10%; }
.pp-nl-br { bottom: 3%; right: 8%; }
/* Commission pill */
.pp-commission-pill {
position: absolute;
bottom: -80px;
left: 0;
right: 0;
margin: 0 auto;
width: fit-content;
background: #ceedab;
border-radius: 50px;
padding: 14px 22px 14px 16px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: var(--pp-shadow-dark);
animation: ppFloat 4s ease-in-out infinite;
}
.pp-comm-icon {
width: 42px;
height: 42px;
background: var(--pp-emerald-pale);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--pp-emerald-dark);
flex-shrink: 0;
}
.pp-commission-pill strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--pp-ink);
}
.pp-commission-pill span {
display: block;
font-size: 12px;
color: var(--pp-ink-soft);
}
@keyframes ppFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* =============================================
BENEFITS STRIP
============================================= */
.pp-benefits {
background: var(--pp-white);
border-bottom: 1px solid var(--pp-border);
padding: 0 56px;
}
.pp-benefits-inner {
max-width: 1320px;
margin: 0 auto;
display: flex;
align-items: stretch;
padding: 0;
}
.pp-benefit-item {
flex: 1;
display: flex;
align-items: flex-start;
gap: 16px;
padding: 36px 28px;
opacity: 0;
transform: translateY(16px);
transition: background 0.2s;
}
.pp-benefit-item.pp-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s;
}
.pp-benefit-item:hover {
background: var(--pp-offwhite);
}
.pp-benefit-sep {
width: 1px;
background: var(--pp-border);
align-self: stretch;
}
.pp-benefit-icon {
width: 44px;
height: 44px;
background: var(--pp-emerald-pale);
border: 1.5px solid rgba(16,185,129,0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--pp-emerald-dark);
flex-shrink: 0;
margin-top: 2px;
}
.pp-benefit-item strong {
display: block;
font-size: 14.5px;
font-weight: 700;
color: var(--pp-ink);
margin-bottom: 4px;
}
.pp-benefit-item p {
font-size: 13.5px;
color: var(--pp-ink-soft);
line-height: 1.6;
margin: 0;
}
/* =============================================
PARTNERSHIP MODELS
============================================= */
.pp-models {
padding: 100px 56px;
background: var(--pp-offwhite);
}
.pp-models-inner { max-width: 1320px; margin: 0 auto; }
.pp-models-header {
text-align: center;
max-width: 720px;
margin: 0 auto 52px;
}
/* Tab nav */
.pp-tab-nav {
display: flex;
gap: 8px;
margin-bottom: 40px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 4px;
border-bottom: 2px solid var(--pp-border);
}
.pp-tab-nav::-webkit-scrollbar { display: none; }
.pp-tab {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--pp-font-body);
font-size: 13.5px;
font-weight: 700;
color: var(--pp-ink-soft);
background: none;
border: none;
padding: 12px 20px;
border-radius: var(--pp-r) var(--pp-r) 0 0;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
.pp-tab:hover {
color: var(--pp-emerald-dark);
background: var(--pp-emerald-pale);
}
.pp-tab.active {
color: var(--pp-emerald-dark);
border-bottom-color: var(--pp-emerald);
background: var(--pp-emerald-pale);
}
.pp-tab svg { opacity: 0.7; }
.pp-tab.active svg { opacity: 1; color: var(--pp-emerald); }
/* Tab panels */
.pp-panel {
display: none;
}
.pp-panel.active {
display: block;
animation: ppFadeIn 0.3s ease;
}
@keyframes ppFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.pp-panel-layout {
display: grid;
grid-template-columns: 440px 1fr;
gap: 56px;
align-items: start;
background: var(--pp-white);
border-radius: var(--pp-r-lg);
border: 1.5px solid var(--pp-border);
overflow: hidden;
box-shadow: var(--pp-shadow);
}
.pp-panel-img {
position: relative;
height: 100%;
min-height: 480px;
overflow: hidden;
}
.pp-panel-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.pp-panel-img:hover img {
transform: scale(1.04);
}
.pp-panel-img-badge {
position: absolute;
top: 20px;
left: 20px;
background: rgba(15,17,23,0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.12);
color: var(--pp-white);
font-size: 12.5px;
font-weight: 700;
padding: 8px 16px;
border-radius: 100px;
display: flex;
align-items: center;
gap: 8px;
}
.pp-panel-img-badge svg { color: var(--pp-emerald-light); }
.pp-panel-content {
padding: 44px 44px 44px 0;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Model tags */
.pp-model-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 100px;
margin-bottom: 8px;
width: fit-content;
}
.pp-tag-emerald { background: var(--pp-emerald-pale); color: var(--pp-emerald-dark); border: 1px solid rgba(16,185,129,0.25); }
.pp-tag-blue { background: var(--pp-blue-pale); color: var(--pp-blue); border: 1px solid rgba(59,130,246,0.25); }
.pp-tag-amber { background: var(--pp-amber-pale); color: var(--pp-amber); border: 1px solid rgba(217,119,6,0.25); }
.pp-tag-purple { background: var(--pp-purple-pale); color: var(--pp-purple); border: 1px solid rgba(124,58,237,0.25); }
.pp-tag-slate { background: var(--pp-slate-pale); color: var(--pp-slate); border: 1px solid rgba(71,85,105,0.25); }
.pp-tag-rose { background: var(--pp-rose-pale); color: var(--pp-rose); border: 1px solid rgba(225,29,72,0.25); }
.pp-model-title {
font-family: var(--pp-font-display);
font-size: clamp(22px, 2.5vw, 30px);
font-weight: 800;
line-height: 1.2;
color: var(--pp-ink);
margin: 0 0 16px;
letter-spacing: -0.02em;
}
.pp-model-title em {
font-style: normal;
color: var(--pp-emerald-dark);
}
.pp-model-desc {
font-size: 15px;
line-height: 1.75;
color: var(--pp-ink-mid);
margin: 0 0 12px;
font-weight: 300;
}
/* Highlights row */
.pp-model-highlights {
margin: 12px 0 16px;
}
.pp-highlight-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.pp-hl-item {
background: var(--pp-offwhite);
border: 1px solid var(--pp-border);
border-radius: 10px;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 3px;
}
.pp-hl-label {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pp-ink-soft);
}
.pp-hl-val {
font-size: 13.5px;
font-weight: 700;
color: var(--pp-ink);
}
.pp-val-green { color: var(--pp-emerald-dark); }
/* Perks */
.pp-model-perks {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 8px;
}
.pp-perk {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--pp-ink-mid);
line-height: 1.5;
}
.pp-perk svg {
color: var(--pp-emerald);
flex-shrink: 0;
}
/* Commission tiers */
.pp-tiers {
display: flex;
align-items: center;
gap: 8px;
background: var(--pp-charcoal);
border-radius: 12px;
padding: 16px 20px;
margin: 8px 0;
}
.pp-tier {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.pp-tier-badge {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 12px;
border-radius: 100px;
}
.pp-tier-bronze { background: rgba(180,120,50,0.25); color: #D4915A; }
.pp-tier-silver { background: rgba(59,130,246,0.2); color: #60A5FA; }
.pp-tier-gold { background: rgba(52,211,153,0.2); color: var(--pp-emerald-light); }
.pp-tier-sales {
font-size: 11px;
color: rgba(255,255,255,0.45);
}
.pp-tier-rate {
font-family: var(--pp-font-display);
font-size: 22px;
font-weight: 800;
color: var(--pp-white);
}
.pp-tier-arrow { flex-shrink: 0; }
/* Model button */
.pp-btn-model {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--pp-charcoal);
color: var(--pp-white);
font-family: var(--pp-font-body);
font-size: 14px;
font-weight: 700;
padding: 14px 24px;
border-radius: var(--pp-r);
text-decoration: none;
transition: all 0.2s ease;
margin-top: 8px;
width: fit-content;
}
.pp-btn-model:hover {
background: var(--pp-emerald-dark);
transform: translateY(-1px);
box-shadow: var(--pp-shadow-em);
}
/* =============================================
HOW IT WORKS
============================================= */
.pp-how {
background: var(--pp-charcoal-mid);
padding: 100px 56px;
position: relative;
overflow: hidden;
}
/* Subtle radial glow */
.pp-how::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(16,185,129,0.06) 0%, transparent 70%);
pointer-events: none;
}
.pp-how-inner {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.pp-how-header {
text-align: center;
margin-bottom: 64px;
}
.pp-steps {
display: flex;
align-items: flex-start;
gap: 0;
}
.pp-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
opacity: 0;
transform: translateY(20px);
}
.pp-step.pp-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.pp-step-num {
font-family: var(--pp-font-display);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--pp-emerald);
text-transform: uppercase;
}
.pp-step-icon {
width: 80px;
height: 80px;
background: var(--pp-charcoal-soft);
border: 1.5px solid var(--pp-charcoal-border);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--pp-emerald-light);
transition: all 0.3s ease;
}
.pp-step:hover .pp-step-icon {
background: var(--pp-emerald-glow);
border-color: rgba(52,211,153,0.3);
}
.pp-step h3 {
font-family: var(--pp-font-display);
font-size: 20px;
font-weight: 700;
color: var(--pp-white);
margin: 0;
}
.pp-step p {
font-size: 14.5px;
line-height: 1.7;
color: rgba(255,255,255,0.5);
margin: 0;
max-width: 280px;
font-weight: 300;
}
.pp-step-connector {
display: none;
}
.pp-step-arrow {
display: flex;
align-items: center;
padding-top: 80px;
flex-shrink: 0;
}
/* =============================================
SOCIAL PROOF
============================================= */
.pp-social-proof {
padding: 100px 56px;
background: var(--pp-offwhite-deep);
}
.pp-sp-inner {
max-width: 1320px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 72px;
}
.pp-sp-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
background: var(--pp-border);
border-radius: var(--pp-r-lg);
overflow: hidden;
}
.pp-sp-stat {
background: var(--pp-white);
padding: 40px 32px;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
transform: translateY(16px);
}
.pp-sp-stat.pp-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.pp-sp-num {
font-family: var(--pp-font-display);
font-size: 46px;
font-weight: 800;
color: var(--pp-charcoal);
line-height: 1;
letter-spacing: -0.03em;
}
.pp-sp-plus {
font-size: 32px;
color: var(--pp-emerald);
}
.pp-sp-label {
font-size: 13.5px;
color: var(--pp-ink-soft);
line-height: 1.5;
max-width: 200px;
}
.pp-sp-testimonials > .pp-section-title {
margin-bottom: 36px;
}
.pp-sp-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.pp-sp-card {
background: var(--pp-white);
border-radius: var(--pp-r-lg);
padding: 32px;
border: 1.5px solid var(--pp-border);
box-shadow: var(--pp-shadow);
display: flex;
flex-direction: column;
gap: 20px;
transition: box-shadow 0.25s, transform 0.25s;
opacity: 0;
transform: translateY(16px);
}
.pp-sp-card.pp-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s;
}
.pp-sp-card:hover {
box-shadow: var(--pp-shadow-md);
transform: translateY(-4px) !important;
}
.pp-sp-card-top {
display: flex;
align-items: center;
gap: 14px;
}
.pp-sp-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--pp-border);
flex-shrink: 0;
}
.pp-sp-card-top strong {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--pp-ink);
}
.pp-sp-card-top > div > span {
display: block;
font-size: 12.5px;
color: var(--pp-ink-soft);
margin-bottom: 6px;
}
.pp-sp-type {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 100px;
display: inline-block;
}
.pp-type-referral { background: var(--pp-emerald-pale); color: var(--pp-emerald-dark); }
.pp-type-affiliate { background: var(--pp-blue-pale); color: var(--pp-blue); }
.pp-type-institutional { background: var(--pp-purple-pale); color: var(--pp-purple); }
.pp-sp-card blockquote {
font-size: 14.5px;
line-height: 1.72;
color: var(--pp-ink-mid);
margin: 0;
font-style: italic;
font-weight: 300;
flex: 1;
border-left: 3px solid var(--pp-emerald);
padding-left: 14px;
}
/* =============================================
COMPARISON TABLE
============================================= */
.pp-compare {
padding: 100px 56px;
background: var(--pp-white);
}
.pp-compare-inner { max-width: 1320px; margin: 0 auto; }
.pp-compare-inner > .pp-section-title { margin-bottom: 36px; }
.pp-table-wrap {
overflow-x: auto;
border-radius: var(--pp-r-lg);
border: 1.5px solid var(--pp-border);
box-shadow: var(--pp-shadow);
}
.pp-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
min-width: 800px;
}
.pp-table thead tr {
background: var(--pp-charcoal);
}
.pp-table th {
padding: 16px 20px;
text-align: left;
font-family: var(--pp-font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.pp-table tbody tr {
border-bottom: 1px solid var(--pp-border);
transition: background 0.15s;
}
.pp-table tbody tr:last-child { border-bottom: none; }
.pp-table tbody tr:nth-child(even) { background: var(--pp-offwhite); }
.pp-table tbody tr:hover { background: var(--pp-emerald-pale); }
.pp-table td {
padding: 16px 20px;
color: var(--pp-ink-mid);
vertical-align: middle;
}
.pp-tbl-badge {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 100px;
}
/* =============================================
CONTACT CTA
============================================= */
.pp-contact {
position: relative;
overflow: hidden;
min-height: 500px;
}
.pp-contact-bg {
position: absolute;
inset: 0;
}
.pp-contact-bgimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.7);
}
.pp-contact-overlay {
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(15,17,23,0.94) 0%, rgba(15,17,23,0.82) 50%, rgba(15,17,23,0.7) 100%);
}
.pp-contact-inner {
position: relative;
z-index: 1;
max-width: 1320px;
margin: 0 auto;
padding: 100px 56px;
display: grid;
grid-template-columns: 1fr auto;
gap: 80px;
align-items: center;
}
.pp-cta-title {
font-family: var(--pp-font-display);
font-size: clamp(32px, 4vw, 52px);
font-weight: 800;
line-height: 1.1;
color: var(--pp-white);
margin: 0 0 16px;
letter-spacing: -0.02em;
}
.pp-cta-sub {
font-size: 16px;
line-height: 1.75;
color: rgba(255,255,255,0.62);
margin: 0 0 36px;
font-weight: 300;
max-width: 560px;
}
.pp-contact-details {
display: flex;
flex-direction: column;
gap: 16px;
}
.pp-contact-item {
display: flex;
align-items: center;
gap: 14px;
}
.pp-ci-icon {
width: 40px;
height: 40px;
background: rgba(52,211,153,0.12);
border: 1px solid rgba(52,211,153,0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--pp-emerald-light);
flex-shrink: 0;
}
.pp-contact-item strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--pp-white);
}
.pp-contact-item span {
display: block;
font-size: 13px;
color: rgba(255,255,255,0.5);
}
.pp-contact-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
flex-shrink: 0;
min-width: 260px;
}
.pp-btn-cta-white {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--pp-emerald);
color: var(--pp-white);
font-family: var(--pp-font-body);
font-size: 15px;
font-weight: 700;
padding: 16px 28px;
border-radius: var(--pp-r);
text-decoration: none;
transition: all 0.25s ease;
width: 100%;
box-shadow: var(--pp-shadow-em);
}
.pp-btn-cta-white:hover {
background: var(--pp-emerald-dark);
transform: translateY(-2px);
}
.pp-btn-cta-outline {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(255,255,255,0.07);
color: var(--pp-white);
font-family: var(--pp-font-body);
font-size: 15px;
font-weight: 600;
padding: 16px 28px;
border: 1.5px solid rgba(255,255,255,0.2);
border-radius: var(--pp-r);
text-decoration: none;
transition: all 0.2s ease;
width: 100%;
}
.pp-btn-cta-outline:hover {
border-color: rgba(255,255,255,0.45);
background: rgba(255,255,255,0.12);
}
.pp-cta-note {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: rgba(255,255,255,0.4);
margin: 0;
}
.pp-cta-note svg { color: var(--pp-emerald); }
/* =============================================
ANIMATIONS
============================================= */
@keyframes ppFadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ppFadeLeft {
from { opacity: 0; transform: translateX(32px); }
to { opacity: 1; transform: translateX(0); }
}
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 1200px) {
.pp-hero-inner {
grid-template-columns: 1fr;
padding: 72px 40px 80px;
}
.pp-network {
max-width: 340px;
margin: 40px auto 0;
}
.pp-benefits-inner {
flex-wrap: wrap;
padding: 0;
}
.pp-benefit-item { flex: 1 1 calc(33% - 20px); }
.pp-benefit-sep { display: none; }
.pp-panel-layout { grid-template-columns: 1fr; }
.pp-panel-img { min-height: 280px; }
.pp-panel-content { padding: 32px 36px 36px; }
.pp-sp-stats { grid-template-columns: 1fr 1fr; }
.pp-sp-cards { grid-template-columns: 1fr; gap: 16px; }
.pp-contact-inner { grid-template-columns: 1fr; gap: 48px; }
.pp-contact-actions { width: 100%; }
.pp-contact-actions a { width: 100%; }
}
@media (max-width: 900px) {
.pp-models,
.pp-how,
.pp-social-proof,
.pp-compare,
.pp-contact-inner { padding: 64px 24px; }
.pp-benefits { padding: 0 24px; }
.pp-benefit-item { flex: 1 1 100%; padding: 24px 20px; }
.pp-steps { flex-direction: column; gap: 32px; }
.pp-step-arrow { display: none; }
.pp-sp-stats { grid-template-columns: 1fr 1fr; }
.pp-who-grid { grid-template-columns: 1fr 1fr; }
.pp-highlight-row { grid-template-columns: 1fr; }
.pp-hero-meta { flex-wrap: wrap; gap: 20px; }
.pp-meta-div { display: none; }
.pp-hero-inner { padding: 56px 24px 64px; }
.pp-tiers { flex-direction: column; gap: 4px; }
.pp-tier-arrow { display: none; }
}
@media (max-width: 640px) {
.pp-sp-stats { grid-template-columns: 1fr; }
.pp-sp-cards { grid-template-columns: 1fr; }
.pp-hero-title { font-size: 42px; }
.pp-hero-actions { flex-direction: column; }
.pp-btn-primary, .pp-btn-outline { justify-content: center; }
}
/* =============================================
TEFL Contact Us Page
CSS: cont-up1.css
Aesthetic: Warm Hospitality / Human-centred
Fonts: Cormorant Garamond (display) + Plus Jakarta Sans (body)
Palette: Warm White + Deep Burgundy + Soft Gold
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap');
/* =============================================
CSS VARIABLES
============================================= */
.cu-wrap {
--cu-bg: #FAF9F6;
--cu-bg-warm: #F5F2EC;
--cu-bg-deeper: #EDE9E0;
--cu-white: #FFFFFF;
--cu-border: #E5E0D8;
--cu-border-warm: #D9D2C7;
--cu-burgundy: #BE3144;
--cu-burgundy-dark: #9E2438;
--cu-burgundy-mid: #D44B5E;
--cu-burgundy-pale: #FDF2F4;
--cu-burgundy-border: rgba(190,49,68,0.2);
--cu-gold: #B8850A;
--cu-gold-light: #D4A017;
--cu-gold-pale: #FFFBEF;
--cu-ink: #1C1814;
--cu-ink-mid: #3D3530;
--cu-ink-soft: #7A7068;
--cu-ink-muted: #A09890;
--cu-green: #10B981;
--cu-amber: #F59E0B;
--cu-blue: #3B82F6;
--cu-font-display: 'Cormorant Garamond', Georgia, serif;
--cu-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
--cu-r: 12px;
--cu-r-lg: 20px;
--cu-shadow: 0 2px 16px rgba(28,24,20,0.07);
--cu-shadow-md: 0 6px 32px rgba(28,24,20,0.1);
--cu-shadow-lg: 0 12px 56px rgba(28,24,20,0.12);
--cu-shadow-burg: 0 8px 28px rgba(190,49,68,0.22);
font-family: var(--cu-font-body);
color: var(--cu-ink);
background: var(--cu-bg);
overflow-x: hidden;
}
/* =============================================
SHARED
============================================= */
.cu-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cu-burgundy);
background: var(--cu-burgundy-pale);
border: 1px solid var(--cu-burgundy-border);
padding: 6px 14px;
border-radius: 100px;
margin-bottom: 16px;
}
.cu-eyebrow-light {
color: rgba(255,255,255,0.8);
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.2);
}
/* =============================================
HERO
============================================= */
.cu-hero {
background: var(--cu-bg);
position: relative;
overflow: hidden;
padding: 80px 56px 72px;
border-bottom: 1px solid var(--cu-border);
}
.cu-hero-bg-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.cu-hero-inner {
position: relative;
z-index: 1;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 440px;
gap: 64px;
align-items: center;
}
.cu-hero-tag {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--cu-white);
border: 1.5px solid var(--cu-border);
color: var(--cu-ink-mid);
font-size: 12px;
font-weight: 600;
padding: 8px 16px;
border-radius: 100px;
margin-bottom: 28px;
box-shadow: var(--cu-shadow);
animation: cuFadeUp 0.6s ease both;
}
.cu-tag-pulse {
width: 8px;
height: 8px;
background: var(--cu-green);
border-radius: 50%;
animation: cuPulse 2s ease infinite;
flex-shrink: 0;
}
@keyframes cuPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
.cu-hero-title {
font-family: var(--cu-font-display);
font-size: clamp(48px, 6.5vw, 88px);
font-weight: 700;
line-height: 1.0;
letter-spacing: -0.01em;
color: var(--cu-ink);
margin: 0 0 24px;
animation: cuFadeUp 0.7s 0.08s ease both;
}
.cu-hero-title-em {
display: block;
color: var(--cu-burgundy);
font-style: italic;
position: relative;
width: fit-content;
}
.cu-underline-svg {
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 18px;
overflow: visible;
}
.cu-underline-path {
stroke-dasharray: 360;
stroke-dashoffset: 360;
animation: cuDraw 0.9s 0.6s ease forwards;
}
@keyframes cuDraw {
to { stroke-dashoffset: 0; }
}
.cu-hero-desc {
font-size: 17px;
line-height: 1.75;
color: var(--cu-ink-mid);
max-width: 540px;
margin: 0 0 36px;
font-weight: 300;
animation: cuFadeUp 0.7s 0.18s ease both;
}
.cu-response-pills {
display: flex;
flex-direction: column;
gap: 12px;
animation: cuFadeUp 0.7s 0.26s ease both;
}
.cu-resp-pill {
display: flex;
align-items: center;
gap: 14px;
background: var(--cu-white);
border: 1.5px solid var(--cu-border);
padding: 12px 18px;
border-radius: var(--cu-r);
box-shadow: var(--cu-shadow);
max-width: 380px;
transition: box-shadow 0.2s, transform 0.2s;
}
.cu-resp-pill:hover {
box-shadow: var(--cu-shadow-md);
transform: translateX(4px);
}
.cu-resp-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.cu-dot-green { background: var(--cu-green); box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.cu-dot-amber { background: var(--cu-amber); box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.cu-dot-blue { background: var(--cu-blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.cu-resp-pill strong {
display: block;
font-size: 13.5px;
font-weight: 700;
color: var(--cu-burgundy);
}
.cu-resp-pill span {
display: block;
font-size: 12px;
color: var(--cu-ink-soft);
}
/* Hero right - info stack */
.cu-hero-right {
animation: cuFadeLeft 0.8s 0.2s ease both;
}
.cu-info-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.cu-info-card {
background: var(--cu-white);
border: 1.5px solid var(--cu-border);
border-radius: var(--cu-r-lg);
padding: 20px 22px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: var(--cu-shadow);
transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
opacity: 0;
transform: translateX(20px);
}
.cu-info-card.cu-revealed {
opacity: 1;
transform: translateX(0);
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s, border-color 0.25s;
}
.cu-ic-1 { transition-delay: 0.1s; }
.cu-ic-2 { transition-delay: 0.2s; }
.cu-ic-3 { transition-delay: 0.3s; }
.cu-info-card:hover {
box-shadow: var(--cu-shadow-md);
transform: translateY(-2px) !important;
border-color: var(--cu-burgundy-border);
}
.cu-ic-icon {
width: 48px;
height: 48px;
background: var(--cu-burgundy-pale);
border: 1.5px solid var(--cu-burgundy-border);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--cu-burgundy);
flex-shrink: 0;
}
.cu-info-card strong {
display: block;
font-size: 14.5px;
font-weight: 700;
color: var(--cu-ink);
}
.cu-info-card span {
display: block;
font-size: 12.5px;
color: var(--cu-ink-soft);
margin-top: 2px;
}
/* =============================================
TOPIC SELECTOR
============================================= */
.cu-topics {
background: var(--cu-bg-warm);
border-bottom: 1px solid var(--cu-border);
padding: 40px 56px;
}
.cu-topics-inner { max-width: 1280px; margin: 0 auto; }
.cu-topics-label {
font-size: 14px;
font-weight: 600;
color: var(--cu-ink-mid);
margin: 0 0 20px;
}
.cu-topics-label span {
font-weight: 400;
color: var(--cu-ink-soft);
}
.cu-topic-cards {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.cu-topic {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
background: var(--cu-white);
border: 2px solid var(--cu-border);
border-radius: var(--cu-r-lg);
padding: 20px 18px;
cursor: pointer;
flex: 1;
min-width: 140px;
transition: all 0.22s ease;
position: relative;
text-align: left;
opacity: 0;
transform: translateY(12px);
}
.cu-topic.cu-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.22s, background 0.22s, box-shadow 0.22s;
}
.cu-topic:hover {
border-color: var(--cu-burgundy-border);
background: var(--cu-burgundy-pale);
transform: translateY(-2px) !important;
box-shadow: var(--cu-shadow);
}
.cu-topic.active {
border-color: var(--cu-burgundy);
background: var(--cu-burgundy-pale);
box-shadow: 0 4px 16px rgba(190,49,68,0.15);
}
.cu-topic-icon {
width: 44px;
height: 44px;
background: var(--cu-bg-warm);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--cu-ink-soft);
transition: background 0.2s, color 0.2s;
flex-shrink: 0;
}
.cu-topic.active .cu-topic-icon,
.cu-topic:hover .cu-topic-icon {
background: rgba(190,49,68,0.12);
color: var(--cu-burgundy);
}
.cu-topic strong {
font-size: 13.5px;
font-weight: 700;
color: var(--cu-burgundy);
line-height: 1.2;
}
.cu-topic span {
font-size: 12px;
color: var(--cu-ink-soft);
line-height: 1.4;
}
.cu-topic-check {
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
background: var(--cu-burgundy);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--cu-white);
opacity: 0;
transform: scale(0.5);
transition: all 0.2s ease;
}
.cu-topic.active .cu-topic-check {
opacity: 1;
transform: scale(1);
}
/* =============================================
MAIN AREA
============================================= */
.cu-main {
padding: 64px 56px 80px;
background: var(--cu-bg);
}
.cu-main-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 380px;
gap: 56px;
align-items: start;
}
/* ---- Routing notice ---- */
.cu-route-notice {
display: flex;
align-items: flex-start;
gap: 14px;
background: linear-gradient(135deg, var(--cu-burgundy-pale) 0%, rgba(253,242,244,0.5) 100%);
border: 1.5px solid var(--cu-burgundy-border);
border-radius: var(--cu-r);
padding: 16px 20px;
margin-bottom: 32px;
transition: all 0.3s ease;
}
.cu-route-icon {
width: 36px;
height: 36px;
background: var(--cu-burgundy);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--cu-white);
flex-shrink: 0;
}
.cu-route-notice strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--cu-burgundy-dark);
margin-bottom: 3px;
}
.cu-route-notice p {
font-size: 13px;
color: var(--cu-ink-mid);
margin: 0;
line-height: 1.5;
}
@keyframes cuRoutePulse {
0% { transform: scale(1); }
50% { transform: scale(1.01); }
100% { transform: scale(1); }
}
.cu-form-pulse .cu-route-notice {
animation: cuRoutePulse 0.4s ease;
border-color: var(--cu-burgundy);
}
/* ---- Form ---- */
.cu-form {
display: flex;
flex-direction: column;
gap: 22px;
}
.cu-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.cu-field-grow { grid-column: 1 / 2; }
.cu-field-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.cu-label {
font-size: 13px;
font-weight: 700;
color: var(--cu-ink-mid);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.cu-req { color: var(--cu-burgundy); }
.cu-optional {
font-weight: 400;
color: var(--cu-ink-muted);
font-size: 11.5px;
}
.cu-char-count {
font-weight: 400;
color: var(--cu-ink-muted);
font-size: 11.5px;
}
.cu-input-wrap {
position: relative;
}
.cu-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--cu-ink-muted);
pointer-events: none;
transition: color 0.2s;
z-index: 1;
}
.cu-input {
width: 100%;
background: var(--cu-white);
border: 1.5px solid var(--cu-border);
border-radius: var(--cu-r);
padding: 13px 14px 13px 42px;
font-family: var(--cu-font-body);
font-size: 14.5px;
color: var(--cu-ink);
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
outline: none;
}
.cu-input::placeholder { color: var(--cu-ink-muted); }
.cu-input:focus {
border-color: var(--cu-burgundy);
box-shadow: 0 0 0 3px rgba(190,49,68,0.1);
}
.cu-input:focus ~ .cu-input-icon,
.cu-input-wrap:focus-within .cu-input-icon {
color: var(--cu-burgundy);
}
.cu-input-valid {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: var(--cu-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
opacity: 0;
transition: opacity 0.2s;
}
.cu-input-wrap.cu-valid .cu-input-valid { opacity: 1; }
.cu-input-wrap.cu-valid .cu-input { border-color: var(--cu-green); padding-right: 42px; }
/* Select */
.cu-select-wrap { position: relative; }
.cu-select {
width: 100%;
background: var(--cu-white);
border: 1.5px solid var(--cu-border);
border-radius: var(--cu-r);
padding: 13px 40px 13px 42px;
font-family: var(--cu-font-body);
font-size: 14.5px;
color: var(--cu-ink);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
box-sizing: border-box;
}
.cu-select:focus {
border-color: var(--cu-burgundy);
box-shadow: 0 0 0 3px rgba(190,49,68,0.1);
}
.cu-select-chevron {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--cu-ink-soft);
pointer-events: none;
}
/* Textarea */
.cu-textarea-wrap { position: relative; }
.cu-textarea {
width: 100%;
background: var(--cu-white);
border: 1.5px solid var(--cu-border);
border-radius: var(--cu-r);
padding: 16px 18px;
font-family: var(--cu-font-body);
font-size: 14.5px;
color: var(--cu-ink);
resize: vertical;
min-height: 160px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
line-height: 1.65;
}
.cu-textarea::placeholder { color: var(--cu-ink-muted); }
.cu-textarea:focus {
border-color: var(--cu-burgundy);
box-shadow: 0 0 0 3px rgba(190,49,68,0.1);
}
/* Error state */
.cu-field-group.cu-error .cu-input,
.cu-field-group.cu-error .cu-select,
.cu-field-group.cu-error .cu-textarea {
border-color: var(--cu-burgundy);
box-shadow: 0 0 0 3px rgba(190,49,68,0.08);
}
/* Consent */
.cu-consent { margin-top: 4px; }
.cu-checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-size: 13.5px;
color: var(--cu-ink-mid);
line-height: 1.55;
user-select: none;
}
.cu-checkbox { display: none; }
.cu-checkbox-custom {
width: 20px;
height: 20px;
border: 2px solid var(--cu-border-warm);
border-radius: 5px;
background: var(--cu-white);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
transition: all 0.2s ease;
color: transparent;
}
.cu-checkbox:checked + .cu-checkbox-custom {
background: var(--cu-burgundy);
border-color: var(--cu-burgundy);
color: var(--cu-white);
}
.cu-consent.cu-error .cu-checkbox-custom { border-color: var(--cu-burgundy); }
.cu-link { color: var(--cu-burgundy); text-decoration: underline; }
/* Submit area */
.cu-form-footer {
display: flex;
align-items: center;
gap: 20px;
margin-top: 8px;
flex-wrap: wrap;
}
.cu-btn-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--cu-burgundy);
color: var(--cu-white);
font-family: var(--cu-font-body);
font-size: 15px;
font-weight: 700;
padding: 16px 32px;
border-radius: var(--cu-r);
border: none;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: var(--cu-shadow-burg);
min-width: 200px;
}
.cu-btn-submit:hover:not(:disabled) {
background: var(--cu-burgundy-dark);
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(190,49,68,0.3);
}
.cu-btn-submit:disabled {
opacity: 0.75;
cursor: not-allowed;
}
.cu-btn-text,
.cu-btn-loading {
display: inline-flex;
align-items: center;
gap: 8px;
}
@keyframes cuSpin { to { transform: rotate(360deg); } }
.cu-spinner { animation: cuSpin 0.8s linear infinite; }
.cu-submit-note {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--cu-ink-muted);
margin: 0;
}
.cu-submit-note svg { color: var(--cu-green); }
/* Success state */
.cu-success {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 60px 40px;
gap: 16px;
animation: cuFadeUp 0.5s ease both;
}
.cu-success-icon {
width: 80px;
height: 80px;
background: rgba(16,185,129,0.1);
border: 2px solid rgba(16,185,129,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--cu-green);
}
.cu-success h3 {
font-family: var(--cu-font-display);
font-size: 36px;
font-weight: 700;
color: var(--cu-ink);
margin: 0;
}
.cu-success p {
font-size: 16px;
color: var(--cu-ink-mid);
line-height: 1.7;
max-width: 440px;
margin: 0;
}
.cu-success-ref {
background: var(--cu-bg-warm);
border: 1px solid var(--cu-border);
border-radius: 8px;
padding: 10px 20px;
font-size: 13.5px;
color: var(--cu-ink-soft);
}
/* =============================================
SIDEBAR
============================================= */
.cu-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 24px;
}
.cu-sidebar-card {
background: var(--cu-white);
border: 1.5px solid var(--cu-border);
border-radius: var(--cu-r-lg);
padding: 28px;
box-shadow: var(--cu-shadow);
}
.cu-sb-title {
font-family: var(--cu-font-display);
font-size: 22px;
font-weight: 700;
color: var(--cu-ink);
margin: 0 0 20px;
display: flex;
align-items: center;
gap: 8px;
}
.cu-sb-title svg { color: var(--cu-burgundy); }
/* Contact methods */
.cu-contact-method {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--cu-border);
text-decoration: none;
transition: all 0.2s;
}
.cu-contact-method:last-of-type { border-bottom: none; }
.cu-contact-method:hover { transform: translateX(4px); }
.cu-cm-icon {
width: 42px;
height: 42px;
background: var(--cu-burgundy-pale);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--cu-burgundy);
flex-shrink: 0;
transition: background 0.2s;
}
.cu-contact-method:hover .cu-cm-icon { background: var(--cu-burgundy); color: var(--cu-white); }
.cu-cm-text strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--cu-ink);
}
.cu-cm-text span {
display: block;
font-size: 12px;
color: var(--cu-ink-soft);
}
.cu-cm-arrow { margin-left: auto; color: var(--cu-ink-muted); transition: transform 0.2s; }
.cu-contact-method:hover .cu-cm-arrow { transform: translateX(3px); color: var(--cu-burgundy); }
.cu-cm-divider { height: 1px; background: var(--cu-border); margin: 8px 0 16px; }
.cu-sb-sublabel {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--cu-ink-muted);
margin: 0 0 12px;
}
.cu-spec-list { display: flex; flex-direction: column; gap: 12px; }
.cu-spec-item {
display: flex;
align-items: flex-start;
gap: 10px;
opacity: 0;
transform: translateX(10px);
}
.cu-spec-item.cu-revealed {
opacity: 1;
transform: translateX(0);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.cu-spec-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 4px;
}
.cu-spec-item strong {
display: block;
font-size: 12.5px;
font-weight: 700;
color: var(--cu-ink);
}
.cu-spec-item a {
display: block;
font-size: 12px;
color: var(--cu-burgundy);
text-decoration: none;
transition: opacity 0.2s;
}
.cu-spec-item a:hover { opacity: 0.75; }
/* Hours card */
.cu-hours-card { background: var(--cu-bg-warm); }
.cu-hours-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.cu-hour-row {
display: flex;
justify-content: space-between;
font-size: 13.5px;
color: var(--cu-ink-mid);
padding-bottom: 10px;
border-bottom: 1px dashed var(--cu-border);
}
.cu-hour-row:last-child { border-bottom: none; padding-bottom: 0; }
.cu-hour-time {
font-weight: 700;
color: var(--cu-ink);
}
.cu-hour-closed {
font-weight: 600;
color: var(--cu-ink-muted);
}
.cu-current-status {
display: flex;
align-items: center;
gap: 8px;
background: var(--cu-white);
border: 1px solid var(--cu-border);
border-radius: 8px;
padding: 10px 14px;
font-size: 13px;
color: var(--cu-ink-mid);
font-weight: 500;
}
.cu-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cu-ink-muted);
flex-shrink: 0;
}
/* Social card */
.cu-social-desc {
font-size: 13.5px;
color: var(--cu-ink-soft);
margin: -8px 0 16px;
line-height: 1.6;
}
.cu-social-links { display: flex; flex-direction: column; gap: 4px; }
.cu-social-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
text-decoration: none;
color: var(--cu-ink-mid);
font-size: 13.5px;
font-weight: 600;
transition: all 0.18s ease;
}
.cu-social-link:hover {
background: var(--cu-burgundy-pale);
color: var(--cu-burgundy);
}
.cu-social-link svg:first-child { color: var(--cu-ink-soft); transition: color 0.18s; }
.cu-social-link:hover svg:first-child { color: var(--cu-burgundy); }
.cu-social-arrow { margin-left: auto; color: var(--cu-ink-muted); opacity: 0; transition: opacity 0.18s, transform 0.18s; }
.cu-social-link:hover .cu-social-arrow { opacity: 1; transform: translate(2px, -2px); }
/* =============================================
TEAM SECTION
============================================= */
.cu-team {
padding: 100px 56px;
background: var(--cu-white);
border-top: 1px solid var(--cu-border);
}
.cu-team-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 400px 1fr;
gap: 72px;
align-items: center;
}
.cu-team-title {
font-family: var(--cu-font-display);
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 700;
line-height: 1.2;
color: var(--cu-ink);
margin: 0 0 16px;
}
.cu-team-title em {
font-style: italic;
color: var(--cu-burgundy);
}
.cu-team-text p {
font-size: 15.5px;
line-height: 1.75;
color: var(--cu-ink-mid);
margin: 0 0 32px;
font-weight: 300;
}
.cu-team-stats {
display: flex;
gap: 32px;
flex-wrap: wrap;
}
.cu-tstat strong {
display: block;
font-family: var(--cu-font-display);
font-size: 36px;
font-weight: 700;
color: var(--cu-burgundy);
line-height: 1;
}
.cu-tstat span {
display: block;
font-size: 12.5px;
color: var(--cu-ink-soft);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
/* Photo grid */
.cu-photo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 12px;
}
.cu-photo-item {
border-radius: var(--cu-r-lg);
overflow: hidden;
position: relative;
opacity: 0;
transform: scale(0.96);
}
.cu-photo-item.cu-revealed {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.cu-photo-item:nth-child(1) { transition-delay: 0s; }
.cu-photo-item:nth-child(2) { transition-delay: 0.1s; }
.cu-photo-item:nth-child(3) { transition-delay: 0.2s; }
.cu-photo-item:nth-child(4) { transition-delay: 0.3s; }
.cu-photo-main {
grid-column: 1 / 3;
height: 260px;
}
.cu-photo-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.cu-photo-item:hover img { transform: scale(1.04); }
.cu-photo-item:not(.cu-photo-main):not(.cu-photo-tall) { height: 180px; }
.cu-photo-tall { height: 180px; }
.cu-photo-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(28,24,20,0.8) 0%, transparent 100%);
padding: 28px 16px 14px;
}
.cu-photo-label strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--cu-white);
}
.cu-photo-label span {
display: block;
font-size: 11.5px;
color: rgba(255,255,255,0.72);
}
/* =============================================
LIVE CHAT BAND
============================================= */
.cu-chat-band {
background: var(--cu-bg-warm);
border-top: 1px solid var(--cu-border);
border-bottom: 1px solid var(--cu-border);
padding: 40px 56px;
position: relative;
overflow: hidden;
}
.cu-chat-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
pointer-events: none;
}
.cu-chat-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
position: relative;
z-index: 1;
}
.cu-chat-left {
display: flex;
align-items: center;
gap: 24px;
}
.cu-chat-avatar-group {
display: flex;
align-items: center;
position: relative;
}
.cu-chat-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--cu-white);
margin-left: -10px;
display: block;
}
.cu-chat-avatar:first-child { margin-left: 0; }
.cu-chat-online-badge {
display: flex;
align-items: center;
gap: 5px;
background: var(--cu-white);
border: 1.5px solid var(--cu-border);
border-radius: 100px;
padding: 4px 10px 4px 8px;
font-size: 11.5px;
font-weight: 700;
color: var(--cu-ink-mid);
margin-left: 8px;
white-space: nowrap;
box-shadow: var(--cu-shadow);
}
.cu-online-dot {
width: 7px;
height: 7px;
background: var(--cu-green);
border-radius: 50%;
animation: cuPulse 2s ease infinite;
}
.cu-chat-text strong {
display: block;
font-size: 18px;
font-weight: 700;
color: var(--cu-burgundy);
margin-bottom: 4px;
font-family: var(--cu-font-display);
}
.cu-chat-text p {
font-size: 14px;
color: var(--cu-ink-soft);
margin: 0;
line-height: 1.5;
}
.cu-chat-right {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.cu-btn-chat {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--cu-burgundy);
color: var(--cu-white);
font-family: var(--cu-font-body);
font-size: 15px;
font-weight: 700;
padding: 15px 28px;
border-radius: var(--cu-r);
text-decoration: none;
transition: all 0.25s ease;
box-shadow: var(--cu-shadow-burg);
white-space: nowrap;
}
.cu-btn-chat:hover {
background: var(--cu-burgundy-dark);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(190,49,68,0.3);
}
.cu-chat-time {
font-size: 12px;
color: var(--cu-ink-soft);
font-weight: 500;
}
/* =============================================
FAQ QUICK LINKS
============================================= */
.cu-faq-quick {
padding: 100px 56px;
background: var(--cu-bg);
}
.cu-faq-inner { max-width: 1280px; margin: 0 auto; }
.cu-faq-header {
text-align: center;
max-width: 600px;
margin: 0 auto 48px;
}
.cu-faq-title {
font-family: var(--cu-font-display);
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 700;
line-height: 1.2;
color: var(--cu-ink);
margin: 0 0 12px;
}
.cu-faq-title em { font-style: italic; color: var(--cu-burgundy); }
.cu-faq-header p {
font-size: 15px;
color: var(--cu-ink-soft);
margin: 0;
line-height: 1.65;
}
.cu-faq-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.cu-faq-link {
display: flex;
align-items: center;
gap: 16px;
background: var(--cu-white);
border: 1.5px solid var(--cu-border);
border-radius: var(--cu-r-lg);
padding: 20px 22px;
text-decoration: none;
transition: all 0.22s ease;
opacity: 0;
transform: translateY(12px);
}
.cu-faq-link.cu-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.22s, border-color 0.22s, transform 0.22s;
}
.cu-faq-link:hover {
border-color: var(--cu-burgundy-border);
box-shadow: var(--cu-shadow-md);
transform: translateY(-3px) !important;
}
.cu-faq-link-icon {
width: 42px;
height: 42px;
background: var(--cu-bg-warm);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--cu-burgundy);
flex-shrink: 0;
transition: background 0.2s;
}
.cu-faq-link:hover .cu-faq-link-icon { background: var(--cu-burgundy-pale); }
.cu-faq-link-text { flex: 1; min-width: 0; }
.cu-faq-link-text strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--cu-ink);
margin-bottom: 3px;
line-height: 1.3;
}
.cu-faq-link-text span {
display: block;
font-size: 12.5px;
color: var(--cu-ink-soft);
}
.cu-faq-arr {
flex-shrink: 0;
color: var(--cu-ink-muted);
transition: transform 0.2s, color 0.2s;
}
.cu-faq-link:hover .cu-faq-arr {
transform: translateX(3px);
color: var(--cu-burgundy);
}
.cu-faq-footer {
text-align: center;
margin-top: 36px;
}
.cu-btn-faq {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--cu-burgundy);
border: 2px solid var(--cu-burgundy);
font-family: var(--cu-font-body);
font-size: 14.5px;
font-weight: 700;
padding: 14px 28px;
border-radius: var(--cu-r);
text-decoration: none;
transition: all 0.22s ease;
}
.cu-btn-faq:hover {
background: var(--cu-burgundy);
color: var(--cu-white);
box-shadow: var(--cu-shadow-burg);
transform: translateY(-1px);
}
/* =============================================
GLOBAL PRESENCE
============================================= */
.cu-global {
background: var(--cu-ink);
padding: 100px 56px;
position: relative;
overflow: hidden;
}
/* Fine repeating diagonal texture */
.cu-global::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 24px,
rgba(255,255,255,0.015) 24px,
rgba(255,255,255,0.015) 25px
);
pointer-events: none;
}
.cu-global-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 420px 1fr;
gap: 72px;
align-items: center;
position: relative;
z-index: 1;
}
.cu-global-title {
font-family: var(--cu-font-display);
font-size: clamp(28px, 3.5vw, 48px);
font-weight: 700;
line-height: 1.15;
color: var(--cu-white);
margin: 0 0 16px;
}
.cu-global-title em {
font-style: italic;
color: var(--cu-burgundy-mid);
}
.cu-global-text p {
font-size: 15.5px;
line-height: 1.75;
color: rgba(255,255,255,0.58);
margin: 0;
font-weight: 300;
}
.cu-map-svg {
width: 100%;
border-radius: var(--cu-r-lg);
overflow: hidden;
}
/* Map dot animations */
.cu-map-dot {
animation: cuMapPulse 3s ease-in-out infinite;
}
.cu-map-ring {
animation: cuMapRingExpand 3s ease-in-out infinite;
}
@keyframes cuMapPulse {
0%, 100% { opacity: 0.9; r: 5; }
50% { opacity: 0.6; r: 4; }
}
@keyframes cuMapRingExpand {
0% { r: 8; opacity: 0.4; }
100% { r: 20; opacity: 0; }
}
/* Stagger animations per dot */
.cu-map-dot:nth-child(odd) { animation-delay: 0.5s; }
.cu-map-ring:nth-child(even) { animation-delay: 1s; }
.cu-map-legend {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: rgba(255,255,255,0.35);
margin-top: 12px;
font-weight: 600;
letter-spacing: 0.04em;
}
.cu-map-dot-sm {
width: 8px;
height: 8px;
background: var(--cu-burgundy);
border-radius: 50%;
flex-shrink: 0;
}
/* =============================================
ANIMATIONS
============================================= */
@keyframes cuFadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes cuFadeLeft {
from { opacity: 0; transform: translateX(28px); }
to { opacity: 1; transform: translateX(0); }
}
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 1200px) {
.cu-hero-inner,
.cu-main-inner,
.cu-team-inner,
.cu-global-inner { grid-template-columns: 1fr; gap: 40px; }
.cu-hero { padding: 60px 40px 56px; }
.cu-sidebar { position: static; }
.cu-hero-right { display: none; }
.cu-photo-grid { grid-template-columns: 1fr 1fr; }
.cu-photo-main { height: 220px; }
.cu-faq-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.cu-hero,
.cu-topics,
.cu-main,
.cu-team,
.cu-chat-band,
.cu-faq-quick,
.cu-global { padding-left: 28px; padding-right: 28px; }
.cu-topic-cards { gap: 8px; }
.cu-topic { min-width: 120px; }
.cu-field-row { grid-template-columns: 1fr; }
.cu-chat-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
.cu-chat-right { flex-direction: row; align-items: center; }
.cu-sp-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.cu-hero { padding: 48px 20px 44px; }
.cu-hero-title { font-size: 48px; }
.cu-topics,
.cu-main,
.cu-team,
.cu-chat-band,
.cu-faq-quick,
.cu-global { padding-left: 20px; padding-right: 20px; }
.cu-faq-grid { grid-template-columns: 1fr; }
.cu-team-stats { gap: 20px; }
.cu-photo-main { height: 180px; }
.cu-response-pills { gap: 8px; }
.cu-topic-cards { gap: 6px; }
.cu-form-footer { flex-direction: column; align-items: flex-start; }
.cu-btn-submit { width: 100%; }
}
/* =============================================
CAPTCHA FIELD (injected by contact-form.js)
============================================= */
.cu-captcha-group {
margin-top: 0;
}
.cu-captcha-wrap {
display: flex;
flex-direction: column;
gap: 10px;
}
.cu-captcha-question-row {
display: flex;
align-items: center;
gap: 10px;
}
.cu-captcha-box {
display: flex;
align-items: center;
gap: 10px;
background: var(--cu-bg-warm);
border: 1.5px solid var(--cu-border);
border-radius: var(--cu-r);
padding: 12px 18px;
flex: 1;
font-family: var(--cu-font-display);
font-size: 18px;
font-weight: 700;
color: var(--cu-ink);
letter-spacing: 0.04em;
}
.cu-captcha-box svg {
color: var(--cu-burgundy);
flex-shrink: 0;
}
.cu-captcha-q {
font-family: var(--cu-font-display);
font-size: 20px;
font-weight: 700;
color: var(--cu-ink);
letter-spacing: 0.02em;
}
.cu-captcha-refresh {
width: 44px;
height: 44px;
background: var(--cu-white);
border: 1.5px solid var(--cu-border);
border-radius: var(--cu-r);
display: flex;
align-items: center;
justify-content: center;
color: var(--cu-ink-soft);
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s ease;
}
.cu-captcha-refresh:hover {
border-color: var(--cu-burgundy);
color: var(--cu-burgundy);
background: var(--cu-burgundy-pale);
transform: rotate(45deg);
}
.cu-captcha-refresh:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
.cu-captcha-input {
/* Remove number input spinners */
-moz-appearance: textfield;
}
.cu-captcha-input::-webkit-inner-spin-button,
.cu-captcha-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cu-captcha-status {
display: block;
font-size: 12.5px;
min-height: 18px;
}
.cu-captcha-error {
color: var(--cu-burgundy);
font-weight: 600;
}
.cu-captcha-ok {
color: var(--cu-green);
font-weight: 600;
}
/* Form-level error banner */
.cu-form-error-banner {
display: flex;
align-items: flex-start;
gap: 12px;
background: #FDF2F4;
border: 1.5px solid rgba(190,49,68,0.35);
border-radius: var(--cu-r);
padding: 14px 16px;
margin-bottom: 20px;
animation: cuFadeUp 0.3s ease both;
}
.cu-form-error-banner svg:first-child {
color: var(--cu-burgundy);
flex-shrink: 0;
margin-top: 1px;
}
.cu-form-error-banner span {
flex: 1;
font-size: 14px;
color: var(--cu-burgundy-dark);
line-height: 1.5;
font-weight: 500;
}
.cu-error-close {
background: none;
border: none;
color: var(--cu-burgundy);
cursor: pointer;
padding: 2px;
flex-shrink: 0;
opacity: 0.6;
transition: opacity 0.2s;
}
.cu-error-close:hover { opacity: 1; }
/* ============================================================
abt-up1.css — About Us | Online TEFL Courses Page Styles
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');
/* ---------- CSS Variables ---------- */
:root {
--abt-gold: #C9963A;
--abt-gold-light: #E8B860;
--abt-gold-pale: #F5E6C8;
--abt-navy: #1B2A41;
--abt-navy-mid: #243447;
--abt-navy-light: #2E4060;
--abt-cream: #FAF6F0;
--abt-cream-2: #F2EBE0;
--abt-cream-3: #EDE3D5;
--abt-dark: #111720;
--abt-text: #2C2C2C;
--abt-text-muted: #6B7280;
--abt-white: #FFFFFF;
--abt-accent: #E05C2A;
--abt-green: #2D7A5F;
--ff-display: 'Cormorant Garamond', Georgia, serif;
--ff-body: 'DM Sans', sans-serif;
--shadow-sm: 0 2px 12px rgba(27,42,65,0.08);
--shadow-md: 0 8px 32px rgba(27,42,65,0.12);
--shadow-lg: 0 20px 60px rgba(27,42,65,0.18);
--shadow-xl: 0 32px 80px rgba(27,42,65,0.22);
--radius: 16px;
--radius-sm: 8px;
--radius-lg: 24px;
--trans: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ---------- Base Reset for Section ---------- */
.abt-wrapper {
font-family: var(--ff-body);
color: var(--abt-text);
overflow-x: hidden;
background: var(--abt-cream);
}
.abt-wrapper *,
.abt-wrapper *::before,
.abt-wrapper *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.abt-wrapper a { text-decoration: none; color: inherit; }
.abt-wrapper img { display: block; max-width: 100%; }
/* ---------- Shared Utilities ---------- */
.abt-label {
display: inline-block;
font-family: var(--ff-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--abt-gold);
padding: 0.35em 1em;
border: 1px solid var(--abt-gold);
border-radius: 999px;
margin-bottom: 1.25rem;
}
.abt-label--light {
color: var(--abt-gold-light);
border-color: rgba(232,184,96,0.45);
}
/* Buttons */
.abt-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--ff-body);
font-size: 0.9rem;
font-weight: 500;
padding: 0.9rem 2rem;
border-radius: 999px;
transition: var(--trans);
cursor: pointer;
border: none;
}
.abt-btn svg {
width: 18px;
height: 18px;
transition: transform var(--trans);
flex-shrink: 0;
}
.abt-btn:hover svg { transform: translateX(4px); }
.abt-btn--primary {
background: var(--abt-gold);
color: var(--abt-white);
box-shadow: 0 4px 20px rgba(201,150,58,0.35);
}
.abt-btn--primary:hover {
background: var(--abt-gold-light);
box-shadow: 0 8px 32px rgba(201,150,58,0.5);
transform: translateY(-2px);
}
.abt-btn--outline {
background: transparent;
color: var(--abt-navy);
border: 1.5px solid var(--abt-navy);
}
.abt-btn--outline:hover {
background: var(--abt-navy);
color: var(--abt-white);
transform: translateY(-2px);
}
.abt-btn--ghost {
background: rgba(255,255,255,0.12);
color: var(--abt-white);
border: 1.5px solid rgba(255,255,255,0.3);
backdrop-filter: blur(8px);
}
.abt-btn--ghost:hover {
background: rgba(255,255,255,0.22);
transform: translateY(-2px);
}
/* ============================================================
HERO SECTION
============================================================ */
.abt-hero {
position: relative;
min-height: 100vh;
background: linear-gradient(85deg, #009688d6, #88690c);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
overflow: hidden;
padding: 0;
}
/* Geometric background pattern */
.abt-hero__bg-pattern {
position: absolute;
inset: 0;
opacity: 0.07;
background-image:
repeating-linear-gradient(
45deg,
transparent,
transparent 40px,
rgba(201,150,58,0.6) 40px,
rgba(201,150,58,0.6) 41px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 40px,
rgba(201,150,58,0.6) 40px,
rgba(201,150,58,0.6) 41px
);
pointer-events: none;
}
.abt-hero__overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 30% 50%, rgba(201,150,58,0.08) 0%, transparent 70%),
radial-gradient(ellipse 50% 60% at 80% 20%, rgba(46,64,96,0.5) 0%, transparent 60%);
pointer-events: none;
}
.abt-hero__content {
position: relative;
z-index: 2;
padding: 4rem 4rem 8rem 6rem;
animation: abtFadeUp 0.9s ease both;
}
.abt-hero__eyebrow {
display: inline-block;
font-family: var(--ff-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #edb756;
padding: 0.4em 1.2em;
border: 1px solid rgb(245 200 120 / 84%);
border-radius: 999px;
margin-bottom: 1.75rem;
}
.abt-hero__title {
font-family: var(--ff-display);
font-size: clamp(3rem, 5vw, 5rem);
font-weight: 300;
line-height: 1.1;
color: var(--abt-white);
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.abt-hero__title em {
font-style: italic;
color: var(--abt-gold-light);
}
.abt-hero__subtitle {
font-size: 1.05rem;
line-height: 1.75;
color: rgba(255,255,255,0.65);
max-width: 480px;
margin-bottom: 3rem;
font-weight: 300;
}
.abt-hero__stats {
display: flex;
align-items: center;
gap: 2.5rem;
}
.abt-hero__stat {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.abt-hero__stat-num {
font-family: var(--ff-display);
font-size: 2.4rem;
font-weight: 600;
color: var(--abt-gold-light);
line-height: 1;
}
.abt-hero__stat-label {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
font-weight: 500;
}
.abt-hero__stat-divider {
width: 1px;
height: 40px;
background: rgba(201,150,58,0.3);
}
/* Hero Image Side */
.abt-hero__image-side {
position: relative;
z-index: 2;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
animation: abtFadeUp 1.1s 0.2s ease both;
padding: 4rem 5rem 4rem 2rem;
}
.abt-hero__img-frame {
position: relative;
width: 100%;
max-width: 480px;
border-radius: var(--radius-lg);
overflow: visible;
}
.abt-hero__img {
width: 100%;
height: 520px;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
display: block;
}
/* Gold border decoration */
.abt-hero__img-frame::before {
content: '';
position: absolute;
inset: -12px;
border: 1.5px solid rgba(201,150,58,0.3);
border-radius: calc(var(--radius-lg) + 12px);
pointer-events: none;
}
/* Bottom-right decorative square */
.abt-hero__img-frame::after {
content: '';
position: absolute;
bottom: -20px;
right: -20px;
width: 80px;
height: 80px;
background: var(--abt-gold);
border-radius: var(--radius-sm);
z-index: -1;
opacity: 0.6;
}
.abt-hero__img-badge {
position: absolute;
bottom: 24px;
left: -24px;
background: var(--abt-white);
border-radius: var(--radius);
padding: 1rem 1.4rem;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: var(--shadow-lg);
animation: abtFloat 4s ease-in-out infinite;
}
.abt-hero__img-badge svg {
width: 24px;
height: 24px;
color: var(--abt-gold);
flex-shrink: 0;
}
.abt-hero__img-badge span {
font-size: 0.8rem;
font-weight: 600;
color: var(--abt-navy);
white-space: nowrap;
}
/* Floating cards */
.abt-hero__floating-card {
position: absolute;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius);
padding: 0.9rem 1.25rem;
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--abt-white);
}
.abt-hero__floating-card svg {
width: 22px;
height: 22px;
color: var(--abt-gold-light);
flex-shrink: 0;
}
.abt-hero__floating-card strong {
display: block;
font-size: 0.85rem;
font-weight: 600;
}
.abt-hero__floating-card span {
font-size: 0.72rem;
opacity: 0.65;
}
.abt-hero__floating-card--1 {
top: 12%;
right: 4%;
animation: abtFloat 5s 0.5s ease-in-out infinite;
}
.abt-hero__floating-card--2 {
bottom: 18%;
right: 2%;
animation: abtFloat 4.5s 1s ease-in-out infinite;
}
/* Scroll hint */
.abt-hero__scroll-hint {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: rgba(255,255,255,0.35);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
z-index: 3;
}
.abt-hero__scroll-line {
width: 1px;
height: 48px;
background: linear-gradient(to bottom, rgba(255,255,255,0.35), transparent);
animation: abtScrollPulse 2s ease-in-out infinite;
}
/* ============================================================
MISSION SECTION
============================================================ */
.abt-mission {
position: relative;
background: var(--abt-cream);
padding: 8rem 0;
overflow: hidden;
}
.abt-mission__texture {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 10% 90%, rgba(201,150,58,0.06) 0%, transparent 50%),
radial-gradient(circle at 90% 10%, rgba(45,122,95,0.04) 0%, transparent 40%);
pointer-events: none;
}
/* Subtle noise texture overlay */
.abt-mission::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
pointer-events: none;
}
.abt-mission__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 2.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}
.abt-mission__text h2 {
font-family: var(--ff-display);
font-size: clamp(2.2rem, 3.5vw, 3.5rem);
font-weight: 400;
line-height: 1.15;
color: #cc8111c9;
margin-bottom: 1.75rem;
}
.abt-mission__text p {
font-size: 1rem;
line-height: 1.8;
color: var(--abt-text-muted);
margin-bottom: 1.25rem;
font-weight: 300;
}
.abt-mission__text .abt-btn {
margin-top: 1.5rem;
}
/* Image Stack */
.abt-mission__img-stack {
position: relative;
}
.abt-mission__img {
border-radius: var(--radius);
object-fit: cover;
}
.abt-mission__img--back {
width: 75%;
height: 360px;
margin-left: auto;
box-shadow: var(--shadow-md);
}
.abt-mission__img--front {
width: 65%;
height: 280px;
position: absolute;
bottom: -60px;
left: 0;
border: 5px solid var(--abt-cream);
box-shadow: var(--shadow-xl);
z-index: 2;
}
.abt-mission__quote-block {
position: absolute;
bottom: -80px;
right: 0;
width: 72%;
background: #105c55;
color: var(--abt-white);
border-radius: var(--radius);
padding: 1.75rem;
z-index: 3;
box-shadow: var(--shadow-lg);
}
.abt-mission__quote-icon {
width: 32px;
height: 20px;
color: var(--abt-gold);
margin-bottom: 0.75rem;
display: block;
}
.abt-mission__quote-block p {
font-family: var(--ff-display);
font-size: 1.05rem;
font-style: italic;
font-weight: 300;
line-height: 1.5;
color: rgba(255,255,255,0.9) !important;
margin-bottom: 0.75rem;
}
.abt-mission__quote-block cite {
font-size: 0.75rem;
color: var(--abt-gold-light);
letter-spacing: 0.05em;
font-style: normal;
}
/* ============================================================
TIMELINE / SUCCESS LADDER
============================================================ */
.abt-timeline {
position: relative;
padding: 10rem 0 8rem;
background: linear-gradient(85deg, #009688d6, #88690c);
overflow: hidden;
}
.abt-timeline__bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201,150,58,0.07) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 50% 100%, rgba(201,150,58,0.05) 0%, transparent 60%);
pointer-events: none;
}
/* Diagonal stripes */
.abt-timeline::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.03;
background-image: repeating-linear-gradient(
-45deg,
rgba(255,255,255,0.5) 0px,
rgba(255,255,255,0.5) 1px,
transparent 1px,
transparent 60px
);
pointer-events: none;
}
.abt-timeline__header {
text-align: center;
max-width: 700px;
margin: 0 auto 6rem;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.abt-timeline__title {
font-family: var(--ff-display);
font-size: clamp(2.8rem, 5vw, 4.5rem);
font-weight: 300;
color: var(--abt-white);
line-height: 1.1;
margin-bottom: 1.25rem;
}
.abt-timeline__title em {
font-style: italic;
color: var(--abt-gold-light);
}
.abt-timeline__subtitle {
font-size: 1.05rem;
line-height: 1.7;
color: rgba(255,255,255,0.55);
font-weight: 300;
}
/* The Ladder Structure */
.abt-ladder {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
/* Central spine */
.abt-ladder__spine {
position: absolute;
left: 50%;
top: 0;
bottom: 80px;
width: 1px;
background: linear-gradient(
to bottom,
rgba(201,150,58,0),
rgba(201,150,58,0.6) 5%,
rgba(201,150,58,0.6) 92%,
rgba(201,150,58,0)
);
transform: translateX(-50%);
}
/* Steps */
.abt-ladder__step {
display: grid;
grid-template-columns: 1fr 80px 1fr;
gap: 0;
margin-bottom: 4rem;
align-items: center;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.abt-ladder__step.abt-visible {
opacity: 1;
transform: translateY(0);
}
.abt-ladder__step--left .abt-ladder__connector {
order: 2;
}
.abt-ladder__step--left .abt-ladder__card {
order: 1;
text-align: right;
}
.abt-ladder__step--right .abt-ladder__connector {
order: 2;
}
.abt-ladder__step--right .abt-ladder__card {
order: 3;
}
/* When step is right, the empty cell is first */
.abt-ladder__step--right > :first-child.abt-ladder__card ~ .abt-ladder__connector {
order: 2;
}
.abt-ladder__step--right::before {
content: '';
display: block;
grid-column: 1;
order: 1;
}
/* Connector node */
.abt-ladder__connector {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
position: relative;
z-index: 2;
}
.abt-ladder__node {
width: 56px;
height: 56px;
background: #114943;
border: 2px solid var(--abt-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 6px rgba(201,150,58,0.1), 0 0 20px rgba(201,150,58,0.2);
transition: var(--trans);
cursor: default;
}
.abt-ladder__node svg {
width: 22px;
height: 22px;
color: var(--abt-gold-light);
transition: var(--trans);
}
.abt-ladder__step:hover .abt-ladder__node {
background: var(--abt-gold);
box-shadow: 0 0 0 8px rgba(201,150,58,0.15), 0 0 30px rgba(201,150,58,0.35);
}
.abt-ladder__step:hover .abt-ladder__node svg {
color: var(--abt-white);
}
.abt-ladder__year-tag {
font-family: var(--ff-display);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--abt-gold);
white-space: nowrap;
background: rgba(201,150,58,0.08);
padding: 0.25em 0.75em;
border-radius: 999px;
border: 1px solid rgba(201,150,58,0.2);
}
/* Cards */
.abt-ladder__card {
background: rgb(26 79 74);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
padding: 2.25rem;
position: relative;
overflow: hidden;
transition: var(--trans);
backdrop-filter: blur(8px);
}
.abt-ladder__step--right .abt-ladder__card {
margin-left: 1.5rem;
}
.abt-ladder__step--left .abt-ladder__card {
margin-right: 1.5rem;
}
.abt-ladder__card:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(201,150,58,0.25);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.abt-ladder__card-accent {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--abt-gold), transparent);
}
.abt-ladder__step--right .abt-ladder__card .abt-ladder__card-accent {
background: linear-gradient(90deg, transparent, var(--abt-gold));
}
.abt-ladder__card-num {
font-family: var(--ff-display);
font-size: 3rem;
font-weight: 700;
color: rgba(201,150,58,0.12);
line-height: 1;
margin-bottom: 0.5rem;
position: absolute;
top: 1.5rem;
right: 2rem;
}
.abt-ladder__step--left .abt-ladder__card .abt-ladder__card-num {
right: auto;
left: 2rem;
}
.abt-ladder__card-title {
font-family: var(--ff-display);
font-size: 1.6rem;
font-weight: 400;
color: var(--abt-white);
margin-bottom: 0.75rem;
line-height: 1.2;
}
.abt-ladder__card-text {
font-size: 0.92rem;
line-height: 1.75;
color: rgba(255,255,255,0.55);
font-weight: 300;
margin-bottom: 1.25rem;
}
.abt-ladder__card-tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--abt-gold-light);
background: rgba(201,150,58,0.1);
border: 1px solid rgba(201,150,58,0.2);
padding: 0.3em 0.9em;
border-radius: 999px;
}
.abt-ladder__card-tag svg {
width: 13px;
height: 13px;
}
.abt-ladder__card-tag--current {
color: var(--abt-gold);
background: rgba(201,150,58,0.18);
border-color: rgba(201,150,58,0.4);
animation: abtGlow 2s ease-in-out infinite;
}
/* Current step highlight */
.abt-ladder__step--current .abt-ladder__card {
background: rgb(26 79 74);
border-color: rgba(201,150,58,0.3);
}
.abt-ladder__step--current .abt-ladder__node {
background: var(--abt-gold);
box-shadow: 0 0 0 8px rgba(201,150,58,0.2), 0 0 40px rgba(201,150,58,0.4);
animation: abtPulse 2.5s ease-in-out infinite;
}
.abt-ladder__step--current .abt-ladder__node svg {
color: var(--abt-white);
}
/* Summit */
.abt-ladder__summit {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding-top: 3rem;
color: rgba(255,255,255,0.35);
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.abt-ladder__summit-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(201,150,58,0.12);
border: 1px solid rgba(201,150,58,0.3);
display: flex;
align-items: center;
justify-content: center;
}
.abt-ladder__summit-icon svg {
width: 24px;
height: 24px;
color: var(--abt-gold-light);
}
/* ============================================================
WHY CHOOSE US
============================================================ */
.abt-why {
background: var(--abt-cream-2);
padding: 8rem 0;
position: relative;
overflow: hidden;
}
.abt-why::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(201,150,58,0.07) 0%, transparent 70%);
pointer-events: none;
}
.abt-why__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 2.5rem;
}
.abt-why__header {
max-width: 560px;
margin-bottom: 4rem;
}
.abt-why__title {
font-family: var(--ff-display);
font-size: clamp(2.2rem, 3.5vw, 3.5rem);
font-weight: 400;
color: #cc8111c9;
line-height: 1.15;
}
.abt-why__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.abt-why__card {
background: var(--abt-white);
border-radius: var(--radius);
padding: 2.25rem;
position: relative;
transition: var(--trans);
border: 1px solid rgba(27,42,65,0.07);
overflow: hidden;
}
.abt-why__card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--abt-gold), var(--abt-gold-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.abt-why__card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.abt-why__card:hover::after {
transform: scaleX(1);
}
.abt-why__card-icon {
width: 52px;
height: 52px;
background: var(--abt-gold-pale);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
transition: var(--trans);
}
.abt-why__card-icon svg {
width: 24px;
height: 24px;
color: var(--abt-gold);
}
.abt-why__card:hover .abt-why__card-icon {
background: var(--abt-navy);
}
.abt-why__card:hover .abt-why__card-icon svg {
color: var(--abt-gold-light);
}
.abt-why__card h3 {
font-family: var(--ff-display);
font-size: 1.25rem;
font-weight: 600;
color: #cc8111c9;
margin-bottom: 0.75rem;
line-height: 1.3;
}
.abt-why__card p {
font-size: 0.9rem;
line-height: 1.75;
color: var(--abt-text-muted);
}
/* ============================================================
TEAM SECTION
============================================================ */
.abt-team {
background: var(--abt-cream);
padding: 8rem 0;
position: relative;
overflow: hidden;
}
.abt-team__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 2.5rem;
}
.abt-team__header {
max-width: 600px;
margin: 0 auto 4rem;
text-align: center;
}
.abt-team__title {
font-family: var(--ff-display);
font-size: clamp(2.2rem, 3.5vw, 3.5rem);
font-weight: 400;
color: var(--abt-navy);
line-height: 1.15;
margin-bottom: 1rem;
}
.abt-team__title em {
font-style: italic;
color: var(--abt-gold);
}
.abt-team__header p {
font-size: 1rem;
line-height: 1.7;
color: var(--abt-text-muted);
font-weight: 300;
}
.abt-team__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.abt-team__member {
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.abt-team__member.abt-visible {
opacity: 1;
transform: translateY(0);
}
.abt-team__member:nth-child(2) { transition-delay: 0.1s; }
.abt-team__member:nth-child(3) { transition-delay: 0.2s; }
.abt-team__member:nth-child(4) { transition-delay: 0.3s; }
.abt-team__img-wrap {
position: relative;
width: 160px;
height: 160px;
margin: 0 auto 1.5rem;
border-radius: 50%;
overflow: hidden;
}
.abt-team__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
border-radius: 50%;
}
.abt-team__img-wrap::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: conic-gradient(var(--abt-gold), var(--abt-gold-light), var(--abt-cream-3), var(--abt-gold));
z-index: -1;
}
.abt-team__member-overlay {
position: absolute;
inset: 0;
background: rgba(27,42,65,0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--trans);
border-radius: 50%;
}
.abt-team__member-overlay svg {
width: 32px;
height: 32px;
color: var(--abt-gold-light);
}
.abt-team__member:hover .abt-team__member-overlay { opacity: 1; }
.abt-team__member:hover .abt-team__img-wrap img { transform: scale(1.08); }
.abt-team__member h4 {
font-family: var(--ff-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--abt-navy);
margin-bottom: 0.25rem;
}
.abt-team__member span {
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--abt-gold);
margin-bottom: 0.75rem;
}
.abt-team__member p {
font-size: 0.85rem;
line-height: 1.65;
color: var(--abt-text-muted);
}
/* ============================================================
ACCREDITATIONS / TRUST BAR
============================================================ */
.abt-trust {
background: var(--abt-navy);
padding: 5rem 0;
overflow: hidden;
position: relative;
}
.abt-trust::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 40px,
rgba(255,255,255,0.015) 40px,
rgba(255,255,255,0.015) 41px
);
pointer-events: none;
}
.abt-trust__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 2.5rem;
text-align: center;
}
.abt-trust__title {
font-family: var(--ff-display);
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
font-weight: 300;
color: var(--abt-white);
margin-bottom: 3rem;
line-height: 1.2;
}
.abt-trust__logos {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.abt-trust__logo-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
padding: 1.5rem 2rem;
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius);
background: rgba(255,255,255,0.03);
transition: var(--trans);
min-width: 130px;
}
.abt-trust__logo-item:hover {
background: rgba(201,150,58,0.08);
border-color: rgba(201,150,58,0.3);
transform: translateY(-3px);
}
.abt-trust__logo-item svg {
width: 80px;
height: 40px;
color: rgba(255,255,255,0.45);
transition: var(--trans);
}
.abt-trust__logo-item:hover svg {
color: var(--abt-gold-light);
}
.abt-trust__logo-item span {
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
white-space: nowrap;
}
/* ============================================================
CTA SECTION
============================================================ */
.abt-cta {
position: relative;
padding: 10rem 2.5rem;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-height: 70vh;
}
.abt-cta__bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.abt-cta__bg {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(27,42,65,0.92) 0%, rgba(27,42,65,0.75) 100%);
z-index: 1;
}
.abt-cta__content {
position: relative;
z-index: 2;
max-width: 700px;
}
.abt-cta__title {
font-family: var(--ff-display);
font-size: clamp(3rem, 5vw, 5rem);
font-weight: 300;
color: var(--abt-white);
line-height: 1.1;
margin-bottom: 1.5rem;
}
.abt-cta p {
font-size: 1.05rem;
line-height: 1.75;
color: rgba(255,255,255,0.65);
max-width: 560px;
margin: 0 auto 2.5rem;
font-weight: 300;
}
.abt-cta__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
}
/* ============================================================
KEYFRAME ANIMATIONS
============================================================ */
@keyframes abtFadeUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes abtFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes abtScrollPulse {
0%, 100% { opacity: 0.35; transform: scaleY(1); }
50% { opacity: 0.7; transform: scaleY(1.15); }
}
@keyframes abtPulse {
0%, 100% { box-shadow: 0 0 0 8px rgba(201,150,58,0.2), 0 0 40px rgba(201,150,58,0.4); }
50% { box-shadow: 0 0 0 14px rgba(201,150,58,0.1), 0 0 60px rgba(201,150,58,0.5); }
}
@keyframes abtGlow {
0%, 100% { box-shadow: 0 0 8px rgba(201,150,58,0.2); }
50% { box-shadow: 0 0 18px rgba(201,150,58,0.5); }
}
@keyframes abtSpinSlow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ============================================================
SCROLL ANIMATION TRIGGER — Intersection Observer classes
============================================================ */
.abt-ladder__step,
.abt-team__member,
.abt-why__card {
will-change: opacity, transform;
}
.abt-why__card {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.abt-why__card:nth-child(2) { transition-delay: 0.08s; }
.abt-why__card:nth-child(3) { transition-delay: 0.16s; }
.abt-why__card:nth-child(4) { transition-delay: 0.08s; }
.abt-why__card:nth-child(5) { transition-delay: 0.16s; }
.abt-why__card:nth-child(6) { transition-delay: 0.24s; }
.abt-why__card.abt-visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.abt-hero {
grid-template-columns: 1fr;
min-height: auto;
}
.abt-hero__content {
padding: 7rem 3rem 4rem;
text-align: center;
}
.abt-hero__stats {
justify-content: center;
}
.abt-hero__subtitle {
margin: 0 auto 3rem;
}
.abt-hero__image-side {
height: 480px;
padding: 2rem 3rem 5rem;
}
.abt-hero__floating-card--1,
.abt-hero__floating-card--2 {
display: none;
}
.abt-mission__inner {
grid-template-columns: 1fr;
gap: 3rem;
}
.abt-mission__img--front {
bottom: -40px;
}
.abt-mission__quote-block {
bottom: -60px;
right: 0;
width: 80%;
}
.abt-mission__visuals {
margin-bottom: 80px;
}
.abt-why__grid {
grid-template-columns: 1fr 1fr;
}
.abt-team__grid {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
/* Ladder: stack on smaller screens */
.abt-ladder__step {
grid-template-columns: 1fr;
display: flex;
flex-direction: column;
align-items: center;
}
.abt-ladder__step--right::before {
display: none;
}
.abt-ladder__card {
width: 100%;
max-width: 560px;
text-align: left !important;
}
.abt-ladder__step--left .abt-ladder__card,
.abt-ladder__step--right .abt-ladder__card {
margin: 0;
order: 3;
}
.abt-ladder__connector {
order: 1 !important;
}
.abt-ladder__card-num {
left: auto !important;
right: 2rem !important;
}
.abt-ladder__spine {
left: 50%;
display: none;
}
}
@media (max-width: 768px) {
.abt-hero__content { padding: 6rem 1.5rem 3rem; }
.abt-hero__stats { flex-direction: column; gap: 1.25rem; }
.abt-hero__stat-divider { width: 60px; height: 1px; }
.abt-why__grid { grid-template-columns: 1fr; }
.abt-team__grid { grid-template-columns: 1fr 1fr; }
.abt-mission__inner { padding: 0 1.5rem; }
.abt-trust__logos { gap: 1rem; }
.abt-trust__logo-item { min-width: 100px; padding: 1rem; }
.abt-cta { padding: 6rem 1.5rem; }
.abt-cta__actions { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
.abt-team__grid { grid-template-columns: 1fr; }
.abt-hero__title { font-size: 2.4rem; }
.abt-timeline__title { font-size: 2.4rem; }
.abt-ladder__card { padding: 1.5rem; }
}
/*05-03-2026*/
.logo-main img {
max-width: 185px;
height: auto;
width: 100%;
}
@media (max-width: 1199.98px) {
.Masters-TEFL-hero-container {
flex-direction: column;
}
.Masters-TEFL-floating-1 {
left: 20px;
}
.Masters-TEFL-floating-2 {
right: 20px;
}
}
@media (max-width: 992px) {
.nav-menu {
position: absolute;
top: 82px;
padding: 0px 30px 30px;
width: 100%;
max-width: 90%;
}
.mega-menu-columns {
padding: 30px 0px;
}
.mega-menu-column {
padding: 0 0;
}
}
@media (max-width: 768px) {
.nav-menu {
position: absolute;
top: 82px;
padding: 0px 15px 15px;
}
.mega-menu-header {
padding: 15px 15px;
}
.mega-menu-header p {
font-size: 14px;
}
.mega-menu-header h3 {
font-size: 18px;
}
.course-info {
padding: 15px;
gap: 6px;
}
.menu-links a {
padding: 5px 6px;
}
.certificate-grid img {
max-width: calc(33.33% - 10px);
}
.mas-hero__stats {
display: flex;
gap: 10px !important;
animation: mas-fade-up 0.8s 0.45s ease both;
}
.mas-hero__stat-label {
font-size: 0.55rem !important;
}
.mas-stat-item {
padding: 20px 20px !important;
}
.mas-stat-num {
font-size: 1.8rem !important;
}
section.elementary-tefl-certificate {
overflow: hidden !important;
}
.business-tefl-btn-accent {
white-space: normal;
}
.young-tefl-hero-features {
flex-direction: column;
gap: 10px;
}
.ht1-hero {
min-height: auto !important;
}
.ht1-hero .ht1-wrap {
padding-bottom: 30px !important;
padding-top: 0 !important;
}
.ht1-trust .ht1-wrap {
gap: 12px;
padding: 20px 20px;
}
}
@media (max-width: 575px) {
.ht1-trust .ht1-wrap .ht1-trust__items .ht1-trust__item {
width: 44%;
}
}
/*05-03-2026*/