.hero{
    height: 70vh;
  --mask:
    radial-gradient(34.99px at 50% calc(100% - 48px),#000 99%,#0000 101%) calc(50% - 60px) 0/120px 100%,
    radial-gradient(34.99px at 50% calc(100% + 18px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
    background-color: #FFC042;
    
 }
.foot{
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1006%26quot%3b)' fill='none'%3e%3cpath d='M 0%2c68 C 96%2c98.4 288%2c222.2 480%2c220 C 672%2c217.8 768%2c53 960%2c57 C 1152%2c61 1344%2c203.4 1440%2c240L1440 560L0 560z' fill='rgba(255%2c 192%2c 66%2c 1)'%3e%3c/path%3e%3cpath d='M 0%2c358 C 96%2c381 288%2c470.4 480%2c473 C 672%2c475.6 768%2c365.2 960%2c371 C 1152%2c376.8 1344%2c475.8 1440%2c502L1440 560L0 560z' fill='rgba(255%2c 192%2c 66%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1006'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}
.hub{
    padding-top: 18%; 
    font-size: 60px; 
    color: green;
}

@media (max-width:1024px) {
    .hero{
        height: 70vh;
    }
    .hub{
        padding-top: 10%;
        font-size: 50px;
    }
    
}
@media (max-width:767px) {
    .hero{
        height: 50vh;
    }
    .hub{
        padding-top: 15%;
        font-size: 40px;
    }
    
}