.sector-section ul {
    display: flex;
    justify-content: stretch;
    flex-wrap: nowrap;
    gap: 10px;
}
.sector-section ul li {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    height: 600px;
    width: 255px;
    border: 1px solid black;
    border-radius: 40px;
    padding: 40px;
    transition: .2s all;
    background: #9fc53a;
    overflow: hidden;
}
.sector-section ul li:nth-child(2n) {
    background: #283c59;
}
.sector-section ul li h5 {
    color: #283c59;
    font-size: 30px;
}
.sector-section ul li a { color: #283c59 }
.sector-section ul li:nth-child(2n) h5,
.sector-section ul li:nth-child(2n) a { color: #9fc53a }

.sector-section ul li .boxcontent p {
    color: white;
    overflow: hidden;
    max-height: 0;
    max-width: 255px;
    transform: translateY(300px);
    opacity: 0;
    transition: .2s all;
}
.sector-section ul li:hover {
    width: 40%;
}
.sector-section ul li:hover .boxcontent p{
    transform: translateY(0);
    max-height: 500px;
    opacity: 1;
}
@media (max-width: 1024px) {
    .sector-section ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .sector-section ul li {
        width: auto!important;
        justify-content: flex-start;
        position: relative;
    }
    .sector-section ul li .boxcontent p {
        transform: none!important;
        opacity: 1!important;
        max-height: 600px!important;
    }
    .sector-section ul li .boxcontent a{
        position: absolute;
        left: 40px;
        bottom: 60px;
    }
}
@media (max-width: 768px) {
    .sector-section ul {
        display: grid;
        grid-template-columns: 1fr;
    }
}