* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'montextralight_demo';
    scroll-behavior: smooth;
}

:root {
    --primary-color: #252525 ;
    --text-color:#FFFFFF;
    

  }

body{
    background-color:#191919;
}

 /* Portfolio Styles */
        .portfolio-container {
            display: flex;
            flex-direction: column;
            gap: 100px;
        }

        .protflio-header {
            margin: 60px 0px;
            display: flex;
            flex-direction: column;
            margin-bottom: 0px;
        }

        .protflio-title {
            font-size: 36px;
            font-weight: 400;
            line-height: 1.1;
            color: #CCCCCC;
            font-family: 'montheavy_demo', Arial, sans-serif;
            margin-bottom: 40px;
            opacity: 0;
            animation: fadeInUp 1s ease forwards;
        }

        .intro-paragraph {
            max-width: 700px;
            font-size: 18px;
            color: #CCCCCC;
            text-align: left;
            line-height: 1.5;
            margin-bottom: 80px;
            align-self: flex-end;
            opacity: 0;
            animation: fadeInUp 1s ease 0.3s forwards;
        }

        .project-container {
            display: flex;
            position: relative;
            justify-content: space-between;
            align-items: center;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s ease forwards;
        }

        .project-container:nth-child(3) { animation-delay: 0.2s; }
        .project-container:nth-child(4) { animation-delay: 0.4s; }
        .project-container:nth-child(5) { animation-delay: 0.6s; }

        .project-container:nth-child(odd) {
            flex-direction: row-reverse;
        }

        .project-text {
            padding-top: 20px;
            width: 30%;
        }

        .project-text h3 {
            font-size: 18px;
            font-weight: 600;
            font-family: 'montheavy_demo', Arial, sans-serif;
            color: #ffffff;
            margin-bottom: 20px;
        }

        .project-text p {
            font-size: 16px;
            color: #CCCCCC;
            line-height: 1.5;
            margin-bottom: 25px;
        }

        .project-image {
            width: 60%;
            height: 400px;
            border-radius: 36px;
            overflow: hidden;
            position: relative;
            transition: all 0.5s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .project-image:hover {
            transform: translateY(-10px);
        }

        .project-image img {
            width: 100%;
            height: 100%;
            border-radius: 36px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .project-image:hover img {
            transform: scale(1.05);
        }

        /* Enhanced View Project Button */
        .view-project {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            color: #CCCCCC;
            font-weight: 500;
            padding: 12px 0;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            font-size: 16px;
            gap: 8px;
            
        }

        .view-project::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            transition: width 0.4s ease;
        }

        .view-project::after {
            content: '→';
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s ease;
            margin-left: 5px;
        }

        .view-project:hover {
            color: #1EE0E1;
            transform: translateX(5px);
        }

        .view-project:hover::before {
            width: 100%;
        }

        .view-project:hover::after {
            opacity: 1;
            transform: translateX(0);
        }


          /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


@media(max-width:992px){
    .project-container{
        flex-direction: column;
        flex-direction: column-reverse;
    }

    .project-text{
        width: 100%;
    }

    .project-image{
        width: 100%;
    }
    .project-container:nth-child(odd){
        flex-direction: column-reverse;
    }

    .intro-paragraph{
        margin-bottom: 20px;
    }
}