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

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

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#060813;
    color:#fff;
    overflow-x:hidden;
}

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

:root{

    --bg:#060813;

    --bg-card:#0d1225;

    --bg-card-2:#131b35;

    --sidebar:#0a1021;

    --primary:#29c8ff;

    --secondary:#ff4dd2;

    --text:#ffffff;

    --text2:#bfc6e0;

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

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

    --radius:24px;

}

/*=========================================
=            APP
=========================================*/

.app{

    display:grid;

    grid-template-columns:260px 1fr 320px;

    gap:30px;

    min-height:100vh;

    padding:35px;

}

/*=========================================
=            SIDEBAR
=========================================*/

.sidebar{

    background:linear-gradient(180deg,#10182f,#0a1021);

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

    border-radius:30px;

    padding:35px;

    display:flex;

    flex-direction:column;

    /*justify-content:space-between;*/

    box-shadow:var(--shadow);

}

/*=========================================
=            LOGO
=========================================*/

.logo-box{

    display:flex;

    justify-content:center;

    align-items:center;

}

.logo{

    width:90px;

    height:90px;

    border-radius:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    font-weight:800;

    color:#fff;

    background:linear-gradient(135deg,#22d3ee,#7c3aed,#ff4dd2);

    box-shadow:

        0 0 25px rgba(41,200,255,.45),

        0 0 45px rgba(255,77,210,.25);

}

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

.menu{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:50px;

}

.menu-item{

    display:flex;
    width:100%;
    padding:14px 18px;
    align-items:center;

    gap:15px;

    text-decoration:none;

    color:var(--text2);

    padding:18px 22px;

    border-radius:18px;

    transition:.35s;

    font-size:15px;

    font-weight:500;

}

.menu-item i{

    font-size:20px;

}

.menu-item:hover{

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

    color:#fff;

    transform:translateX(8px);

}

.menu-item.active{

    background:linear-gradient(135deg,#1bc7ff,#7c3aed);

    color:white;

    box-shadow:

        0 0 18px rgba(41,200,255,.45);

}

/*=========================================
=            BOTON VIP
=========================================*/

.vip-btn{
    margin-top:60px;
    display: flex;
    justify-content: center;
    border:none;
    outline:none;
    cursor:pointer;
    border-radius:18px;
    font-size:16px;
    font-weight:700;
    color:white;
    padding:14px 25px;
    width:100%;
    animation:glow 3s infinite;
    background:linear-gradient(135deg,#29c8ff,#7c3aed,#ff4dd2);
    transition:.35s;

}

.vip-btn:hover{

    transform:translateY(-5px);

    box-shadow:

        0 0 25px rgba(41,200,255,.45),

        0 0 45px rgba(255,77,210,.25);

}

/*=========================================
=            MAIN
=========================================*/

.main{

    width:100%;

    min-width:0;

}

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

.hero{

    margin-bottom:35px;

}

.hero h1{

    font-size:70px;

    line-height:1;

    font-weight:800;

}

.hero h1 span{

    display:block;

    background:linear-gradient(90deg,#25d0ff,#8b5cf6,#ff4dd2);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero h1 strong{

    color:white;

}

.hero p{

    margin-top:18px;

    color:var(--text2);

    font-size:18px;

}

/*=========================================
=            SEARCH
=========================================*/

.search-box{

    margin-top:35px;

    display:flex;

    align-items:center;

    background:#10182f;

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

    border-radius:20px;

    overflow:hidden;

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    color:white;

    padding:20px;

    font-size:16px;

}

.search-box input::placeholder{

    color:#8d94b3;

}

.search-box button{

    width:70px;

    height:64px;

    border:none;

    background:linear-gradient(135deg,#22d3ee,#7c3aed);

    color:white;

    cursor:pointer;

    font-size:22px;

}

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

.filters{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:35px;

}

.filters button{

    border:none;

    outline:none;

    cursor:pointer;

    padding:14px 28px;

    border-radius:50px;

    background:#10182f;

    color:#cdd4f0;

    font-size:14px;

    font-weight:600;

    transition:.35s;

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

}

.filters button:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 0 18px rgba(41,200,255,.25);

}

.filters button.active{

    background:linear-gradient(135deg,#29c8ff,#7c3aed);

    color:#fff;

    box-shadow:

        0 0 20px rgba(41,200,255,.45),

        0 0 35px rgba(124,58,237,.25);

}

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

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(430px,1fr));

    gap:28px;

    align-items:start;

}

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

.card{

    background:linear-gradient(180deg,#10182f,#0b1023);

    border-radius:28px;

    overflow:hidden;

    display:flex;

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

    transition:.35s;

    position:relative;

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

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(41,200,255,.35);

    box-shadow:

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

        0 0 25px rgba(41,200,255,.18);

}

/*=========================================
=            THUMBNAIL
=========================================*/

.video-wrapper{

    width:170px;

    min-width:170px;

    height:220px;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

    text-decoration:none;

}

.video-wrapper img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.card:hover .video-wrapper img{

    transform:scale(1.06);

}

.play-icon{

    position:absolute;

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(8px);

    color:white;

    font-size:24px;

    transition:.35s;

}
/*====================================================
                         ADSENSE EN CARTAS
=====================================================*/
.ads-middle {
    grid-column: 1 / -1;
    min-height: 120px;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
}


.card:hover .play-icon{

    background:linear-gradient(135deg,#29c8ff,#ff4dd2);

    transform:scale(1.1);

}

/*=========================================
=            CONTENT
=========================================*/

.content{

    flex:1;

    display:flex;

    flex-direction:column;

    padding:22px;

}

.content h3{

    color:#fff;

    font-size:22px;

    font-weight:700;

    margin-bottom:10px;

    line-height:1.3;

}

.content p{

    color:#bfc6e0;

    font-size:14px;

    line-height:1.7;

    margin-bottom:18px;

    flex:1;

}

/*=========================================
=            CATEGORY
=========================================*/

.content span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:8px 18px;

    border-radius:50px;

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

    border:1px solid rgba(41,200,255,.25);

    color:#29c8ff;

    font-size:13px;

    font-weight:600;

    margin-bottom:20px;

}

/*=========================================
=            BOTON COPIAR
=========================================*/

.copy-btn{

    border:none;

    cursor:pointer;

    padding:16px;

    border-radius:18px;

    color:#fff;

    font-size:15px;

    font-weight:700;

    background:linear-gradient(135deg,#29c8ff,#7c3aed,#ff4dd2);

    transition:.35s;

}

.copy-btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 0 20px rgba(41,200,255,.45),

        0 0 35px rgba(255,77,210,.25);

}

.copy-btn:active{

    transform:scale(.98);

}

/*=========================================
=            LOADING
=========================================*/

.loading{

    width:100%;

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#8d94b3;

    font-size:15px;

    letter-spacing:1px;

}
/*=========================================
=            RIGHT PANEL
=========================================*/

.right-panel{

    display:flex;

    flex-direction:column;

    gap:25px;

}

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

.ads-card{

    background:linear-gradient(180deg,#10182f,#0b1023);

    border-radius:30px;

    padding:28px;

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

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

    transition:.35s;

}

.ads-card:hover{

    transform:translateY(-5px);

    border-color:rgba(41,200,255,.20);

}

.ads-card h3{

    font-size:20px;

    font-weight:700;

    margin-bottom:20px;

    color:#fff;

}

/*=========================================
=            ADSENSE
=========================================*/

.ads-content{

    width:100%;

    min-height:600px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:22px;

    background:

        linear-gradient(

        135deg,

        rgba(41,200,255,.05),

        rgba(124,58,237,.05),

        rgba(255,77,210,.05)

        );

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

    overflow:hidden;

}

/*=========================================
=            WIDGET
=========================================*/

.widget{

    background:#10182f;

    border-radius:24px;

    padding:24px;

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

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

}

.widget h4{

    font-size:18px;

    margin-bottom:15px;

}

.widget p{

    color:#bfc6e0;

    font-size:14px;

    line-height:1.7;

}

/*=========================================
=            TOAST
=========================================*/

#toast{

    position:fixed;

    bottom:35px;

    right:35px;

    background:linear-gradient(

        135deg,

        #29c8ff,

        #7c3aed,

        #ff4dd2

        );

    color:#fff;

    padding:16px 28px;

    border-radius:18px;

    font-weight:600;

    box-shadow:

        0 15px 40px rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s;

    z-index:99999;

}

#toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#060813;

}

::-webkit-scrollbar-thumb{

    border-radius:30px;

    background:

        linear-gradient(

        #29c8ff,

        #7c3aed,

        #ff4dd2

        );

}

::-webkit-scrollbar-thumb:hover{

    background:#29c8ff;

}

/*=========================================
=            GLOW EFFECT
=========================================*/

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

        circle at top right,

        rgba(41,200,255,.10),

        transparent 45%

        );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.card:hover::before{

    opacity:1;

}

/*=========================================
=            GLASS EFFECT
=========================================*/

.sidebar,
.ads-card,
.card{

    backdrop-filter:blur(16px);

}

/*=========================================
=            INPUT FOCUS
=========================================*/

.search-box:focus-within{

    border-color:#29c8ff;

    box-shadow:

        0 0 20px rgba(41,200,255,.20);

}

/*=========================================
=            BUTTON TRANSITIONS
=========================================*/

button{

    transition:

        .3s ease,

        transform .25s ease;

}

button:hover{

    transform:translateY(-2px);

}

button:active{

    transform:scale(.98);

}

/*=========================================
=            LINKS
=========================================*/

a{

    text-decoration:none;

}

img{

    display:block;

    max-width:100%;

}
/*=========================================
=            DESKTOP LARGE
=========================================*/

@media (max-width:1600px){

    .app{

        grid-template-columns:240px 1fr 290px;

        gap:25px;

    }

    .hero h1{

        font-size:60px;

    }

    .cards{

        grid-template-columns:repeat(auto-fill,minmax(380px,1fr));

    }

}

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

@media (max-width:1350px){

    .app{

        grid-template-columns:220px 1fr;

    }

    .right-panel{

        display:none;

    }

}

/*=========================================
=            TABLET
=========================================*/

@media (max-width:992px){

    .app{

        grid-template-columns:1fr;

        padding:25px;

        gap:25px;

    }

    .sidebar{

        flex-direction:row;

        align-items:center;

        justify-content:space-between;

        padding:20px;

    }

    .logo{

        width:65px;

        height:65px;

        font-size:26px;

    }

    .menu{

        flex-direction:row;

        margin-top:0;

        gap:10px;

    }




    .hero{

        text-align:center;

    }

    .search-box{

        max-width:700px;

        margin:35px auto 0;

    }

    .filters{

        justify-content:center;

    }

}

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

@media (max-width:768px){

    .sidebar{

        flex-direction:column;

        gap:25px;

    }

    .menu{

        width:100%;

        flex-direction:column;

    }





    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:15px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .card{

        flex-direction:column;

    }

    .video-wrapper{

        width:100%;

        height:260px;

    }

    .content{

        padding:22px;

    }

    .copy-btn{

        width:100%;

    }

}

/*=========================================
=            SMALL MOBILE
=========================================*/

@media (max-width:480px){

    .app{

        padding:18px;

    }

    .hero h1{

        font-size:34px;

    }

    .filters{

        gap:10px;

    }

    .filters button{

        width:100%;

    }

    .search-box{

        border-radius:16px;

    }

    .search-box input{

        padding:16px;

        font-size:14px;

    }

    .search-box button{

        width:58px;

        height:54px;

    }

    .content h3{

        font-size:19px;

    }

}

/*=========================================
=            ANIMATIONS
=========================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(41,200,255,0);

    }

    50%{

        box-shadow:

            0 0 25px rgba(41,200,255,.35);

    }

    100%{

        box-shadow:0 0 0 rgba(41,200,255,0);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.hero{

    animation:fadeUp .8s ease;

}

.filters{

    animation:fadeUp 1s ease;

}

.card{

    animation:fadeUp .8s ease;

}

.logo{

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

}



/*=========================================
=            HOVER EFFECTS
=========================================*/

.card:hover .content h3{

    color:#29c8ff;

}

.menu-item:hover i{

    transform:scale(1.15);

}

.menu-item i{

    transition:.3s;

}

.copy-btn:hover{

    letter-spacing:.5px;

}

.hero h1{

    text-shadow:

        0 0 20px rgba(41,200,255,.15);

}

.logo:hover{

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

    transition:.4s;

}

.search-box button:hover{

    filter:brightness(1.1);

}

.filters button:hover{

    border-color:#29c8ff;

}

.ads-card:hover{

    box-shadow:

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

        0 0 30px rgba(41,200,255,.15);

}



/*=========================================
=            END INDEX
=========================================*/

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

.contact-section{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:35px;

    align-items:start;

}

/*=========================================
=            INFORMACIÓN
=========================================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.info-card{

    background:linear-gradient(180deg,#10182f,#0b1023);

    border-radius:24px;

    padding:25px;

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

    transition:.35s;

}

.info-card:hover{

    transform:translateY(-5px);

    border-color:rgba(41,200,255,.25);

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

}

.info-card i{

    font-size:32px;

    color:#29c8ff;

    margin-bottom:18px;

}

.info-card h3{

    margin-bottom:8px;

    font-size:20px;

}

.info-card p{

    color:#bfc6e0;

    line-height:1.6;

}

/*=========================================
=            FORMULARIO
=========================================*/

.contact-form{

    background:linear-gradient(180deg,#10182f,#0b1023);

    border-radius:30px;

    padding:40px;

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

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

}

/*=========================================
=            CABECERA
=========================================*/

.form-header{

    margin-bottom:35px;

}

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(41,200,255,.10);

    color:#29c8ff;

    border:1px solid rgba(41,200,255,.20);

    margin-bottom:18px;

    font-size:14px;

    font-weight:600;

}

.form-header h2{

    font-size:34px;

    margin-bottom:10px;

}

.form-header p{

    color:#bfc6e0;

    line-height:1.8;

}

/*=========================================
=            FILAS
=========================================*/

.row{

    display:grid;

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

    gap:22px;

}

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

.input-box{

    margin-bottom:22px;

}

.input-box label{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    margin-bottom:12px;

    font-weight:600;

}

.input-box label i{

    color:#29c8ff;

}

.input-box input,

.input-box textarea{

    width:100%;

    border:none;

    outline:none;

    background:#151d37;

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

    color:white;

    padding:18px 20px;

    border-radius:18px;

    font-size:15px;

    transition:.3s;

    resize:none;

}

.input-box textarea{

    min-height:220px;

}

.input-box input::placeholder,

.input-box textarea::placeholder{

    color:#8d94b3;

}

.input-box input:focus,

.input-box textarea:focus{

    border-color:#29c8ff;

    box-shadow:0 0 18px rgba(41,200,255,.18);

}

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

.form-footer{

    margin-top:30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.response-info{

    display:flex;

    align-items:center;

    gap:10px;

    color:#9fa8c8;

    font-size:14px;

}

.response-info i{

    color:#29c8ff;

    font-size:18px;

}

/*=========================================
=            BOTÓN
=========================================*/

.send-btn{

    padding:18px 40px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:white;

    font-size:16px;

    font-weight:700;

    background:linear-gradient(135deg,#29c8ff,#7c3aed,#ff4dd2);

    transition:.35s;

}

.send-btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 0 20px rgba(41,200,255,.35),

        0 0 35px rgba(255,77,210,.20);

}

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

@media(max-width:1000px){

    .contact-section{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .row{

        grid-template-columns:1fr;

    }

    .contact-form{

        padding:25px;

    }

    .form-header h2{

        font-size:28px;

    }

    .form-footer{

        flex-direction:column;

        align-items:stretch;

    }

    .send-btn{

        width:100%;

    }

}
/*=========================================
=            CONTACT FORM PREMIUM
=========================================*/

.contact-form{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:32px;

    background:linear-gradient(
        180deg,
        rgba(17,24,39,.96),
        rgba(10,16,33,.96)
        );

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

    backdrop-filter:blur(20px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition:.4s ease;

}

/* Borde degradado */

.contact-form::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:32px;

    background:linear-gradient(
        135deg,
        rgba(41,200,255,.8),
        rgba(124,58,237,.8),
        rgba(255,77,210,.8)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

/* Glow superior */

.contact-form::after{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:280px;

    height:280px;

    border-radius:50%;

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

    filter:blur(80px);

    pointer-events:none;

}

/* Hover */

.contact-form:hover{

    transform:translateY(-6px);

    box-shadow:

        0 30px 80px rgba(0,0,0,.55),

        0 0 30px rgba(41,200,255,.18);

}
/*=========================================
=            CONTACT FORM
=========================================*/

.contact-form{

    background:linear-gradient(180deg,#10182f,#0b1023);

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

    border-radius:30px;

    padding:45px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.contact-form h2{

    font-size:36px;

    margin-bottom:35px;

    color:#fff;

    font-weight:700;

}

/*=========================================
=            FORM
=========================================*/

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/*=========================================
=            INPUT GROUP
=========================================*/

.input-group{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.input-group label{

    color:#ffffff;

    font-size:15px;

    font-weight:600;

}

/*=========================================
=            INPUT
=========================================*/

.input-group input{

    width:100%;

    height:58px;

    background:#161d37;

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

    border-radius:16px;

    padding:0 20px;

    color:#fff;

    font-size:15px;

    outline:none;

    transition:.3s;

}

.input-group input::placeholder{

    color:#8d94b3;

}

.input-group input:focus{

    border-color:#29c8ff;

    box-shadow:0 0 18px rgba(41,200,255,.18);

}

/*=========================================
=            TEXTAREA
=========================================*/

.input-group textarea{

    width:100%;

    min-height:220px;

    background:#161d37;

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

    border-radius:16px;

    padding:18px 20px;

    color:#fff;

    font-size:15px;

    outline:none;

    resize:vertical;

    transition:.3s;

}

.input-group textarea::placeholder{

    color:#8d94b3;

}

.input-group textarea:focus{

    border-color:#29c8ff;

    box-shadow:0 0 18px rgba(41,200,255,.18);

}

/*=========================================
=            BOTON
=========================================*/

.contact-form .copy-btn{

    margin-top:10px;

    align-self:flex-start;

    padding:16px 35px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg,#29c8ff,#7c3aed,#ff4dd2);

    transition:.35s;

}

.contact-form .copy-btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 0 20px rgba(41,200,255,.35),

        0 0 35px rgba(255,77,210,.25);

}

.contact-form .copy-btn i{

    margin-right:10px;

}

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

@media(max-width:768px){

    .contact-form{

        padding:25px;

    }

    .contact-form h2{

        font-size:28px;

    }

    .contact-form .copy-btn{

        width:100%;

        justify-content:center;

    }

}