@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
/************************** font_family end here *********************************/
/*red-color*/
/*black-color*/
/*****  mixin  *****/
/***** mixin  *****/
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul {
  margin: 0;
  padding: 0; }

a {
  color: #fff; }

a:hover {
  text-decoration: none; }

body {
  overflow-x: hidden; }

li {
  list-style: none; }

a {
  transition: 0.45s; }

.no_padd {
  padding: 0px; }

.mobile_menus {
  display: none !important; }

#mySidenav {
  display: none; }

.shop_btn {
  border: 1px solid #000;
  color: #000;
  padding: 16px 25px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
  display: inline-block;
  border-radius: 10px; }
  .shop_btn:hover {
    background: #8c0303;
    color: #fff;
    border-color: #8c0303; }

body {
  overflow-x: hidden; }

.banner-main {
  background: url(../images/bg.jpg) no-repeat center top fixed;
  height: 100vh;
  background-size: cover;
  position: relative; }
  .banner-main .row {
    align-items: center; }
  .banner-main .top-right {
    width: 40%;
    padding-top: 0px;
    margin: 0 auto; }
    .banner-main .top-right img {
      width: 100%; }
  .banner-main .top-left {
    width: 22%;
    padding-top: 15px;
    margin-right: 25%;
    margin-left: auto; }
    .banner-main .top-left img {
      width: 100%; }
  .banner-main .football {
    position: absolute;
    bottom: 55px;
    left: 115px;
    width: 25%;
    transition: 0.8s; }
    .banner-main .football img {
      width: 100%; }
    .banner-main .football:hover {
      opacity: 50%; }
  .banner-main .construction {
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 35%;
    transition: 0.8s; }
    .banner-main .construction img {
      width: 100%; }
    .banner-main .construction:hover {
      opacity: 50%; }

/*# sourceMappingURL=main.css.map */

@media only screen and (min-width: 280px) and (max-width: 359px) {
.banner-main .top-right{width:80%;}
.banner-main .football{width:70%; position:inherit; margin:0 auto 40px auto; bottom:inherit; left:inherit;}
.banner-main{height:inherit}
.banner-main .construction{width:80%; position:inherit; margin:150px auto 15px auto;}
.banner-main .top-left{position:absolute; width:45%; top:280px; left:0; right:0;}
}
@media only screen and (min-width: 360px) and (max-width: 479px) {
.banner-main .top-right{width:80%;}
.banner-main .football{width:70%; position:inherit; margin:0 auto 40px auto; bottom:inherit; left:inherit;}
.banner-main{height:inherit}
.banner-main .construction{width:70%; position:inherit; margin:150px auto 15px auto;}
.banner-main .top-left{position:absolute; width:40%; top:360px; left:0; right:0;}
}
@media only screen and (min-width: 480px) and (max-width: 666px) {
.banner-main .top-right{width:50%;}
.banner-main .football{width:50%; position:inherit; margin:0 auto 40px auto; bottom:inherit; left:inherit;}
.banner-main{height:inherit}
.banner-main .construction{width:70%; position:inherit; margin:150px auto 15px auto;}
.banner-main .top-left{position:absolute; width:30%; top:360px; right:-10%;}
}
@media only screen and (min-width: 667px) and (max-width: 767px) {
.banner-main .top-right{width:25%; margin:0px;}
.banner-main .football{left:50px;}
.banner-main .top-left{width:15%; margin:0px; position:absolute; bottom:-45px; right:20px}
.banner-main .construction{width:37%; right:7%}
}
@media only screen and (min-width: 768px) and (max-width: 799px) {
.banner-main .top-right{width:35%; margin:0px;}
.banner-main .football{left:inherit; position:inherit; margin:30px; width:40%}
.banner-main .top-left{width:23%; margin:0px; position:absolute; top:370px; right:30px}
.banner-main .construction{width:45%; right:7%; bottom:0}
}
@media only screen and (min-width: 800px) and (max-width: 991px) {
.banner-main .top-right{width:35%; margin:0px;}
.banner-main .football{left:inherit; position:inherit; margin:30px; width:40%}
.banner-main .top-left{width:20%; margin:0px; position:absolute; top:600px; right:30px}
.banner-main .construction{width:45%; right:7%; bottom:0}
}
@media only screen and (min-width: 992px) and (max-width: 1023px) {
.banner-main .top-right{width:50%; margin:0px;}
.banner-main .football{left:inherit; position:inherit; margin:30px; width:35%}
.banner-main .top-left{width:32%; margin:0px; position:absolute; top:350px; right:35px}
.banner-main .construction{width:45%; right:7%; bottom:0}
}
@media only screen and (min-width: 1024px) and (max-width: 1169px) {
.banner-main .top-right{width:50%; margin:0px;}
.banner-main .football{left:inherit; position:inherit; margin:30px; width:35%}
.banner-main .top-left{width:35%; margin:0px; position:absolute; top:500px; right:35px}
.banner-main .construction{width:45%; right:7%; bottom:0}
}