/* ==========================================
   ZONOVA - STYLE.CSS
   PARTE 1
========================================== */

/* GOOGLE FONT */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* VARIABLES */

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;
--secondary:#10b981;
--background:#07111f;
--background2:#0f172a;
--card:rgba(255,255,255,.06);
--border:rgba(255,255,255,.12);
--text:#f8fafc;
--text2:#94a3b8;
--danger:#ef4444;
--warning:#f59e0b;

--radius:18px;

--shadow:
0 10px 40px rgba(0,0,0,.35);

}

/* RESET */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Poppins",sans-serif;
background:linear-gradient(180deg,#07111f,#0b1222,#0f172a);
color:var(--text);
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
color:white;

}

ul{

list-style:none;

}

/* SCROLL */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08101d;

}

::-webkit-scrollbar-thumb{

background:#2563eb;
border-radius:20px;

}

/* NAVBAR */

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;

backdrop-filter:blur(18px);

background:rgba(5,10,20,.65);

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

}

.navbar{

max-width:1300px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 30px;

}

.logo{

font-size:32px;

font-weight:800;

letter-spacing:1px;

}

.logo span{

color:var(--secondary);

}

.navbar ul{

display:flex;

gap:35px;

}

.navbar a{

transition:.3s;

font-weight:500;

}

.navbar ul a:hover{

color:var(--secondary);

}

.active{

color:var(--secondary);

}

.btn-nav{

background:linear-gradient(90deg,var(--primary),var(--secondary));

padding:12px 26px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.btn-nav:hover{

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(16,185,129,.35);

}

/* HERO */

.hero{

min-height:100vh;

display:flex;

justify-content:space-between;

align-items:center;

padding:140px 10%;

gap:70px;

}

.hero-text{

flex:1;

}

.hero-text h1{

font-size:62px;

line-height:1.1;

margin-bottom:25px;

}

.hero-text p{

font-size:20px;

color:var(--text2);

line-height:1.8;

max-width:650px;

margin-bottom:40px;

}

.hero-chart{

flex:1;

background:rgba(255,255,255,.04);

padding:30px;

border-radius:25px;

border:1px solid rgba(255,255,255,.08);

box-shadow:var(--shadow);

}

/* BOTONES */

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

background:linear-gradient(90deg,var(--primary),var(--secondary));

padding:16px 34px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 15px 40px rgba(37,99,235,.35);

}

.btn-secondary{

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

padding:16px 34px;

border-radius:50px;

transition:.35s;

}

.btn-secondary:hover{

background:var(--primary);

}

/* HERO TITULO */

.page-hero{

padding-top:170px;

padding-bottom:80px;

text-align:center;

max-width:900px;

margin:auto;

}

.page-hero h1{

font-size:54px;

margin-bottom:20px;

}

.page-hero p{

font-size:20px;

color:var(--text2);

line-height:1.8;

}

/* PARTNERS */

.partners{

padding:80px 10%;

text-align:center;

}

.partners h2{

margin-bottom:45px;

font-size:34px;

}

.logos{

display:grid;

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

gap:20px;

}

.logos span{

background:var(--card);

padding:30px;

border-radius:18px;

border:1px solid var(--border);

font-size:20px;

font-weight:600;

transition:.35s;

}

.logos span:hover{

transform:translateY(-10px);

background:rgba(255,255,255,.1);

}

/* STATS */

.stats{

display:grid;

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

gap:25px;

padding:80px 10%;

}

.stat{

background:var(--card);

padding:40px;

border-radius:20px;

text-align:center;

border:1px solid var(--border);

transition:.3s;

}

.stat:hover{

transform:translateY(-10px);

}

.stat h3{

font-size:52px;

color:var(--secondary);

margin-bottom:10px;

}

.stat p{

color:var(--text2);

}

/* PRODUCTS */

.products{

padding:90px 10%;

}

.products h2{

text-align:center;

font-size:44px;

margin-bottom:60px;

}

.cards{

display:grid;

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

gap:30px;

}

.card{

background:var(--card);

padding:35px;

border-radius:22px;

border:1px solid var(--border);

transition:.35s;

}

.card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow);

}

.card h3{

margin-bottom:18px;

font-size:26px;

}

.card p{

color:var(--text2);

line-height:1.7;

margin-bottom:20px;

}

.card a{

color:var(--secondary);

font-weight:600;

}

