body {
}


/* Visit website button */
.visit-website-button {
    background-color: #10b4e4 !important;
    color: white;
    width: 60%;
    padding: 16px 38px;
    text-align: center;
    font-family: "Poppins, sans-serif";
    font-size:1.4rem!important;
    transition:all ease-in-out 0.3s !important;
}

    .visit-website-button:hover {
        background-color: #080c34!important;
        cursor:pointer;
        color:white;
    }

@media (max-width:1150px){
    .visit-website-button{
        width:70%;
    }
}

@media (max-width:350px){
    .visit-website-button{
        width: 90%L;
    }
}




/* Project card */
.project-card{
        width: 100%;
        background: rgba(255, 255, 255, 0.9)!important;
        backdrop-filter: blur(5px)!important;
        border: 1px solid #e0e0e0!important;
        border-top: 5px solid #2596be!important;
        /* border-right: 5px solid #2596be!important; */
        border-radius: 15px!important;
        overflow: hidden!important;
        transition: all 0.4s ease!important;
}

.project-card:hover {
    transform: translateY(-10px);
    /* box-shadow: 0 12px 24px rgba(37, 150, 190, 0.3); */
}



.social-icon {
    background-color: #080c34;
    color:white;
    width:3.7rem;
    height:3.7rem;
    font-size:2.2rem;
    display:flex;
    justify-content:center;
    align-content:center;
}

.social-icons{
    display:flex;
    flex-direction:row;
    gap:30px;
    justify-content:center;
}

.si{
    position:relative;
}

.si::before {
    position: absolute;
    top: 50%;
    left:50%;
    transform: translateY(-50%) translateX(-50%);
}



@media(max-width:1400px){
    #projects{
        width:95%;
    }
}
@media(max-width:400px) {
    #projects {
        width: 100%;
    }
    .col{
        padding-left:0px;
        padding-right:0px;
    }
    .visit-website-button{
        width:100%;
    }
}





#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    display: none;
    justify-content:center;
    align-content:center;
    background-color: #00b3e3;
    color: white;
    border: none;
    /*border-radius: 50%;*/
    width: 48px;
    height: 48px;
    max-width:48px;
    max-height:48px;
    overflow:hidden;
    font-size: 24px;
    padding-left:7px;
    padding-right:7px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;
}

    #backToTop:hover {
        background-color: #009fc5;
    }


.back-to-top{

}
    .back-to-top i {
        position: relative;
        font-weight: 1000 !important;
    }

    .back-to-top i::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }