/*==================================================
                DESYNEX WEBSITE
                style.css
                Autor: DESynex
                Versión: 1.0
====================================================*/


/*==================================================
                GOOGLE FONT
====================================================*/

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


/*==================================================
                VARIABLES
====================================================*/

:root{

    /* Colores Corporativos */

    --primary:#141F5D;
    --secondary:#06B6D4;
    --white:#FFFFFF;

    /* Colores auxiliares */

    --light:#F8FAFC;
    --gray:#64748B;
    --dark:#0F172A;
    --border:#E2E8F0;

    /* Gradientes */

    --gradient-primary:linear-gradient(135deg,#141F5D 0%,#06B6D4 100%);
    --gradient-light:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);

    /* Sombras */

    --shadow-sm:0 5px 15px rgba(20,31,93,.08);
    --shadow-md:0 15px 35px rgba(20,31,93,.12);
    --shadow-lg:0 25px 60px rgba(20,31,93,.18);

    /* Bordes */

    --radius-sm:8px;
    --radius-md:15px;
    --radius-lg:25px;
    --radius-xl:40px;

    /* Transiciones */

    --transition:.35s ease;

    /* Contenedor */

    --container:1280px;

}


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

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

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--white);

    color:var(--dark);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    outline:none;

    border:none;

    font-family:inherit;

}

section{

    padding:120px 0;

    position:relative;

}


/*==================================================
            UTILIDADES
====================================================*/

.container{

    max-width:var(--container);

    margin:auto;

    padding:0 20px;

}

.text-primary{

    color:var(--primary);

}

.text-secondary{

    color:var(--secondary);

}

.bg-primary{

    background:var(--primary);

}

.bg-light{

    background:var(--light);

}

.section-title{

    font-size:clamp(2rem,5vw,3.3rem);

    font-weight:700;

    color:var(--primary);

    margin-bottom:20px;

}

.section-description{

    color:var(--gray);

    max-width:650px;

    margin:auto;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}


/*==================================================
            SELECCIÓN
====================================================*/

::selection{

    background:var(--secondary);

    color:var(--white);

}


/*==================================================
                LOADER
====================================================*/

.loader-logo{

    text-align:center;

}

.loader-logo img{

    width:400px;

    margin:auto;

    animation:loaderLogo 1.2s infinite alternate;

}

.loader-logo h2{

    margin-top:20px;

    font-size:2rem;

    color:var(--primary);

    letter-spacing:2px;

}

@keyframes loaderLogo{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-12px)

    }

}


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



.navbar{

    padding:18px 0;

    transition:.4s;

    background:transparent;

}


.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

}

.navbar-brand img{

    width:50px;

}

.navbar-brand span{

    font-size:1.6rem;

    font-weight:700;

    color:var(--white);

}

.navbar-nav{

    gap:10px;

}

.nav-link{

    position:relative;

    color:#FFFFFF;

    font-weight:600;

    transition:.3s;

}


.nav-link:hover{

    color:var(--secondary);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    transform:translateX(-50%);

    width:0;

    height:3px;

    background:var(--secondary);

    border-radius:20px;

    transition:.35s;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:100%;

}

.nav-link.active{

    color:var(--secondary);

}

.nav-link.active::after{

    width:100%;

}

.btn-desynex{

    background:var(--secondary);

    color:var(--white);

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

    margin-left:25px;

}

.btn-desynex:hover{

    background:var(--white);

    color:var(--primary);

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

.navbar-toggler{

    border:none;

    font-size:2rem;

    color:var(--white);

}

.navbar-toggler:focus{

    box-shadow:none;

}


/*==================================================
            FIN DEL BLOQUE 1
====================================================*/

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

.hero{

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: linear-gradient(135deg,#141F5D 0%,#1E3A8A 45%,#06B6D4 100%);

}


/*=========================================
        ELEMENTOS DECORATIVOS
=========================================*/

.hero::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

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

    border-radius:50%;

    top:-250px;
    right:-180px;

    filter:blur(20px);

}

.hero::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:rgba(6,182,212,.18);

    border-radius:50%;

    left:-150px;

    bottom:-180px;

    filter:blur(40px);

}


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

