@import url("https://fonts.googleapis.com/css?family=Rajdhani:400,600,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");

:root {
    --pink: #f14e95;
    --bg: #0a0a0a;
    --white: white;
    --green: #3ff06b;
    --shadow: 0 2px 2px rgb(0 0 0 / 0.5);
    --abu: #f3f3f3;
    --blue: #3f5efb;
    --gelap: #272727;
  
  }
  
body {
  color: #797979;
  background-color: var(--gelap);
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.667
  
}

.side-main{
    margin-top: 40px;
}

.hero-banner {
    position: relative;
    background: var(--gelap);
    background-size: cover;
    padding: 90px 0 60px 0;
    z-index: 1;
    margin-top: 0px;
  }

  .hero-banner__img{
    width: 75%;
  }

  .hero-banner__content h1 {
    color: #fff;
    margin-bottom: 22px;
  }

  .hero-banner__content p {
    color: #fff;
    margin-bottom: 45px
  }



  /* Meida Query */
/* laptop */
@media  (max-width: 992px){
    html {
        font-size: 70%;
    
    }   

}


/* tablet */ 
@media  (max-width: 768px){
    html {
        font-size: 65%;
    
    }

}


/* mobile phone */
@media  (max-width: 576px){
    html {
        font-size: 50%;
    }
    
    .side-main{
        margin-top: -60px;
    }

    .hero-banner__img{
        width: 55%;
      }

    .hero-banner__content h1 {
        color: #fff;
        margin-bottom: 12px;
      }
    
    .hero-banner__content p {
        color: #fff;
        margin-bottom: 15px
      }
}