/* styles.css - Complete CSS for all Q8-MS pages */
/* Enhanced Color Palette */

:root {

    --dark-blue: #0a1a3a; /* Challenge */

    --gold: #d4af37; /* Oil and Gulf Wealth */

    --bronze: #cd7f32; /* Alternative Bronze */

    --black: #111111; /* Power and Professionalism */

    --metallic: #c0c0c0; /* Technological Advancement */

    --metallic-dark: #8a8a8a;

    --teal: #00A6A6;

    --orange: #FF6B00;

    --light-bg: #f8f9fa;

    --white: #FFFFFF;

    --gradient-1: linear-gradient(135deg, var(--dark-blue) 0%, var(--teal) 100%);

    --gradient-2: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);

    --gradient-3: linear-gradient(135deg, var(--metallic) 0%, var(--white) 100%);

    --flame: #FF4500;

    --kuwait-red: #CE1126;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Montserrat', sans-serif;

}



body {

    color: var(--black);

    line-height: 1.6;

    overflow-x: hidden;

    background-color: var(--white);

}



/* Animated Particle Background */

.particles {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    pointer-events: none;

}



.particle {

    position: absolute;

    border-radius: 50%;

    background: radial-gradient(circle, var(--gold), transparent);

    animation: float 20s infinite linear;

}



@keyframes float {

    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }

    50% { transform: translateY(-100px) rotate(180deg); opacity: 0.6; }

}



/* Text Split Animation */

[text-split] { opacity: 0; }

.word, .char { display: inline-block; transform-origin: center; }



/* Custom Q8-MS Logo with Flame Animation */

.logo-container {

    display: flex;

    align-items: center;

    gap: 15px;

}



.logo-animated {

    position: relative;

    width: 70px;

    height: 70px;

}



.logo-q {

    font-family: 'Oswald', sans-serif;

    font-size: 4rem;

    font-weight: 800;

    color: var(--dark-blue);

    position: relative;

    z-index: 2;

    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);

}



.logo-ms {

    font-family: 'Oswald', sans-serif;

    font-size: 2rem;

    font-weight: 600;

    color: var(--gold);

    align-self: flex-end;

    margin-bottom: 0.3rem;

    position: relative;

}



.flame-animation {

    position: absolute;

    top: -10px;

    left: 50%;

    transform: translateX(-50%);

    width: 40px;

    height: 60px;

    z-index: 1;

}



.flame {

    position: absolute;

    width: 100%;

    height: 100%;

    background: linear-gradient(to top, var(--flame), orange, yellow);

    border-radius: 50% 50% 20% 20%;

    animation: flicker 0.5s infinite alternate;

    filter: blur(2px);

    opacity: 0.8;

}



@keyframes flicker {

    0% { height: 60px; opacity: 0.7; transform: scaleY(0.9); }

    100% { height: 70px; opacity: 1; transform: scaleY(1.1); }

}



.flame-base {

    position: absolute;

    bottom: -5px;

    left: 50%;

    transform: translateX(-50%);

    width: 20px;

    height: 10px;

    background: var(--orange);

    border-radius: 50%;

}

/* Enhanced Header - Fixed to remove white space */
header {
    background: linear-gradient(135deg, rgba(10, 26, 58, 0.95) 0%, rgba(10, 26, 58, 0.98) 100%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    margin: 0;
}

header.scrolled {

    padding: 15px 0;

    background: rgba(10, 26, 58, 0.98);

    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);

}



.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 30px;

}



/* Navigation */

nav ul {

    display: flex;

    list-style: none;

    gap: 35px;

}



nav ul li {

    position: relative;

}



nav ul li a {

    color: var(--white);

    text-decoration: none;

    font-weight: 600;

    font-size: 1.1rem;

    padding: 8px 0;

    position: relative;

    transition: all 0.3s ease;

    opacity: 0.9;

}



nav ul li a::before {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 3px;

    background: var(--gradient-2);

    border-radius: 2px;

    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



nav ul li a:hover {

    color: var(--gold);

    opacity: 1;

    transform: translateY(-2px);

}



nav ul li a:hover::before {

    width: 100%;

}



nav ul li a.active {

    color: var(--gold);

}



nav ul li a.active::before {

    width: 100%;

}



/* Enhanced Hero Section */

.hero {

    height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    padding: 0 30px;

    padding-top: 100px;

    background: linear-gradient(135deg, rgba(10, 26, 58, 0.9) 0%, rgba(10, 26, 58, 0.95) 100%);

    overflow: hidden;

}



.hero-container {

    max-width: 1400px;

    margin: 0 auto;

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}



.hero-content {

    color: var(--white);

}



.hero h1 {

    font-size: 4rem;

    margin-bottom: 25px;

    line-height: 1.1;

    background: linear-gradient(to right, #ffffff, var(--gold));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-family: 'Oswald', sans-serif;

}



.hero-subtitle {

    font-size: 1.3rem;

    margin-bottom: 40px;

    line-height: 1.8;

    opacity: 0.9;

    max-width: 600px;

}



/* Hero Video */

.hero-video-container {

    position: relative;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);

    height: 500px;

}



.hero-video-container video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.video-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(45deg, rgba(10, 26, 58, 0.2), transparent);

    display: flex;

    align-items: center;

    justify-content: center;

}



.play-button {

    width: 80px;

    height: 80px;

    background: rgba(212, 175, 55, 0.9);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--dark-blue);

    font-size: 30px;

    cursor: pointer;

    transition: all 0.3s ease;

    border: none;

}



.play-button:hover {

    transform: scale(1.1);

    background: var(--gold);

}



/* Enhanced Buttons */

.btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: var(--gradient-2);

    color: var(--dark-blue);

    padding: 16px 35px;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    text-decoration: none;

    font-weight: bold;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

    font-size: 1.1rem;

    letter-spacing: 0.5px;

    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);

}



.btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left 0.7s;

}



.btn:hover::before {

    left: 100%;

}



.btn:hover {

    transform: translateY(-5px) scale(1.05);

    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);

}



.btn-outline {

    background: transparent;

    border: 2px solid var(--gold);

    color: var(--gold);

}



.btn-outline:hover {

    background: var(--gold);

    color: var(--dark-blue);

}



.hero-btns {

    display: flex;

    gap: 25px;

    flex-wrap: wrap;

}



/* Section Styles */

section {

    padding: 100px 30px;

}



.section-container {

    max-width: 1400px;

    margin: 0 auto;

}



.section-title {

    text-align: center;

    margin-bottom: 60px;

}



.section-title h2 {

    font-size: 3rem;

    margin-bottom: 20px;

    position: relative;

    display: inline-block;

    font-family: 'Oswald', sans-serif;

    background: var(--gradient-1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.section-title h2::after {

    content: '';

    position: absolute;

    width: 100px;

    height: 4px;

    background: var(--gradient-2);

    bottom: -15px;

    left: 50%;

    transform: translateX(-50%);

    border-radius: 2px;

}



.section-subtitle {

    text-align: center;

    color: var(--metallic-dark);

    font-size: 1.2rem;

    max-width: 800px;

    margin: 0 auto;

}



/* Services Grid */

.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 40px;

}



.service-card {

    background: var(--white);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(212, 175, 55, 0.1);

}



.service-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background: var(--gradient-2);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.4s ease;

}



.service-card:hover {

    transform: translateY(-20px) scale(1.02);

    box-shadow: 0 30px 60px rgba(212, 175, 55, 0.15);

}



.service-card:hover::before {

    transform: scaleX(1);

}



.service-icon {

    font-size: 3rem;

    margin-bottom: 25px;

    background: var(--gradient-2);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    transition: all 0.4s ease;

}



.service-card:hover .service-icon {

    transform: scale(1.2) rotate(10deg);

}



.service-price {

    font-size: 2rem;

    font-weight: 700;

    color: var(--dark-blue);

    margin: 20px 0;

    font-family: 'Oswald', sans-serif;

}



/* Chart Container */

.chart-section {

    background: linear-gradient(135deg, var(--light-bg) 0%, #ffffff 100%);

    position: relative;

    overflow: hidden;

}



.chart-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

    margin-top: 60px;

}



.chart-box {

    background: var(--white);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(212, 175, 55, 0.1);

}



.chart-title {

    font-size: 1.5rem;

    margin-bottom: 30px;

    color: var(--dark-blue);

    font-family: 'Oswald', sans-serif;

    text-align: center;

}



.chart-canvas {

    width: 100%;

    height: 300px;

}



/* Market Statistics Section - Like arteekeg.net */

.market-stats {

    background: linear-gradient(135deg, var(--dark-blue) 0%, #0f2450 100%);

    color: var(--white);

    padding: 80px 30px;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.market-stats::before {

    content: '';

    position: absolute;

    width: 300px;

    height: 300px;

    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);

    top: -150px;

    right: -150px;

    border-radius: 50%;

    animation: pulse 8s ease-in-out infinite;

}



@keyframes pulse {

    0%, 100% { transform: scale(1); opacity: 0.3; }

    50% { transform: scale(1.2); opacity: 0.5; }

}



.stats-title {

    font-size: 3rem;

    margin-bottom: 60px;

    color: var(--white);

    font-family: 'Oswald', sans-serif;

    position: relative;

    z-index: 2;

}



.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 40px;

    position: relative;

    z-index: 2;

}



.stat-item {

    position: relative;

    padding: 30px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 15px;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.stat-item h3 {

    font-size: 3.5rem;

    margin-bottom: 10px;

    font-weight: 800;

    background: linear-gradient(to right, var(--gold), var(--orange));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-family: 'Oswald', sans-serif;

}



.stat-item p {

    font-size: 1.1rem;

    opacity: 0.9;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.stat-icon {

    font-size: 2.5rem;

    margin-bottom: 15px;

    color: var(--gold);

}



/* Video Gallery */

.video-gallery {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

    margin-top: 60px;

}



.video-item {

    border-radius: 20px;

    overflow: hidden;

    height: 300px;

    position: relative;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

}



.video-item video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.video-item:hover video {

    transform: scale(1.1);

}



.video-overlay-small {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.7) 100%);

    opacity: 0;

    transition: opacity 0.3s ease;

    display: flex;

    align-items: flex-end;

    padding: 30px;

}



.video-item:hover .video-overlay-small {

    opacity: 1;

}



.video-title {

    color: var(--white);

    font-size: 1.5rem;

    font-weight: 600;

}



/* Opportunities Section */

.opportunities-section {

    background: linear-gradient(135deg, var(--dark-blue) 0%, #0f2450 100%);

    color: var(--white);

}



.opportunities-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 40px;

}



.opportunity-card {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    padding: 40px;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(212, 175, 55, 0.2);

    transition: all 0.3s ease;

}



.opportunity-card:hover {

    transform: translateY(-10px);

    border-color: var(--gold);

    background: rgba(255, 255, 255, 0.15);

}



.opportunity-icon {

    font-size: 2.5rem;

    margin-bottom: 20px;

    color: var(--gold);

}



/* Partners Section */

.partners-section {

    background: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);

    text-align: center;

}



.partners-container {

    max-width: 900px;

    margin: 0 auto;

}



.partners-title {

    font-size: 2.5rem;

    margin-bottom: 25px;

    color: var(--dark-blue);

    font-family: 'Oswald', sans-serif;

}



.partners-description {

    font-size: 1.2rem;

    margin-bottom: 40px;

    color: var(--dark-blue);

    opacity: 0.9;

}



.benefits-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin: 50px 0;

}



.benefit-card {

    background: rgba(255, 255, 255, 0.9);

    padding: 30px;

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



/* Contact Form */

.contact-form {

    background: var(--white);

    border-radius: 20px;

    padding: 50px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);

    max-width: 800px;

    margin: 0 auto;

}



.form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    margin-bottom: 25px;

}



.form-group {

    margin-bottom: 30px;

}



.form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

    color: var(--dark-blue);

    font-size: 1.1rem;

}



