@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@media only screen and (min-width:1250px) {

    .content > ul{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        padding-bottom: 100px;
    }

    .content > ul .row-left{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 40px;
        /* width: 100%; */
        color: white;
    }
    
    .row-3x1-block-1 h1{
        text-align: center;
        color: white;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content > ul .row-right{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 40px;
        width: 100%;
        color: white;
        text-align: right;
    }

    .content >ul .row-left .block-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
        width: 512px;
        height: 288px;
    }
    
    .content >ul .row-right .block-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 20px;
        width: 512px;
        height: 288px;
    }

    .row-3x1-img-block-content {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-start;
        text-align: center;
        width: 100%;
    }

    .row-3x1-img-block-content .row-3x1-block-1 > p {
        font-size: 14px;
        font-weight: 400;
        line-height: 180%;
        letter-spacing: 0.05em;
        width: 320px;
        color: white;
    }

    .row-3x1 {
        width: 100%;
    }

    .grid{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        /* padding-left: 13.888vw;
        padding-right: 13.888vw; */
        gap: 25px;
    }


    .img-block-w330-h330 {
        position: relative;
        width: 330px;
    }

    .img-block-w330-h330 > img {
        width: 330px;
    }

    .img-block-w330-h330 > h1 {
        position: absolute;
        top: 15px;
        left: 20px;
        right: 20px;
        font-weight: 700;
        font-size: 26px;
        line-height: 31px;
        letter-spacing: 0.05em;
        color: white;
    }

    .img-block-w330-h330 > p {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        font-weight: 400;
        font-size: 14px;
        line-height: 180%;
        color: rgba(255, 255, 255, 0.5);;
    }

    .img-block-w685-h330{
        position: relative;
        width: 685px;
    }

    .img-block-w685-h330 > img {
        width: 685px;
    }

    .img-block-w685-h330 > h1 {
        position: absolute;
        top: 15px;
        left: 20px;
        right: 20px;
        font-weight: 700;
        font-size: 26px;
        line-height: 31px;
        letter-spacing: 0.05em;
        color: white;
    }

    .img-list-content {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 20px;
        gap: 5px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
    }

    .img-list-content > h2 {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
        line-height: 100%;
    }

    .img-list-content > p {
        font-weight: 400;
        font-size: 14px;
        line-height: 15px;
        color: rgba(255, 255, 255, 0.5);;
    }
}

@media only screen and (min-width:535px) and (max-width:1250px){
    
    #menu-collapse{
        margin: 0px;
    }

    section{
        padding-bottom: 20px;
    }
    
    ul{
        margin: 0px;
        width: 100%;
        list-style-type: none;
    }

    .row-3x1-block-1 h1{
        text-align: center;
        color: white;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .row-left{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 450px;
    }
    
    .row-right{
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 450px;
    }

    .block-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        /* width: 512px; */
        width: 70%;
        height: 200px;
        text-align: center;
    }

    p{
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-weight: 100;
        color: rgba(255, 255, 255, 0.8);
    }
    h1{
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: white;
    }

    #service-02{
        width: 309.312px;
        height: 149.0116px;
    }

    .row-3x1-img-block-content {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-start;
        width: 100%;
    }

    .row-3x1-img-block-content .row-3x1-block-1 > p {
        font-size: 14px;
        font-weight: 400;
        line-height: 180%;
        letter-spacing: 0.05em;
        width: 320px;
        color: white;
    }

    .row-3x1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .grid{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

        gap: 25px;
    }


    .img-block-w330-h330 {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 330px;
        gap: 20px;
    }

    .img-block-w330-h330 > img {
        width: 309.312px;
        height: 309.312px;
    }

    .img-block-w685-h330{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 330px;
    }

    .img-block-w685-h330 > img {
        width: 309.312px;
        height: 149.0116px;
    }

    .img-list-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70%;
        text-align: center;
    }

    .img-list-content h2{
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
    }

    .img-list-content p{
        font-weight: 400;
        font-size: 14px;
        line-height: 180%;
        color: rgba(255, 255, 255, 0.5);;
    }
}

@media only screen and (min-width:390px) and (max-width:535px){

    section{
        padding-bottom: 20px;
    }
    
    ul{
        margin: 0px;
        width: 100%;
        list-style-type: none;
    }

    #portfolio-block {
        margin-bottom: 50px;
    }

    .row-left{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 450px;
    }
    
    .row-right{
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 450px;
    }

    .block-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        /* width: 512px; */
        width: 70%;
        height: 200px;
        text-align: center;
    }

    p{
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-weight: 100;
        color: white;
    }
    h1{
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: white;
    }

    .row-3x1-img-block-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 70%;
    }

    .row-3x1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .row-3x1-block-1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .grid{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

        gap: 25px;
    }


    .img-block-w330-h330 {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 330px;
        gap: 20px;
    }

    .img-block-w330-h330 > img {
        width: 309.312px;
        height: 309.312px;
    }

    .img-block-w685-h330{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 330px;
    }

    .img-block-w685-h330 > img {
        width: 309.312px;
        height: 149.0116px;
    }

    .img-list-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70%;
        text-align: center;
    }

    .img-list-content h2{
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
    }

    .img-list-content p{
        font-weight: 400;
        font-size: 14px;
        line-height: 180%;
        color: rgba(255, 255, 255, 0.5);;
    }
}

@media only screen and (min-width:0px) and (max-width:390px){
    
    section{
        padding-bottom: 20px;
    }
    
    ul{
        margin: 0px;
        width: 100%;
        list-style-type: none;
    }

    .row-left{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 500px;
    }
    
    .row-right{
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 500px;
    }

    .block-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        /* width: 512px; */
        width: 70%;
        height: 350px;
        text-align: center;
    }

    p{
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-weight: 100;
        color: white;
    }

    h1{
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: white;
    }

    .row-3x1-img-block-content {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-start;
        width: 100%;
        gap: 20px;
    }

    .row-3x1-img-block-content .row-3x1-block-1 > p {
        font-size: 14px;
        font-weight: 400;
        line-height: 180%;
        letter-spacing: 0.05em;
        width: 320px;
        color: white;
    }

    .row-3x1-img-block-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 70%;
    }

    .row-3x1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .row-3x1-block-1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .grid{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

        gap: 25px;
    }


    .img-block-w330-h330 {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 330px;
        gap: 20px;
    }

    .img-block-w330-h330 > img {
        width: 309.312px;
        height: 309.312px;
    }

    .img-block-w685-h330{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 330px;
    }

    .img-block-w685-h330 > img {
        width: 309.312px;
        height: 149.0116px;
    }

    .img-list-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70%;
        text-align: center;
    }

    .img-list-content h2{
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
    }

    .img-list-content p{
        font-weight: 400;
        font-size: 14px;
        line-height: 180%;
        color: rgba(255, 255, 255, 0.5);;
    }
}



ul{
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
}