.productivity-banner-img-wrap {
  display: flex;
}

.productivity-banner-img {
  width: 32%;
}

.productivity-banner-content {
  width: 68%;
}

.productivity-banner {
  background: url(../images/productivity-back.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  border-radius: 0 0 32px 0;
  padding: 28px 0;
}

@media all and (max-width:767px){
  .productivity-banner h2{
    font-size: 20px;
    line-height: 1.6;
  }
  body{
    background-size: contain;
  }
}

@media all and (min-width:480px){
  .productivity-banner h2 {
    font-size: 35px;
  }
}


.productivity-banner-content p{
  padding-right: 10px;
}

.productivity-banner .download-block {
  margin-left: 12%;
  width: 100%;
}

.productivity-banner .download-btn{
  padding: 8px 13px;
}

.productivity-banner .apple-icon{
  background: url('../images/apple-purple.svg') no-repeat center;
}

.productivity-banner .android-icon{
  background: url('../images/android-purple.svg') no-repeat center;  
}

.productivity-banner .window-icon{
  background: url('../images/window-purple.svg') no-repeat center;  
}

.productivity-banner .mac-icon{
  background: url('../images/mac-purple.svg') no-repeat center;  
}
.productivity-banner .web-icon{
  background: url('../images/webicon.svg') no-repeat center;  
}


/* --------------accordian----------------- */

.accordian-block {
  padding: 56px 0;
}

.accordian-block .mobile-drawer-wrap .drawer.remove-border{
  border: none;
}

@media all and (min-width:768px) {
  .accordian-block {
    padding: 124px 0;
  }

  .accordian-block .scanner-block-wrap{
    margin: 0;
  }
}

.drawer-head-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.drawer-head-flex.active .drawer-heading{
  color: #4262FF;
}

.drawer-head-flex.active::after{
  color: #4262FF;
}


.accordian-block .drawer-heading{
  max-width: 192px;
}

.drawer-content.active{
  padding: 24px 11px;
}

.arrow.active {
  transform: rotate(180deg);
  transition: all 0.5s;
}

.arrow.now {
  transform: rotate(180deg);
  transition: all 0.5s;
}

.mob-drawer-content {
  background-color: white;
  padding: 24px 29px;
}

@media all and (max-width:767px){
  .mob-drawer-content {
    margin: 0 -29px;
  }
  .how-accordian-block .drawer:not(:last-child){
    border: none;
  }
  .how-accordian-block .drawer-heading-block{
    display: none;
  }
  .how-accordian-block .drawer-wrap{
    background-color: transparent;
  }
  .how-accordian-block {
    padding-top: 22px;
  }
}

.drawer-wrap {
  padding: 12px 20px;
  background-color: #e9ebf3;
  width: 100%;
  border-radius: 16px;
}

.drawer:not(:last-child){
  border-bottom: 1px solid #9599b6;
}
.drawer:has(.drawer-head-flex-block.active)  {
  border-bottom: none;
}

.accordian-icon {
  background: url(../images/accordian-icon.svg) no-repeat center;
  width: 15px;
  height: 15px;
  background-size: 15px;
  display: block;
}

.drawer-heading-block .drawer-head {
  display: flex;
  gap: 10px;
  align-items: center;
}

.table-head{
  border-bottom: 1px solid #9599b6;
  padding: 0;
}

.drawer-heading-block .drawer-heading{
  color: #000 !important;
}

.drawer-head {
  padding: 13px 0;
    position: relative;
}

.drawer-head .drawer-heading {
  font-weight: 500;
  font-size: 14px;
  color: #9599B6;
  font-family: "Literata", serif;
  transition: all 0.3s linear;
}

.drawer-wrap:has(.drawer:last-child .drawer-head-flex-block.active){
  padding-bottom: 0;
}

.grey-heading {
  font-size: 14px;
  font-weight: 500;
  color: #9599b6;
  margin-bottom: 4px;
  display: block;
  font-family: "Literata", serif;
}

.topic-heading {
  font-size: 18px;
  font-weight: 500;
  color: #111810;
  margin-bottom: 8px;
  font-family: "Literata", serif;
}

.drawer p {
  margin-bottom: 16px;
}

.grid-item,
.grid-item p {
  color: #fff;
}

.a {
  background-color: #cc0000;
}

.b {
  background-color: #fc9a20;
}

.c {
  background-color: #6aa84f;
}

.d {
  background-color: #3d85c6;
}

.e {
  background-color: #b68484;
}

.f {
  background-color: #A39CE6;
}
 .sub-heading {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 8px;
  font-family: "Literata", serif;
}

.drawer ul {
  padding-left: 15px;
  margin-bottom: 16px;
  line-height: 24px;
}

.drawer ul,
.drawer ul li {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  list-style: disc;
}

.drawer .time-img{
  margin-bottom: 16px;
  max-width: 265px;
  margin-right: auto;
}

.step-container {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 16px 40px 40px 16px;
  margin-bottom: 16px;
}

.step-number {
  color: white;
  padding: 10px 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 16px 0 0 16px;
}

.step-content {
  background-color: #E9EBF380; 
  padding: 12px;
  width: 100%;
}

.step-content p {
  margin-bottom: 0 !important;
}

.step-content p strong {
  font-weight: 600;
}

.drawer.remove-padding{
  padding: 20px 10px 0 10px;
  border: none;
}

.drawer.remove-padding .drawer-heading{
color: #4262FF;
}



@media all and (min-width: 768px) {
  .drawer ul li {
    font-size: 16px;
  }

  .drawer .time-img {
    margin: 40px 0;
    max-width: 536px;
}
  .productivity-banner-img {
    width: 20%;
  }

  .productivity-banner-content {
    width: 80%;
  }

  .productivity-banner {
    border-radius: 0 0 120px 0;
    line-height: 1.5;
    padding: 32px;
  }

  .productivity-banner h2{
    margin-bottom: 20px;
  }

  .download-block {
    margin-left: 20%;
  }

  .drawer-wrap {
    padding: 24px;
  }

  .productivity-banner-content p {
    max-width: 747px;
    padding-left: 7px;
    line-height: 1.2;
}

.grey-heading{
  font-size: 19.4px;
  margin-bottom: 13px;
  display: block;
}

.topic-heading {
  font-size: 35.4px;
  margin-bottom: 26px;
}

.table-content p{
  font-size: 15.9px;
  max-width: 706px;
  line-height: 1.43;
  margin-bottom: 16px;
}

.table-desktop .grid-container{
  width: 65%;
}

.sub-heading {
  font-size: 24px;
  margin-bottom: 16px;
}

}


/* ---------------table------------------------- */


@media all and (max-width: 767px){
  .table-desktop{
    display: none;
  }
}

.table-nav li{
  padding: 20px 10px;
  font-weight: 500;
    font-size: 14px;
    color: #111810;
}

.table-nav li:not(:last-child) {
  border-bottom: 1px solid #9599b6;
}

.content-item {
  display: none;
}

.content-item.active {
  display: block;
}

.table-desktop{
  display: flex;
  flex-wrap: wrap;
  gap: 10%;
}

.grey-table-content{
  width: 70%;
}

.grey-table{
  width: 20%;
}

.scanner-block .scanner-img-wrap{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}


@media all and (max-width:767px) {
  .grey-table , .grey-table-content{
    display: none;
  }
}

.table-nav li.active{
  color: #4262FF;
}

.drawer.remove-padding .fa-plus:before {
  content: "\f068";

}

.scanner-block-cartoon-img{
  max-width: 118px;
  margin-bottom: -24px;
}

@media all and (min-width:768px){
  .scanner-block-cartoon-img{
    max-width: 185px;
    margin: 64px 0 -30px 71px;
  }
}

@media all and (max-width:767px) {
  .scanner-block-cartoon-img{
    max-width: 118px;
  }

  .scanner-block{
    gap: 15px;
    margin: 0;
  }

  .scanner-block .scanner-content{
    width: 45%;
  }

  .scanner-block .scanner-img-wrap{
    width: 45%;
  }

  .scanner-block .scanner-img-wrap   p{
    font-size: 10px;
  }
}

.scanner-block .scanner-img-wrap .scanner{
  margin-bottom: 8px;
}

.scanner-block .scanner-img-wrap   p{
  font-size: 14px;
  color: #111810A3;
}

/* manish */
.table-contnet-wrap .content-block-table {
  display: none;
}


.content-block-table .drawer-head.active-color .drawer-heading,.content-block-table .drawer-head .drawer-heading:hover{
  color: #4262FF;
}

@media screen and (min-width:768px) {

  .table-contnet-wrap .content-block-table {
    display: block;
  }

   .content-block-table .drawer-head:not(:first-child){
    border-bottom: 1px solid #9599B6;
  }

  .content-block-table .drawer-head:last-child{
    border-bottom: none;
  }


  .drawer-head-flex-block {
    display: none;
  }
  .table-head-block {
    display: none;
  }
  .drawer-wrap {
    background: transparent;
  }

  @media all and (min-width: 992px) {

    .drawer-wrap {
      max-width: calc(100% - 293px) !important;
  }

    .drawer-wrap p{
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 16px;
    }
  }

  @media all and (min-width: 1100px){

    .drawer-wrap {
      max-width: calc(100% - 356px) !important;
  }
  }

  @media all and (min-width: 1200px){

    .drawer-wrap {
      max-width: calc(100% - 564px) !important;
  }
  }



  @media all and (min-width: 768px) {
    .drawer-wrap {
      max-width: calc(100% - 285px);
    }
  }


  
  .drawer:not(:last-child){
    border-bottom: none;
  }
  .table-contnet-wrap {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
  }

}
html { scroll-behavior: smooth; }

.drawer-content{
  scroll-margin-top: 120px;
}
.content-block-table {
  position: sticky;
  top: 120px;
  right: 0px;
  padding: 12px 20px;
    background-color: #e9ebf3;
    border-radius: 16px;
    max-width: calc(100% - 280px);
}


.drawer-head::after {
  content: "\002B";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}
.drawer-head.active::after {
  content: "\2212";
}
.drawer-head.drawer-head-block:after {
  content: "";
}
@media screen and (min-width:768px) {
  .mob-drawer-content.mob-drawer-content-block {
    display: block;
  }
}

@media screen and (max-width:767px) {
  #my-day {
    line-height: 24px;
  }
}