.hero .container{

    position:relative;

    z-index:2;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

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

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:.95rem;

    font-weight:600;

    margin-bottom:25px;

}

.hero-badge::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#06B6D4;

    animation:pulse 2s infinite;

}

.hero h1{

    color:#fff;

    font-size:clamp(2.8rem,6vw,4.8rem);

    font-weight:800;

    line-height:1.15;

    margin-bottom:25px;

}

.hero h1 span{

    color:#06B6D4;

}

.hero p{

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

    font-size:1.1rem;

    max-width:580px;

    margin-bottom:40px;

}


/*=========================================
            BOTONES
=========================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.hero-buttons .btn-desynex{

    margin:0;

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border-radius:50px;

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

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.btn-outline:hover{

    background:#fff;

    color:#141F5D;

    transform:translateY(-4px);

}


/*=========================================
            ESTADÍSTICAS
=========================================*/

.hero-stats{

    display:flex;

    gap:30px;

    margin-top:70px;

    flex-wrap:wrap;

}

.hero-stats div{

    min-width:130px;

}

.hero-stats h2{

    color:#fff;

    font-size:2.3rem;

    font-weight:700;

    margin-bottom:4px;

}

.hero-stats span{

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

    font-size:.95rem;

}


/*=========================================
            IMAGEN
=========================================*/

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:560px;

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

    position:relative;

    z-index:2;

}


/*=========================================
            GLASS CARD
=========================================*/

.hero-image::before{

    content:"";

    position:absolute;

    width:430px;

    height:430px;

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

    border-radius:40px;

    backdrop-filter:blur(18px);

    transform:rotate(-12deg);

}

.hero-image::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    background:#06B6D4;

    opacity:.18;

    border-radius:50%;

    filter:blur(70px);

}


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

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.4);

        opacity:.4;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


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

@media(max-width:992px){

.hero{

    text-align:center;

    padding-top:140px;

}

.hero p{

    margin:auto;

    margin-bottom:35px;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

}

.hero-image{

    margin-top:70px;

}

.hero-image::before{

    width:320px;

    height:320px;

}

}


@media(max-width:768px){

.hero{

    min-height:auto;

    padding:150px 0 90px;

}

.hero h1{

    font-size:2.7rem;

}

.hero-stats{

    gap:20px;

}

.hero-stats div{

    min-width:100px;

}

.hero-image img{

    max-width:360px;

}

.hero-image::before{

    width:250px;

    height:250px;

}

}


/*==================================================
                TECH STACK
====================================================*/

.tech-stack{

    padding:110px 0;

    background:#fff;

}

.tech-header{

    text-align:center;

    margin-bottom:70px;

}

.tech-header span{

    display:inline-block;

    background:rgba(6,182,212,.12);

    color:var(--secondary);

    padding:10px 22px;

    border-radius:50px;

    font-size:.95rem;

    font-weight:600;

    margin-bottom:20px;

}

.tech-header h2{

    color:var(--primary);

    font-size:clamp(2rem,5vw,3.2rem);

    font-weight:700;

    margin-bottom:20px;

}

.tech-header p{

    color:var(--gray);

    max-width:720px;

    margin:auto;

}


/*====================================
            GRID
=====================================*/

.tech-slider{

    display:grid;

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

    gap:30px;

}


/*====================================
            CARD
=====================================*/

.tech-item{

    background:#fff;

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

    border-radius:20px;

    padding:40px 25px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

    box-shadow:var(--shadow-sm);

}

.tech-item:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-lg);

    border-color:transparent;

}


/*====================================
            ICONO
=====================================*/

.tech-item i{

    font-size:3.8rem;

    color:var(--secondary);

    margin-bottom:25px;

    transition:.35s;

}

.tech-item:hover i{

    transform:scale(1.12) rotate(5deg);

    color:var(--primary);

}


/*====================================
            TITULO
=====================================*/

.tech-item h5{

    font-size:1.15rem;

    color:var(--primary);

    font-weight:600;

}


/*====================================
        EFECTO SUPERIOR
=====================================*/

