/* ===================================================
   SCORPION SOLUTIONS
   STYLE.CSS
=================================================== */

html{

    overflow-x:hidden;

}

body{

    overflow-x:hidden;
    width:100%;

}

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

:root{

    --primary:#2F80ED;
    --secondary:#56CCF2;
    --dark:#050816;
    --dark2:#0B1120;
    --card:rgba(255,255,255,.05);
    --white:#ffffff;
    --gray:#C5C5C5;
    --border:rgba(255,255,255,.08);

}

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--dark);
    color:white;
    overflow-x:hidden;

}

/* Scroll */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(var(--primary),var(--secondary));
    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#08101f;

}

/* Fondo */

body::before{

    content:"";

    position:fixed;

    width:900px;

    height:900px;

    background:#2F80ED;

    filter:blur(220px);

    opacity:.15;

    top:-350px;

    left:-250px;

    z-index:-3;

}

body::after{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    background:#56CCF2;

    filter:blur(220px);

    opacity:.12;

    right:-250px;

    bottom:-250px;

    z-index:-3;

}

/* ================= NAVBAR ================= */

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    transition:.4s;

    background-color: rgba(4, 13, 26, 0.85); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

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

header.active{

    backdrop-filter:blur(20px);

    background:rgba(5,8,22,.75);

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

}

nav{

    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 40px;

}

.logo{

    font-size:26px;

    font-weight:700;

}

.logo span{

    color:var(--primary);

}

nav ul{

    display:flex;

    gap:40px;

    list-style:none;

}

nav a{

    color:white;

    text-decoration:none;

    transition:.35s;

}

nav a:hover{

    color:var(--secondary);

}

.btn-nav{

    background:linear-gradient(135deg,#2F80ED,#56CCF2);

    padding:14px 28px;

    border-radius:40px;

    font-weight:600;

    box-shadow:0 0 30px rgba(47,128,237,.4);

}

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

#inicio{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    max-width:1400px;

    margin:auto;

    padding:120px 40px;

    gap:70px;

}

.subtitle{

    color:#56CCF2;

    letter-spacing:4px;

    margin-bottom:20px;

    font-weight:600;

}

.hero-left h1{

    font-size:72px;
    line-height:1.1;
    margin-bottom:30px;

}

.hero-left h1 span{

    color:#56CCF2;

}

.hero-left p{

    color:#B7B7B7;

    line-height:32px;

    font-size:18px;

    max-width:600px;

}

.hero-buttons{

    margin-top:45px;

    display:flex;

    gap:20px;

}

p{

    color:#B7B7B7;

    font-size:20px;

    line-height:36px;

}

.btn-primary{

    background:linear-gradient(135deg,#2F80ED,#56CCF2);

    color:white;

    text-decoration:none;

    padding:18px 38px;

    border-radius:60px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 0 40px rgba(47,128,237,.4);

}

.btn-primary:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 60px rgba(47,128,237,.5);

}

.btn-secondary{

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

    color:white;

    text-decoration:none;

    padding:18px 38px;

    border-radius:60px;

    backdrop-filter:blur(20px);

}

/* ================= Cards Hero ================= */

.hero-right{

    position:relative;

    /* display:flex; */

    justify-content:center;

    align-items:center;

}

.floating-card{

    width:330px;

    padding:35px;

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

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

    backdrop-filter:blur(25px);

    border-radius:30px;

    margin:20px;

    transition:.45s;

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

}

.floating-card:hover{

    transform:translateY(-12px);

    border-color:#2F80ED;

    box-shadow:0 0 50px rgba(47,128,237,.25);

}

.floating-card h3{

    margin-bottom:18px;

    font-size:26px;

}

.floating-card p{

    color:#BDBDBD;

    line-height:28px;

}

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

.title{

    text-align:center;

    margin-bottom:70px;

}

.title span{

    color:#56CCF2;

    letter-spacing:3px;

    font-size:14px;

}

.title h2{

    margin-top:15px;

    font-size:50px;

}

.title p{

    margin-top:15px;

    color:#BBBBBB;

}

/*=========================================
        QUIÉNES SOMOS
=========================================*/

