/* 
   Projects Section
 */

#projects{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:100px 0;

}


/* 
   Main Card
 */

.projects-card{

    width:min(1100px,90%);

    padding:50px;

    border-radius:28px;

    background:

    rgba(255,255,255,.18);

    backdrop-filter:

    blur(20px);

    -webkit-backdrop-filter:

    blur(20px);

    box-shadow:

    0 15px 40px

    rgba(0,0,0,.08);

}


/* 
   Title
 */

.section-title{

    text-align:center;

    font-size:20pt;

    font-weight:700;

    color:

    rgba(6,157,227,.95);

    margin-bottom:50px;

}


/* 
   Container
 */

.projects-container{

    display:grid;

    grid-template-columns:

    repeat(

        auto-fit,

        minmax(

            420px,

            1fr

        )

    );

    gap:35px;

}


/* 
   Card
 */

.project-card{

    padding:40px;

    border-radius:28px;

    background:

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

    backdrop-filter:

    blur(20px);

    border:

    1px solid

    rgba(255,255,255,.2);

    box-shadow:

    0 10px 25px

    rgba(0,0,0,.05);

    transition:

    all .3s ease;

}


.project-card:hover{

    transform:

    translateY(-8px);

}


/* 
   Github Card
 */

.github-card{

    text-align:center;

    position:relative;

    border:

    2px solid transparent;

    background-image:

    linear-gradient(

        var(--card),

        var(--card)

    ),

    linear-gradient(

        90deg,

        #06f7c7,

        #2196f3

    );

    background-origin:

    border-box;

    background-clip:

    padding-box,

    border-box;

}


.github-card i{

    font-size:5rem;

    color:var(--text);

    margin-bottom:25px;

    transition:.3s ease;

}


.github-card:hover i{

    transform:

    rotate(-10deg)

    scale(1.1);

}


.github-card h3{

    font-size:2rem;

    color:var(--text);

    margin-bottom:20px;

}


.github-card p{

    color:var(--text-secondary);

    line-height:1.8;

    margin-bottom:35px;

}


/* 
   Form Card
 */

.collaborate-card h3{

    font-size:2rem;

    color:var(--text);

    margin-bottom:15px;

}

.collaborate-card{

    position:relative;

}


.collaborate-card p{

    color:var(--text-secondary);

    margin-bottom:30px;

}


.collab-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.collab-form.sending{

    pointer-events:none;

    opacity:.45;

    filter:

    blur(1px);

    transition:

    opacity .3s ease,

    filter .3s ease;

}


/* 
   Input
 */

.collab-form input,

.collab-form textarea{

    padding:16px 20px;

    border:none;

    outline:none;

    border-radius:16px;

    background:

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

    backdrop-filter:

    blur(20px);

    border:

    1px solid

    rgba(255,255,255,.2);

    color:var(--text);

    font-size:1rem;

    transition:.3s ease;

}


.collab-form textarea{

    resize:none;

}


.collab-form input:focus,

.collab-form textarea:focus{

    border:

    1px solid

    rgba(33,150,243,.5);

    box-shadow:

    0 0 15px

    rgba(33,150,243,.15);

}


.collab-form input::placeholder,

.collab-form textarea::placeholder{

    color:

    rgba(128,128,128,.8);

}


/* 
   Gradient Button
 */

.project-btn{

    display:inline-block;

    padding:14px 28px;

    border:none;

    border-radius:18px;

    text-decoration:none;

    color:white;

    font-size:1rem;

    font-weight:600;

    background:

    linear-gradient(

        90deg,

        #06f7c7,

        #2196f3

    );

    box-shadow:

    0 8px 20px

    rgba(33,150,243,.2);

    transition:

    all .3s ease;

}


.project-btn:hover{

    transform:

    translateY(-3px)

    scale(1.03);

    box-shadow:

    0 15px 30px

    rgba(33,150,243,.3);

}

.message-status{

    margin-top:22px;

}

.message-loader,
.message-success{

    display:none;

    align-items:center;

    gap:14px;

    padding:16px;

    border-radius:18px;

    background:

    rgba(255,255,255,.16);

    border:

    1px solid

    rgba(255,255,255,.22);

    box-shadow:

    0 12px 28px

    rgba(33,150,243,.1);

}

.message-status.loading .message-loader,
.message-status.success .message-success{

    display:flex;

    animation:

    messageStatusIn .36s ease;

}

.message-status.done .message-loader{

    animation:

    messageStatusOut .28s ease forwards;

}

.message-loader-icon,
.message-success-icon{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex:0 0 auto;

    border-radius:16px;

    color:white;

    background:

    linear-gradient(

        135deg,

        #05fbea,

        #2196f3

    );

    box-shadow:

    0 10px 22px

    rgba(33,150,243,.18);

}

.message-loader-icon i{

    animation:

    messagePlane 1s ease-in-out infinite;

}

.message-loader-content{

    flex:1;

}

.message-loader-content span,
.message-success strong{

    color:var(--text);

    font-size:11pt;

    font-weight:700;

}

.message-progress{

    height:8px;

    margin-top:10px;

    overflow:hidden;

    border-radius:999px;

    background:

    rgba(255,255,255,.22);

}

.message-progress span{

    display:block;

    width:42%;

    height:100%;

    border-radius:999px;

    background:

    linear-gradient(

        90deg,

        #05fbea,

        #2196f3

    );

    animation:

    messageProgress 1.1s ease-in-out infinite;

}

.message-success-icon{

    background:

    linear-gradient(

        135deg,

        #10d876,

        #14e1fc

    );

}

.message-success-icon i{

    animation:

    checkPop .45s ease;

}

.message-success p{

    margin-top:4px;

    color:var(--text-secondary);

    line-height:1.5;

    font-size:10pt;

}

@keyframes messageStatusIn{

    from{

        opacity:0;

        transform:

        translateY(10px)

        scale(.98);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}

@keyframes messageStatusOut{

    to{

        opacity:0;

        transform:

        translateY(-8px)

        scale(.98);

    }

}

@keyframes messagePlane{

    0%,100%{

        transform:

        translateX(0);

    }

    50%{

        transform:

        translateX(4px)

        translateY(-3px);

    }

}

@keyframes messageProgress{

    0%{

        transform:

        translateX(-110%);

    }

    100%{

        transform:

        translateX(250%);

    }

}

@keyframes checkPop{

    0%{

        transform:

        scale(.4);

        opacity:.4;

    }

    70%{

        transform:

        scale(1.18);

    }

    100%{

        transform:

        scale(1);

        opacity:1;

    }

}


/* 
   Responsive
*/

@media(max-width:768px){

    .projects-card{

        padding:30px 20px;

    }


    .projects-container{

        grid-template-columns:

        1fr;

    }


    .github-card i{

        font-size:4rem;

    }


    .github-card h3,

    .collaborate-card h3{

        font-size:1.6rem;

    }

}