.tech-item::before{

    content:"";

    display:block;

    width:55px;

    height:5px;

    margin:auto;

    margin-bottom:30px;

    border-radius:20px;

    background:var(--secondary);

    transition:.35s;

}

.tech-item:hover::before{

    width:90px;

}


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

@media(max-width:768px){

.tech-stack{

    padding:80px 0;

}

.tech-slider{

    gap:20px;

}

.tech-item{

    padding:30px 20px;

}

.tech-item i{

    font-size:3rem;

}

}

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

.about{

    background:var(--light);

}

/*==============================
        IMAGEN
===============================*/

.about-image{

    position:relative;

}

.about-image img{

    border-radius:25px;

    box-shadow:var(--shadow-lg);

}

/*==============================
        CARD FLOTANTE
===============================*/

.experience-card{

    position:absolute;

    bottom:-35px;

    right:-20px;

    width:210px;

    padding:25px;

    border-radius:20px;

    background:#fff;

    text-align:center;

    box-shadow:var(--shadow-lg);

}

.experience-card h2{

    color:var(--secondary);

    font-size:2.7rem;

    font-weight:700;

    margin-bottom:5px;

}

.experience-card span{

    color:var(--gray);

    font-size:.95rem;

}

/*==============================
        TAG
===============================*/

.section-tag{

    display:inline-block;

    background:rgba(6,182,212,.12);

    color:var(--secondary);

    padding:10px 20px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:20px;

}

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

.about-text{

    color:var(--gray);

    margin-bottom:25px;

    line-height:1.8;

}

/*==============================
        CARDS
===============================*/

.about-cards{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:40px;

}

.mini-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#fff;

    padding:25px;

    border-radius:18px;

    transition:.35s;

    box-shadow:var(--shadow-sm);

}

.mini-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.mini-card i{

    width:65px;

    height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:var(--gradient-primary);

    color:#fff;

    font-size:1.6rem;

    flex-shrink:0;

}

.mini-card h5{

    color:var(--primary);

    font-weight:700;

    margin-bottom:8px;

}

.mini-card p{

    color:var(--gray);

    margin:0;

}

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

@media(max-width:992px){

.about{

    text-align:center;

}

.experience-card{

    position:relative;

    margin:25px auto 0;

    right:auto;

    bottom:auto;

}

.mini-card{

    text-align:left;

}

}

@media(max-width:768px){

.about{

    padding:80px 0;

}

.mini-card{

    flex-direction:column;

    align-items:center;

    text-align:center;

}

}

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

.services{

    background:#fff;

}

.section-heading{

    text-align:center;

    margin-bottom:80px;

}

.services-grid{

    display:grid;

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

    gap:35px;

}

.service-card{

    background:#fff;

    border-radius:25px;

    padding:45px 35px;

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

    transition:.4s;

    position:relative;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    cursor:pointer;

}

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--gradient-primary);

    transform:scaleX(0);

    transition:.4s;

}

.service-card:hover::before{

    transform:scaleX(1);

}

.service-card:hover{

    transform:translateY(-15px);

    box-shadow:var(--shadow-lg);

}

.service-icon{

    width:90px;

    height:90px;

    border-radius:22px;

    background:var(--gradient-primary);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

}

.service-icon i{

    color:#fff;

    font-size:2.5rem;

}

.service-card h3{

    color:var(--primary);

    margin-bottom:18px;

    font-size:1.5rem;

    font-weight:700;

}

.service-card p{

    color:var(--gray);

    margin-bottom:30px;

}

.service-card a{

    color:var(--secondary);

    font-weight:600;

    display:inline-flex;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.service-card a:hover{

    gap:18px;

}

@media(max-width:768px){

.services{

    padding:80px 0;

}

.services-grid{

    grid-template-columns:1fr;

}

.service-card{

    padding:35px 25px;

}

}

/*==================================================
                WHY DESYNEX
====================================================*/

.why-us{

    position:relative;

    overflow:hidden;

    background:linear-gradient(180deg,#ffffff,#f8fbff);

}

.why-us::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:rgba(6,182,212,.05);

    border-radius:50%;

    top:-300px;

    right:-250px;

    filter:blur(50px);

}

.why-grid{

    display:grid;

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

    gap:35px;

    position:relative;

    z-index:2;

}

.why-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:22px;

    padding:40px;

    transition:.4s;

    box-shadow:var(--shadow-sm);

}

