.paragraph-wrapper{
    padding: 0 420px;
    margin-bottom: 100px;
    
}

.paragraph-wrapper .title h1{
    margin-bottom: 10px;
    color: #B8272D;
    font-size: 28px;
    font-weight: 600;
    font-family: monsterrat-semi-bold;
}

.paragraph-wrapper .summary p{
    margin-bottom: 20px;
    color: var(--gray-black);
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    font-family: monsterrat;
    text-align: justify;
    text-justify: inter-word;
}

.paragraph-wrapper .summary p span{
    margin-bottom: 20px;
    color: var(--gray-black);
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    font-family: monsterrat !important;
    text-align: justify;
    text-justify: inter-word;
}

.paragraph-wrapper .button-paragraph{
    background-color: white;
    border-radius:10px;
    border: 1px solid #B8272D;
    padding: 16px 31px;
    color: #B8272D;
    transition: all 0.3s ease-out;
    font-size:16px ;
}

.paragraph-wrapper .button-paragraph:hover{
    background-color:#B8272D;
    color: white;
    
}

h1, p{
    margin-bottom: 0;
    margin-top: 0;
}


@media only screen and (max-width: 1440px) {
    .paragraph-wrapper{
        padding: 0 260px;
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 1024px) {
    .paragraph-wrapper{
        padding: 0 160px;
        margin-bottom: 140px;
    }
}

@media only screen and (max-width: 991px) {
    .paragraph-wrapper{
        padding: 0 100px;
        margin-bottom: 80px;
    }

    .paragraph-wrapper .title h1{
        font-size: 2rem;
    }
    
    .paragraph-wrapper .summary p{
        font-size: 24px; 
    }
}

@media only screen and (max-width: 768px) {
    .paragraph-wrapper{
        padding: 0 2rem;
        margin-bottom: 80px;
    }

    .paragraph-wrapper .title h1{
        font-size: 2rem;
    }
    
    .paragraph-wrapper .summary p{
        font-size: 18px; 
    }
}