/* ---------------------- */

 @media screen and (min-width:768px) { 
  .productivity-banner-img-wrap {
    align-items: center;
    justify-content: space-between;
  }
  .productivity-banner h2 {
    font-size: 45px;
  }

  .productivity-banner  .slider-block {
    margin-left: 20%;
  }
  .productivity-banner .download-btn {
    width: 100%;
  }

  .download-btn {
    margin-bottom: 18px;
  }
  
  .content-block-table {
    max-width: 281px;
    width: 100%;
  }
}

@media screen and (min-width:992px) {
  .productivity-banner .download-btn {
    margin-bottom: 0;
  }
  .productivity-banner .download-btn {
    padding: 16px 56px;
  }
}

@media screen and (min-width:1200px) {
  .productivity-banner-img {
    width: 246px;
  }
  .nav-wrap {
    margin-right: 16px;
    gap: 18px;
  }
  .productivity-banner h2 {
    font-size: 54px;
  }
  .productivity-banner .slider-block {
    margin-left: 260px;
    position: relative;
    bottom: 32px;
  }
  .productivity-banner .download-btn {
    padding: 14px 56px;
  }
  .download-btn {
    font-size: 18PX;
  }
  .accordian-block {
    padding: 137px 0;
  }
  .drawer-wrap {
    padding: 0;
  }
  .mob-drawer-content {
    padding: 0;
  }
  .drawer {
    padding: 0;
    margin-bottom: 64px;
  }

}