/* CTA */

.cta{

padding:120px 10%;

text-align:center;

}

.cta h2{

font-size:46px;

margin-bottom:40px;

}

.cta a{

display:inline-block;

padding:18px 45px;

border-radius:50px;

background:linear-gradient(90deg,var(--primary),var(--secondary));

font-size:18px;

font-weight:600;

transition:.3s;

}

.cta a:hover{

transform:scale(1.05);

}

/* FOOTER */

footer{

margin-top:80px;

padding:70px 10%;

background:#050c18;

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

}

.footer-content{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

}

.footer-content h3{

font-size:34px;

margin-bottom:20px;

}

.footer-content h4{

margin-bottom:18px;

}

.footer-content a{

display:block;

margin:10px 0;

color:var(--text2);

transition:.3s;

}

.footer-content a:hover{

color:white;

padding-left:6px;

}

.copyright{

margin-top:50px;

text-align:center;

color:var(--text2);

}

/* ANIMACIONES */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.hero-chart{

animation:float 5s ease-in-out infinite;

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.hero-text{

animation:fadeUp 1s ease;

}

.hero-chart{

animation:
fadeUp 1.2s ease,
float 5s infinite;

}

/* ==========================================
   ZONOVA - STYLE.CSS
   PARTE 2
==========================================*/

/* ========= ADVANTAGES ========= */

.advantages{
    padding:100px 10%;
}

.advantages h2{
    text-align:center;
    font-size:42px;
    margin-bottom:60px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.grid div{
    background:var(--card);
    padding:35px;
    border-radius:20px;
    border:1px solid var(--border);
    transition:.35s;
}

.grid div:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow);
}

.grid h3{
    margin-bottom:15px;
    color:var(--secondary);
}

.grid p{
    color:var(--text2);
    line-height:1.7;
}

/* ========= CALCULADORA ========= */

.calculator,
.simulator{

    padding:100px 10%;
    text-align:center;

}

.calc-box,
.simulator-box{

    max-width:700px;
    margin:auto;

    display:flex;
    flex-direction:column;
    gap:20px;

    background:var(--card);

    padding:45px;

    border-radius:25px;

    border:1px solid var(--border);

}

.calc-box input,
.simulator-box input{

    padding:18px;

    border:none;

    outline:none;

    border-radius:12px;

    background:#111d33;

    color:white;

    font-size:16px;

}

.calc-box button,
.simulator-box button{

    padding:18px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-size:18px;

    color:white;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    transition:.3s;

}

.calc-box button:hover,
.simulator-box button:hover{

    transform:scale(1.03);

}

#result{

    margin-top:15px;

    color:var(--secondary);

}

/* ========= TESTIMONIOS ========= */

.testimonials{

    padding:100px 10%;

}

.testimonials h2{

    text-align:center;

    font-size:42px;

    margin-bottom:60px;

}

.testimonial{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:20px;

    padding:35px;

    transition:.3s;

}

.testimonial:hover{

    transform:translateY(-8px);

}

.testimonial p{

    line-height:1.8;

    color:var(--text2);

    margin-bottom:20px;

}

.testimonial span{

    color:var(--secondary);

    font-weight:600;

}

/* ========= FILTROS ========= */

.filters{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    padding:30px;

}

.filter{

    border:none;

    cursor:pointer;

    padding:12px 25px;

    border-radius:50px;

    background:#13233d;

    color:white;

    transition:.3s;

}

.filter:hover{

    background:var(--primary);

}

/* ========= INVERSIONES ========= */

.investment-grid{

    display:grid;

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

    gap:35px;

    padding:80px 10%;

}

.investment-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    padding:30px;

    transition:.35s;

}

.investment-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.investment-card h2{

    font-size:28px;

}

.investment-card p{

    color:var(--text2);

    line-height:1.7;

    margin-bottom:25px;

}

.info{

    display:flex;

    justify-content:space-between;

    color:var(--text2);

    font-size:14px;

    margin-bottom:25px;

}

.investment-card button{

    width:100%;

    border:none;

    cursor:pointer;

    padding:15px;

    border-radius:50px;

    color:white;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

}

/* ========= BADGES ========= */

.badge{

    padding:8px 15px;

    border-radius:50px;

    font-weight:600;

}

.green{

    background:#10b98122;

    color:#10b981;

}