.form-group input, .form-group select {

    width: 100%;

    padding: 16px 20px;

    background: rgba(192, 192, 192, 0.1);

    border: 1px solid rgba(192, 192, 192, 0.5);

    border-radius: 10px;

    font-size: 1rem;

    color: var(--black);

    transition: all 0.3s ease;

}



.form-group input:focus, .form-group select:focus {

    outline: none;

    border-color: var(--gold);

    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);

}



.form-submit {

    background: var(--gradient-1);

    color: var(--white);

    width: 100%;

    padding: 18px;

    font-size: 1.2rem;

    border-radius: 10px;

    border: none;

    cursor: pointer;

    transition: all 0.3s ease;

    margin-top: 20px;

    font-weight: 600;

}



.form-submit:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(10, 26, 58, 0.3);

}



/* Enhanced Footer - Like arteekeg.net but with Q8-MS colors */

footer {

    background: linear-gradient(135deg, var(--dark-blue) 0%, #0a1a3a 100%);

    color: var(--white);

    padding: 80px 30px 40px;

}



.footer-container {

    max-width: 1400px;

    margin: 0 auto;

}



.footer-content {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 50px;

    margin-bottom: 50px;

}



.footer-column h3 {

    font-size: 1.4rem;

    margin-bottom: 25px;

    background: var(--gradient-2);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    padding-bottom: 10px;

    border-bottom: 2px solid var(--gold);

    font-family: 'Oswald', sans-serif;

}



.footer-column p {

    color: #ccc;

    line-height: 1.8;

    margin-bottom: 20px;

}



.footer-column ul {

    list-style: none;

}



.footer-column ul li {

    margin-bottom: 12px;

}



.footer-column ul li a {

    color: #ccc;

    text-decoration: none;

    transition: all 0.3s ease;

    display: inline-block;

    padding: 5px 0;

    position: relative;

}



.footer-column ul li a::before {

    content: '→';

    position: absolute;

    left: -20px;

    opacity: 0;

    transition: all 0.3s ease;

    color: var(--gold);

}



.footer-column ul li a:hover {

    color: var(--gold);

    transform: translateX(10px);

}



.footer-column ul li a:hover::before {

    opacity: 1;

    left: -15px;

}



.contact-info li {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

}



.contact-info i {

    color: var(--gold);

    width: 20px;

}



.social-links {

    display: flex;

    gap: 20px;

    margin-top: 20px;

}



.social-links a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    color: var(--white);

    text-decoration: none;

    transition: all 0.3s ease;

    font-size: 1.2rem;

}



.social-links a:hover {

    background: var(--gold);

    transform: translateY(-5px) rotate(360deg);

    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);

}



.footer-bottom {

    text-align: center;

    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    color: #aaa;

    font-size: 0.9rem;

}



.footer-bottom a {

    color: var(--gold);

    text-decoration: none;

    transition: color 0.3s ease;

}



.footer-bottom a:hover {

    color: var(--orange);

}



.footer-logo {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

}



/* Floating Contact Button */

.floating-contact {

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 1000;

}



.contact-btn {

    width: 60px;

    height: 60px;

    background: var(--gradient-2);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--dark-blue);

    font-size: 1.5rem;

    text-decoration: none;

    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);

    transition: all 0.3s ease;

    animation: pulseBtn 2s infinite;

}



@keyframes pulseBtn {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.1); }

}



.contact-btn:hover {

    transform: scale(1.1) rotate(45deg);

}



/* ==================== PAGE SPECIFIC STYLES ==================== */



/* Page Hero for inner pages */

.page-hero {

    background: linear-gradient(135deg, rgba(10, 26, 58, 0.95) 0%, rgba(10, 26, 58, 0.98) 100%);

    padding: 180px 30px 100px;

    text-align: center;

    color: var(--white);

    position: relative;

    overflow: hidden;

}



.page-hero h1 {

    font-size: 4rem;

    margin-bottom: 20px;

    font-family: 'Oswald', sans-serif;

    background: linear-gradient(to right, #ffffff, var(--gold));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.page-hero p {

    font-size: 1.2rem;

    max-width: 800px;

    margin: 0 auto 30px;

    opacity: 0.9;

}



.breadcrumb {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 30px;

}



.breadcrumb a {

    color: var(--gold);

    text-decoration: none;

    transition: all 0.3s ease;

}



.breadcrumb a:hover {

    color: var(--white);

    text-decoration: underline;

}



.breadcrumb span {

    color: var(--metallic);

}



/* About Page Styles */

.timeline {

    position: relative;

    max-width: 1200px;

    margin: 100px auto;

    padding: 20px;

}



.timeline::after {

    content: '';

    position: absolute;

    width: 6px;

    background: var(--gradient-2);

    top: 0;

    bottom: 0;

    left: 50%;

    margin-left: -3px;

    border-radius: 3px;

}



.timeline-item {

    padding: 10px 40px;

    position: relative;

    width: 50%;

    box-sizing: border-box;

}



.timeline-item:nth-child(odd) {

    left: 0;

}



.timeline-item:nth-child(even) {

    left: 50%;

}



.timeline-content {

    padding: 30px;

    background: var(--white);

    border-radius: 20px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(212, 175, 55, 0.1);

}



.timeline-year {

    font-size: 2rem;

    font-weight: 800;

    color: var(--gold);

    margin-bottom: 15px;

    font-family: 'Oswald', sans-serif;

}



.timeline-item:nth-child(odd) .timeline-year {

    color: var(--dark-blue);

}



.team-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 40px;

    margin-top: 60px;

}



.team-card {

    background: var(--white);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}



.team-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 50px rgba(212, 175, 55, 0.15);

}



.team-image {

    width: 100%;

    height: 300px;

    background: linear-gradient(135deg, var(--dark-blue), var(--teal));

    position: relative;

    overflow: hidden;

}