#company{

    max-width:1400px;

    margin:auto;

    padding:140px 40px;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:80px;

    align-items:center;

}

.company-left h2{

    font-size:56px;

    margin:20px 0 30px;

    line-height:1.15;

}

.company-left p{

    color:#BFC7D5;

    line-height:32px;

    margin-bottom:22px;

    font-size:20px;

}

.company-left strong{

    color:#56CCF2;

}

.company-right{

    display:grid;

    gap:25px;

}

.company-card{

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

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

    border-radius:25px;

    padding:35px;

    backdrop-filter:blur(18px);

    transition:.4s;

}

.company-card:hover{

    transform:translateY(-10px);

    border-color:#56CCF2;

    box-shadow:0 20px 50px rgba(47,128,237,.25);

}

.company-card i{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(135deg,#2F80ED,#56CCF2);

    font-size:28px;

    color:white;

    margin-bottom:25px;

}

.company-card h3{

    margin-bottom:15px;

    font-size:24px;

}


.company-card p{

    color:#C7D0DD;

    line-height:28px;

}

/*=========================================
        NUESTRA HISTORIA
=========================================*/

#history{

    max-width:1400px;

    margin:auto;

    padding:140px 40px;

}

.timeline{

    position:relative;

    margin-top:90px;

    max-width:950px;

    margin-left:auto;

    margin-right:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:40px;

    top:0;

    width:4px;

    height:100%;

    background:linear-gradient(
        #2F80ED,
        #56CCF2
    );

    border-radius:20px;

}

.timeline-item{

    position:relative;

    display:flex;

    gap:35px;

    margin-bottom:70px;

}

.timeline-icon{

    min-width:80px;

    height:80px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2F80ED,
        #56CCF2
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:32px;

    z-index:2;

    box-shadow:0 0 35px rgba(47,128,237,.45);

}

.timeline-content{

    flex:1;

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

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

    backdrop-filter:blur(20px);

    border-radius:25px;

    padding:35px;

    transition:.4s;

}

.timeline-content:hover{

    transform:translateY(-8px);

    border-color:#56CCF2;

    box-shadow:0 20px 50px rgba(47,128,237,.25);

}

.timeline-content h3{

    font-size:28px;

    margin-bottom:18px;

}

.timeline-content p{

    color:#BFC7D5;

    line-height:30px;

}

/*======================================
        MISION Y VISION
======================================*/

#mission{

    padding:140px 8%;

}

.mission-grid{

    margin-top:70px;

    display:grid;

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

    gap:35px;

}

.mission-card{

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

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

    backdrop-filter:blur(20px);

    border-radius:30px;

    padding:45px;

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.mission-card:hover{

    transform:translateY(-12px);

    border-color:#56CCF2;

    box-shadow:0 20px 60px rgba(47,128,237,.30);

}

.mission-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(47,128,237,.08),
        transparent
    );

    opacity:0;

    transition:.4s;

}

.mission-card:hover::before{

    opacity:1;

}

.mission-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    margin-bottom:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#2F80ED,#56CCF2);

    box-shadow:0 0 35px rgba(47,128,237,.45);

}

.mission-icon i{

    font-size:38px;

    color:white;

}

.mission-card h3{

    font-size:34px;

    margin-bottom:20px;

}

.mission-card p{

    color:#C5C5C5;

    line-height:30px;

    margin-bottom:30px;

}

.mission-card ul{

    list-style:none;

}

.mission-card li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#E4E4E4;

    font-size:17px;

}

.mission-card li i{

    color:#56CCF2;

}

/*======================================
            VALORES
======================================*/

#values{

    padding:140px 8%;

}

.values-grid{

    margin-top:70px;

    display:grid;

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

    gap:30px;

}

.value-card{

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

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

    backdrop-filter:blur(20px);

    border-radius:28px;

    padding:40px;

    text-align:center;

    transition:.4s;

}

.value-card:hover{

    transform:translateY(-12px);

    border-color:#56CCF2;

    box-shadow:0 20px 60px rgba(47,128,237,.25);

}

.value-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#2F80ED,#56CCF2);

    box-shadow:0 0 30px rgba(47,128,237,.35);

}

.value-icon i{

    font-size:34px;

    color:white;

}

