:root {

    --primary: #00d4ff;
    --primary-dark: #0099cc;

    --black: #000000;
    --dark: #050505;
    --dark-2: #0d1117;

    --white: #ffffff;
    --text: #c7c7c7;

}

/* ==========================
RESET
========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    background: #000;
    color: #fff;

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

    overflow-x: hidden;

}

/* ==========================
SCROLLBAR
========================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {

    background: var(--primary);

    border-radius: 10px;
}

/* ==========================
HEADER
========================== */

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    padding: 20px 6%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    transition: .4s;

    background:
        linear-gradient(to bottom,
            rgba(0,0,0,.95),
            transparent);

}

.logo img {

    width: 180px;

    filter:
        drop-shadow(0 0 8px var(--primary))
        drop-shadow(0 0 25px var(--primary));

}

nav ul {

    display: flex;

    gap: 35px;

    list-style: none;

}

nav ul li a {

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    letter-spacing: 2px;

    transition: .3s;

}

nav ul li a:hover {

    color: var(--primary);

}

.language-switch {

    display: flex;

    gap: 10px;

}

.language-switch button {

    width: 45px;
    height: 40px;

    cursor: pointer;

    border: none;

    background: transparent;

    color: #fff;

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

}

.language-switch button.active {

    background: var(--primary);

    color: #000;

}

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

.hero {

    position: relative;

    height: 100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(0,0,0,.55),
            rgba(0,0,0,.82)
        ),
        url('../images/hero-bg.webp');

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

}

.hero-overlay {

    position: absolute;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at center,
            transparent,
            rgba(0,0,0,.6)
        );

}

.hero-content {

    position: relative;

    z-index: 2;

    max-width: 1000px;

}

.hero-logo{

    width:220px;

    margin-bottom:30px;

    filter:
        drop-shadow(0 0 15px var(--primary))
        drop-shadow(0 0 40px var(--primary));

    animation:logoFloat 6s ease-in-out infinite;

}

@keyframes logoFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

.hero-title span{

    color:var(--primary);

}

.hero-tagline {

    color: var(--primary);

    letter-spacing: 4px;

    font-size: 14px;

}
.hero-title{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:8px;

    margin:0 auto 35px;

    width:100%;

    line-height:.95;

}

.hero-title .line1{

    display:block;

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

    font-size:5.2rem;

    font-weight:700;

    color:#fff;

    text-transform:uppercase;

    text-shadow:0 0 15px rgba(255,255,255,.30);

}

.hero-title .line2{

    display:block;

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

    font-size:6rem;

    font-weight:700;

    color:var(--primary);

    text-transform:uppercase;

    text-shadow:0 0 25px rgba(0,212,255,.45);

}

.hero-text {

    max-width: 700px;

    margin: auto;

    color: #d6d6d6;

    line-height: 1.8;

    font-size: 18px;

}

/* ==========================
BUTTONS
========================== */

.hero-buttons {

    margin-top: 40px;

    display: flex;
    justify-content: center;
    gap: 20px;

}

.btn-primary,
.btn-secondary {

    min-width: 240px;

    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    transition: .4s;

    font-weight: 600;

}

.btn-primary {

    background: var(--primary);

    color: #000;

}

.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 0 20px var(--primary),
        0 0 50px var(--primary);

}

.btn-secondary {

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

    color: #fff;

}

.btn-secondary:hover {

    border-color: var(--primary);

    color: var(--primary);

}

/* ==========================
SECTIONS
========================== */

section {

    padding: 120px 8%;

}

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

.about{

    display:grid;

    grid-template-columns:480px minmax(0,1fr);

    gap:35px;

    align-items:center;

}
.about-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.about-image img{

    width:100%;

    max-width:500px;

    aspect-ratio:5/4;

    object-fit:cover;

    border-radius:18px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.45),

        0 0 30px rgba(0,212,255,.18);

    transition:.45s;

}

.about-image img:hover{

    transform:scale(1.02);

}
.about-content{

    width:100%;

    max-width:none;

}
.about-content span{

    color:var(--primary);

    letter-spacing:4px;

    font-size:15px;

    font-weight:600;

    text-transform:uppercase;

}

.about-content h2{

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

    font-size:56px;

    line-height:1.15;

    margin:18px 0 30px;

}

.about-content p{

    width:100%;

    max-width:100%;

    color:var(--text);

    font-size:20px;

    line-height:1.9;

    margin:0 0 22px 0;

    text-align:justify;

}

/* ==========================
TITLES
========================== */

.section-title {

    text-align: center;

    margin-bottom: 60px;

}

.section-title h2 {

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

    font-size: 52px;

}

/* ==========================
PROJECTS
========================== */

.project-grid {

    display: grid;

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

    gap: 30px;

}

.project-card {

    padding: 40px;

    background: #0d1117;

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

    transition: .4s;

}

.project-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary);

}

.project-card h3 {

    color: var(--primary);

    margin-bottom: 15px;

}

/* ==========================
FORMS
========================== */

form {

    display: flex;

    flex-direction: column;

    gap: 20px;

    max-width: 700px;

}

input,
textarea {

    padding: 18px;

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

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

    color: #fff;

}

textarea {

    min-height: 180px;

}

button {

    height: 60px;

    border: none;

    cursor: pointer;

    background: var(--primary);

    color: #000;

    font-weight: bold;

}

/* ==========================
EVENTS
========================== */

.event-list {

    display: grid;

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

    gap: 25px;

}

