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

    :root {

        --primary: #2563EB;
        --secondary: #06B6D4;

        --dark: #0F172A;
        --dark-2: #111827;

        --text: #1E293B;
        --text-light: #64748B;

        --white: #FFFFFF;

        --bg-light: #F8FAFC;

        --shadow:
            0 20px 40px rgba(0, 0, 0, .12);

        --transition: all .3s ease;

    }

    /* ==========================================
       GENERALES
    ========================================== */

    html {
        scroll-behavior: smooth;
    }

    body {

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

        color: var(--text);

        overflow-x: hidden;

        background: #fff;

    }

    a {
        text-decoration: none;
    }

    .section-title {

        font-size: 2.5rem;
        font-weight: 700;

        color: var(--dark);

    }

    .section-subtitle {

        max-width: 850px;

        margin: 15px auto 0;

        color: var(--text-light);

        font-size: 1.05rem;

        line-height: 1.8;

    }

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

    .navbar-custom {

        padding: 20px 0;

        transition: .4s;

        background: rgba(15, 23, 42, .85);

        backdrop-filter: blur(12px);

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

    }

    .logo-navbar {

        height: 60px;

    }

    .navbar-nav .nav-link {

        color: #fff;

        margin: 0 10px;

        font-weight: 500;

        transition: .3s;

    }

    .navbar-nav .nav-link:hover {

        color: var(--secondary);

    }

    .btn-demo {

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

        color: #fff;

        padding: 12px 28px;

        border-radius: 12px;

        font-weight: 600;

        transition: .3s;

    }

    .btn-demo:hover {

        transform: translateY(-3px);

        color: #fff;

    }

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

    .hero-section{
        padding-top:120px;
    }

    .hero-section{

        position:relative;

        min-height:100vh;

        display:flex;

        align-items:center;

        background:
        linear-gradient(
            90deg,
            rgba(15,23,42,.95),
            rgba(15,23,42,.75)
        ),
        url('../img/hero-dashboard.png');

        background-size:cover;

        background-position:center;

    }

    /* Efecto fondo */

    .hero-section::before {

        content: '';

        position: absolute;

        /*width: 600px;*/
        height: 600px;

        background: rgba(37,99,235,.20);

        border-radius: 50%;

        top: -250px;
        right: -150px;

        filter: blur(120px);

    }

    .hero-section::after {

        content: '';

        position: absolute;

        width: 500px;
        height: 500px;

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

        border-radius: 50%;

        bottom: -250px;
        left: -150px;

        filter: blur(120px);

    }

    .hero-badge {

        display: inline-block;

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

        border: 1px solid rgba(6,182,212,.25);

        color: var(--secondary);

        padding: 10px 20px;

        border-radius: 50px;

        font-size: .85rem;

        letter-spacing: 1px;

        font-weight: 600;

    }

    .hero-title {

        font-size: 3.5rem;

        line-height: 1.1;

        font-weight: 800;

        color: #fff;

        max-width:833px;

    }

    .hero-description {

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

        font-size: 1.15rem;

        line-height: 1.9;

    }

    .hero-buttons {

        display: flex;

        gap: 15px;

        flex-wrap: wrap;

    }

    .btn-primary-custom {

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

        color: #fff;

        padding: 15px 35px;

        border-radius: 14px;

        font-weight: 600;

        transition: .3s;

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

    }

    .btn-primary-custom:hover {

        transform: translateY(-4px);

        color: #fff;

    }

    .btn-outline-custom {

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

        color: #fff;

        padding: 15px 35px;

        border-radius: 14px;

        font-weight: 600;

        transition: .3s;

    }

    .btn-outline-custom:hover {

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

        color: #fff;

    }

    .hero-features {

        display: flex;

        flex-wrap: wrap;

        gap: 25px;

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

        font-size: .95rem;

    }

    .hero-features i {

        color: var(--secondary);

        margin-right: 8px;

    }

    .hero-image {

        max-width: 100%;

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

        filter:
            drop-shadow(0 40px 80px rgba(0,0,0,.40));

    }

    @keyframes floatHero {

        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-12px);
        }

        100% {
            transform: translateY(0px);
        }

    }

    .trust-section{

        background:#fff;

        padding:40px 0;

        border-bottom:1px solid #E5E7EB;

    }

    .trust-item{

        text-align:center;

    }

    .trust-item h3{

        color:var(--primary);

        font-size:2rem;

        font-weight:800;

    }

    .trust-item p{

        margin:0;

        color:var(--text-light);

    }

    /* ==========================================
       PROBLEMAS
    ========================================== */

    .problemas-section {

        padding: 120px 0;

        background: #fff;

    }

    .problem-card {

        background: #fff;

        border-radius: 24px;

        padding: 35px 30px;

        height: 100%;

        transition: .35s;

        border: 1px solid #E5E7EB;

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

    }

    .problem-card:hover {

        transform: translateY(-10px);

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

    }

    .problem-icon {

        width: 75px;
        height: 75px;

        border-radius: 18px;

        display: flex;

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

        margin-bottom: 25px;

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

    }

    .problem-icon i {

        color: #fff;

        font-size: 1.8rem;

    }

    .problem-card h4 {

        font-weight: 700;

        margin-bottom: 15px;

        color: var(--dark);

    }

    .problem-card p {

        color: var(--text-light);

        line-height: 1.8;

    }

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

    @media(max-width:991px){

        .hero-section {

            text-align: center;

            padding-top: 120px;

        }

        .hero-title {

            font-size: 2.8rem;

        }

        .hero-buttons {

            justify-content: center;

        }

        .hero-features {

            justify-content: center;

        }

        .hero-image {

            margin-top: 50px;

        }

    }

    @media(max-width:768px){

        .hero-title {

            font-size: 2.2rem;

        }

        .section-title {

            font-size: 2rem;

        }

        .hero-description {

            font-size: 1rem;

        }

        .logo-navbar {

            height: 50px;

        }

    }

    @media(max-width:576px){

        .hero-buttons {

            flex-direction: column;

        }

        .btn-primary-custom,
        .btn-outline-custom {

            width: 100%;

            text-align: center;

        }

    }

    /* ==========================================
       SOLUCIONES
    ========================================== */

    .soluciones-section {

        padding: 120px 0;

        background: var(--bg-light);

    }

    .section-tag {

        display: inline-block;

        background: rgba(37,99,235,.10);

        color: var(--primary);

        padding: 10px 22px;

        border-radius: 50px;

        font-weight: 600;

        font-size: .85rem;

    }

    .solution-row {

        margin-top: 100px;

    }

    .solution-content h3 {

        font-size: 2rem;

        font-weight: 700;

        margin-bottom: 20px;

        color: var(--dark);

    }

    .solution-content p {

        color: var(--text-light);

        line-height: 1.9;

        margin-bottom: 25px;

    }

    .solution-content ul {

        list-style: none;

        padding: 0;

    }

    .solution-content ul li {

        position: relative;

        padding-left: 30px;

        margin-bottom: 15px;

        color: var(--text);

    }

    .solution-content ul li::before {

        content: "✓";

        position: absolute;

        left: 0;

        color: var(--secondary);

        font-weight: bold;

    }

    .solution-image {

        border-radius: 25px;

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

        transition: .4s;

    }

    .solution-image:hover {

        transform: translateY(-10px);

    }

    /* ==========================================
       TECNOLOGÍAS
    ========================================== */

    .tecnologias-section {
        padding: 120px 0;
        background:
            radial-gradient(circle at top left, rgba(37, 99, 235, .10), transparent 35%),
            radial-gradient(circle at bottom right, rgba(6, 182, 212, .10), transparent 35%),
            #ffffff;
    }

    .tech-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
        margin-top: 60px;
    }

    .tech-card {
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 24px;
        padding: 32px 20px;
        text-align: center;
        box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
        transition: .35s ease;
    }

    .tech-card:hover {
        transform: translateY(-10px);
        border-color: rgba(6, 182, 212, .35);
        box-shadow: 0 28px 70px rgba(15, 23, 42, .12);
    }

    .tech-card i {
        font-size: 2.4rem;
        margin-bottom: 18px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .tech-card span {
        display: block;
        font-weight: 700;
        color: var(--dark);
        font-size: .95rem;
    }

    @media(max-width: 991px) {
        .tech-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media(max-width: 576px) {
        .tech-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .tech-card {
            padding: 26px 15px;
        }
    }

    /* ==========================================
       NOSOTROS
    ========================================== */

    .nosotros-section {

        padding: 120px 0;

        background: var(--bg-light);

    }

    .fundador-img {

        max-width: 420px;

        border-radius: 30px;

        box-shadow:
            0 30px 70px rgba(0,0,0,.15);

    }

    .nosotros-text {

        color: var(--text-light);

        line-height: 1.9;

        margin-bottom: 20px;

    }

    .stat-card {

        background: #fff;

        border-radius: 20px;

        padding: 25px;

        text-align: center;

        margin-top: 20px;

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

    }

    .stat-card h3 {

        color: var(--primary);

        font-weight: 800;

        font-size: 2rem;

        margin-bottom: 10px;

    }

    .stat-card span {

        color: var(--text-light);

    }

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

    .contacto-section {

        padding: 120px 0;

        background: #fff;

    }

    .contact-card {

        background: #fff;

        border-radius: 30px;

        padding: 50px;

        box-shadow:
            0 25px 70px rgba(0,0,0,.08);

    }

    .contact-input {

        padding: 15px 20px;

        border-radius: 14px;

        border: 1px solid #E5E7EB;

    }

    .contact-input:focus {

        box-shadow: none;

        border-color: var(--secondary);

    }

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

    .footer {

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

        padding: 80px 0 40px;

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

    }

    .footer-logo {

        max-height: 90px;

        margin-bottom: 25px;

    }

    .footer p {

        max-width: 500px;

        line-height: 1.9;

        margin-bottom: 0;

    }

    .footer-links {

        display: flex;

        justify-content: flex-end;

        flex-wrap: wrap;

        gap: 25px;

    }

    .footer-links a {

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

        transition: .3s;

        font-weight: 500;

    }

    .footer-links a:hover {

        color: var(--secondary);

    }

    .footer-divider {

        height: 1px;

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

        margin: 40px 0 25px;

    }

    .footer-bottom {

        display: flex;

        justify-content: space-between;

        align-items: center;

        flex-wrap: wrap;

        gap: 20px;

    }

    .footer-copy {

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

        font-size: .95rem;

    }

    .footer-social {

        display: flex;

        gap: 15px;

    }

    .footer-social a {

        width: 42px;
        height: 42px;

        border-radius: 12px;

        display: flex;

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

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

        color: #fff;

        transition: .3s;

    }

    .footer-social a:hover {

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

        transform: translateY(-3px);

    }

    @media(max-width:768px){

        .footer {

            text-align: center;

        }

        .footer-links {

            justify-content: center;

            margin-top: 30px;

        }

        .footer-bottom {

            flex-direction: column;

        }

    }

    /* ==========================================
       CASOS DE EXITO
    ========================================== */

    .casos-section{

        padding:120px 0;

        background:#fff;

    }

    .caso-item{

        margin-top:100px;

    }

    .caso-img{

        border-radius:25px;

        box-shadow:
        0 30px 60px rgba(0,0,0,.12);

    }

    .caso-categoria{

        display:inline-block;

        background:
        rgba(37,99,235,.10);

        color:var(--primary);

        padding:8px 18px;

        border-radius:30px;

        font-size:.8rem;

        font-weight:600;

        margin-bottom:15px;

    }

    .caso-item h3{

        font-size:2rem;

        font-weight:700;

        margin-bottom:20px;

        color:var(--dark);

    }

    .caso-item p{

        color:var(--text-light);

        line-height:1.9;

        margin-bottom:25px;

    }

    .tech-tags{

        display:flex;

        flex-wrap:wrap;

        gap:10px;

    }

    .tech-tags span{

        background:#F1F5F9;

        padding:8px 15px;

        border-radius:20px;

        font-size:.85rem;

        font-weight:600;

    }

/* ==========================================
   EMPRESA PAGE
========================================== */

    .empresa-hero {
        position: relative;
        min-height: 100vh;
        background:
            linear-gradient(90deg, rgba(15, 23, 42, .96) 0%, rgba(15, 23, 42, .82) 45%, rgba(15, 23, 42, .35) 100%),
            url('../img/empresa-hero.jpg') center center / cover no-repeat;
        overflow: hidden;
    }

    .empresa-hero::before {
        content: '';
        position: absolute;
        width: 520px;
        height: 520px;
        background: rgba(37, 99, 235, .22);
        border-radius: 50%;
        top: -180px;
        left: -180px;
        filter: blur(120px);
    }

    .empresa-hero-overlay {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 70% 40%, rgba(6, 182, 212, .20), transparent 35%),
            radial-gradient(circle at 20% 80%, rgba(37, 99, 235, .20), transparent 30%);
    }

    .empresa-hero-title {
        font-size: 4rem;
        line-height: 1.12;
        font-weight: 800;
        color: #fff;
        max-width: 850px;
    }

    .empresa-hero-text {
        color: rgba(255,255,255,.78);
        font-size: 1.15rem;
        line-height: 1.9;
        max-width: 760px;
    }

    .empresa-section {
        padding: 120px 0;
        background: #fff;
    }

    .empresa-light {
        background: var(--bg-light);
    }

    .empresa-img {
        border-radius: 28px;
        box-shadow: 0 30px 80px rgba(15, 23, 42, .15);
    }

    /* Timeline */

    .timeline {
        position: relative;
        padding-left: 35px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 8px;
        width: 2px;
        height: calc(100% - 16px);
        background: linear-gradient(var(--primary), var(--secondary));
    }

    .timeline-item {
        position: relative;
        margin-bottom: 35px;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: -35px;
        top: 7px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        box-shadow: 0 0 0 8px rgba(37, 99, 235, .12);
    }

    .timeline-item span {
        display: inline-block;
        color: var(--primary);
        font-weight: 700;
        margin-bottom: 8px;
    }

    .timeline-item h4 {
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 8px;
    }

    .timeline-item p {
        color: var(--text-light);
        line-height: 1.8;
        margin-bottom: 0;
    }

    /* Misión visión */

    .mv-card {
        background: #fff;
        border-radius: 30px;
        overflow: hidden;
        height: 100%;
        box-shadow: 0 25px 70px rgba(15, 23, 42, .08);
        border: 1px solid #E5E7EB;
    }

    .mv-img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

    .mv-content {
        padding: 35px;
    }

    .mv-icon {
        width: 65px;
        height: 65px;
        border-radius: 18px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 22px;
    }

    .mv-icon i {
        color: #fff;
        font-size: 1.6rem;
    }

    .mv-content h3 {
        font-weight: 800;
        color: var(--dark);
        margin-bottom: 15px;
    }

    .mv-content p {
        color: var(--text-light);
        line-height: 1.8;
    }

    /* Valores */

    .valor-card {
        height: 100%;
        background: #fff;
        border: 1px solid #E5E7EB;
        border-radius: 24px;
        padding: 32px 24px;
        text-align: center;
        box-shadow: 0 15px 40px rgba(15, 23, 42, .05);
        transition: .35s ease;
    }

    .valor-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 70px rgba(15, 23, 42, .12);
        border-color: rgba(6, 182, 212, .35);
    }

    .valor-card i {
        font-size: 2rem;
        margin-bottom: 18px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .valor-card h4 {
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 12px;
    }

    .valor-card p {
        color: var(--text-light);
        line-height: 1.7;
        font-size: .95rem;
    }

    /* Fundador */

    .fundador-subtitle {
        color: var(--primary);
        font-weight: 700;
    }

    .fundador-role {
        color: var(--text-light);
        font-weight: 600;
    }

    .founder-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .founder-tags span {
        background: #fff;
        border: 1px solid #E5E7EB;
        color: var(--dark);
        padding: 10px 16px;
        border-radius: 30px;
        font-size: .9rem;
        font-weight: 600;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
    }

    /* Experiencia */

    .empresa-experiencia {
        padding: 90px 0;
        background:
            radial-gradient(circle at top left, rgba(37, 99, 235, .16), transparent 30%),
            radial-gradient(circle at bottom right, rgba(6, 182, 212, .16), transparent 30%),
            linear-gradient(135deg, var(--dark), var(--dark-2));
    }

    .exp-card {
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 26px;
        padding: 35px 20px;
        height: 100%;
        backdrop-filter: blur(12px);
    }

    .exp-card h3 {
        color: #fff;
        font-size: 2.4rem;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .exp-card p {
        color: rgba(255,255,255,.70);
        margin-bottom: 0;
    }

    /* Especialidades */

    .especialidades-list {
        display: grid;
        gap: 16px;
    }

    .especialidades-list div {
        color: var(--text);
        font-weight: 600;
    }

    .especialidades-list i {
        color: var(--secondary);
        margin-right: 10px;
    }

    /* CTA */

    .empresa-cta {
        padding: 120px 0;
        background:
            linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(17, 24, 39, .94)),
            url('../img/empresa-vision.jpg') center center / cover no-repeat;
        color: #fff;
    }

    .empresa-cta h2 {
        font-size: 2.7rem;
        font-weight: 800;
        margin-bottom: 20px;
    }

    .empresa-cta p {
        max-width: 750px;
        margin: 0 auto 35px;
        color: rgba(255,255,255,.75);
        line-height: 1.9;
    }

    /* Responsive empresa */

    @media(max-width: 991px) {

        .empresa-hero {
            text-align: center;
            padding-top: 120px;
        }

        .empresa-hero-title {
            font-size: 3rem;
            margin-left: auto;
            margin-right: auto;
        }

        .empresa-hero-text {
            margin-left: auto;
            margin-right: auto;
        }

        .timeline {
            margin-top: 30px;
        }

        .mv-img {
            height: 240px;
        }

    }

    @media(max-width: 768px) {

        .empresa-hero-title {
            font-size: 2.35rem;
        }

        .empresa-section {
            padding: 90px 0;
        }

        .empresa-cta h2 {
            font-size: 2rem;
        }

        .fundador-img {
            max-width: 340px;
        }

    }

    @media(max-width: 576px) {

        .empresa-hero-title {
            font-size: 2rem;
        }

        .empresa-hero-text {
            font-size: 1rem;
        }

        .mv-content {
            padding: 28px;
        }

        .valor-card {
            padding: 28px 20px;
        }

    }

/* ==========================================
   LEGAL
========================================== */

    .legal-hero{

        padding:220px 0 120px;

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

        text-align:center;

    }

    .legal-title{

        color:#fff;

        font-size:4rem;

        font-weight:800;

    }

    .legal-subtitle{

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

        font-size:1.1rem;

    }

    .legal-section{

        padding:120px 0;

        background:#F8FAFC;

    }

    .legal-card{

        background:#fff;

        border-radius:25px;

        padding:40px;

        margin-bottom:30px;

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

    }

    .legal-icon{

        width:70px;

        height:70px;

        border-radius:20px;

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

        display:flex;

        align-items:center;

        justify-content:center;

        margin-bottom:25px;

    }

    .legal-icon i{

        color:#fff;

        font-size:1.5rem;

    }

    .legal-card h2{

        font-weight:700;

        margin-bottom:20px;

    }

    .legal-card p{

        color:var(--text-light);

        line-height:1.9;

    }

    .legal-card ul{

        margin-top:15px;

    }

    .legal-card li{

        margin-bottom:10px;

        color:var(--text-light);

    }

    .legal-contact-box{

        background:#F8FAFC;

        padding:25px;

        border-radius:20px;

    }

    @media(max-width:768px){

        .legal-title{

            font-size:2.5rem;

        }

        .legal-card{

            padding:25px;

        }

    }


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

    .support-card,
    .support-type,
    .process-card {

        background:#fff;

        padding:35px;

        border-radius:25px;

        text-align:center;

        height:100%;

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

        transition:.3s;

    }

    .support-card:hover,
    .support-type:hover,
    .process-card:hover{

        transform:translateY(-8px);

    }

    .support-card i,
    .support-type i{

        font-size:2rem;

        color:var(--primary);

        margin-bottom:20px;

    }

    .support-schedule{

        background:#fff;

        border-radius:25px;

        padding:50px;

        text-align:center;

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

    }

    .support-schedule h4{

        color:var(--primary);

        font-size:2rem;

        font-weight:700;

    }

    .process-card span{

        width:60px;

        height:60px;

        border-radius:50%;

        display:flex;

        align-items:center;

        justify-content:center;

        margin:0 auto 20px;

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

        color:#fff;

        font-size:1.4rem;

        font-weight:700;

    }

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

    .contact-info-card,
    .contact-form-card{

        background:#fff;

        border-radius:25px;

        padding:35px;

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

        height:100%;

    }

    .contact-info-card{

        text-align:center;

    }

    .contact-info-card i{

        font-size:2rem;

        color:var(--primary);

        margin-bottom:20px;

    }

    .contact-input{

        padding:15px;

        border-radius:15px;

        border:1px solid #E5E7EB;

    }

    .contact-input:focus{

        box-shadow:none;

        border-color:var(--secondary);

    }