.value-card h3{

    margin-bottom:18px;

    font-size:28px;

}

.value-card p{

    color:#C5C5C5;

    line-height:30px;

}

/* ================= SERVICES ================= */

#servicios{

    max-width:1400px;

    margin:auto;

    padding:120px 40px;

}

.services{

    display:grid;

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

    gap:30px;

}

.card{

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

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

    border-radius:30px;

    padding:45px;

    transition:.4s;

    backdrop-filter:blur(20px);

}

.card:hover{

    transform:translateY(-15px);

    box-shadow:0 20px 60px rgba(47,128,237,.25);

    border-color:#2F80ED;

}

.card i{

    font-size:55px;

    color:#56CCF2;

    margin-bottom:25px;

}

.card h3{

    margin-bottom:20px;

}

.card p{

    color:#BDBDBD;

    line-height:28px;

}
/*====================================================
                PRODUCTOS
====================================================*/

#productos{

    max-width:1400px;
    margin:auto;
    padding:120px 40px;

}

.products{

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

}

.product{

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;

}

.product.reverse{

    direction:rtl;

}

.product.reverse .product-info{

    direction:ltr;

}

.product-image{

    display:flex;
    justify-content:center;

}

.product-image img{

    width:100%;
    max-width:520px;

    border-radius:30px;

    transition:.5s;

    filter:drop-shadow(0 20px 40px rgba(47,128,237,.25));

}

.product-image img:hover{

    transform:scale(1.05) rotate(-2deg);

}

.product-info h3{

    font-size:46px;
    margin-bottom:20px;

}

.product-info p{

    color:#BBBBBB;
    line-height:30px;
    margin-bottom:30px;

}

.product-info ul{

    list-style:none;
    margin-bottom:35px;

}

.product-info ul li{

    margin:16px 0;
    color:#DDDDDD;

}

.product-info i{

    color:#56CCF2;
    margin-right:10px;

}

/*====================================================
                ESTADISTICAS
====================================================*/

#stats{

    margin:120px auto;

    max-width:1200px;

    display:grid;

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

    gap:25px;

    padding:0 40px;

}

.stat{

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

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

    backdrop-filter:blur(25px);

    border-radius:25px;

    padding:50px;

    text-align:center;

    transition:.35s;

}

.stat:hover{

    transform:translateY(-12px);

    border-color:#2F80ED;

    box-shadow:0 20px 50px rgba(47,128,237,.2);

}

.stat h2{

    font-size:58px;

    color:#56CCF2;

}

.stat p{

    margin-top:10px;

    color:#BBBBBB;

}

/*====================================================
                TECNOLOGIAS
====================================================*/
/*==========================
      TECH NETWORK
===========================*/

#tech{

padding:140px 8%;

overflow:hidden;

}

.tech-network{

width:800px;

height:520px;

margin:auto;

position:relative;

}

.network-lines{

position:absolute;

width:100%;

height:100%;

}

.network-lines line{

stroke:#2f80ed55;

stroke-width:2;

stroke-dasharray:8;

animation:dash 12s linear infinite;

}

@keyframes dash{

to{

stroke-dashoffset:-120;

}

}

/* CENTRO */

.center-node {
    position: absolute;

    /* Centro exacto del contenedor */
    left: 50%;
    top: 50%;

    /* Lo centra perfectamente */
    transform: translate(-50%, -50%);

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: #172131;

    border: 2px solid #2f80ed;

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

    z-index: 100;

    box-shadow: 0 0 35px rgba(47,128,237,.35);

    animation: none; /* importante */
}

.center-node img{

width:65px;

margin-bottom:10px;

}

.center-node h3{

margin:0;

}

.center-node span{

color:#58C8FF;

}

/* TECNOLOGÍAS */

.tech-item{

position:absolute;

width:95px;

height:95px;

border-radius:20px;

background:#172131;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

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

transition:.4s;

}

.tech-item img{

    width:45px;
    height:45px;

    object-fit:contain;

    background:white;

    border-radius:50%;
    
    margin-bottom:8px;

    padding:8px;

}

.tech-item p{

font-size:13px;

margin:0;

}

