body, html { margin: 0; padding: 0;   font-family: "Roboto", sans-serif !important;}
.container { width: 1250px; margin: auto;}
.bannerOuter { background: url(images/bannerbg.jpg) no-repeat left center; height: 886px; width: 100%; background-size: cover;}
.headerInner { padding: 400px 0 0 30px ;}
.headerInner h1 { width:50% ; color: #fff; font-size: 32px;}
.headLiding { color: #fff; width: 60%; margin-bottom: 20px; }
.botderBotm {border-bottom: dashed 1px #fff;}
.headLiding h4 { margin: 0;}
.yellowBtn { background-color: #feca5b; color: #241f59; border-radius: 100px; display: inline-flex; 
    padding: 12px 25px; align-items: center; text-decoration: none; gap: 0px;
 font-size: 22px; font-weight: 500; margin-top: 20px; transition: all 0.3s ease;}

 .yellowBtn:hover { background-color: #feca5b; color: #241f59; 
    text-decoration: none; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);}

    @media (min-width: 100px) and (max-width: 767px) {
.bannerOuter { background: #8d84d9 url(images/headerMobile.png) no-repeat center top; height: inherit;}
.headerInner { padding: 120px 30px 0 30px;}

.headerInner h1 { width: 100%; font-size: 25px;}
.headLiding { width: 100%;}
.yellowBtn { gap: 15px;} 

    }