.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;}
.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: -40px 40px 40px 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 15px 0;
      font-size: 20px;font-family: var(--heading-font);
      color: #222;text-decoration: none;
      transition: ease-in-out 0.3s;
    }


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

     .details p{font-size: 12px; margin-bottom: 0px;}

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

  .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;}
  .serviceitem:hover p{color: #fff;}

  .crvideobtns {
position: absolute;
left: 50%;
top: 46%;
z-index: 3;
transform: translate(-50%, -50%);
}
.crvideobtns .circle {
color: #fff;
position: relative;
z-index: 2;
height: 54px;
line-height: 20px;
width: 54px;cursor: pointer;
font-size: 24px;
border-radius: 100%;
background: var(--accent-color);
border: 1.5px solid rgba(255, 255, 255, 1);
display: flex;outline: 0;
align-items: center;justify-content: center;
padding: 0px;
transition: all 0.4s ease-in-out 0s;
}
.crvideobtns .circle img{text-align: center;outline: 0;border: 0px;width: auto;}
.crvideobtns::before,
.crvideobtns::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 100%;
background: rgba(221, 143, 64, 0.6);

z-index: -1;outline: 0;
animation: crZoomInOutInvisible 1s ease-in-out infinite backwards;
}
@-webkit-keyframes crZoomInOutInvisible {
0% {
transform: scale(1);
opacity: 1;
}

100% {
transform: scale(1.6);
opacity: 0;
}
}

@keyframes crZoomInOutInvisible {
0% {
transform: scale(1);
opacity: 1;
}

100% {
transform: scale(1.6);
opacity: 0;
}
}

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

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

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

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

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

/* 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: 30px 0px 30px 0px;}
.details {padding: 10px 10px 10px;margin: -25px 15px 15px 0px;}
.details .sheading {margin: 0px 0 10px 0;font-size: 16px;}
.details p {font-size: 11px;margin-bottom: 0px;}
.viewallbtn {font-size: 15px;padding: 5px 1rem;}
}

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