.tech-item:hover{

transform:translateY(-10px) scale(1.08);

box-shadow:0 0 25px rgba(47,128,237,.45);

border-color:#58C8FF;

}

/* POSICIONES */

.docker{

top:0;

left:50%;

transform:translateX(-50%);

}

.laravel{

left:150px;

top:90px;

}

.python{

right:150px;

top:90px;

}

.angular{

left:70px;

top:220px;

}

.flutter{

right:70px;

top:220px;

}

.tensorflow{

left:220px;

bottom:20px;

}

.aws{

right:220px;

bottom:20px;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 25px rgba(47,128,237,.30);

    }

    50%{

        box-shadow:0 0 60px rgba(47,128,237,.65);

    }

    100%{

        box-shadow:0 0 25px rgba(47,128,237,.30);

    }

}

/* Responsive */

@media(max-width:900px){

.tech-network{

    width: 800px;
    height: 520px;

    position: relative;

    margin: 0 auto;

}

}

@media(max-width:700px){

.tech-network{

transform:scale(.55);

height:420px;

}

}

/*==========================
TECNOLOGIAS MOBILE
==========================*/

.tech-mobile{

    display:none;

}


/*====================================
        PROCESS
====================================*/

#process{

    padding:140px 8%;

}

.process-container{

    margin-top:80px;

    position:relative;

    display:grid;

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

    gap:30px;

}

.process-line{

    position:absolute;

    top:65px;

    left:8%;

    right:8%;

    height:3px;

    background:linear-gradient(
        90deg,
        #1f6feb,
        #57C7FF,
        #1f6feb
    );

    z-index:0;

    border-radius:50px;

}

.process-card{

    position:relative;

    z-index:2;

    background:#172131;

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

    border-radius:25px;

    padding:40px 30px;

    text-align:center;

    transition:.45s;

    overflow:hidden;

}

.process-card:hover{

    transform:translateY(-15px);

    border-color:#57C7FF;

    box-shadow:0 20px 60px rgba(31,111,235,.35);

}

.number{

    position:absolute;

    right:20px;

    top:15px;

    font-size:55px;

    font-weight:800;

    color:rgba(255,255,255,.05);

}

.icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #1f6feb,
        #57C7FF
    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    box-shadow:0 0 30px rgba(31,111,235,.45);

}

.process-card h3{

    margin-bottom:18px;

    font-size:28px;

}

.process-card p{

    color:#BFC7D5;

    line-height:28px;

}

.process-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(87,199,255,.08),
        transparent
    );

    opacity:0;

    transition:.4s;

}

.process-card:hover::before{

    opacity:1;

}

@media(max-width:1000px){

.process-container{

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

}

.process-line{

display:none;

}

}

@media(max-width:700px){

.process-container{

grid-template-columns:1fr;

}

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

#testimonials{

    max-width:1400px;
    margin:auto;
    padding:120px 40px;

}

.testimonial-container{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.testimonial{

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(25px);
    border-radius:25px;
    padding:40px;
    transition:.4s;

}

.testimonial:hover{

    transform:translateY(-12px);
    border-color:#2F80ED;
    box-shadow:0 20px 60px rgba(47,128,237,.25);

}

.testimonial i{

    font-size:40px;
    color:#56CCF2;
    margin-bottom:20px;

}

.testimonial p{

    color:#CCCCCC;
    line-height:30px;
    margin-bottom:25px;

}

.testimonial h4{

    color:white;

}

/*====================================
            CIERRE
====================================*/

#cierre{

    padding:140px 8%;

}

.cierre-container{

    max-width:1000px;

    margin:auto;

    text-align:center;

    padding:80px 60px;

    background:linear-gradient(
        145deg,
        rgba(47,128,237,.10),
        rgba(86,204,242,.05)
    );

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

    border-radius:35px;

    backdrop-filter:blur(20px);

    position:relative;

    overflow:hidden;

}

.cierre-container::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:#2F80ED;

    border-radius:50%;

    filter:blur(170px);

    opacity:.15;

    top:-150px;

    left:-120px;

}

.cierre-container::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:#56CCF2;

    border-radius:50%;

    filter:blur(160px);

    opacity:.12;

    bottom:-120px;

    right:-120px;

}