.why-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-lg);

}

.why-icon{

    width:75px;

    height:75px;

    border-radius:20px;

    background:var(--gradient-primary);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.why-icon i{

    color:white;

    font-size:2rem;

}

.why-card h4{

    color:var(--primary);

    font-weight:700;

    margin-bottom:15px;

}

.why-card p{

    color:var(--gray);

    margin:0;

}

@media(max-width:768px){

.why-grid{

    grid-template-columns:1fr;

}

.why-card{

    padding:30px;

}

}

/*=========================================
            SHOWCASE
=========================================*/

.showcase{

    background:#f7fafc;

}

.project-feature{

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:50px;

    align-items:center;

    margin-bottom:70px;

}

.project-image{

    overflow:hidden;

    border-radius:25px;

}

.project-image img{

    width:100%;

    display:block;

    transition:.6s;

}

.project-image:hover img{

    transform:scale(1.05);

}

.project-status{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:#06B6D420;

    color:var(--secondary);

    font-weight:600;

    margin-bottom:20px;

}

.project-info h3{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:20px;

}

.project-info p{

    color:var(--gray);

    margin-bottom:30px;

}

.project-tags{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

.project-tags span{

    padding:10px 18px;

    border-radius:50px;

    background:white;

    box-shadow:var(--shadow-sm);

}

.projects-grid{

    display:grid;

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

    gap:30px;

}

.mini-project{

    border-radius:20px;

    overflow:hidden;

    background:white;

    transition:.4s;

    box-shadow:var(--shadow-sm);

}

.mini-project:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.mini-project img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.mini-project div{

    padding:25px;

}

.mini-project span{

    color:var(--secondary);

    font-weight:600;

}

.mini-project h4{

    margin-top:10px;

    color:var(--primary);

}

@media(max-width:992px){

.project-feature{

    grid-template-columns:1fr;

}

.projects-grid{

    grid-template-columns:1fr;

}

}

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

.process{

    background:white;

    position:relative;

}

.timeline{

    position:relative;

    max-width:1000px;

    margin:auto;

    padding-top:40px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:4px;

    height:100%;

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

    transform:translateX(-50%);

}

.timeline-item{

    width:50%;

    position:relative;

    margin-bottom:70px;

}

.timeline-item.left{

    left:0;

    padding-right:70px;

}

.timeline-item.right{

    left:50%;

    padding-left:70px;

}

.timeline-card{

    background:white;

    border-radius:20px;

    padding:30px;

    box-shadow:var(--shadow-md);

    transition:.35s;

}

.timeline-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.timeline-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.timeline-card p{

    color:var(--gray);

    margin:0;

}

.timeline-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--gradient-primary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    position:absolute;

    top:20px;

    right:-35px;

    font-size:1.6rem;

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

}

.timeline-item.right .timeline-icon{

    left:-35px;

}

@media(max-width:991px){

.timeline::before{

    left:35px;

}

.timeline-item{

    width:100%;

    left:0!important;

    padding-left:90px!important;

    padding-right:0!important;

}

.timeline-icon{

    left:0!important;

}

}

/*==================================================
            EXPERIENCE
====================================================*/

.experience{
    background:#f8fbff;
}

.skills{
    margin-top:40px;
}

.skill{
    margin-bottom:30px;
}

.skill-info{
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
    font-weight:600;
    color:var(--primary);
}

.progress{
    width:100%;
    height:12px;
    background:#e8eef8;
    border-radius:20px;
    overflow:hidden;
}

.progress-bar{
    height:100%;
    background:var(--gradient-primary);
    border-radius:20px;
}

.w95{width:95%;}
.w90{width:90%;}
.w85{width:85%;}

.stats-grid{

    display:grid;

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

    gap:25px;

}

.stat-card{

    background:white;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow-md);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.stat-card h2{

    font-size:2.8rem;

    color:var(--secondary);

    font-weight:700;

    margin-bottom:10px;

}

.stat-card p{

    margin:0;

    color:var(--gray);

}

@media(max-width:768px){

.stats-grid{

grid-template-columns:1fr;

}

}

/*==================================================
                    CTA
====================================================*/

.cta{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #141F5D,
        #1b2e80,
        #06B6D4
    );

    padding:120px 0;

}

