.blog-post{
  margin-bottom:0;
}
h1{
  margin-bottom:25px;
}


.groovythingapp {
  display: flex;
}
.infobox-content-title{
  margin-bottom: 15px;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #000;
}

.Porfolio_content .groove-info-box-left {
  display: flex;
  gap: 26px;
}
.Porfolio_content .groove-infobox-image{
  width: 90px;
}

.Porfolio_content .groove-infobox-content {
  width: calc(100% - 116px);
  height: 90px;
}
.groove-infobox-content{
  width: calc(100% - 125px);
}
.Porfolio_content .groove-btn{
  display: block;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}
.gv-image .groove-image{
  height: 100%;
}
.gv-image .groove-image img{
  position: absolute;
  bottom: 0;
}
.gv-image .groove-image img{
  position: absolute;
  bottom: 0;
}
.gv-col-3.gv-image .groove-image img{
  position: relative;
  bottom: 0;
}
.gv-col-5.gv-image .groove-image img{
  right:0;
}
.gv-col-4.gv-image .groove-image img{
  right: -15px;
}
.gv-col-2.gv-image .groove-image img{
  left: -15px;
}
.editor-left.groove-text-editor ul li::before{
  background: url(/wp-content/uploads/2021/08/groovything-Icon-01.svg);
}
.editor-right.groove-text-editor ul li::before{
  background: url(/wp-content/uploads/2021/08/groovything-Icon-02.svg);
  left: auto;
  right: 0;
}
.groove-text-editor ul li::before{
  width: 30px;
  height: 17px;
  background-repeat: no-repeat !important;
  margin-top: 2px;
}
.groove-text-editor ul li{
  line-height: 32px;
  font-size: 24px;
  font-weight: bold;
  padding-left:55px;
  margin-bottom: 20px;
}
.editor-right{
  text-align:right;
  padding-top: 100px;
  padding-right: 15px;
}
.editor-right li{
  padding-left: 0;
  padding-right: 55px;
}
.groovy-margin img{
  margin-top: -500px;
}
.groove-align-center{
  margin-bottom: 45px;
}
#main{
  background-color: #fff;
}
.groovething-block-3{
  background-color:#FAFAFA;
  padding: 60px 0 0;
}
.image-box{
  border-radius: 30px !important;
  box-shadow: 0px 2px 4px 3px rgb(110 80 110 / 15%) !important;
}
.p-padding{
  padding: 65px 15px 25px 80px;
  font-size: 24px;
}
.p-padding1{
  padding: 50px 0 45px 0;
}
.groovething-block-5 .groove-infobox-image{
  margin-left: -10px;
}
.gt-hover:hover{
  transition: all 0.4s;
  transform: scale(1.02);
}
.groove-section.groove-section-boxed>.groove-container{
  max-width: 1170px !important;
}
.row-padding{
  padding:0 15px;
}
.Porfolio_content p{
  margin-left: 0px;
}
.image-nextdown{
  width: 51px;
  position: absolute;
  left: 15px;
  top: 20px;
}

/* New */

.groovy-thing-hero {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 40px;
  align-items: start;
}

.groovy-thing-hero .hero-image {
  border: solid 1px #E3E3E3;
  border-radius: 12px;
}

.groovy-thing-hero .hero-image img {
  border-radius: 12px;
}

.Porfolio-block h1, .Porfolio-block h1.Porfolio_title {
  color: #222;
  margin-bottom: 30px;
  font-size: 28px;
  line-height: 34px;
}

.Porfolio_content h3 {
  line-height: 22px !important;
  color: #000;
  font-weight: 500;
}

.hero-des {
  font-size: 15px;
  line-height: 20px;
  color: #222;
  margin-bottom: 30px;
}

.groovething-block .groove-headingtitle, .groovething-block .groove-headingtitle span {
  font-size: 28px !important;
  line-height: 34px !important;
  color: #000000;
  font-weight: 600;
  margin-bottom: 10px;
}

.groovething-block .groove-headingtitle span {
  color: #E60078;
}

p.block-content {
  font-size: 15px;
  line-height: 20px;
  color: #222;
}

.groovething-block-3 .block-content {
  margin-bottom: 28px;
}

.feature-rows {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 20px;
  align-items: end;
  text-align: center;
}

.feature-box h3 {
  font-size: 14px !important;
  line-height: 18px !important;
  color: #222;
  font-weight: 500 !important;
  margin-bottom: 20px;
}

.groovething-block-4 {
  padding: 50px 0 60px;
}