.team-image i {

    font-size: 8rem;

    color: rgba(255, 255, 255, 0.2);

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.team-info {

    padding: 30px;

}



.team-info h3 {

    font-size: 1.5rem;

    margin-bottom: 10px;

    color: var(--dark-blue);

    font-family: 'Oswald', sans-serif;

}



.team-role {

    color: var(--gold);

    font-weight: 600;

    margin-bottom: 15px;

    display: block;

}



.values-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

    margin-top: 60px;

}



.value-card {

    text-align: center;

    padding: 40px 30px;

    background: var(--white);

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    transition: all 0.3s ease;

}



.value-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15);

}



.value-icon {

    font-size: 3rem;

    margin-bottom: 20px;

    background: var(--gradient-2);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.milestones {

    background: linear-gradient(135deg, var(--dark-blue) 0%, #0f2450 100%);

    padding: 100px 30px;

    color: var(--white);

}



.milestone-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 40px;

    margin-top: 60px;

}



.milestone-item {

    text-align: center;

    padding: 40px 30px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 15px;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.milestone-number {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 10px;

    background: linear-gradient(to right, var(--gold), var(--orange));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-family: 'Oswald', sans-serif;

}



.milestone-text {

    font-size: 1.1rem;

    opacity: 0.9;

}



/* Services Page Styles */

.service-tabs {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-bottom: 50px;

    flex-wrap: wrap;

}



.service-tab {

    padding: 15px 30px;

    background: var(--white);

    border: 2px solid var(--dark-blue);

    border-radius: 50px;

    cursor: pointer;

    font-weight: 600;

    transition: all 0.3s ease;

    color: var(--dark-blue);

}



.service-tab.active {

    background: var(--dark-blue);

    color: var(--white);

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(10, 26, 58, 0.2);

}



.service-tab:hover:not(.active) {

    background: rgba(10, 26, 58, 0.1);

    transform: translateY(-2px);

}



.service-details {

    display: none;

}



.service-details.active {

    display: block;

    animation: fadeIn 0.5s ease;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: translateY(0); }

}



.pricing-tables {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 40px;

    margin-top: 60px;

}



.pricing-table {

    background: var(--white);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);

    border: 2px solid rgba(212, 175, 55, 0.2);

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.pricing-table.popular {

    border-color: var(--gold);

    transform: scale(1.05);

    box-shadow: 0 30px 60px rgba(212, 175, 55, 0.2);

}



.pricing-table.popular::before {

    content: 'MOST POPULAR';

    position: absolute;

    top: 20px;

    right: -35px;

    background: var(--gold);

    color: var(--dark-blue);

    padding: 8px 40px;

    font-weight: 700;

    transform: rotate(45deg);

    font-size: 0.8rem;

}



.pricing-header {

    text-align: center;

    margin-bottom: 30px;

}



.pricing-title {

    font-size: 1.8rem;

    color: var(--dark-blue);

    margin-bottom: 15px;

    font-family: 'Oswald', sans-serif;

}



.pricing-price {

    font-size: 3rem;

    font-weight: 800;

    color: var(--gold);

    font-family: 'Oswald', sans-serif;

}



.pricing-period {

    color: var(--metallic-dark);

    font-size: 1rem;

}



.pricing-features {

    list-style: none;

    margin: 30px 0;

}



.pricing-features li {

    padding: 10px 0;

    border-bottom: 1px solid rgba(192, 192, 192, 0.2);

    display: flex;

    align-items: center;

    gap: 10px;

}



.pricing-features li i {

    color: var(--gold);

}



.process-steps {

    display: flex;

    justify-content: center;

    gap: 40px;

    margin: 80px 0;

    flex-wrap: wrap;

}



.process-step {

    text-align: center;

    max-width: 200px;

    position: relative;

}



.process-step-number {

    width: 80px;

    height: 80px;

    background: var(--gradient-2);

    color: var(--dark-blue);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    font-weight: 800;

    margin: 0 auto 20px;

    font-family: 'Oswald', sans-serif;

}



.process-step::after {

    content: '';

    position: absolute;

    top: 40px;

    right: -50px;

    width: 50px;

    height: 2px;

    background: var(--gold);

}



.process-step:last-child::after {

    display: none;

}



.case-studies {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 40px;

    margin-top: 60px;

}



.case-study {

    background: var(--white);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

}



.case-study-image {

    height: 200px;

    background: linear-gradient(135deg, var(--dark-blue), var(--teal));

    position: relative;

    overflow: hidden;

}



.case-study-image i {

    font-size: 5rem;

    color: rgba(255, 255, 255, 0.3);

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.case-study-content {

    padding: 30px;

}



.case-study-title {

    font-size: 1.5rem;

    color: var(--dark-blue);

    margin-bottom: 15px;

    font-family: 'Oswald', sans-serif;

}



.case-study-result {

    background: rgba(212, 175, 55, 0.1);

    padding: 15px;

    border-radius: 10px;

    margin-top: 20px;

    border-left: 4px solid var(--gold);

}



.comparison-table {

    overflow-x: auto;

    margin-top: 60px;

}



table {

    width: 100%;

    border-collapse: collapse;

    background: var(--white);

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



th, td {

    padding: 20px;

    text-align: center;

    border-bottom: 1px solid rgba(192, 192, 192, 0.2);

}



th {

    background: var(--dark-blue);

    color: var(--white);

    font-weight: 600;

}



tr:hover {

    background: rgba(212, 175, 55, 0.05);

}



.feature-name {

    text-align: left;

    font-weight: 600;

    color: var(--dark-blue);

}



.check-icon {

    color: var(--gold);

    font-size: 1.2rem;

}



.close-icon {

    color: var(--metallic);

    font-size: 1.2rem;

}



.faq-container {

    max-width: 800px;

    margin: 0 auto;

}



.faq-item {

    background: var(--white);

    border-radius: 15px;

    margin-bottom: 20px;

    overflow: hidden;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);

}



.faq-question {

    padding: 25px 30px;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-weight: 600;

    color: var(--dark-blue);

    transition: all 0.3s ease;

}



.faq-question:hover {

    background: rgba(212, 175, 55, 0.05);

}



.faq-answer {

    padding: 0 30px;

    max-height: 0;

    overflow: hidden;

    transition: all 0.3s ease;

}



.faq-item.active .faq-answer {

    padding: 0 30px 30px;

    max-height: 500px;

}



.faq-icon {

    transition: transform 0.3s ease;

}



.faq-item.active .faq-icon {

    transform: rotate(45deg);

}



/* Market Data Page Styles */

.data-ticker {

    background: linear-gradient(135deg, var(--dark-blue) 0%, #0f2450 100%);

    padding: 20px 0;

    overflow: hidden;

    position: relative;

}



.ticker-container {

    display: flex;

    animation: ticker 30s linear infinite;

}



@keyframes ticker {

    0% { transform: translateX(0); }

    100% { transform: translateX(-100%); }

}



.ticker-item {

    display: flex;

    align-items: center;

    gap: 30px;

    padding: 0 50px;

    color: var(--white);

    white-space: nowrap;

}



.ticker-label {

    color: var(--gold);

    font-weight: 600;

}



.ticker-value {

    font-size: 1.2rem;

    font-weight: 700;

}



.data-filters {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-bottom: 50px;

    flex-wrap: wrap;

}



.filter-btn {

    padding: 12px 25px;

    background: var(--white);

    border: 2px solid var(--dark-blue);

    border-radius: 50px;

    cursor: pointer;

    font-weight: 600;

    transition: all 0.3s ease;

    color: var(--dark-blue);

}



.filter-btn.active {

    background: var(--dark-blue);

    color: var(--white);

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(10, 26, 58, 0.2);

}



.filter-btn:hover:not(.active) {

    background: rgba(10, 26, 58, 0.1);

    transform: translateY(-2px);

}



.data-table-container {

    overflow-x: auto;

    margin-top: 60px;

}



.data-table {

    width: 100%;

    border-collapse: collapse;

    background: var(--white);

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



.data-table th, .data-table td {

    padding: 20px;

    text-align: center;

    border-bottom: 1px solid rgba(192, 192, 192, 0.2);

}



.data-table th {

    background: var(--dark-blue);

    color: var(--white);

    font-weight: 600;

}



.data-table tr:hover {

    background: rgba(212, 175, 55, 0.05);

}



.trend-up {

    color: #00A6A6;

    font-weight: 600;

}



.trend-down {

    color: #CE1126;

    font-weight: 600;

}



.price-widget {

    background: linear-gradient(135deg, var(--dark-blue) 0%, #0f2450 100%);

    border-radius: 20px;

    padding: 40px;

    color: var(--white);

    margin-top: 60px;

}



.price-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

}



.current-price {

    font-size: 3.5rem;

    font-weight: 800;

    color: var(--gold);

    font-family: 'Oswald', sans-serif;

}



.price-change {

    font-size: 1.2rem;

    padding: 10px 20px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 50px;

    backdrop-filter: blur(10px);

}



.price-change.positive {

    color: #00A6A6;

}



.price-change.negative {

    color: #CE1126;

}



.price-history {

    display: flex;

    justify-content: space-between;

    margin-top: 30px;

}



.price-point {

    text-align: center;

}



.price-point-date {

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.9rem;

}



.price-point-value {

    font-size: 1.2rem;

    font-weight: 600;

    margin-top: 5px;

}



.insights-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

    margin-top: 60px;

}



.insight-card {

    background: var(--white);

    border-radius: 20px;

    padding: 30px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    border-left: 5px solid var(--gold);

}



.insight-card h3 {

    color: var(--dark-blue);

    margin-bottom: 15px;

    font-family: 'Oswald', sans-serif;

}



.insight-source {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    color: var(--metallic-dark);

    font-size: 0.9rem;

}



.download-section {

    background: linear-gradient(135deg, var(--light-bg) 0%, #ffffff 100%);

    text-align: center;

}



.download-options {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

    margin-top: 60px;

}



.download-card {

    background: var(--white);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}



.download-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15);

}



.download-icon {

    font-size: 3rem;

    margin-bottom: 20px;

    background: var(--gradient-2);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.download-size {

    color: var(--metallic-dark);

    font-size: 0.9rem;

    margin-top: 10px;

}



.subscription-widget {

    background: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);

    border-radius: 20px;

    padding: 50px;

    text-align: center;

    margin-top: 80px;

}



.subscription-widget h2 {

    color: var(--dark-blue);

    font-size: 2.5rem;

    margin-bottom: 20px;

    font-family: 'Oswald', sans-serif;

}



/* Statistics Page Styles */

.platform-stats {

    background: linear-gradient(135deg, var(--dark-blue) 0%, #0f2450 100%);

    color: var(--white);

    padding: 80px 30px;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.platform-stats::before {

    content: '';

    position: absolute;

    width: 300px;

    height: 300px;

    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);

    top: -150px;

    right: -150px;

    border-radius: 50%;

    animation: pulse 8s ease-in-out infinite;

}



.growth-metrics {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 40px;

    margin-top: 60px;

}



.metric-card {

    background: var(--white);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(212, 175, 55, 0.1);

}



.metric-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

}



.metric-title {

    font-size: 1.5rem;

    color: var(--dark-blue);

    font-family: 'Oswald', sans-serif;

}



.metric-change {

    padding: 8px 16px;

    border-radius: 50px;

    font-weight: 600;

    font-size: 0.9rem;

}



.metric-change.positive {

    background: rgba(0, 166, 166, 0.1);

    color: #00A6A6;

}



.metric-change.negative {

    background: rgba(206, 17, 38, 0.1);

    color: #CE1126;

}



.metric-chart {

    height: 200px;

    margin-top: 20px;

}



.map-container {

    background: var(--white);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    margin-top: 60px;

    text-align: center;

}



.world-map {

    position: relative;

    height: 400px;

    background: linear-gradient(135deg, var(--light-bg) 0%, #ffffff 100%);

    border-radius: 15px;

    overflow: hidden;

    margin-top: 30px;

}



.map-region {

    position: absolute;

    padding: 10px 20px;

    background: rgba(10, 26, 58, 0.9);

    color: var(--white);

    border-radius: 10px;

    font-weight: 600;

    backdrop-filter: blur(5px);

    border: 2px solid var(--gold);

}



.region-gcc {

    top: 50%;

    left: 60%;

    background: rgba(212, 175, 55, 0.9);

}



.region-europe {

    top: 30%;

    left: 45%;

}



.region-asia {

    top: 40%;

    left: 75%;

}



.region-america {

    top: 40%;

    left: 20%;

}



.region-africa {

    top: 60%;

    left: 50%;

}



.categories-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 30px;

    margin-top: 60px;

}



.category-item {

    text-align: center;

    padding: 30px;

    background: var(--white);

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}



.category-item:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15);

}



.category-count {

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--gold);

    margin-bottom: 10px;

    font-family: 'Oswald', sans-serif;

}



.category-name {

    color: var(--dark-blue);

    font-weight: 600;

}



.timeline-stats {

    background: linear-gradient(135deg, var(--light-bg) 0%, #ffffff 100%);

}



.timeline-container {

    max-width: 1000px;

    margin: 0 auto;

    position: relative;

    padding: 60px 0;

}



.timeline-stat {

    display: flex;

    align-items: center;

    margin-bottom: 50px;

    position: relative;

}



.timeline-stat:nth-child(even) {

    flex-direction: row-reverse;

}



.timeline-year {

    flex: 0 0 100px;

    text-align: center;

    font-size: 1.8rem;

    font-weight: 800;

    color: var(--gold);

    font-family: 'Oswald', sans-serif;

}



.timeline-content {

    flex: 1;

    padding: 30px;

    background: var(--white);

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    margin: 0 30px;

    position: relative;

}



.timeline-content::before {

    content: '';

    position: absolute;

    width: 20px;

    height: 20px;

    background: var(--gold);

    border-radius: 50%;

    top: 50%;

    transform: translateY(-50%);

}



.timeline-stat:nth-child(odd) .timeline-content::before {

    right: -40px;

}



.timeline-stat:nth-child(even) .timeline-content::before {

    left: -40px;

}



.performance-metrics {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 40px;

    margin-top: 60px;

}



.performance-card {

    background: var(--white);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    text-align: center;

}



.performance-score {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background: var(--gradient-2);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 30px;

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--dark-blue);

    font-family: 'Oswald', sans-serif;

}



