.header .branding {
  background-color: var(--darkbluebg);
}
.header.scrolled .branding {
  background: #0f4a49;
  transition: background-color 0.3s ease, padding 0.3s ease,
    box-shadow 0.3s ease;
}
.herosectionrow {background: var(--darkbluebg);position: absolute;top: 0;left: 0;width: 100%;height: auto;object-fit: cover;z-index: -1;padding-bottom: 1rem;}
.header .bannersection {background: var(--darkbluebg);width: 100%;min-height: auto;}
.abcontent {width: 100%; margin-top: 130px;text-align: center;}
.abcontent .mainheading{color: #fff;padding-bottom: 0px;}
.breadcrumb{justify-content: center;padding: 0rem 0rem 0px 0px;margin-bottom: 0rem;}

/* Strat of area */
.categorypage{padding: 50px 0px 20px 0px;}
.categorypage .mainheading{text-align: center;}
.categorypage .mainheading span{color: var(--accent-color);}
.flex-container {display: flex; flex-wrap: wrap;gap:1.5rem;justify-content: center;}
  .serviceitem {border-radius: 1px;overflow: hidden;flex: 0 1 calc(33.333% - 1.5rem);justify-content: center;
    box-sizing: border-box; transition-duration: .2s;transition-property: transform;}
  .serviceitem .serviceimg {
      border-radius: 1px;
      overflow: hidden;position: relative;
    }

    .serviceitem .serviceimg img {
      transition: 0.6s;width: 100%;
    }

  .details {
      background: rgba(255, 255, 255, 1);
      padding: 22px 30px 30px;
      margin: -35px 40px 30px 0px;
      transition: all ease-in-out 0.3s;
      position: relative;
      border-top:var(--surface-color) 5px solid;
      box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);
    }
  .details .sheading {
      font-weight: 600;
      margin: 5px 0 0px 0;
      font-size: 20px;font-family: var(--heading-font);
      color: var(--default-color);
      text-decoration: none;
      transition: ease-in-out 0.3s;
    }
    .details .sheading a{color: var(--default-color);}
     .details .sheading a:hover{color: var(--accent-color);}

  .details div {
      color: color-mix(in srgb, var(--default-color), transparent 10%);
      line-height: 24px;
      font-size: 15px;
      margin-bottom: 12px;
    }

  .serviceitem:hover .details .sheading {
      color:#fff;
    }

  .serviceitem:hover .serviceimg img {
      transform: scale(1.2);
    }

    .viewallbtn {
      background-color: transparent;
      color: #414042; font-size: 16px;
      padding: 6px 1.2rem;
      border: #a9a9a9 1px solid;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;cursor: pointer;
      transition: 0.3s;text-decoration: none;
    }
    .viewallbtn:hover {
      background-color:var(--accent-color);
      color: #fff;
      border: var(--accent-color) solid;
    }

  .serviceitem:hover .details{background: var(--surface-color);}
  .serviceitem:hover .sheading a{color: #fff;}
  .serviceitem:hover .details div{color: #fff;}
  .serviceitem:hover .viewallbtn{border: #fff 1px solid; color: #fff;}

/* Start of IPad Pro Screen */
@media screen and (max-width:1400px) and (min-width:1301px){
.herosectionrow {height: auto;}
.abcontent {margin-top: 160px;}
.categorypage{padding: 50px 0px 40px 0px;}
}

/* Start of IPad Pro Screen */
@media screen and (max-width:1300px) and (min-width:1201px){
.herosectionrow {height: auto;}
.abcontent {margin-top: 160px;}
.categorypage{padding: 40px 0px 40px 0px;}
.mtops {margin-top: var(--spacing-md);}
.details {padding: 20px;margin: -30px 20px 30px 0px;}
.details p{font-size: 10px;}
.details .sheading {margin: 0px 0 0px 0;font-size: 18px;}
}

/* Start of Mini Desktop Screen */
@media screen and (max-width:1200px) and (min-width:1101px){
.mtops {margin-top: var(--spacing-md);}
.herosectionrow {height: auto;}
.abcontent {margin-top: 150px;text-align: center;}
.categorypage{padding: 40px 0px 20px 0px;}
.details {padding: 20px;margin: -30px 20px 30px 0px;}
.details p{font-size: 10px;}
.details .sheading {margin: 0px 0 0px 0;font-size: 18px;}
}

  /* Start of Ipad Pro Screen */
@media screen and (max-width:1100px) and (min-width:992px){
.mtops {margin-top: var(--spacing-md);}
.herosectionrow {height: auto;}
.abcontent {margin-top: 120px;}
.categorypage{padding: 40px 0px 30px 0px;}
.details {padding: 15px 15px 15px;margin: -30px 20px 30px 0px;}
.details .sheading {margin: 0px 0 0px 0;font-size: 18px;}
}

/* Start of Ipad Screen */
@media screen and (max-width:991.98px) and (min-width:768px){
.mtops {margin-top: var(--spacing-md);}
.herosectionrow {height: auto;}
.abcontent {margin-top: 120px;}
.categorypage{padding: 40px 0px 30px 0px;}
.details {padding: 15px 15px 15px;margin: -30px 15px 20px 0px;}
.details .sheading {margin: 0px 0 0px 0;font-size: 18px;}
}

/* Start of Iphone/Mobile Screen */
@media screen and (max-width:767px) and (min-width:600px){
.mtops {margin-top: var(--spacing-md);}
.herosectionrow {height: auto;}
.abcontent {margin-top: 120px;}
.categorypage{padding: 40px 0px 30px 0px;}
.details {padding: 15px 15px 15px;margin: -30px 15px 15px 0px;}
.viewallbtn {font-size: 15px;padding: 5px 1rem;}
.details .sheading {margin: 0px 0 0px 0;font-size: 16px;}
}

/* Start of Iphone/Mobile Screen */
@media screen and (max-width:599.98px) and (min-width:320px){
.mtops {margin-top: var(--spacing-md);}
.abcontent {margin-top: 120px;text-align: center;}
.herosectionrow {height: auto;}
.categorypage{padding: 40px 0px 30px 0px;}
.details {padding: 15px 15px 15px;margin: -30px 15px 15px 0px;}
.viewallbtn {font-size: 15px;padding: 5px 1rem;}
.details .sheading {margin: 0px 0 0px 0;font-size: 16px;}
}