#video-banner video{
    width:100%;
}
#milestones{
    background: var(--F0F0F0, #F0F0F0);
    padding: 10rem 0;
}

@media(min-width:750px){
    #video-banner .heading{
        top: 40rem;
        left: 16rem;
    }
    #mission-vision .container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 140px;
    }
    #mission-vision .container img{
        flex: 0 0 50%;
        max-width: calc(50% - 70px);
    }
    #mission-vision .container .text{
        flex: 0 0 50%;
        max-width: calc(50% - 70px);
        display: flex;
        flex-direction: column;
        gap: 100px;
    }    
    #mission-vision .container .text h3{
        color: #000;
        font-size: 48px;
        font-weight: 700;
        line-height: 113%;
        text-transform: capitalize;
        margin-bottom: 20px;
    }
    #mission-vision .container .text p{
        color: #000;
        font-size: 24px;
        font-weight: 600;
        line-height: 34px;
        letter-spacing: -0.72px;
        opacity: 0.5;
        max-width: 650px;
    }    
    #normal-heading .heding{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width:100%;
    }
    #normal-heading div h2{
        color: #000;
        font-size: 60px;
        font-weight: 700;
        line-height: 113%;
        letter-spacing: -3px;
        max-width: 520px;
    }
    #normal-heading div p{
        color: #000;
        font-size: 20px;
        font-weight: 600;
        line-height: 34px;
        max-width: 675px;
    } 
    #normal-heading .button{
        display: flex;
        padding: 8px 24px;
        border-radius: 99px;
        background: var(--Color, #111);
        color: #FFF;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -0.32px;
        width: fit-content;
        margin-left: auto;
        margin-top: 20px; 
    }   
    #milestones .topdiv{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 80px;
    }
    #milestones .topdiv h2{
        font-weight: 700;
        font-size: 60px;
        line-height: 113%;
    }    
    #milestones .topdiv .nav-btn-wrapper{
        display: flex;
        gap: 10px;
    }
    #milestones .time div{
        display: flex;
        justify-content: space-between; 
    }
    #milestones .time p{
        color: var(--Heading-Color, #1B1717);
        font-size: 24px;
        font-weight: 700;
        margin-left: -5%;
        margin-bottom: 20px;
    }
    #milestones .time div .blackline{
        width: 2px;
        height: 30px;
        background: #000;
        display: block;
    }
    #milestones .time div .grayline{
        width: 2px;
        height: 15px;
        background: #000;
        display: block;
        opacity: 0.2;
    }   
    #milestones .imgtext{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 20px;
        padding: 20px 20px 0 20px;
        border-left: 1px solid #00000020;
        margin-top: 30px;
        min-height: 420px;
    }
    #milestones .imgtext p{
        color: #000;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: -0.4px;
    }
    #milestones .imgtext img{
        max-width: 220px;
    }
}

@media(max-width:749px){
    #video-banner .heading{
        top: 20rem;
        left: 4rem;
        max-width: 70%;
    }
    #video-banner video{
        aspect-ratio: 1;
        object-fit: cover;
    }
    #mission-vision .container{
        display: flex;
        align-items: center;
        gap: 40px;
        flex-direction: column-reverse;
    }
    #mission-vision .container img{
        flex: 0 0 100%;
        max-width: 100%;
    }
    #mission-vision .container .text{
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap:25px;
    }    
    #mission-vision .container .text h3{
        color: #000;
        font-size: 24px;
        font-weight: 700;
        text-transform: capitalize;
        margin-bottom: 10px;
    }
    #mission-vision .container .text p{
        color: #000;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.1;
        opacity: 0.5;
        max-width: 650px;
    }   
    #normal-heading{
        margin-top:12rem;
    } 
    #normal-heading div{
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }
    #normal-heading div h2{
        color: #000;
        font-size: 24px;
        font-weight: 700;
        line-height: 113%;
        max-width: 80%;
    }
    #normal-heading div p{
        color: #000;
        font-size: 12px;
        font-weight: 600;
        line-height: 113%;
    } 
    #normal-heading .button{
        display: flex;
        padding: 4px 12px;
        border-radius: 99px;
        background: var(--Color, #111);
        color: #FFF;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        width: fit-content;
    }     
    #milestones .topdiv{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
    }
    #milestones .topdiv h2{
        font-weight: 700;
        font-size: 24px;
        line-height: 113%;
    }    
    #milestones .topdiv .nav-btn-wrapper{
        display: none;
    }
    #milestones .time div{
        display: flex;
        justify-content: space-between; 
    }
    #milestones .time p{
        color: var(--Heading-Color, #1B1717);
        font-size: 12px;
        font-weight: 700;
        margin-left: -5%;
        margin-bottom: 5px;
    }
    #milestones .time div .blackline{
        width: 2px;
        height: 30px;
        background: #000;
        display: block;
    }
    #milestones .time div .grayline{
        width: 2px;
        height: 15px;
        background: #000;
        display: block;
        opacity: 0.2;
    }   
    #milestones .imgtext{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 20px;
        padding: 20px 20px 0 20px;
        border-left: 1px solid #00000020;
        margin-top: 30px;
        min-height: 300px;
    }
    #milestones .imgtext p{
        color: #000;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: -0.4px;
    }
    #milestones .imgtext img{
        max-width: 220px;
    }      
}

#video-banner .heading.absolute{
    text-transform: capitalize;
    line-height: 1.2;
}
@media screen and (max-width: 767px){
    #mission-vision .text>div>h3{
        line-height: 1.3;
    }
    #mission-vision .text>div>p{
        line-height: 1.5;
    }
    #brand-rec .item{
        padding-bottom: 2rem;
    }
    #brand-rec .item .desc{
        font-size: 2.4rem;
        line-height: 1.3;
    }
    #milestones .imgtext>p{
        font-size: 2.8rem;
    }
}
/* update v3 */
@media screen and (min-width: 768px){
    #milestones .imgtext p{
        max-width: 22rem;
    }
}
@media screen and (max-width: 767px){
    #normal-heading div p{
        line-height: 1.5;
    }
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    #video-banner .heading.absolute{
        top: 29rem;
    }
}