.vertical-line {
position: fixed;
top: 0;
left: 50%; width: 2px;
height: 0; z-index:0;        background-image: repeating-linear-gradient(180deg, #88271a 0, #88271a 5px, transparent 5px, transparent 10px);
background-color: transparent; transition: background-color 0.3s ease, background-image 0.3s ease; }
.brief-sec{background: #FFF8F6;
border-radius: 25px;    padding: 0% 3%;overflow:hidden;    padding-bottom: 5%;}
.brief-sec .brief-head{color: #88271A; text-transform: uppercase; font-size: 48px; font-weight: 600; display: flex ; padding: 3vw 3vw 1vw 3vw; position: relative; background: #fff8f6; border-radius: 25px; align-items: center; justify-content: center;}
.brief-sec .number{display: flex ; align-items: center; justify-content: center;box-sizing:border-box;    flex-direction: column;gap: 15px;}
.brief-sec .initial .number span{width: 140px; height: 140px; display: flex ; align-items: center; justify-content: center; background: #909090; transform: scale(0);  border-radius: 50%; font-size: 60px; color: #fff; position: relative; z-index: 2;}
.brief-sec .initial.active .number span{background: #88271A;}
.brief-sec .content{display: flex ; flex-direction: row; box-sizing: border-box; gap: 100px;}
.brief-sec .content div{display: flex ; flex-basis: 50%;box-sizing: border-box;}
.brief-sec .content div.des{flex-direction: column; padding-top: 50px; gap: 10px;}
.brief-sec .content div.des h3{font-size: 48px; font-weight: 400; text-transform: uppercase; color: #88271a;}
.brief-sec .content div.des p{font-size: 16px; color: #000; font-weight: 400; line-height: 24px; }
.brief-sec .initial{padding-bottom:40px;}
.brief-sec .number{color: #88271A; text-transform: uppercase; font-size: 48px; font-weight: 600;position: relative;z-index:2;}
.brief-sec .initial.active .number span{animation: scaleDown 1s ease-in-out forwards;}
@keyframes scaleDown {
0% {
transform: scale(0); 
}
50% {
transform: scale(1.1); 
}
100% {
transform: scale(0.9);
}
}