:root {
     --col1: #feba05;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     margin: 0;
     padding: 0;
     background: url(mainbg.jpg) no-repeat #000;
     background-size: 100%;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

 }

 a {
     text-decoration: none;
     color: #FFF;
 }
  a:hover {
    color: var(--col1);
  }

 .main {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
 }

 .sub {
     padding: 30px;
 }

 .logo {
     max-width: 300px;
     margin: auto;
 }

 .logo img {
     width: 100%;
 }

 .btn1 {
     width: fit-content;
     margin: auto;
     display: table;
     margin-top: 50px;
 }

 .btn1 a {
     border: 1px solid #ffffff;
     padding: 10px 40px;
     display: block;
     border-radius: 5px;
 }

 .btn1 a:hover {
     background: var(--col1);
     border: 1px solid var(--col1);
     color: #000;
 }

 .contact {
     margin-top: 5px;
     text-align: center;
 }

 .contact span {
     padding: 5px 20px;
     display: inline-block;
 }

 .contact b {
     color: var(--col1);
     font-weight: normal;
 }

 .bro {
     background: #000;
 }

 .broSub {
     max-width: 1000px;
     margin: 0px auto;
     padding: 50px 0;
 }

 .broSub img {
     width: 100%;
     border-radius: 10px;
 }

 @media only screen and (max-width: 767px) {
    body{
        background-size: 300%;
    }
     .main {
        height: 100vh;
     }
 }