.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;}
.commonrequest {margin-top: 65px;}

/* Strat of area */
.categorypage{padding: 50px 0px 20px 0px;}
.categorypage .mainheading{text-align: center;}
.categorypage .mainheading span{color: var(--accent-color);}
.serviceitem {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 {overflow: hidden;position: relative;}
.serviceitem .serviceimg img {transition: 0.6s;width: 100%;}
.details {background: rgba(255, 255, 255, 1);padding: 20px 20px 20px;min-height: 100%;
    margin: -30px 30px 30px 4px;transition: all ease-in-out 0.3s;position: relative;text-align: center;border-top: var(--surface-color) 5px solid;box-shadow: 0px 0 15px rgba(0, 0, 0, 0.1);}
.details .sheading {font-weight: 600;margin: 5px 0 5px 0;font-size: 20px;color: #222;text-decoration: none;transition: ease-in-out 0.3s;font-family: var(--heading-font);}
.details .aesthetic{color: var(--default-color);font-size: 16px; margin-bottom: 12px;}


.details div {color: color-mix(in srgb, var(--default-color), transparent 10%);line-height: 24px;font-size: 15px;margin-bottom: 12px;}
.buttontop{margin-top: 12px;display: inline-block;}
.teambtn{background-color: #fff;box-shadow: 0px 10px 50px 0px #00000014; padding: 11px 25px;font-size: 1rem;border: 1px solid var(--accent-color);  transition: 0.3s;color: var(--surface-color);}
.teambtn:hover{color: var(--surface-color);border: 1px solid var(--surface-color);}
.readbtn{background-color: #fff;box-shadow: 0px 10px 50px 0px #00000014; padding: 11px 25px;font-size: 1rem;border: 1px solid var(--default-color);  transition: 0.3s;color: var(--default-color);}
.readbtn:hover{color: var(--surface-color);border: 1px solid var(--surface-color);}
.details p{font-size: 16px; margin-bottom: 15px;}
.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;}

/* Start of IPad Pro Screen */
@media screen and (max-width:1500px) and (min-width:1401px){
.herosectionrow {height: 260px;}
.abcontent {margin-top: 160px;}
.mtops {margin-top: var(--spacing-md);}
.categorypage{padding: 60px 0px 20px 0px;}
.details {padding: 10px 10px 10px;margin: -25px 15px 15px 2px;box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);}
.details .sheading {margin: 0px 0 3px 0;font-size: 18px;}
.details p {font-size: 16px;margin-bottom: 0px;}
.readbtn {font-size: 16px;padding: 5px 10px;}
.teambtn {font-size: 16px;padding: 5px 10px;}
.details .aesthetic {font-size: 16px;margin-bottom: 5px;}
}


/* Start of IPad Pro Screen */
@media screen and (max-width:1400px) and (min-width:1301px){
.mtops {margin-top: var(--spacing-md);}
.herosectionrow {height: auto;}
.abcontent {margin-top: 160px;}
.categorypage{padding: 50px 0px 30px 0px;}
.details {padding: 10px 10px 10px;margin: -25px 15px 15px 2px;box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);}
.details .sheading {margin: 0px 0 3px 0;font-size: 18px;}
.details p {font-size: 16px;margin-bottom: 0px;}
.readbtn {font-size: 16px;padding: 5px 10px;}
.teambtn {font-size: 16px;padding: 5px 10px;}
.details .aesthetic {font-size: 16px;margin-bottom: 5px;}
}

/* Start of IPad Pro Screen */
@media screen and (max-width:1300px) and (min-width:1201px){
.herosectionrow {height: auto;}
.abcontent {margin-top: 160px;}
.mtops {margin-top: var(--spacing-md);}
.categorypage{padding: 50px 0px 30px 0px;}
.details {padding: 10px 10px 10px;margin: -25px 15px 15px 2px;box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);}
.details .sheading {margin: 0px 0 3px 0;font-size: 18px;}
.details p {font-size: 16px;margin-bottom: 0px;}
.readbtn {font-size: 16px;padding: 5px 10px;}
.teambtn {font-size: 16px;padding: 5px 10px;}
.details .aesthetic {font-size: 16px;margin-bottom: 5px;}
}

/* Start of IPad Pro Screen */
@media screen and (max-width:1200px) 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 10px 10px;margin: -25px 15px 15px 2px;box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);}
.details .sheading {margin: 0px 0 3px 0;font-size: 18px;}
.details p {font-size: 16px;margin-bottom: 0px;}
.readbtn {font-size: 16px;padding: 5px 10px;}
.teambtn {font-size: 16px;padding: 5px 10px;}
.details .aesthetic {font-size: 16px;margin-bottom: 5px;}
}

/* Start of IPad Pro Screen */
@media screen and (max-width:1100px) 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 10px 10px;margin: -25px 15px 15px 2px;box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);}
.details .sheading {margin: 0px 0 3px 0;font-size: 18px;}
.details p {font-size: 16px;margin-bottom: 0px;}
.readbtn {font-size: 16px;padding: 5px 10px;}
.teambtn {font-size: 16px;padding: 5px 10px;}
.details .aesthetic {font-size: 16px;margin-bottom: 5px;}
}

/* Start of IPad Screen */
@media screen and (max-width:991.99px) and (min-width:768px){
.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 2px;box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);}
.details .sheading {margin: 0px 0 3px 0;font-size: 18px;}
.details p {font-size: 16px;margin-bottom: 0px;}
.readbtn {font-size: 16px;padding: 5px 10px;}
.teambtn {font-size: 16px;padding: 5px 10px;}
.details .aesthetic {font-size: 16px;margin-bottom: 5px;}
}

/* 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 2px;box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);}
.details .sheading {margin: 0px 0 3px 0;font-size: 18px;}
.details p {font-size: 16px;margin-bottom: 0px;}
.readbtn {font-size: 15px;padding: 5px 10px;}
.teambtn {font-size: 15px;padding: 5px 10px;}
.details .aesthetic {font-size: 16px;margin-bottom: 5px;}
}

/* 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;text-align: center;}
.categorypage{padding: 15px 0px 15px 0px;}
.details {padding: 10px 10px 10px;margin: -25px 15px 15px 2px;box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);}
.details .sheading {margin: 0px 0 3px 0;font-size: 18px;}
.details p {font-size: 16px;margin-bottom: 0px;}
.readbtn {font-size: 15px;padding: 5px 10px;}
.teambtn {font-size: 15px;padding: 5px 10px;}
.details .aesthetic {font-size: 16px;margin-bottom: 5px;}
}