.main {
 background: url(/extension_theme/img/body-bg.png) no-repeat;
 background-position: center;
 background-size: cover;
 object-fit: cover;
 height: 100vh;
}

.header {
 padding: 0.8rem 0;
}
.header .header-img1 {
 display: block;
 width: 3rem;
}
.header .header-img2 {
 width: 17rem;
 margin-left: 1rem;
 display: block;
}
.header h2 {
 margin-left: 1rem;
 font-size: 1.3rem;
 font-weight: 600;
 color: white;
}

.header ul li a {
 font-weight: 500;
 color: white;
}

.menu-bar {
 display: none;
}
.menu-ul {
 display: none;
}

.hero .hero-sec {
 background: url(/extension_theme/img/Vector.png) no-repeat;
 width: 100%;
 background-position: top;
 background-size: contain;
 object-fit: contain;
 margin: auto;
 /* margin-top: 1rem; */
 height: 75vh;
 padding: 2rem 0;
}

.hero .hero-sec .image-top {
 background: url(/extension_theme/img/hero-img.png) no-repeat;
 background-position: center;
 background-size: contain;
 object-fit: contain;
 height: 10rem;
 width: 30%;
 margin: auto;
 margin-top: 2rem;
 margin-bottom: 2rem;
}

.hero .hero-sec .heading {
 font-size: 1.5rem;
 width: 50%;
 margin: auto;
 text-align: center;
 line-height: 1.5;
 color: #00afef;
 letter-spacing: 0.05rem;
}

.hero .hero-sec .heading span {
 font-weight: 600;
}

.hero .hero-sec .image-bottom {
 background: url(/extension_theme/img/btnImg.png) no-repeat;
 background-position: center;
 background-size: contain;
 object-fit: contain;
 height: 10rem;
 width: 30%;
 margin: auto;
 margin-bottom: 4rem;
}
footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 padding-bottom: 1rem;
}
footer ul {
 width: 30%;
 margin: auto;
 background-color: rgba(128, 128, 128, 0.139);
 padding: 0.3rem 1rem;
}

footer ul a {
 color: white;
 font-size: 0.9rem;
 text-transform: uppercase;
 font-weight: 500;
}

/* Media Queries */
@media screen and (max-width: 1080px) {
 .container {
  width: 90%;
 }
 footer ul {
  width: 40%;
 }
}

@media screen and (max-width: 940px) {
 .hero .hero-sec {
  background-size: fill;
  height: 60vh;
 }
}

@media screen and (max-width: 750px) {
 .hero .hero-sec {
  height: 55vh;
 }

 .hero .hero-sec .heading {
  width: 80%;
 }
 footer ul {
  width: 60%;
 }
 .header .header-img1 {
  width: 2.5rem;
 }
 .header .header-img2 {
  width: 15rem;
 }
}

@media screen and (max-width: 775px) {
 .hero .hero-sec {
  height: 52vh;
 }
 .hero .hero-sec .heading {
  width: 90%;
 }
}

@media screen and (max-width: 670px) {
 .header ul {
  display: none;
 }
 .header figure {
  margin: auto;
 }
 .header {
  position: relative;
 }
 .header .menu-ul {
  /* display: block; */
  position: absolute;
  margin-top: 10rem;
  color: black;
  background-color: rgb(220, 220, 220);
  padding: 10rem;
  margin-top: 22rem;
  left: 3%;
  right: 3%;
  padding-top: 13rem;
  padding-bottom: 13rem;
 }
 .header .menu-bar1 {
  position: absolute;
  top: 6rem;
  /* left: 4rem; */
  z-index: 9999;
  width: 1.3rem;
  right: 3rem;
  height: 1.4rem;
 }
 .menu-ul a {
  color: black;
  display: block;
  margin-bottom: 2rem;
  text-align: center;
 }

 .hero .container {
  width: 100%;
  margin: auto;
  overflow-x: hidden !important;
 }
 .hero .hero-sec {
  overflow-x: hidden;
  background-size: cover;
  height: 65vh;
 }

 .menu-bar {
  display: block;
  width: fit-content;
  position: absolute;
  width: 1.5rem;
  left: 1rem;
  top: 1.5rem;
 }
 .hero .hero-sec .image-top {
  width: 50%;
 }
 .hero .hero-sec .image-bottom {
  width: 50%;
 }
}

@media screen and (max-width: 480px) {
 .menu-bar {
  width: 1.5rem;
  top: 1.3rem;
 }
 .header .header-img1 {
  display: block;
  width: 2rem;
 }
 .header .header-img2 {
  width: 14rem;
  margin-left: 1rem;
  display: block;
 }

 footer ul {
  width: 80%;
 }
 .hero .hero-sec .image-top {
  width: 60%;
 }
 .hero .hero-sec .image-bottom {
  width: 80%;
  margin-top: 2rem;
 }
}

@media screen and (max-width: 395px) {
 .menu-bar {
  width: 1.3rem;
  top: 1.3rem;
 }
 .header .header-img1 {
  display: block;
  width: 1.8rem;
 }
 .header .header-img2 {
  width: 12rem;
  margin-left: 1rem;
  display: block;
 }
}

@media screen and (max-width: 360px) {
 footer ul {
  width: 95%;
 }
}