.pagination-page-section{
    display: flex;
    gap: 30px;
}
.pagination-left-page-section{
    width: 66%;
}
.pagination-right-page-section{
    width: 33%;
    display: flex;
    flex-direction: column;
    gap: 70px;
}
.pagination-left-page-section .two-section{
  display: flex;
  width: 100%;
    gap: 20px;
    margin-top: 20px;
}
.pagination-left-page-section .two-section .first-image-container .image-container{
    height: 345px;
}
.pagination-left-page-section .two-section .first-image-container .image-container img{
    height: 345px;
}
.pagination-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 60px;
}

/* card */
.pagination-left-page-section-card-flex{
    display: flex;
    gap: 20px;
    margin-top: 30px;
}
.pagination-left-page-section-card{
    background-color: #F0F0F0;
    display: flex;
    gap: 10px;
    padding-right: 5px;
}
.pagination-left-page-section-card img{
    width: 170px;
}
.pagination-left-page-section-card-content{
    margin-top: 5px;
}
.pagination-left-page-section-card-content h4{
    font-size:23px;
    font-weight: 100;
}
.pagination-left-page-section-card-content p{
    font-size: 20px;
    color: #b5b4b4;
}

.pagination {
    margin-top: 40px;
    text-align: center;
    display: flex;
}
.pagination button {
    /* margin: 5px; */
    padding: 10px 14px;
    cursor: pointer;
    background-color: white;
    border: 1px solid rgb(227, 227, 227);
    font-weight: 200;
    color: #7b7b7b;
    margin-bottom: 20px;
}
.pagination button:nth-child(3){
    background-color: #186C5C;
    color: white;
}
.pagination button:nth-child(4){
    background-color: #186C5C;
    color: white;
}.pagination button:nth-child(5){
    background-color: #186C5C;
    color: white;
}.pagination button:nth-child(6){
    background-color: #186C5C;
    color: white;
}
.pagination button:nth-child(7){
    background-color: #186C5C;
    color: white;
}
.pagination button:nth-child(8){
    background-color: #186C5C;
    color: white;
}
.pagination button:nth-child(3):hover{
    background-color:  #16443B;
}
.pagination button:nth-child(4):hover{
    background-color:  #16443B;
}.pagination button:nth-child(5):hover{
    background-color:  #16443B;
}.pagination button:nth-child(6):hover{
    background-color:  #16443B;
}
.pagination button:nth-child(7):hover{
    background-color:  #16443B;
}
.pagination button:nth-child(8):hover{
    background-color:  #16443B;
}

@media (max-width:768px){
    .pagination-page{
        padding-top: 60px;
    }
    .pagination-page-section{
        flex-direction: column;
    }
    .pagination-left-page-section{
        width: 100%;
    }
    .pagination-right-page-section{
        width: 100%;
    }
    .pagination-left-page-section .two-section{
      flex-direction: column;
      }
      .pagination-grid{
        grid-template-columns: 1fr;
    }
    .pagination-left-page-section-card-flex{
    flex-direction: column;
}
.pagination-left-page-section-card{
    background-color: #F0F0F0;
    display: flex;
    gap: 10px;
    padding-right: 5px;
}
.pagination-grid .news-item{
    flex-direction: column;
}
.pagination-grid .news-item img{
    width: 100%;
    height: 200px;
}
.pagination {
    flex-wrap: wrap;
}
}