*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

.nav-ul{
    padding: 0;
    display: flex;
  }
  .nav-li{
    padding: 0px 2px;
  }
  
  .nav-link {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    position: relative;
  }
  
  .nav-ul .nav-li .nav-link:before {
    content: "";
    width: 0;
    height: 5px;
    background-color: red;
    position: absolute;
    top: 80%;
    left: 0;
    transition: all 0.5s;
  }
  
  .nav-ul .nav-li .nav-link:after {
    content: "";
    width: 0;
    height: 5px;
    background-color: #000;
    position: absolute;
    top: 80%;
    right: 0;
    transition: all 0.5s;
  }
  
  .nav-ul .nav-li .nav-link:hover:before {
    width: 50%;
    transform: translateX(100%);
  }
  
  .nav-ul .nav-li .nav-link:hover:after {
    width: 50%;
    transform: translateX(-100%);
  }

/* pre navbar  */
.nav-bar{
    background-color: #000000;
    color: white;
  
  }
  .bi-list{
      font-size: 40px;
      color: #e31b1b;  
  }
  .icondiv{
      width: 20%;
      color: white;
      font-size: 17px; 
  }
  .prenav-text{
      font-size: 14px;
  }
  .bi-clock{
      color: #e31b1b;
      font-size: 16px;
  }


  .header-container{
    background-image: url("../image/header-img.webp");
    background-size: cover;
    background-repeat: no-repeat;
    height: 80vh;
  }
  .header-btn{
    background-color: #000;
  }
  .header-btn:hover{
    background-color: red;
  }

  .effect {
    text-decoration: none;
    /* text-transform: uppercase; */
    font-size: 15px;
    position: relative;
  }
  
   .effect:before {
    content: "";
    width: 0;
    height: 5px;
    background-color: red;
    position: absolute;
    top: 90%;
    left: 0;
    transition: all 0.5s;
  }
  
   .effect:after {
    content: "";
    width: 0;
    height: 5px;
    background-color: #000;
    position: absolute;
    top: 90%;
    right: 0;
    transition: all 0.5s;
  }
  
   .effect:hover:before {
    width: 40%;
    transform: translateX(50%);
  }
  
  .effect:hover:after {
    width: 35%;
    transform: translateX(-50%);
  }
.card2-h4{
    color: red;
}
.card2-span{
    color: #000;
}
.card2{
  transition: 0.6s all linear;
  height: 55vh;

}
.card2:hover{
  background-color: red;
  transition: 0.6s all linear;
}
.card2:hover .card2-h4{
    color: #000;
}
.card2:hover .card2-span{
    color: #fff;
}
.card2:hover .card2-para{
    color: white;
}
.reason-container{
    background-image: url("../image/pattern-bg.webp");
    background-color: red;
    background-size: cover;
    background-repeat: no-repeat;
}
.reason-card{
    transition: 0.3s all linear;

}
.reason-card:hover{
    transform: scale(1.03);
    transition: 0.3s all linear;
}
.smart-container{
    background-image: url("../image/smart-bg-img.webp");
    background-size: cover;
    background-repeat: no-repeat;
}
.scroll-card{
  background-image: url("../image/scroll-img1.webp");
  height: 65vh;
  background-size: cover;
  background-position: top;
  transition: 4s all linear;
  position: relative;

}
.scroll-card2{
  background-image: url("../image/imerial-resource-scroll-img.webp");
  height: 65vh;
  background-size: cover;
  background-position: top;
  transition: 4s all linear;
  position: relative;

}
.scroll-card3{
  background-image: url("../image/advertisinghands-img.webp");
  height: 65vh;
  background-size: cover;
  background-position: top;
  transition: 4s all linear;
  position: relative;

}
.scroll-card:hover:after{
  content:'IRG DIGITAL' ;
  font-size: 25px;
  color: red;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.377);
  position: absolute;  
  height: 100%;
  width: 100%;
  transition: 4s all linear;

}
.scroll-card2:hover:after{
  content:'IMPERIAL RESOURCE GROUP' ;
  font-size: 25px;
  color: red;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.377);
  position: absolute;  
  height: 100%;
  width: 100%;
  transition: 4s all linear;

}
.scroll-card3:hover:after{
  content:'Advertising Hand' ;
  font-size: 25px;
  color: red;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.377);
  position: absolute;  
  height: 100%;
  width: 100%;
  transition: 4s all linear;

}

.scroll-card:hover{
  background-position: bottom;
  transition: 4s all linear;
}

.footer{
  background-image: url("../image/Footer.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.pre-footer-col2{
text-align: end;
}



  @media screen  and (min-width:270px) and  (max-width:830px){
    .prenav-container{
      flex-direction: column;
    }
    .prenav-text{
      font-size: 10px;
    }
    .icondiv{
      width: 50%;
      font-size: 15px;
    }

  
}

@media screen  and (min-width:270px) and  (max-width:500px){
  .pre-footer-col1{
   text-align: center;
  }
  .pre-footer-col2{
    text-align: center;
  }
 
 
}