*{
    /* overflow-x: hidden; */
    box-sizing: border-box;
}
body{
    background-color: black;
    color: antiquewhite;
    margin: 0;
}

.projects .project-title {
    font-size: 30px;
    color: #2f9cf0;
    margin-bottom: 100px;
    align-items: center;
    text-align: center;
}

.heading-main{
    margin-left: 1%;
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.heading-main.visible {
    opacity: 1;
    transform: translateY(0);
}

.heading{
    margin-left: 2%;
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.heading.visible {
    opacity: 1;
    transform: translateY(0);
}

.projects img {
    width: clamp(auto, 45vw, 700px);
    height: auto;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.6s ease, transform 0.6s ease;
    animation: zoomIn 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

img.appear {
    opacity: 1;
    transform: scale(1);
}

.hardware_project-1{
    display: flex;
    width: 95%;
    gap: 0.001%;
    margin-bottom: 5%;
}

.hardware_project_info{
    font-size: clamp(7px,4vw,25px);
    line-height: 151%;
    text-align: justify;
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.hardware_project_info.visible {
    opacity: 1;
    transform: translateY(0);
}

.hardware_project_info_more{
    background-color: black;
    color: white;
    width: clamp(70px, 7vw, 140px);
    height: clamp(49px, 7vh, 55px);
    font-size: clamp(12px, 1vw, 16px);
    padding: 1%;
}

.hardware_project-2{
    display: flex;
    width: 95%;
    gap: 3%;
    margin-bottom: 5%;
}

.hardware_project-3{
    display: flex;
    width: 95%;
    gap: 0.001%;
    margin-bottom: 5%;
}

.hardware_project-4{
    display: flex;
    width: 95%;
    gap: 2%;
    margin-bottom: 5%;
}

.software_project-1{
    display: flex;
    width: 95%;
    gap: 0.001%;
    margin-bottom: 5%;
}
.software_project_info{
    font-size: clamp(7px,4vw,25px);
    /* line-height: 151%; */
    text-align: justify;
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.software_project_info.visible {
    opacity: 1;
    transform: translateY(0);
}

.software_project_info_more{
    background-color: black;
    color: white;
    width: clamp(70px, 7vw, 140px);
    height: clamp(36px, 7vh, 55px);
    font-size: clamp(12px, 1vw, 16px);
    padding: 1%;
}

.software_project-2{
    display: flex;
    width: 95%;
    gap: 0.9%;
    margin-bottom: 5%;
}

.software_project-3{
    display: flex;
    width: 95%;
    gap: 0.001%;
    margin-left: 2%;
    margin-bottom: 5%;
}

.software_project-4{
    display: flex;
    width: 95%;
    gap: 1%;
    margin-bottom: 5%;
}


.hardware_project_info,
.software_project_info{
    margin-left: 3%;
}


/*Responsive*/

/* Tablet */
@media (max-width: 992px) {
    .projects {
        width: 100%;
    }

    .hardware_project-1,
    .hardware_project-2,
    .hardware_project-3,
    .hardware_project-4,
    .software_project-1,
    .software_project-2,
    .software_project-3,
    .software_project-4 {
        gap: 20px;
    }

    .hardware_project_info,
    .software_project_info {
        text-align: justify;
    }
}

/* Mobile */
/* * {
        width: 100%;
        text-align: center;
    } */
@media (max-width: 768px) {
    
    .heading{
        margin-bottom: 7%;
    }

    .hardware_project-1,
    .hardware_project-2,
    .hardware_project-3,
    .hardware_project-4,
    .software_project-1,
    .software_project-2,
    .software_project-3,
    .software_project-4 {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .hardware_project-2,
    .hardware_project-4,
    .software_project-2,
    .software_project-4 {
        flex-direction: column-reverse;
    }

    .hardware_project_info,
    .software_project_info {
        text-align: justify;
        padding-inline: clamp(1%, 4vw, 3%);
    }

    h1 {
        font-size: 24px;
    }

    button {
        width: auto;
        height: auto;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .projects {
        width: 100%;
    }
    img{
        max-width: 100%;
        height: auto;
        margin-bottom: -10%;
    }
    h1 {
        font-size: 21px;
    }

    .project_info_text,
    .project_info_text {
        display: none;
    }
    /* .hardware_project_info_more{
        margin-top: 1%;
    } */
}