.growth-chart-container {

    background: var(--white);

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    margin-top: 60px;

}



.comparison-section {

    background: linear-gradient(135deg, var(--dark-blue) 0%, #0f2450 100%);

    color: var(--white);

}



.comparison-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 40px;

    margin-top: 60px;

}



.comparison-card {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    padding: 40px;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(212, 175, 55, 0.2);

}



.comparison-value {

    font-size: 2.5rem;

    font-weight: 800;

    margin-bottom: 15px;

    color: var(--gold);

    font-family: 'Oswald', sans-serif;

}



/* Partners Page Styles */

.partnership-models {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 40px;

    margin-top: 60px;

}



.model-card {

    background: var(--white);

    border-radius: 20px;

    padding: 50px 40px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(212, 175, 55, 0.1);

    transition: all 0.3s ease;

    position: relative;

    text-align: center;

}



.model-card.featured {

    border-color: var(--gold);

    transform: translateY(-20px);

    box-shadow: 0 30px 60px rgba(212, 175, 55, 0.2);

}



.model-card.featured::before {

    content: 'RECOMMENDED';

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    background: var(--gold);

    color: var(--dark-blue);

    padding: 8px 30px;

    border-radius: 50px;

    font-weight: 700;

    font-size: 0.9rem;

}



.model-icon {

    font-size: 4rem;

    margin-bottom: 30px;

    background: var(--gradient-2);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.model-title {

    font-size: 2rem;

    margin-bottom: 20px;

    color: var(--dark-blue);

    font-family: 'Oswald', sans-serif;

}



.model-price {

    font-size: 3rem;

    font-weight: 800;

    color: var(--gold);

    margin-bottom: 30px;

    font-family: 'Oswald', sans-serif;

}



.model-features {

    list-style: none;

    margin: 30px 0;

    text-align: left;

}



.model-features li {

    padding: 10px 0;

    border-bottom: 1px solid rgba(192, 192, 192, 0.2);

    display: flex;

    align-items: center;

    gap: 10px;

}



.model-features li i {

    color: var(--gold);

}



.partners-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 30px;

    margin-top: 60px;

}



.partner-logo {

    background: var(--white);

    border-radius: 15px;

    padding: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 150px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}



.partner-logo:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15);

}



.partner-logo i {

    font-size: 3rem;

    color: var(--dark-blue);

    opacity: 0.7;

}



.calculator-container {

    background: linear-gradient(135deg, var(--dark-blue) 0%, #0f2450 100%);

    border-radius: 20px;

    padding: 50px;

    margin-top: 80px;

    color: var(--white);

}



.calculator-title {

    font-size: 2.5rem;

    margin-bottom: 30px;

    text-align: center;

    font-family: 'Oswald', sans-serif;

}



.calculator-inputs {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

    margin-bottom: 40px;

}



.calculator-input {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.calculator-input label {

    font-weight: 600;

    color: var(--gold);

}



.calculator-input input, .calculator-input select {

    padding: 15px;

    border-radius: 10px;

    border: none;

    background: rgba(255, 255, 255, 0.1);

    color: var(--white);

    font-size: 1.1rem;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.calculator-input input:focus, .calculator-input select:focus {

    outline: none;

    border-color: var(--gold);

}



.calculator-results {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 15px;

    padding: 30px;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    margin-top: 40px;

}



.result-item {

    display: flex;

    justify-content: space-between;

    padding: 15px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.result-value {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--gold);

}



.stories-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 40px;

    margin-top: 60px;

}



.story-card {

    background: var(--white);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

}



.story-header {

    padding: 40px 40px 20px;

    background: linear-gradient(135deg, var(--dark-blue), var(--teal));

    color: var(--white);

}



.story-company {

    font-size: 1.5rem;

    margin-bottom: 10px;

    font-family: 'Oswald', sans-serif;

}



.story-percentage {

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--gold);

    font-family: 'Oswald', sans-serif;

}



.story-content {

    padding: 30px;

}



.testimonials-slider {

    max-width: 800px;

    margin: 60px auto 0;

    position: relative;

}



.testimonial-card {

    background: var(--white);

    border-radius: 20px;

    padding: 50px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);

    text-align: center;

    position: relative;

}