.groovething-block-4 .block-content {
  margin-bottom: 60px;
}

.component-box {
  position: relative;
}

.component-box img {
  max-width: 600px;
}

.component-absolute {
  position: absolute;
  min-width: 239px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.component-absolute.component-right {
  left: calc(50% + 275px);
  transform: translateY(-50%);
  top: calc(50% + 3px);
  padding: 16px 0 16px 19px;
  border-left: solid 1px #000000;
}

.component-absolute.component-left {
  right: calc(50% + 320px);
  text-align: right;
  top: 13px;
  padding: 16px 19px 16px 0;
  border-right: solid 1px #000000;
}

.component-absolute.component-left::before,
.component-absolute.component-right::before {
  display: block;
  content: "";
  width: 131px;
  height: 1px;
  background-color: #D8D8D8;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
}

.component-absolute.component-right::before {
  left: auto;
  right: 100%;
}

.component-absolute p {
  margin-bottom: 0;
  position: relative;
}

.component-absolute.component-left p {
  padding-right: 12px;
}

.component-absolute.component-right p {
  padding-left: 12px;
}

.component-absolute p::before {
  display: block;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #222;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

.component-absolute.component-right p::before {
  left: 0;
  right: auto;
}

.groovething-block-5 {
  background: linear-gradient(180deg, #FAFAFA, #FFFFFF, #FFFFFF);
  padding: 60px 0 20px;
}

.works-sub-title {
  text-align: center;
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-bottom: 20px;
}

.works-sub-title span {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: #000;
  display: block;
  padding-right: 8px;
  position: relative;
}

.works-sub-title span::before {
  display: block;
  content: "";
  width: 1px;
  height: 20px;
  background-color: #000000;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.works-sub-title span:last-child {
  padding-right: 0;
}

.works-sub-title span:last-child::before {
  display: none;
}

.works-sub-section-1 {
  text-align: center;
  margin-bottom: 20px;
}

.works-sub-section-1 img {
  max-width: 770px;
}

.works-sub-row {
  display: flex;
  justify-content: space-between;
}

.works-sub-box {
  width: 320px;
}

.works-sub-box p {
  font-size: 15px;
  color: #222;
  line-height: 20px;
  font-weight: 500;
  display: flex;
  min-height: 40px;
  align-items: end;
  text-align: center;
  justify-content: center;
}

.groovething-block-6 {
  padding-bottom: 60px;
}

.groovething-block-6 .groove-container {
  background-color: #222;
  border-radius: 20px;
}

.download-app-container {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="748" height="400" viewBox="0 0 748 400"><path id="Path_107753" data-name="Path 107753" d="M16,0H748L548,400H16A16,16,0,0,1,0,384V16A16,16,0,0,1,16,0Z" fill="%232c2c2c"/></svg>');
  background-repeat: no-repeat;
  display: grid;
  grid-template-columns: 1fr 500px;
  align-items: center;
  padding-left: 70px;
  gap: 70px;
  border-radius: 20px;
}

.download-content {
  padding-bottom: 15px;
}

.download-content h2 {
  font-size: 32px !important;
  line-height: 42px !important;
  color: #fff;
  margin-bottom: 30px;
}

.content-img svg {
  min-width: 169px;
}

@media only screen and (max-width: 767px) {
  .gv-image .groove-image img{
      position: relative;
      bottom: auto;
  }
  .gv-col-2.gv-image .groove-image img{
      left: 0;
  }
  .groove-column.groove-col-20{
      width:100%;
  }
  .Porfolio_content .groove-btn{
      width: auto;
      display: inline-block;
  }
  .groove-align-center{
      margin-bottom: 30px;
  }
  .groove-text-editor ul li{
      font-size: 17px;
      margin-bottom: 10px;
  }
  .groovy-margin img{
      margin-top: 0;
  }
  
  .editor-right,.editor-left{
      padding-top: 20px;
      margin-right: 15px;
  }
  .p-padding1 {
      padding: 45px 0 45px 0;
  }
  .p-padding1 .groove-column:first-child {
      padding-bottom: 15px;
  }
  .p-padding{
      padding: 50px 15px 15px 70px;
      font-size: 17px;
  }
  .editor-left .custom-text-editor{
      margin:0;
      padding-left: 55px;
  }
  
  .Porfolio_content{
      margin-top: 10px;
  }
  .margin-mobile{
      margin-bottom: 15px;
  }
  .slick-current img {
  transform: scale(1);
  margin:auto;
  }
  .slick-next{
      background-size: 40px;
      right: 0px;
  }
  .swiper-wrapper{
      display: block;
  }
  .slick-slide {
      padding: 20px 0px;
  }
  .slick-dots{
      display: block;
      text-align: center;
      align-items: center;
      margin: auto;
  }
  .slick-dots li{
      display: inline-block;
      width: 7px;
      height: 7px;
      background-color: #000;
      border-radius: 50%;
      position: relative;
      margin: 0 5px;
  }
  .slick-dots button{
      background-color: transparent !important;
      color: transparent;
  }
  .slick-slide img{
      padding: 0 5px;
  }
  li.slick-active {
      background-color: #E60078;
      background: #E60078;
      opacity: 1;
  }
  .slick-slide {
      opacity: 1;
  }
  .swiper-slide-inner{
      margin:0;
  }
  .groovething-block-3 .lazyload,.groovething-block-3 .lazyloading{
      opacity: 1;
  }
  .infobox-content-title{
      margin-bottom: 5px;
  }
  .groovething-block-5 .editor-right, .groovething-block-5 .editor-left{
      padding-left: 5px;
  }
  .groovething-block-5 .editor-left.groove-text-editor ul li::before{
      background: none;
  }
  .groovething-block-5 .editor-left .custom-text-editor, .groovething-block-5 .groove-text-editor ul li{
      padding-left: 0;
  }
  .groovething-block-3 .groove-align-center{
      margin-bottom: 10px;
  }
  .image-nextdown{
      width: 51px;
      position: absolute;
      left: 0;
      top: 6px;
  }

  .groovy-thing-hero {
    display: block;
  }

  .Porfolio-block h1, .Porfolio-block h1.Porfolio_title {
    font-size: 24px;
    line-height: 34px;
    color: #000;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .Porfolio_content h3 {
    margin-top: 10px;
    margin-bottom: 10px !important;
  }

  .Porfolio-block .groove-container {
    display: block !important;
  }

  .Porfolio_content p {
    margin-bottom: 20px;
  }

  .hero-box-mobile {
    background: #222222;
    border-radius: 24px;
    text-align: center;
    padding: 20px 0 30px;
  }

  .hero-box-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .hero-box-mobile h4 {
    max-width: 305px;
    margin: 0 auto;
    color: #fff;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 500;
  }

  .hero-box-google {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .Porfolio-block {
    padding-bottom: 30px;
  }

  .groovething-block-3 {
    padding: 30px 0 0;
  }

  .groovething-block .groove-headingtitle, .groovething-block .groove-headingtitle span {
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    padding-bottom: 0;
    margin-bottom: 5px;
  }

  .groovething-block-4 {
    padding: 30px 15px 30px;
  }

  .component-box img {
    max-width: 100%;
    grid-column: 1 / span 2;
  }

  .groovething-block-4 .block-content {
    margin-bottom: 50px;
  }

  .component-absolute {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(0) !important;
  }

  .component-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .component-absolute.component-left {
    order: 3;
  }

  .component-absolute.component-right {
    order: 2;
  }

  .component-absolute.component-left p {
    padding-left: 12px;
    padding-right: 0;
    text-align: left;
  }

  .component-absolute {
    min-width: 100%;
    gap: 10px;
  }

  .component-absolute p::before {
    left: 0;
    right: auto;
  }

  .component-absolute.component-left,
  .component-absolute.component-right {
    border: none;
  }

  .component-absolute.component-left::before, .component-absolute.component-right::before {
    display: none;
  }

  .component-absolute.component-left {
    padding: 30px 20px 0 0;
  }

  .component-absolute.component-right  {
    padding: 30px 0 0 20px;
  }

  .groovething-block-5 {
    padding: 30px 0;
  }

  .works-sub-section-1 img {
    max-width: 100%;
    padding: 0 15px;
  }

  .works-sub-section.works-sub-section-2 {
    width: 100%;
    overflow-x: auto;
  }

  .works-sub-row {
    min-width: 900px;
    gap: 15px;
  }

  .groovething-block-6 {
    padding: 0 0 40px;
  }

  .download-app-container {
    display: block;
    padding: 40px 0 0;
    background: none;
  }

  .download-content {
    padding: 0 30px 30px;
    text-align: center;
  }

  .download-content h2 {
    margin-bottom: 20px;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 500;
  }

  .download-content .content-img {
    display: flex;
    justify-content: center;
  }

  .groovething-block-6 .groove-container {
    background-color: #000;
  }
}