.blue{

    background:#2563eb22;

    color:#60a5fa;

}

.orange{

    background:#f59e0b22;

    color:#fbbf24;

}

/* ========= CHART ========= */

.market{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

    padding:100px 10%;

}

.chart-box{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:20px;

    padding:30px;

}

/* ========= BENEFITS ========= */

.benefits{

    padding:100px 10%;

}

.benefits h2{

    text-align:center;

    margin-bottom:60px;

}

.benefit-grid{

    display:grid;

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

    gap:30px;

}

.benefit-grid div{

    background:var(--card);

    padding:30px;

    border-radius:18px;

    border:1px solid var(--border);

}

/* ========= FAQ ========= */

.faq{

    padding:100px 10%;

}

.faq h2{

    text-align:center;

    margin-bottom:50px;

}

.faq-item{

    background:var(--card);

    margin-bottom:20px;

    padding:30px;

    border-radius:18px;

    border:1px solid var(--border);

    transition:.3s;

}

.faq-item:hover{

    transform:translateX(5px);

}

.faq-item h3{

    margin-bottom:15px;

}

.faq-item p{

    color:var(--text2);

    line-height:1.8;

}

/* ========= ABOUT ========= */

.about{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    padding:100px 10%;

}

.about-image img{

    border-radius:25px;

}

.about h2{

    font-size:42px;

    margin-bottom:20px;

}

.about p{

    line-height:2;

    color:var(--text2);

}

/* ========= MISSION ========= */

.mission{

    display:grid;

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

    gap:30px;

    padding:70px 10%;

}

.mission-card{

    background:var(--card);

    padding:35px;

    border-radius:20px;

    border:1px solid var(--border);

}

/* ========= TIMELINE ========= */

.timeline{

    padding:100px 10%;

}

.timeline h2{

    text-align:center;

    margin-bottom:60px;

}

.timeline-container{

    display:grid;

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

    gap:25px;

}

.timeline-item{

    background:var(--card);

    padding:30px;

    border-radius:18px;

    text-align:center;

    border:1px solid var(--border);

}

.timeline-item h3{

    color:var(--secondary);

    margin-bottom:15px;

}

/* ========= TEAM ========= */

.team{

    padding:100px 10%;

}

.team h2{

    text-align:center;

    margin-bottom:60px;

}

.team-grid{

    display:grid;

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

    gap:35px;

}

.member{

    background:var(--card);

    border:1px solid var(--border);

    padding:30px;

    border-radius:20px;

    text-align:center;

    transition:.35s;

}

.member:hover{

    transform:translateY(-10px);

}

.member img{

    width:150px;

    height:150px;

    border-radius:50%;

    object-fit:cover;

    margin:auto;

    margin-bottom:20px;

}

.member span{

    color:var(--secondary);

}

/* ==========================================
   ZONOVA - STYLE.CSS
   PARTE 3A.1
   Contacto · Soporte · Newsletter
========================================== */

/* ========= CONTACTO ========= */

.contact-section{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    padding:100px 10%;
    align-items:start;
}

.contact-form,
.contact-info{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:24px;
    padding:40px;
    backdrop-filter:blur(12px);
}

.contact-form h2,
.contact-info h2{
    margin-bottom:30px;
    font-size:32px;
}

.contact-form form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-form input,
.contact-form textarea{

    width:100%;

    background:#101d33;

    color:white;

    border:1px solid transparent;

    outline:none;

    padding:18px;

    border-radius:14px;

    font-size:16px;

    transition:.3s;

}

.contact-form textarea{

    resize:vertical;
    min-height:180px;

}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.contact-form button{

    border:none;

    cursor:pointer;

    padding:18px;

    border-radius:50px;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    color:white;

    font-size:17px;

    font-weight:600;

    transition:.3s;

}

.contact-form button:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(37,99,235,.25);

}

/* ========= INFO ========= */

.info-box{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:22px;

    margin-bottom:20px;

    transition:.3s;

}

.info-box:hover{

    transform:translateX(8px);

}

.info-box h3{

    margin-bottom:12px;

    color:var(--secondary);

}

.info-box p{

    color:var(--text2);

    line-height:1.8;

}

/* ========= SOPORTE ========= */

.support{

    padding:100px 10%;

}

.support h2{

    text-align:center;

    font-size:42px;

    margin-bottom:55px;

}

