div{
    outline: 0px solid green;
} 
.cards-row{
    max-width: 1313px;  
    margin: auto; 
    margin-top: 2px;
    padding-bottom: 0px;
    border-bottom: 0.5px solid #bbb;
}
.web-card-container{
    padding-right: 40px;
    padding-bottom: 50px;
    max-width: 335px;
    height: 400px;
}

.web-card{
    width: 100%; 
    height: 350px; 
    border-radius: 15px; 
    overflow: hidden;
    box-shadow: 0px 0px 2px #666666;
    position: relative;
}
.card-header {
    position: relative; /* Ключевое для позиционирования overlay */
    height: 50%; /* Обязательно должна быть высота */
    background-image: url('media/cards/sh2.JPG');
    background-size: cover;
    display: flex;
    align-items: flex-end; /* Выравниваем элементы по низу */
    justify-content: flex-start;
    color: white;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden; /* На случай, если border-radius не применяется */
    border-top-left-radius: 15px; /* Закругление углов */
    border-top-right-radius: 15px;
}
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Занимает всю ширину родителя */
    height: 100%; /* Занимает всю высоту родителя */
    background: black;
    z-index: 1;
    opacity: 0.63;
}
.blog-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Занимает всю ширину родителя */
    height: 100%; /* Занимает всю высоту родителя */
    background: black;
    z-index: 1;
    opacity: 0.81;
}
.card-price-h3{
    position: relative;
    z-index: 2;
    margin: 0; /* Убираем стандартные отступы */
    color: black; /* Чёрный текст */
    background-color: rgba(255, 255, 255, 0.5); /* Белый фон с 50% прозрачностью */
    border-radius: 0px; /* Закруглённые углы у фона */
    display: inline-block; /* Чтобы фон не растягивался на всю ширину */
    font-family: 'BeausansPro-bold';
}
.card-header-h3 {
    position: relative;
    z-index: 2;
    margin: 0; /* Убираем стандартные отступы */
    color: white; /* Чёрный текст */
    display: inline; /* Чтобы фон не растягивался на всю ширину */
    font-family: 'BeausansPro-bold';
}
.card-body {
    height: 50%;
    width: 100%;
    padding-top: 15px;
    box-sizing: border-box;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden; /* Чтобы скругленные углы работали */
}

.zebra-table-card {
    position: relative;
    width: 100%;
    border-collapse: collapse; /* Убираем двойные границы */
    border-spacing: 0;
    font-size: 16px;
    font-family: 'BeauSansPro-Bbook';
    table-layout: fixed;
}
.zebra-table-card tr {
    height: auto; /* Автоматическая высота строки */
    width: 100%;
}
.zebra-table-card tr:nth-child(even) {
  background-color: #f2f2f2; /* Светло-серый для четных строк */
}

.zebra-table-card tr:nth-child(odd) {
  background-color: white; /* Белый для нечетных строк */
}

.zebra-table-card td {
    padding-top: 4px; /* Отступы в ячейках */
    padding-left: 8px;
    width: 50%; /* Колонки одинаковой ширины */
    max-width: 50%;
    border: none; /* Убираем границы */
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}
.zebra-table-card td:last-child {
    text-align: right;
    padding-right: 8px;
}
.card-button-container{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    position: absolute;
    bottom: 0px;
}
.card-btn{
    width: 50%;
    padding: 8px;
    background-color: #C1272D;
    
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-family: 'BeauSansPro-Bbook';
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s;
    margin-left: auto;
    }
.more-button {
    background: none;
    border: none;
    padding: 6px 12px;
    margin: 2px 0 0 8px; /* Отступ сверху и слева */
    color: #333; /* Цвет текста */
    cursor: pointer;
    font-size: 14px;
    font-family: 'BeauSansPro-Bbook';
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: underline; /* Подчеркивание вместо рамки */
    text-decoration-color: transparent; /* Изначально невидимое */
    border-radius: 4px;
}