.testimonial-quote {

    font-size: 1.2rem;

    font-style: italic;

    margin-bottom: 30px;

    line-height: 1.8;

}



.testimonial-author {

    font-weight: 700;

    color: var(--dark-blue);

    margin-bottom: 5px;

}



.testimonial-role {

    color: var(--metallic-dark);

    font-size: 0.9rem;

}



.quote-icon {

    font-size: 3rem;

    color: var(--gold);

    opacity: 0.3;

    position: absolute;

    top: 30px;

    left: 30px;

}



/* Contact Page Styles */

.contact-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    margin-top: 60px;

}



.contact-info-card {

    background: linear-gradient(135deg, var(--dark-blue) 0%, #0f2450 100%);

    border-radius: 20px;

    padding: 50px;

    color: var(--white);

    height: fit-content;

}



.contact-info-title {

    font-size: 2rem;

    margin-bottom: 40px;

    font-family: 'Oswald', sans-serif;

    color: var(--gold);

}



.contact-details {

    list-style: none;

    margin-bottom: 40px;

}



.contact-details li {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 30px;

    padding-bottom: 30px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.contact-details li:last-child {

    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;

}



.contact-icon {

    width: 50px;

    height: 50px;

    background: rgba(212, 175, 55, 0.2);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: var(--gold);

    flex-shrink: 0;

}



.contact-text h3 {

    margin-bottom: 5px;

    font-size: 1.2rem;

}



.contact-text p {

    opacity: 0.9;

    line-height: 1.6;

}



.contact-text a {

    color: var(--white);

    text-decoration: none;

    transition: all 0.3s ease;

}



.contact-text a:hover {

    color: var(--gold);

    text-decoration: underline;

}



.business-hours {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 15px;

    padding: 30px;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.hours-title {

    font-size: 1.3rem;

    margin-bottom: 20px;

    color: var(--gold);

    font-family: 'Oswald', sans-serif;

}



.hours-list {

    list-style: none;

}



.hours-list li {

    display: flex;

    justify-content: space-between;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.hours-list li:last-child {

    border-bottom: none;

}



.contact-form-container {

    background: var(--white);

    border-radius: 20px;

    padding: 50px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(212, 175, 55, 0.1);

}



.form-title {

    font-size: 2rem;

    margin-bottom: 30px;

    color: var(--dark-blue);

    font-family: 'Oswald', sans-serif;

}



.form-subtitle {

    color: var(--metallic-dark);

    margin-bottom: 40px;

    font-size: 1.1rem;

}



.contact-options {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 40px;

    margin-top: 80px;

}



.option-card {

    background: var(--white);

    border-radius: 20px;

    padding: 40px;

    text-align: center;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

    border: 1px solid rgba(212, 175, 55, 0.1);

}



.option-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 50px rgba(212, 175, 55, 0.15);

}



.option-icon {

    font-size: 3.5rem;

    margin-bottom: 25px;

    background: var(--gradient-2);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.option-title {

    font-size: 1.5rem;

    margin-bottom: 15px;

    color: var(--dark-blue);

    font-family: 'Oswald', sans-serif;

}



.option-button {

    display: inline-block;

    margin-top: 20px;

    padding: 12px 30px;

    background: var(--gradient-1);

    color: var(--white);

    text-decoration: none;

    border-radius: 50px;

    font-weight: 600;

    transition: all 0.3s ease;

}



.option-button:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(10, 26, 58, 0.3);

}



.map-section {

    background: var(--light-bg);

    padding: 100px 30px;

}



.map-container {

    max-width: 1400px;

    margin: 0 auto;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);

    height: 500px;

    position: relative;

}



.map-placeholder {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, var(--dark-blue), var(--teal));

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--white);

}



.map-placeholder i {

    font-size: 5rem;

    margin-bottom: 20px;

    opacity: 0.8;

}



.team-contact {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 40px;

    margin-top: 60px;

}



.team-member {

    background: var(--white);

    border-radius: 20px;

    padding: 40px;

    text-align: center;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}



.team-member:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 50px rgba(212, 175, 55, 0.15);

}



.member-image {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--dark-blue), var(--teal));

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 3rem;

    color: rgba(255, 255, 255, 0.8);

}



.member-name {

    font-size: 1.5rem;

    margin-bottom: 10px;

    color: var(--dark-blue);

    font-family: 'Oswald', sans-serif;

}



.member-role {

    color: var(--gold);

    font-weight: 600;

    margin-bottom: 20px;

    display: block;

}



.member-contact {

    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid rgba(192, 192, 192, 0.2);

}



.member-contact a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--dark-blue);

    text-decoration: none;

    margin: 0 10px;

    transition: all 0.3s ease;

}



.member-contact a:hover {

    color: var(--gold);

    transform: translateY(-2px);

}