.cierre-container>*{

    position:relative;

    z-index:2;

}

.cierre-container h2{

    font-size:56px;

    margin:25px 0;

    line-height:1.2;

}

.cierre-container h2 span{

    color:#56CCF2;

}

.cierre-container p{

    max-width:760px;

    margin:0 auto 45px;

    color:#C3CAD8;

    line-height:34px;

    font-size:18px;

}

.firma{

    margin-top:60px;

    padding-top:35px;

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

}

.firma h3{

    font-size:28px;

    margin-bottom:10px;

}

.firma span{

    color:#56CCF2;

    font-size:17px;

    font-weight:500;

}

/*====================================================
                FOOTER
====================================================*/

footer{

    margin-top:120px;

    padding:80px 40px;

    text-align:center;

    background:#070B18;

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

}

footer h2{

    font-size:38px;

}

footer h2 span{

    color:#56CCF2;

}

footer p{

    color:#BBBBBB;

    margin-top:15px;

}

.social{

    margin:40px 0;

}

.social a{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:55px;

    height:55px;

    border-radius:50%;

    margin:0 8px;

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

    color:white;

    text-decoration:none;

    transition:.35s;

}

.social a:hover{

    background:#2F80ED;

    transform:translateY(-8px);

}

.copy{

    margin-top:30px;

    font-size:14px;

}

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

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes slider{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

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

@media(max-width:1100px){

    #inicio,
    .product,
    #contacto{

        grid-template-columns:1fr;

        text-align:center;

    }

    .product.reverse{

        direction:ltr;

    }

    .services{

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

    }

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .testimonial-container{

        grid-template-columns:1fr;

    }

    #stats{

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

    }

    .timeline{

        flex-direction:column;

    }

    .line{

        width:4px;

        height:60px;

    }

}

@media(max-width:768px){

    nav{

        flex-direction:column;
        gap:20px;

    }

    nav ul{

        flex-direction:column;
        text-align:center;
        gap:18px;

    }

    .hero-left h1{

        font-size:46px;

    }

    .services{

        grid-template-columns:1fr;

    }

    #stats{

        grid-template-columns:1fr;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .title h2{

        font-size:34px;

    }

}
.custom-cursor{

    position:fixed;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#2F80ED;

    pointer-events:none;

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

    z-index:999999;

    box-shadow:

    0 0 25px #2F80ED,

    0 0 45px #56CCF2;

    transition:

    width .2s,

    height .2s;

}
/*==========================
      CUBO 3D
==========================*/

.hero-right{

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

    perspective:1200px;

}

.cube-container{

    width:320px;
    height:320px;

}

.cube{

    width:220px;
    height:220px;

    position:relative;

    margin:auto;

    transform-style:preserve-3d;

    animation:rotateCube 12s infinite linear;

}

.face{

    position:absolute;

    width:220px;
    height:220px;

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

    border:1px solid rgba(86,204,242,.4);

    backdrop-filter:blur(18px);

    border-radius:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:white;

    box-shadow:

    0 0 40px rgba(47,128,237,.25);

}

.face i{

    font-size:55px;

    color:#56CCF2;

    margin-bottom:20px;

}

.face h3{

    font-size:30px;

}

.front{

    transform:translateZ(110px);

}

.back{

    transform:rotateY(180deg) translateZ(110px);

}

.right{

    transform:rotateY(90deg) translateZ(110px);

}

.left{

    transform:rotateY(-90deg) translateZ(110px);

}

.top{

    transform:rotateX(90deg) translateZ(110px);

}

.bottom{

    transform:rotateX(-90deg) translateZ(110px);

}

@keyframes rotateCube{

    0%{

        transform:rotateX(-20deg) rotateY(0deg);

    }

    25%{

        transform:rotateX(-15deg) rotateY(90deg);

    }

    50%{

        transform:rotateX(-20deg) rotateY(180deg);

    }

    75%{

        transform:rotateX(-15deg) rotateY(270deg);

    }

    100%{

        transform:rotateX(-20deg) rotateY(360deg);

    }

}


/*======================================
        SOFTWARE
======================================*/

#software{

    padding:120px 8%;

}