.more-button:hover {
    text-decoration-color: #333; /* Подчеркивание при наведении */
    background-color: rgba(0, 0, 0, 0.05); /* Легкий фон при наведении */
}

.more-button:active {
    background-color: rgba(0, 0, 0, 0.1); /* Активное состояние */
}
.header-row{
    font-family: 'BeauSansPro-thin';
    max-width: 1313px; 
    outline: 0px solid blue; 
    margin: auto; 
    margin-top: 15px;
    padding-bottom: 10px;
}
.header-row-b{
    font-family: 'BeauSansPro-light'; 
}
.arrow{
    font-family: 'Calibri';
}
    
.blog-cards-row{
    max-width: 1313px;  
    margin: auto; 
    margin-top: 2px;
    padding-bottom: 0px;
    border-bottom: 0.5px solid #bbb;

    }
.blog-card-container{
    padding-right: 40px;
    padding-bottom: 50px;
    max-width: 335px;
    height: 250px;
}
.blog-card{
    width: 100%; 
    height: 200px; 
    border-radius: 15px; 
    overflow: hidden;
    box-shadow: 0px 0px 2px #666666;
    position: relative;
    background: url('media/cards/gran1.JPG');
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    cursor: pointer;
}
.card-blog-h3{
    position: relative;
    z-index: 2;
    margin: 0; /* Убираем стандартные отступы */
    color: black; /* Чёрный текст */
    background-color: rgba(255, 255, 255, 0.5); /* Белый фон с 50% прозрачностью */
    border-radius: 0px; /* Закруглённые углы у фона */
    display: inline-block; /* Чтобы фон не растягивался на всю ширину */
    font-family: 'BeausansPro-bold'; 
}
.card-blog-p {
    position: relative;
    z-index: 2;
    margin: 0; /* Убираем стандартные отступы */
    color: white; /* Чёрный текст */
    display: inline; /* Чтобы фон не растягивался на всю ширину */
    font-size: 14px;
    font-family: 'BeausansPro-Bbook';
    display: inline-block;
    margin-top: 10px;
}
.read-more-button {
    background: none;
    border: none;
    padding: 0;
    margin: 8px 0 0 0; /* Отступ сверху и слева */
    color: #fff; /* Цвет текста */
    cursor: pointer;
    font-size: 16px;
    font-family: 'BeauSansPro-semibold';
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: underline; /* Подчеркивание вместо рамки */
    text-decoration-color: transparent; /* Изначально невидимое */
    z-index: 2; 
}

.read-more-button:hover {
    text-decoration-color: #fff; /* Подчеркивание при наведении */
}

.read-more-button:active {
}
@media (max-width: 576px){
    .cards-row{
        width: 100%; 
    }
    .header-row{
        width: 85%;
        font-size: 11px;
    }
    .blog-cards-row{
        width: 100%;  
    }
    .web-card-container{
        max-width: 576px;
        width: 100%;
        padding-left: 48px;
        padding-right: 48px;
        height: 450px;
    }
    .web-card{
        height: 400px; 
    }

    .blog-card-container{
        max-width: 576px;
        width: 100%;
        padding-left: 48px;
        padding-right: 48px;
        height: 250px;
    }
    .blog-card{
        height: 200px; 
        padding-left: 15px;
        padding-top: 15px;
        padding-right: 15px;
}
    .card-blog-h3{
        font-size: 18px;
        
}
    .card-blog-p {
        font-size: 14px;
        margin-top: 10px;
    }
    .read-more-button {
        margin: 8px 0 0 0; /* Отступ сверху и слева */
        font-size: 16px;
    }
}

