@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root{
    --primaryHeading: "Bebas Neue", sans-serif;
    --bodyFont: "Poppins", sans-serif;
    --primaryColor:#4b0081 ;
    --secColor:#f2d40e ;

    --primaryTxtColor: #333333;
    --secTxtColor: #f2d40e;

    --white: #fff;
    --black: #000;

    --bodySize: 18px;
    --bodyWeight: normal;
    --bodyHeight: 38px;
    --bodyColor: #333333;

}
/* body:before{content:''; background: url(screenshot.jpg); width: 100%; height: 100%; position: absolute; inset: 0;} */
#breadcrumbs span{ font-size: 18px;}
.para{ margin: 0;}
#nh_serv {  position: relative; padding: 40px 25px 0;   font-size: var(--bodySize); font-family: var(--bodyFont); color: var(--bodyColor); line-height: var(--bodyHeight); font-weight: var(--bodyWeight);}
#nh_serv .wrapper {max-width: 1400px;margin: 0 auto;}
h1, h2 {font-family: var(--primaryHeading); padding: 0; margin: 0; line-height: 100%;}

  .nh_serv_info { text-align: center; margin-top: 80px; }
  .nh_serv_info h2 { font: 600 60px/100% var(--primaryHeading); margin: 0 0 39px; text-transform: uppercase; }
  .nh_serv_info p { width: 71%; margin: 0 auto; text-align: center;}

  .nh_middle_area { min-height: 0; margin-top: 114px; position: relative; padding: 114px 0 43px; }
  .nh_middle_area::before { content: ''; position: absolute; width: 98%; max-width: 1367px; background: #FAFAFA; height: 100%; right: -250px; top: 0;  }
  .nh_serv_boxes { display: flex; flex-direction: column; gap: 71px; width: 43%; max-width: 594px; margin: 0 0 0 auto; padding-top: 114px; counter-reset: nh_serv_boxes; }
  .nh_serv_boxes section { position: relative; width: 100%; min-height: 251px; padding: 0 0 71px 95px; border-bottom: 1px solid #cfcfcf; }
  .nh_serv_boxes section:hover h2:before{color: #4b0081;}
  .nh_serv_boxes section:last-child { border: unset; }
  .nh_serv_boxes section h2 { font: 600 35px/100% var(--primaryHeading); text-transform: uppercase; margin: 0 0 31px; position: relative;  }
  .nh_serv_boxes section h2::before { content: '0' counter(nh_serv_boxes); counter-increment: nh_serv_boxes; line-height: 100%; position: absolute; font-size: 37px; left: -96px; top: 0; font-family: var(--bodyFont); font-weight: normal; color: var(--secTxtColor); }
  .nh_serv_boxes section p { margin: 0; }
  .nh_serv_boxes section a { position: absolute; inset: 0; }

  .nh_middle_area figure { position: absolute; bottom: 322px; left: 13px; max-width: 46%; overflow: hidden; }
  .nh_middle_area figure img { max-width: initial; position: relative; left: 50%; transform: translateX(-50%); object-fit: cover; object-position: center; height: 100%; }


  .nh_serv_img_holder { width: 1920px; margin-left: 50%; transform: translateX(-50%); margin-top: 238px; }
  .nh_serv_img_holder figure{}
  .nh_serv_img_holder figure img{}


/* Media Queries */
@media only screen and (max-width:1400px) {
  #nh_serv {padding: 40px 15px 0; }
}
@media only screen and (max-width:1300px) {
}
@media only screen and (max-width:1200px) {
}
@media only screen and (max-width:1100px) {
  .nh_serv_boxes section h2 { font-size: 31px; }
    .nh_serv_boxes { width: 50%; }
}
@media only screen and (max-width:1000px) {
  .nh_serv_img_holder { max-width: 170%; }
  .nh_serv_boxes { padding: 0; margin: 0 0 60px; width: 100%; max-width: 100%; flex-wrap: wrap; gap: 40px 15px; justify-content: space-evenly; flex-direction: row; }
  .nh_middle_area { padding: 40px 0;  margin-top: 50px;}
  .nh_middle_area::before { width: 1920px; max-width: unset; right: 0; left: 50%; transform: translateX(-50%); }
  .nh_serv_boxes section { width: 45%; min-height: 0; padding: 40px 25px 80px; border: 1px solid #cfcfcf !important; text-align: center; max-width: 100%; }
  .nh_serv_boxes section h2::before { font-size: 45px; position: static; display: block; margin-bottom: 25px; }
  .nh_serv_img_holder { margin-top: 0; }
  .nh_middle_area figure { max-width: 83%; overflow: unset; position: static; width: max-content; margin: 0 auto; }
  .nh_middle_area figure img { max-width: 100%; left: 0; transform: unset; }
  .nh_serv_info p { width: 100%; margin: 0; }
}
@media only screen and (max-width:800px) {
  .nh_serv_boxes section{width: 48%;}
}

@media only screen and (max-width:600px) {
  .nh_serv_boxes section{width: 400px;}
  .nh_serv_info h2 { font-size: 50px; }
}