.support-grid{

    display:grid;

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

    gap:30px;

}

.support-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.support-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.support-card h3{

    font-size:26px;

    margin-bottom:18px;

}

.support-card p{

    color:var(--text2);

    line-height:1.8;

    margin-bottom:25px;

}

.support-card button{

    border:none;

    cursor:pointer;

    padding:14px 30px;

    border-radius:50px;

    color:white;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    transition:.3s;

}

.support-card button:hover{

    transform:scale(1.05);

}

/* ========= MAPA ========= */

.map-section{

    padding:100px 10%;

}

.map-section h2{

    text-align:center;

    font-size:42px;

    margin-bottom:50px;

}

.map{

    overflow:hidden;

    border-radius:25px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.map iframe{

    width:100%;

    height:500px;

    border:none;

}

/* ========= REVIEWS ========= */

.reviews{

    padding:100px 10%;

}

.reviews h2{

    text-align:center;

    font-size:42px;

    margin-bottom:55px;

}

.review-grid{

    display:grid;

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

    gap:30px;

}

.review{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    padding:35px;

    transition:.35s;

    font-size:22px;

}

.review:hover{

    transform:translateY(-10px);

}

.review p{

    color:var(--text2);

    margin:20px 0;

    line-height:1.8;

    font-size:16px;

}

.review span{

    color:var(--secondary);

    font-weight:600;

}

/* ========= NEWSLETTER ========= */

.newsletter{

    padding:120px 10%;

    text-align:center;

}

.newsletter h2{

    font-size:46px;

    margin-bottom:20px;

}

.newsletter p{

    max-width:700px;

    margin:auto;

    color:var(--text2);

    line-height:1.8;

    margin-bottom:40px;

}

.newsletter-box{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.newsletter-box input{

    width:420px;

    max-width:100%;

    padding:18px;

    border:none;

    outline:none;

    border-radius:50px;

    background:#101d33;

    color:white;

}

.newsletter-box button{

    border:none;

    cursor:pointer;

    padding:18px 35px;

    border-radius:50px;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    color:white;

    font-weight:600;

    transition:.3s;

}

.newsletter-box button:hover{

    transform:translateY(-4px);

}

/* ==========================================
   ZONOVA - STYLE.CSS
   PARTE 3A.2
   Efectos · Animaciones · Back to Top
========================================== */

/* ========= EFECTOS DE BRILLO ========= */

.hero::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,
    rgba(37,99,235,.18),
    transparent 70%);
    top:-150px;
    right:-150px;
    border-radius:50%;
    z-index:-1;
}

.hero::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:radial-gradient(circle,
    rgba(16,185,129,.18),
    transparent 70%);
    bottom:-120px;
    left:-120px;
    border-radius:50%;
    z-index:-1;
}

.hero{
    position:relative;
    overflow:hidden;
}

/* ========= EFECTO GLASS ========= */

.card,
.investment-card,
.stat,
.testimonial,
.member,
.review,
.info-box,
.support-card,
.timeline-item,
.mission-card{

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

/* ========= HOVER SUAVE ========= */

button,
.btn-nav,
.btn-primary,
.btn-secondary,
.cta a{

    transition:
    transform .3s,
    box-shadow .3s,
    background .3s;

}

button:hover,
.btn-nav:hover,
.btn-primary:hover,
.btn-secondary:hover,
.cta a:hover{

    box-shadow:
    0 15px 35px rgba(37,99,235,.25);

}

/* ========= IMÁGENES ========= */

.about-image img,
.member img{

    transition:.4s;

}

.about-image img:hover{

    transform:scale(1.03);

}

.member:hover img{

    transform:scale(1.08);

}

/* ========= ANIMACIONES ========= */

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:1s;

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:1s;

}

.fade-left.show,
.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/* ========= TARJETAS ========= */

.card:hover,
.investment-card:hover,
.member:hover,
.review:hover,
.support-card:hover{

    border-color:rgba(37,99,235,.35);

}

/* ========= BOTÓN VOLVER ARRIBA ========= */

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );

    color:white;

    font-size:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

}

#backToTop:hover{

    transform:translateY(-5px);

}

/* ========= SOMBRAS ========= */

.card,
.stat,
.review,
.member,
.support-card,
.contact-form,
.contact-info{

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

}

.card:hover,
.stat:hover,
.review:hover,
.member:hover,
.support-card:hover{

    box-shadow:
    0 25px 60px rgba(0,0,0,.35);

}

