.pageContent{background-position: center right;background-size:auto;background-repeat: no-repeat;}
.pageTitle{margin-bottom: 15px;}
.pageTitle h1{color:var(--red);font: normal normal bold 20px/29px Jost;}
.pageTitle h3{color:var(--red);font: normal normal bold 20px/29px Jost;}

.pageKapsul .pageContent:not(.detay){background-color: transparent;box-shadow: none;}
.contentWrap{margin-block: 30px;}

.pageContent ul{display: grid;grid-template-columns: repeat(3,1fr);gap:30px;text-align: center;}
.pageContent ul li{position: relative;}
.pageContent ul li a::before{content:'';position: absolute;bottom:0px;left:0px;width: 100%;height: 30%;background: transparent linear-gradient(180deg, #FFFFFF00 0%, #FF1300 100%);transition: 300ms;z-index: 0;}

.pageContent ul li h3{position: absolute;bottom:40px;left:0px;width: 100%;text-align: center;font: normal normal bold 24px/33px Jost;color:var(--white);transition: 300ms;transition-delay: 100ms;transition-timing-function: ease-out;}
.pageContent ul li:hover a:before {height: 100%;}
.pageContent ul li:hover h3 {bottom:60px}


.pageKapsul .pageContent.detay .text{margin-top: 15px;}

@media(max-width:768px){
    .pageContent ul{display: grid;grid-template-columns: repeat(1,1fr);}
    .pageContent ul li h3{font: normal normal bold 20px/28px Jost;}

    .contentWrap.bransList{margin-block: 0px;}
    .contentWrap.bransList .pageContent{margin-bottom: 0px;padding: 15px 15px;}
}