.software-grid{

    margin-top:70px;

    display:grid;

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

    gap:35px;

}

.software-card{

    overflow:hidden;

    border-radius:25px;

    background:#182233;

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

    transition:.45s;

    cursor:pointer;

}

.software-card:hover{

    transform:translateY(-15px);

    box-shadow:0 20px 60px rgba(47,128,237,.30);

}

.software-image{

    height:230px;

    overflow:hidden;

}

.software-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.software-card:hover img{

    transform:scale(1.08);

}

.software-content{

    padding:30px;

}

.software-content h3{

    font-size:30px;

    margin-bottom:18px;

}

.software-content p{

    color:#BFC7D5;

    line-height:28px;

}

.tags{

    margin-top:25px;

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.tags span{

    background:#1f6feb;

    padding:8px 16px;

    border-radius:30px;

    font-size:13px;

}

.btn-card{

    display:inline-block;

    margin-top:30px;

    color:#57C7FF;

    text-decoration:none;

    font-weight:bold;

}

.btn-card:hover{

    color:white;

}

@media(max-width:1000px){

    .software-grid{

        grid-template-columns:1fr;

    }

}
/*====================================
        WHY US
====================================*/

#why-us{

    padding:120px 8%;

}

.why-grid{

    margin-top:70px;

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#182233;

    border-radius:25px;

    padding:45px 35px;

    text-align:center;

    transition:.4s;

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

}

.why-card:hover{

    transform:translateY(-12px);

    box-shadow:0 15px 40px rgba(47,128,237,.35);

    border-color:#56CCF2;

}

.why-card i{

    font-size:55px;

    color:#56CCF2;

    margin-bottom:25px;

}

.why-card h3{

    margin-bottom:15px;

    font-size:28px;

}

.why-card p{

    color:#BFC7D5;

    line-height:28px;

}

@media(max-width:1000px){

    .why-grid{

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

    }

}

@media(max-width:700px){

    .why-grid{

        grid-template-columns:1fr;

    }

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

#about{

padding:130px 8%;

}

.about-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#57C7FF;

    font-size:13px;

    font-weight:500;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.9;

}

.about-left h2{

font-size:58px;

margin:20px 0;

}

.about-left p{

color:#BFC7D5;

line-height:33px;

margin-bottom:25px;

}

.stats{

display:flex;

gap:60px;

margin-top:50px;

}

.stat h3{

font-size:55px;

color:#57C7FF;

}

.stat span{

color:#AEB6C4;

}

/*========================
LAPTOP
=========================*/

.about-right{

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.glow{

position:absolute;

width:350px;

height:350px;

background:#1f6feb55;

border-radius:50%;

filter:blur(100px);

animation:pulse 4s infinite;

}

.laptop{

width:420px;

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

}

.screen{

height:250px;

background:#162235;

border:4px solid #2b84ff;

border-radius:20px;

padding:20px;

box-shadow:0 0 40px rgba(47,128,237,.35);

}

.dashboard{

height:100%;

display:flex;

flex-direction:column;

justify-content:space-between;

}

.bar{

height:16px;

background:#57C7FF;

border-radius:30px;

animation:loading 2s infinite;

}

.chart{

display:flex;

align-items:flex-end;

gap:15px;

height:120px;

}

.chart span{

width:40px;

background:#57C7FF;

border-radius:10px 10px 0 0;

animation:bars 2s infinite;

}

.chart span:nth-child(1){

height:50px;

}

.chart span:nth-child(2){

height:90px;

}

.chart span:nth-child(3){

height:70px;

}

.chart span:nth-child(4){

height:110px;

}

.keyboard{

width:460px;

height:18px;

background:#2b84ff;

margin-left:-20px;

border-radius:0 0 20px 20px;

}

/*========================*/

@keyframes float{

50%{

transform:translateY(-18px);

}

}

@keyframes pulse{

50%{

transform:scale(1.1);

opacity:.6;

}

}

@keyframes loading{

50%{

width:70%;

}

}

@keyframes bars{

50%{

transform:scaleY(.6);

}

}

@media(max-width:1000px){

.about-container{

grid-template-columns:1fr;

text-align:center;

}

.stats{

justify-content:center;

}

}