/* ========= SEPARACIÓN ========= */

section{

    position:relative;

}

section::after{

    content:"";

    display:block;

    width:80px;

    height:3px;

    background:linear-gradient(
    90deg,
    var(--primary),
    var(--secondary)
    );

    margin:80px auto 0;

    opacity:.12;

}

/* ========= TEXTO SELECCIONADO ========= */

::selection{

    background:var(--primary);

    color:white;

}

/* ========= INPUTS ========= */

input::placeholder,
textarea::placeholder{

    color:#7c8ca7;

}

/* ========= TRANSICIÓN GENERAL ========= */

*{

    transition:
    border-color .25s,
    background-color .25s,
    color .25s;

}

/* ========= EFECTO HOVER EN NAV ========= */

.navbar ul a{

    position:relative;

}

.navbar ul a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.3s;

}

.navbar ul a:hover::after,
.navbar ul .active::after{

    width:100%;

}

/* ========= SCROLL ========= */

.reveal{

    opacity:0;

    transform:translateY(50px);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

    transition:1s;

}

/* ========= LOADER (opcional) ========= */

.loader{

    position:fixed;

    inset:0;

    background:#07111f;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.loader::before{

    content:"";

    width:60px;

    height:60px;

    border-radius:50%;

    border:6px solid rgba(255,255,255,.15);

    border-top-color:var(--secondary);

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ========= HERO CHART ========= */

.hero-chart canvas{

    width:100% !important;

    height:380px !important;

}

/* ========= MARKET CHART ========= */

.chart-box canvas{

    width:100% !important;

    height:400px !important;

}

/* ==========================================
   RESPONSIVE
========================================== */

/* -------- 1200px -------- */

@media (max-width:1200px){

.hero{

grid-template-columns:1fr;
display:grid;
text-align:center;

}

.hero-text{

order:1;

}

.hero-chart{

order:2;

margin:auto;
width:100%;

}

.market{

grid-template-columns:1fr;

}

.contact-section{

grid-template-columns:1fr;

}

.about{

grid-template-columns:1fr;

}

.footer-content{

grid-template-columns:1fr 1fr;

}

}


/* -------- 992px -------- */

@media (max-width:992px){

.navbar{

padding:18px;

}

.navbar ul{

gap:18px;

}

.hero-text h1{

font-size:48px;

}

.page-hero h1{

font-size:42px;

}

.stats{

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

}

.timeline-container{

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

}

.mission{

grid-template-columns:1fr;

}

}


/* -------- 768px -------- */

@media (max-width:768px){

.navbar{

flex-direction:column;

gap:20px;

}

.navbar ul{

flex-wrap:wrap;

justify-content:center;

}

.hero{

padding-top:170px;

}

.hero-text h1{

font-size:38px;

}

.hero-text p{

font-size:17px;

}

.page-hero{

padding-top:180px;

}

.page-hero h1{

font-size:34px;

}

.stats{

grid-template-columns:1fr;

}

.logos{

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

}

.cards{

grid-template-columns:1fr;

}

.investment-grid{

grid-template-columns:1fr;

}

.team-grid{

grid-template-columns:1fr;

}

.review-grid{

grid-template-columns:1fr;

}

.support-grid{

grid-template-columns:1fr;

}

.benefit-grid{

grid-template-columns:1fr;

}

.grid{

grid-template-columns:1fr;

}

.footer-content{

grid-template-columns:1fr;

text-align:center;

}

.newsletter-box{

flex-direction:column;

align-items:center;

}

.newsletter-box input{

width:100%;

}

.chart-box canvas{

height:280px !important;

}

}


/* -------- 576px -------- */

@media (max-width:576px){

.hero{

padding:150px 25px 60px;

}

.hero-text h1{

font-size:30px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;
text-align:center;

}

.page-hero h1{

font-size:28px;

}

.products h2,
.advantages h2,
.testimonials h2,
.team h2,
.reviews h2,
.support h2,
.market h2,
.newsletter h2,
.calculator h2,
.simulator h2{

font-size:30px;

}

.stat h3{

font-size:38px;

}

.card,
.investment-card,
.review,
.member,
.support-card{

padding:25px;

}

.contact-form,
.contact-info{

padding:25px;

}

.map iframe{

height:320px;

}

}