.event-card {

    padding: 40px;

    background: #0d1117;

}

/* ==========================
INVESTORS
========================== */

.investors {

    background:
        linear-gradient(
            rgba(0,0,0,.85),
            rgba(0,0,0,.90)
        ),
        url('../images/hero-bg.png');

    background-size: cover;

    background-position: center;

    text-align: center;

}

.investors-content {

    max-width: 900px;

    margin: auto;

}

.investors h2 {

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

    font-size: 55px;

}

.investors p {

    margin-top: 20px;

    color: #ddd;

}

.investor-buttons {

    margin-top: 40px;

    display: flex;
    justify-content: center;
    gap: 20px;

}

.investor-buttons a {

    text-decoration: none;

    padding: 18px 35px;

    background: var(--primary);

    color: #000;

    font-weight: bold;

}

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

.contact-form{

    width:100%;

    max-width:1100px;

    margin:60px auto;

}

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

    width:100%;

    height:64px;

    padding:0 22px;

    background:#101114;

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

    border-radius:10px;

    color:var(--white);

    font-size:17px;

    box-sizing:border-box;

    transition:.35s;

}

.contact-form textarea{

    height:180px;

    padding:22px;

    resize:vertical;

}
/*==================================
CHECKBOX
==================================*/

.contact-form .checkbox{

    display:flex;

    align-items:center;

    gap:12px;

    margin:25px 0;

    cursor:pointer;

}

.contact-form .checkbox input[type="checkbox"]{

    width:20px;

    height:20px;

    min-width:20px;

    accent-color:var(--primary);

    cursor:pointer;

}

.contact-form .checkbox span{

    color:var(--text);

    font-size:16px;

    line-height:1.5;

}
/* ==========================
FOOTER
========================== */
.grid-2{

    display:grid;

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

    gap:25px;

    margin-bottom:25px;

}

footer {

    padding: 60px;

    text-align: center;

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

}

footer img {

    width: 180px;

    margin-bottom: 20px;

}

footer p {

    color: #999;

}
select {

    width: 100%;

    padding: 18px;

    background: var(--dark);

    border: 1px solid rgba(0,212,255,.20);

    color: #fff;

    font-size: 15px;

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

    outline: none;

    transition: .4s;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    cursor: pointer;

    border-radius: 6px;

}

select:hover {

    border-color: var(--primary);

}

select:focus {

    border-color: var(--gold);

    box-shadow:
        0 0 15px rgba(212,175,55,.25);

}

select option {

    background: #111827;

    color: #fff;

}
/* ==========================
UPLOAD PREMIUM
========================== */

.upload-box {

    width: 100%;

}

.upload-box label {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 70px;

    border: 2px dashed rgba(0,212,255,.30);

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

    color: var(--primary);

    cursor: pointer;

    transition: .4s;

    font-weight: 600;

}

.upload-box label:hover {

    border-color: var(--gold);

    color: var(--gold);

    background: rgba(212,175,55,.05);

}

.upload-box input {

    display: none;

}
@media(max-width:991px){

    .about{

        gap:50px;

    }

    .about-content{

        width:100%;

        max-width:none;

    }

    .about-content h2{

        font-size:42px;

    }

.about-content p{

    width:100%;

    max-width:100%;

    color:var(--text);

    font-size:20px;

    line-height:1.9;

    margin:0 0 22px 0;

    text-align:justify;

}
}
@media(max-width:768px){

    .about{

        gap:35px;

    }

    .about-content h2{

        font-size:34px;

    }

    .about-content p{

        font-size:16px;

        line-height:1.8;

    }

    .about-image img{

        max-width:100%;

    }

}
/*==================================
MEDIA CENTER
==================================*/

.media{

    background:#050505;

}

.mediaSwiper{

    margin-top:60px;

    overflow:hidden;

}

.mediaSwiper .swiper-slide{

    border-radius:18px;

    overflow:hidden;

    cursor:pointer;

}

.mediaSwiper img{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

    transition:.45s;

}

.mediaSwiper img:hover{

    transform:scale(1.05);

}

.swiper-button-next,
.swiper-button-prev{

    color:var(--primary);

}

.swiper-pagination-bullet{

    background:#ffffff;

    opacity:.5;

}

.swiper-pagination-bullet-active{

    background:var(--primary);

    opacity:1;

}
/*==================================
FOOTER SOCIAL
==================================*/

.footer-social{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;

    margin:35px 0;

}

.footer-social a{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    border-radius:50%;

    color:#ffffff;

    font-size:22px;

    text-decoration:none;

    transition:.35s;

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

}

.footer-social a:hover{

    background:var(--primary);

    color:#050505;

    border-color:var(--primary);

    transform:translateY(-6px);

    box-shadow:0 0 25px rgba(0,212,255,.45);

}

/*==================================
VIDEOS
==================================*/

.media-video{

    padding:100px 0;

}

.videoSwiper{

    width:90%;

    margin:auto;

}

.video-card{

    position:relative;

    width:100%;

    max-width:340px;

    margin:auto;

    overflow:hidden;

    border-radius:16px;

    cursor:pointer;

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

}

.video-card img{

    width:100%;

    height:200px;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.video-card:hover img{

    transform:scale(1.08);

}

.play-button{

    position:absolute;

    top:50%;

    left:50%;

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

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(0,0,0,.60);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.play-button i{

    color:#fff;

    font-size:28px;

}

.video-card:hover .play-button{

    background:var(--primary);

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

}