.success-message {

    display: none;

    background: linear-gradient(135deg, #00A6A6, #008080);

    color: var(--white);

    padding: 30px;

    border-radius: 15px;

    text-align: center;

    margin-top: 30px;

    animation: fadeIn 0.5s ease;

}



/* Responsive Design */

@media (max-width: 1200px) {

    .hero-container, .chart-container, .footer-content {

        grid-template-columns: 1fr;

    }

    

    .hero-video-container {

        height: 400px;

    }

    

    .video-gallery, .stats-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .contact-layout {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 992px) {

    .hero h1 { font-size: 3rem; }

    .section-title h2 { font-size: 2.5rem; }

    .benefits-grid, .stats-grid { grid-template-columns: 1fr; }

    .form-grid { grid-template-columns: 1fr; }

    nav ul { flex-direction: column; gap: 15px; }

    .footer-content { grid-template-columns: repeat(2, 1fr); }

    

    .timeline-stat {

        flex-direction: column;

        text-align: center;

    }

    

    .timeline-stat:nth-child(even) {

        flex-direction: column;

    }

    

    .timeline-content {

        margin: 20px 0;

    }

    

    .timeline-content::before {

        display: none;

    }

    

    .world-map {

        height: 300px;

    }

    

    .model-card.featured {

        transform: none;

    }

    

    .process-step::after {

        display: none;

    }

    

    .process-steps {

        flex-direction: column;

        align-items: center;

    }

}



@media (max-width: 768px) {

    .hero h1 { font-size: 2.5rem; }

    .hero-subtitle { font-size: 1.1rem; }

    .hero-btns { flex-direction: column; }

    .btn { width: 100%; justify-content: center; }

    section { padding: 80px 20px; }

    .stats-title { font-size: 2.5rem; }

    .footer-content { grid-template-columns: 1fr; }

    .video-gallery { grid-template-columns: 1fr; }

    

    .page-hero h1 {

        font-size: 2.5rem;

    }

    

    .data-filters {

        flex-direction: column;

        align-items: center;

    }

    

    .filter-btn {

        width: 100%;

        max-width: 300px;

    }

    

    .chart-box {

        padding: 20px;

    }

    

    .current-price {

        font-size: 2.5rem;

    }

    

    .price-header {

        flex-direction: column;

        gap: 20px;

        text-align: center;

    }

    

    .stats-title {

        font-size: 2.5rem;

    }

    

    .stat-item h3 {

        font-size: 2.5rem;

    }

    

    .map-region {

        padding: 8px 16px;

        font-size: 0.9rem;

    }

    

    .calculator-container {

        padding: 30px;

    }

    

    .calculator-title {

        font-size: 2rem;

    }

    

    .testimonial-card {

        padding: 30px;

    }

    

    .contact-form-container,

    .contact-info-card {

        padding: 30px;

    }

    

    .map-container {

        height: 400px;

    }

}



<style>

    /* Basic reset */

    * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

    

    body {

        font-family: 'Montserrat', sans-serif;

        background: #f5f5f5;

    }

    

    .section-container {

        max-width: 1200px;

        margin: 0 auto;

        padding: 20px;

    }

    

    /* Make sure sections are visible */

    section {

        display: block !important;

        min-height: 300px;

        margin: 20px 0;

        padding: 40px 0;

    }

    

    /* Make stats grid visible */

    .stats-grid {

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        gap: 20px;

        margin: 40px 0;

    }

    

    .stat-item {

        background: white;

        padding: 30px;

        text-align: center;

        border-radius: 10px;

        box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    }

    

    /* Ensure canvas elements are visible */

    canvas {

        width: 100% !important;

        height: 300px !important;

    }

/* Add these fixes to your existing style.css */



/* Ensure sections are visible */

section {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

}



/* Fix for stats grid spacing */

.second-grid {

    margin-top: 40px !important;

}



/* Ensure canvas elements are properly sized */

.metric-chart {

    height: 250px !important;

    position: relative;

}



.metric-chart canvas {

    width: 100% !important;

    height: 100% !important;

}



/* Fix for growth chart container */

.growth-chart-container {

    height: 400px;

    position: relative;

}



.growth-chart-container canvas {

    width: 100% !important;

    height: 100% !important;

}



/* Timeline number styling */

.timeline-numbers {

    display: flex;

    justify-content: space-between;

    margin-top: 20px;

}



.timeline-number {

    font-size: 2rem;

    color: var(--gold);

    font-weight: 800;

}



.timeline-label {

    color: var(--metallic-dark);

    font-size: 0.9rem;

}



/* CTA section styling */

.cta-section {

    background: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);

    text-align: center;

    padding: 80px 30px;

}



.cta-section h2 {

    color: var(--dark-blue);

    font-size: 2.5rem;

    margin-bottom: 30px;

}



.cta-section p {

    color: var(--dark-blue);

    font-size: 1.2rem;

    max-width: 800px;

    margin: 0 auto 40px;

    opacity: 0.9;

}



.cta-buttons {

    display: flex;

    gap: 20px;

    justify-content: center;

    flex-wrap: wrap;

}



/* Map section fix */

.map-section {

    background: var(--light-bg);

}



/* Categories section fix */

.categories-section {

    padding: 80px 30px;

}



/* Performance section fix */

.performance-section {

    padding: 80px 30px;

}



/* Growth chart section fix */

.growth-chart-section {

    background: var(--light-bg);

    padding: 80px 30px;

}



/* Ensure all elements are visible */

.platform-stats,

.growth-metrics,

.world-map,

.categories-grid,

.timeline-stats,

.performance-metrics,

.comparison-section {

    visibility: visible !important;

    opacity: 1 !important;

}



/* Fix for comparison section text */

.comparison-section .section-title h2 {

    color: white !important;

    -webkit-text-fill-color: white !important;

}



.comparison-section .section-subtitle {

    color: rgba(255,255,255,0.9) !important;

}



/* Responsive fixes */

@media (max-width: 768px) {

    .stats-grid {

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 15px !important;

    }

    

    .stat-item h3 {

        font-size: 2rem !important;

    }

    

    .metric-card {

        padding: 20px !important;

    }

    

    .growth-metrics {

        grid-template-columns: 1fr !important;

    }

    

    .performance-metrics {

        grid-template-columns: 1fr !important;

    }

    

    .comparison-grid {

        grid-template-columns: 1fr !important;

    }

    

    .timeline-content {

        padding: 20px !important;

    }

    

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    

    .btn {

        width: 100%;

        max-width: 300px;

    }

}



@media (max-width: 480px) {

    .stats-grid {

        grid-template-columns: 1fr !important;

    }

    

    .stat-item {

        padding: 20px !important;

    }

    

    .categories-grid {

        grid-template-columns: repeat(2, 1fr) !important;

    }

}