.spec-projects{display: flex ; flex-direction: row; gap: 5%; box-sizing: border-box;padding-top:3%; }
.spec-projects .left{display: flex ; flex-direction: column; gap: 20px; box-sizing: border-box; flex-basis: 55%;justify-content: center;}
.spec-projects .left .h-sec{display: flex ; flex-direction: row; align-items: center; gap: 10px; box-sizing: border-box;    padding-bottom: 10px;} 
.spec-projects .left .h-sec a{font-weight: 500; font-size: 1.5rem; text-decoration: none; color: var(--purple);cursor:pointer;}
.spec-projects .left .content{max-height: 0; overflow: hidden; transition: 0.5s all ease-in-out;}
.spec-projects .left .c-sec{padding-bottom: 10px; border-bottom: 1px solid #000;}
.spec-projects .left .c-sec.active .content{max-height:300px;}

.spec-projects .left .c-sec .h-sec img{max-width:0px;transition:0.5s all ease-in-out;}

.spec-projects .left .c-sec.active .h-sec img{max-width:unset;}

.spec-projects .right{display: flex;
    flex-direction: column;
    flex-basis: 40%;
}


.spec-projects .right .img-sec{display:none;transition:0.5s all ease-in-out;width: 100%;}
.spec-projects .right .img-sec.active{display:flex;transition:0.3s all ease-in-out;}


.spec-projects .right .img-sec .img,.spec-projects .right .img-sec .img img{width:100%;}