@media (max-width: 768px)and (min-width: 576px) {
    .cards-row{
        width: 95%; 
    }
    .header-row{
        width: 95%;
        font-size: 14px;
    }
    .blog-cards-row{
        width: 95%;  
    }
    .zebra-table-card {
        font-size: 12px;

}
    .web-card-container{
        height: 375px; 
        padding-right: 15px;
        padding-bottom: 25px;
    }
    .web-card{
        height: 350px;
    }
    .blog-card-container{
        padding-right: 15px;
        padding-bottom: 25px;
        height: 250px;
    }
    .blog-card{
        height: 200px; 
        padding-left: 15px;
        padding-top: 15px;
        padding-right: 15px;
}
    .card-blog-h3{
        font-size: 18px;     
}
    .card-blog-p {
        font-size: 13px;
        margin-top: 10px;
    }
    .read-more-button {
        margin: 8px 0 0 0; /* Отступ сверху и слева */
        font-size: 15px;
    }
}

@media (max-width: 860px) and (min-width: 768px) {
    .cards-row{
        width: 95%; 
        margin-top: 50px;
    }
    .header-row{
        width: 95%;
        font-size: 14px;
    }
    .blog-cards-row{
        width: 95%;  
    }
    .web-card-container{
        padding-right: 10px;
        padding-left: 10px;
    }
    .zebra-table-card {
        font-size: 14px;
    }
    .blog-card-container{
        padding-right: 10px;
        padding-left: 10px;
    }
    .blog-card{
        padding-left: 10px;
        padding-top: 10px;
        padding-right: 5px;
        height: 180px; 
    }
    .card-blog-h3{
        font-size: 16px;
    }
    .card-blog-p {
        font-size: 12px;
        margin-top: 10px;
    }
    .read-more-button {
        margin: 6px 0 0 0; /* Отступ сверху и слева */
        font-size: 13px;
    }
    
}
@media (max-width: 992px) and (min-width: 768px) {
    .cards-row{
        width: 95%; 
    }
    .header-row{
        width: 95%;
        font-size: 15px;
    }
    .blog-cards-row{
        width: 95%;  
    }
    .web-card-container{
        padding-right: 10px;
        padding-left: 10px;
    }
    .blog-card-container{
        padding-right: 10px;
        padding-left: 10px;
    }
    .blog-card{
        padding-left: 15px;
        padding-top: 15px;
        padding-right: 15px;
        height: 200px; 
    }
    .card-blog-h3{
        font-size: 15px;
    }
    .card-blog-p {
        font-size: 13px;
        margin-top: 10px;
    }
    .read-more-button {
        margin: 6px 0 0 0; /* Отступ сверху и слева */
        font-size: 13px;
    }
}
@media (max-width: 1200px) and (min-width: 992px) {
    .cards-row{
        width: 960px; 
        margin-top: 20px;
        /*Здесь 32 px padding крадет .container-fluid*/
    }
    .header-row{
        width: 960px;
        font-size: 16px;
    }
    .blog-cards-row{
        width: 960px;  
    }
    .web-card-container{
        padding-right: 20px;
        padding-left: 20px;
    }
    .blog-card-container{
        padding-right: 20px;
        padding-left: 20px;
    }
    .blog-card{
        padding-left: 15px;
        padding-top: 15px;
        padding-right: 15px;
        height: 220px; 
    }
    .card-blog-h3{
        font-size: 17px;
    }
    .card-blog-p {
        font-size: 14px;
        margin-top: 10px;
    }
    .read-more-button {
        margin: 8px 0 0 0; /* Отступ сверху и слева */
        font-size: 15px;
    }
}
@media (max-width: 1393px) and (min-width: 1200px) {
    .cards-row{
        width: 1110px; 
        margin-top: 20px;
    }
    .header-row{
        width: 1110px;
        font-size: 16px;
    }
    .blog-cards-row{
        width: 1110px;  
    }
    .web-card-container{
        padding-right: 40px;
        padding-left: 5px;
    }
    .blog-card-container{
        padding-right: 40px;
        padding-left: 5px;
    }
}
@media (min-width: 1393px) {
    .cards-row{
        width: 1310px; 
        margin-top: 20px;
    }
    .header-row{
        width: 1310px;
        font-size: 16px;
    }
    .blog-cards-row{
        width: 1310px;  
    }
}