.cta::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

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

    border-radius:50%;

    top:-250px;
    right:-180px;

}

.cta::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

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

    border-radius:50%;

    bottom:-120px;
    left:-120px;

}

.cta-content{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:850px;

    margin:auto;

}

.section-tag.light{

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

    color:white;

}

.cta h2{

    color:white;

    font-size:clamp(2.2rem,5vw,3.8rem);

    font-weight:700;

    margin:25px 0;

}

.cta p{

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

    font-size:1.15rem;

    line-height:1.8;

    margin-bottom:45px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn-light-desynex{

    padding:16px 36px;

    border-radius:50px;

    background:white;

    color:#141F5D;

    font-weight:700;

    transition:.35s;

}

.btn-light-desynex:hover{

    transform:translateY(-5px);

}

.btn-outline-light{

    padding:16px 36px;

    border-radius:50px;

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

    color:white;

    transition:.35s;

}

.btn-outline-light:hover{

    background:white;

    color:#141F5D;

}

/*==================================================
                CONTACT
====================================================*/

.contact{

    background:#f7fafc;

}

.contact-wrapper{

    display:grid;

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

    gap:50px;

}

.contact-form{

    background:white;

    padding:45px;

    border-radius:25px;

    box-shadow:var(--shadow-lg);

}

.input-group{

    margin-bottom:25px;

}

.input-group input,
.input-group textarea{

    width:100%;

    padding:18px;

    border:1px solid #d8d8d8;

    border-radius:15px;

    outline:none;

    transition:.3s;

}

.input-group input:focus,
.input-group textarea:focus{

    border-color:var(--secondary);

}

.contact-info{

    background:var(--primary);

    color:white;

    padding:45px;

    border-radius:25px;

}

.contact-info h3{

    margin-bottom:20px;

}

.info-item{

    display:flex;

    gap:18px;

    margin:25px 0;

    align-items:center;

}

.info-item i{

    font-size:1.3rem;

    color:var(--secondary);

}

.social-links{

    display:flex;

    gap:18px;

    margin-top:40px;

}

.social-links a{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    color:white;

    transition:.3s;

}

.social-links a:hover{

    background:var(--secondary);

    transform:translateY(-5px);

}

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

.footer{

    background:#101942;

    color:white;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

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

    gap:40px;

}

.footer h3,
.footer h4{

    margin-bottom:20px;

}

.footer p{

    color:#bfc9dc;

}

.footer ul{

    list-style:none;

    padding:0;

}

.footer li{

    margin-bottom:15px;

    color:#bfc9dc;

}

.footer a{

    color:#bfc9dc;

    transition:.3s;

}

.footer a:hover{

    color:#06B6D4;

}

.footer hr{

    margin:50px 0 25px;

    border-color:rgba(255,255,255,.08);

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.footer-bottom a{

    color:#06B6D4;

    font-weight:600;

}

@media(max-width:991px){

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

}

.contact-form,
.contact-info{

padding:30px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}

/*==================================================
                PRELOADER
====================================================*/

.preloader{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    background:#141F5D;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity .7s ease,
               visibility .7s ease;

}

.loader{

    text-align:center;

}

.loader-logo{

    width:95px;

    height:95px;

    margin:auto;

    margin-bottom:25px;

}

.loader-logo img{

    width:100%;

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

}

.loader h2{

    color:#FFFFFF;

    font-size:2rem;

    margin-bottom:10px;

}

.loader p{

    color:#C7D2FE;

    margin-bottom:30px;

}

.loading-bar{

    width:240px;

    height:6px;

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

    border-radius:50px;

    overflow:hidden;

}

.loading-bar span{

    display:block;

    width:40%;

    height:100%;

    background:#06B6D4;

    border-radius:50px;

    animation:loading 1.2s infinite;

}

.preloader.hide{

    opacity:0;

    visibility:hidden;

}

@keyframes loading{

    0%{

        transform:translateX(-100%);

    }

    100%{

        transform:translateX(350%);

    }

}

@keyframes logoFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

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

.navbar{

    transition:
        background .35s ease,
        padding .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease;

}

.navbar-scrolled{

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

    backdrop-filter:blur(14px);

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

    padding:12px 0;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    animation:navbarDrop .35s ease;

}

.navbar-scrolled .logo-text{

    color:var(--primary);

}

.navbar-scrolled .nav-link{

    color:var(--primary);

}

.navbar-scrolled .btn-nav{

    background:var(--primary);

    color:#FFFFFF;

}

.navbar-scrolled .btn-nav:hover{

    background:var(--secondary);

}

@keyframes navbarDrop{

    from{

        transform:translateY(-20px);

        opacity:.8;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

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

.menu-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

body.menu-open{

    overflow:hidden;

}

.menu-toggle{

    width:48px;

    height:48px;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

    border:none;

    background:none;

    z-index:1001;

}

.menu-toggle span{

    width:28px;

    height:3px;

    background:#FFFFFF;

    border-radius:10px;

    transition:.35s;

}

.menu-toggle.active span:nth-child(1){

    transform:rotate(45deg) translate(6px,6px);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:rotate(-45deg) translate(7px,-7px);

}

.navbar-scrolled .menu-toggle span{

    background:var(--primary);

}

section{

    scroll-margin-top:90px;

}

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

.scroll-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:var(--secondary);

    color:#FFFFFF;

    font-size:1.3rem;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 15px 35px rgba(6,182,212,.35);

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s;

    z-index:999;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.scroll-top:hover{

    transform:translateY(-6px);

    background:var(--primary);

}

.scroll-top:active{

    transform:scale(.95);

}

/*==================================================
                REVEAL
====================================================*/

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
            PREMIUM CARD EFFECT
====================================================*/

.card,
.service-card,
.tech-card,
.portfolio-card,
.contact-card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

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

}

.card:hover,
.service-card:hover,
.tech-card:hover,
.portfolio-card:hover,
.contact-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

    border-color:var(--secondary);

}

.card::before,
.service-card::before,
.tech-card::before,
.portfolio-card::before,
.contact-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:4px;

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

    transition:.6s;

}

.card:hover::before,
.service-card:hover::before,
.tech-card:hover::before,
.portfolio-card:hover::before,
.contact-card:hover::before{

    left:100%;

}

.card i,
.service-card i,
.tech-card i{

    transition:
        transform .35s ease,
        color .35s ease;

}

.card:hover i,
.service-card:hover i,
.tech-card:hover i{

    transform:rotate(-8deg) scale(1.1);

    color:var(--secondary);

}

.card h3,
.card h4,
.service-card h3,
.tech-card h3,
.portfolio-card h3{

    transition:color .35s ease;

}

.card:hover h3,
.card:hover h4,
.service-card:hover h3,
.tech-card:hover h3,
.portfolio-card:hover h3{

    color:var(--secondary);

}

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

.hero-reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.hero-reveal.show{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
            FLOAT
====================================================*/

.hero-image img{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70px;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.btn-primary:hover::before{

    left:130%;

}

/*==================================================
        PREMIUM INTERACTION
====================================================*/

.service-card,
.portfolio-card,
.tech-card{

    transform-style:preserve-3d;

    will-change:transform;

}

.btn{

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.btn:hover{

    box-shadow:0 15px 35px rgba(6,182,212,.25);

}


/* NAVBAR DESYNEX FIX */

.navbar{
    background: var(--primary);
    backdrop-filter: none;
    box-shadow: 0 8px 25px rgba(20,31,93,.15);
    padding: 12px 0;
}

.navbar.navbar-scrolled{
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 35px rgba(0,0,0,.08);
}

.navbar-brand{
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: fit-content;
}

.navbar-brand img{
    width: 58px;
    height: auto;
    object-fit: contain;
}

.navbar-brand span,
.logo-text{
    color: #fff;
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1;
}

.navbar-scrolled .navbar-brand span,
.navbar-scrolled .logo-text{
    color: var(--primary);
}

.navbar-toggler,
.menu-toggle{
    margin-left: auto;
}