/* Reset some basic styles */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 h1, h2, h3, h4, h5, h6 , p , li , a{
      font-family: 'Metro Police', sans-serif;
}
body{
    background:black !important;
}
 /* Background image and positioning */
 .background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /* background-image: url('../images/precut-home/bg2.jpg'); */
     background: url('../images/precut-home/bg2.jpg') , rgba(0, 0, 0, 0.203);
     background-blend-mode: multiply;
     /* Update with your image path */
     background-size: cover;
     background-position: center;
     height: 100vh;
 }

 .logo {
     position: relative;
     text-align: end;
     padding: 20px 0px;
     margin-top: 1rem;
     z-index: 1;
 }

 .logo img {
     width: 20%;

 }

 /* Center box */
 .content-box {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     align-content: center;
     padding: 20px;
 }
.precut-col1 h1{
    color: white;
    font-size: 30px;
        font-weight: 700;
       text-transform: math-auto;
    text-align: center;
    align-content: center;
}
.precut-col1 h1 span{
    color: red;
}
 .precut-item-row{
    margin-top: 2rem !important;
 }
 .precut-item-row .precut-item img{
width: 100%;
/* border: 2px solid white; */
border-radius: 10px;
 }
  .precut-item-row .precut-item a h2{
      font-weight: 700;
      text-transform: math-auto;
     color: white;
         text-align: center;
         font-size: 20px;
         margin-top: 10px;
  }
  .modal{
          align-content: center;
  }
  
  .precut-item-row .precut-item a{
     text-decoration: none !important;
  }

  @media(max-width:999px){
    .precut-item-row .precut-item{
        width: 100% !important;
    }
     .precut-item-row{
    margin-top: 0rem !important;
 }
  }

  @media(max-width:768px){
    .precut-item{
        margin-top: 2rem !important;
    }
    .content-box {
    top: 200px;
        height: inherit;
    }
    .logo {
    text-align: center;
    }
    .logo img {
    width: 60%;
}
  }

  .modal{
    z-index: 999999999999;
    position: relative;
  }
  .modal-body img{
    width: 100%;
    border:0px !important;
  }
    .modal-body{
        padding: 0px !important;
        border:0px !important;
    }
    .modal-content{
            background: #ffffff !important;
    border: 2px solid white !important;
    
    }
    .modal-header h1{
        color: rgb(0, 0, 0);
    }
    .modal-header button{
          color: white;
    position: relative;
    top: 2rem;
    z-index: 99999;
    }
     .modal-header{
  padding: 0px 15px !important;
  height: 0px;
     }
      .modal-dialog{
                max-width: 60%  !important;
      }

.btn-close{
    background-color: white !important;
    border-radius: 100% !important;
}

@media(max-width:500px){
        .content-box {
        top: 140px;
    }
}

@media(max-width:999px){
    .modal-dialog {
    max-width: 95%
 !important;
}
}

 /*.how-to-apply*/
 
 .how-to-apply {
     position: absolute;
     bottom: 30px;
     text-align: end;
     right: 50px;
 }

 .how-to-apply a {
     background: red;
     color: white;
     text-decoration: none;
     padding: 10px 15px;
     border-radius: 3px;
 }
 
 @media(max-width:768px){
      .how-to-apply{
              position: relative;
    bottom: 33px;
    right: auto;
    top: 30px;
    text-align: center;
      }
      .precut-row{
          margin-top: -50px !important;
      }
 }