/* manish */
.table-content {
  margin-bottom: 32px;
}
.table-content span {
  display: inline-block;
  margin-bottom: 16px;
}
.table-content p {
  color: #111810;
  font-size: 16px;
}
.video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 13;
}
.how-accordian-block.accordian-block .drawer-heading {
  max-width: 244px;
}
.how-accordian-block .content-block-table {
  max-width: 337px;
}
@media screen and (min-width:768px) {
  .table-content {
    display: none;
  }
  .how-accordian-block .drawer-wrap {
    max-width: calc(100% - 340px);
  }
}
@media screen and (min-width:992px) {
  .productivity-banner .download-block {
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .video iframe {
    width: 500px;
    aspect-ratio: 16 / 9;
  }
  .table-content-desk p {
    font-size: 18px;
  } 
  .table-content-desk {
    margin-bottom: 40px;
  }
  .how-accordian-block .drawer-wrap {
    max-width: calc(100% - 340px) !important;
  }
}
@media screen and (min-width:1200px) {
  .video iframe {
    width: 782px;
  }
  .table-content-desk {
    margin-bottom: 64px;
  }
  .how-accordian-block .drawer-wrap {
    width: calc(100% - 480px) !important;
  }
}





/* adding css */
.hero-slider-block {
  position: relative;
  background: #F4F5F9;
  border-radius: 24px;
  margin-top: 205px;
  padding: 24px 22px;
}
.hero-slider-block img {
  --width:141px;
  position: absolute;
  bottom: calc(100% - 8px);
  right: calc(100% - var(--width) );
  width: var(--width);
  height: auto;
}
.hero-slider-block p {
  color: #111810;
  line-height: 21px;
  font-weight: 500;
}
@media screen and (min-width:768px) {
  .productivity-banner-block .productivity-banner-content {
    width: 50%;
  }
  .productivity-banner-block .productivity-banner-img-wrap {
    justify-content: center;
  }
}
@media screen and (min-width:1200px) {
  .hero-slider-block p {
    font-size: 24px;
    line-height: 36px;
  }
  .hero-slider-block {
    padding: 40px;
  }
}
@media all and (max-width:767px){
  .table-content{
    margin-bottom: 0;
  }
  .hero-slider-block{
    margin-top: 140px;
  }
  .hero-slider-block img {
    --width: 105px;
  }
  .drawer-content {
    scroll-margin-top: 60px;
}
}