/* overlay */
.card-base-overlay {
  position: relative;
  /*width: 50%;*/
}

.image-overlay-hover {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.overlay-content {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.card-base-overlay:hover .image-overlay-hover {
  opacity: 0.3;
}

.card-base-overlay:hover .overlay-content {
  opacity: 1;
}

.card-base-overlay:hover .title-overlay-hover{
  background: #ee4088 !important;
  color: #fff !important;
}

img.attachment-mercury-custom-logo.size-mercury-custom-logo {
    max-width: 120% !important;
    width: 120%;
}
button.hero-btn:hover {
    box-shadow: 2px 2px 1px;
    background: #8800B6;
}

  .arrow-right-animate {
    transition: transform 250ms;
  }
  
  button:hover .arrow-right-animate{
    transform: translateX(20px);
  }

  a:hover i.arrow-right-animate{
    transform: translateX(20px);
  }

  .space-header-height .space-mobile-menu-icon div {
    background-color: #ee4088;
}

.space-mobile-menu .space-mobile-menu-block {
    background-color: #000!important;
}

.space-mobile-menu .space-mobile-menu-list ul li a {
    color: #ffffff!important;
    text-decoration: none;
}


.space-mobile-menu .space-mobile-menu-list ul li a:hover {
    color: #ee4088!important;
}

.space-mobile-menu .space-close-icon .to-right, .space-mobile-menu .space-close-icon .to-left {
    background-color: #ee4088!important;
}

.play-free:hover {
    background: #FFF3A7 !important;
    box-shadow: none!important;
}

.play-free {
    box-shadow: 2px 3px 5px rgb(0 0 0 / 50%);
}

.lh-2 {
    line-height: 2 !important;
}
p.feat-title {
    line-height: 1.2em;
}
body {
    min-width: 320px;
}

/*responsive header home*/

.col-12.guide-bg-gradient{
    width: 120%;
}
.guide-bg-left {
    background-position-x: 0rem!important;
}
.guide-button-card {
    left: 23.5vw;
    top: 4rem;
}

/*1858 120%
1800 117%

58 = 3%
1% = 19.3333
*/

@media only screen and (max-width: 1840px) {
    .col-12.guide-bg-gradient {
        width: 119%;
    }
}


@media only screen and (max-width: 1820px) {
    .col-12.guide-bg-gradient {
        width: 118%;
    }
}

@media only screen and (max-width: 1811px) {
    .hero-right-column {
        padding: 16vh 2vw 2vh 25vw !important;
    }
}


@media only screen and (max-width: 1800px) {
    .col-12.guide-bg-gradient {
        width: 117%;
    }
}


@media only screen and (max-width: 1786px) {
    .hero-right-column {
        padding: 16vh 2vw 2vh 24vw !important;
    }
    .hero-buttons {
        margin-top: 5vw;
    }
}
@media only screen and (max-width: 1780px) {
    .col-12.guide-bg-gradient {
        width: 116%;
    }
}
@media only screen and (max-width: 1760px) and (min-height: 950px){
/*    .hero-buttons {
        margin-top: 8vw!important;
    }*/
/*  .hero-right-column {
        padding: 24vh 2vw 2vh 34vw!important;
    }*/
}

@media only screen and (max-width: 1760px) {
    .col-12.guide-bg-gradient {
        width: 115%;
    }
}


@media only screen and (max-width: 1740px) {
    .col-12.guide-bg-gradient {
        width: 114%;
    }
}

@media only screen and (max-width: 1720px) {
    .col-12.guide-bg-gradient {
        width: 113%;
    }
}


@media only screen and (max-width: 1700px) {
    .col-12.guide-bg-gradient {
        width: 112%;
    }
}


@media only screen and (max-width: 1680px) {
    .col-12.guide-bg-gradient {
        width: 111%;
    }
}

@media only screen and (max-width: 1683px) {
    .hero-right-column {
        padding: 16vh 2vw 2vh 23vw !important;
    }
}

@media only screen and (max-width: 1676px) {
    .guide-button-card {
        left: 24.5vw !important;
    }
}

@media only screen and (max-width: 1660px) {
    .col-12.guide-bg-gradient {
        width: 111%;
    }
}

@media only screen and (max-width: 1654px) {
    .hero-right-column {
        padding: 16vh 2vw 2vh 20vw !important;
    }
}

@media only screen and (max-width: 1640px) {
    .col-12.guide-bg-gradient {
        width: 110%;
    }
}

@media only screen and (max-width: 1620px) {
    .col-12.guide-bg-gradient {
        width: 109%;
    }
}


@media only screen and (max-width: 1600px) {
    .col-12.guide-bg-gradient {
        width: 109%;
    }
/*    .hero-right-column {
        padding: 20vh 2vw 2vh 34vw!important;
    }*/
}

@media only screen and (max-width: 1673px) {
    .hero-right-column {
        padding: 14vh 2vw 2vh 18vw !important;
    }
}


@media only screen and (max-width: 1580px) {
    .col-12.guide-bg-gradient {
        width: 108%;
    }
}


@media only screen and (max-width: 1560px) {
    .col-12.guide-bg-gradient {
        width: 107%;
    }
}



@media only screen and (max-width: 1540px) {
    .hero-right-column {
        padding: 14vh 2vw 2vh 18vw !important;
    }
}

@media only screen and (max-width: 1523px) {
    .hero-title h1{
        font-size: 2.25rem;
    }
    .hero-right-column {
        padding: 12vh 2vw 2vh 18vw !important;
    }
}

@media only screen and (max-width: 1520px) {
    .col-12.guide-bg-gradient {
        width: 105%;
    }
}


@media only screen and (max-width: 1500px) {
    .col-12.guide-bg-gradient {
        width: 105%;
    }
    .guide-bg-left {
        background-position-x: -1rem !important;
    }
    .guide-button-card {
        left: 22.5vw !important;
    }
    .guide-button-card {
        left: 25.5vw !important;
    }
}


@media only screen and (max-width: 1480px) {
    .col-12.guide-bg-gradient {
        width: 104%;
    }
}


@media only screen and (max-width: 1460px) {
    .col-12.guide-bg-gradient {
        width: 103%;
    }

    .guide-button-card {
        left: 25.5vw !important;
        top: 4.5rem !important;
    }
}
@media only screen and (max-width: 1440px) {
    .hero-title h1{
        font-size: 2.15rem;
    }
    .hero-right-column {
        padding: 12vh 2vw 2vh 20vw !important;
    }
    .main-menu {
        padding: 0px 0vw!important;
    }

    .col-12.guide-bg-gradient {
        width: 102%;
    }
}


@media only screen and (max-width: 1420px) {
    .col-12.guide-bg-gradient {
        width: 101%;
    }


    .guide-button-card {
        left: 26.5vw !important;
    }
}

@media only screen and (max-width: 1402px) {
    .hero-title h1 {
        font-size: 2.05rem;
    }
}

@media only screen and (max-width: 1400px) {
    .col-12.guide-bg-gradient {
        width: 109%;
    }
    .guide-bg-left {
        background-position-x: -6rem;
    }
    .guide-button-card {
        left: 22.5vw !important;
    }
}

@media only screen and (max-width: 1399px) {
    .guide-button-card {
        left: 22.5vw !important;
    }
    .guide-button-card {
        left: 25.5vw !important;
        top: 2.5rem !important;
    }

    .guide-bg-left {
        background-position-x: -5rem !important;
    }
}

@media only screen and (max-width: 1380px) {
    .col-12.guide-bg-gradient {
        width: 109%;
    }
}
@media only screen and (max-width: 1373px) {
    .hero-title h1 {
        font-size: 1.8rem;
    }
    .hero-right-column {
        padding: 12vh 2vw 2vh 22vw !important;
    }
}

@media only screen and (max-width: 1360px) {
    .col-12.guide-bg-gradient {
        width: 108%;
    }
    .guide-button-card {
        top: 2.5rem !important;
    }
    .guide-bg-left {
        background-position-x: -3rem !important;
    }
}


@media only screen and (max-width: 1350px) {
    .hero-right-column {
        padding: 12vh 2vw 2vh 24vw !important;
    }
    .hero-buttons {
        margin-top: 4vw;
    }
/*    .hero-right-column {
        padding: 16vh 2vw 2vh 34vw!important;
    }*/
    button.hero-btn {
        padding: 17px !important;
        font-size: 0.9rem!important;
    }
}

@media only screen and (max-width: 1340px) {
    .col-12.guide-bg-gradient {
        width: 107%;
    }
}



@media only screen and (max-width: 1320px) {
    .col-12.guide-bg-gradient {
        width: 106%;
    }
}


@media only screen and (max-width: 1300px) {
    .col-12.guide-bg-gradient {
        width: 105%;
    }
}



@media only screen and (max-width: 1280px) {
    .col-12.guide-bg-gradient {
        width: 104%;
    }
    .guide-bg-left {
        background-position-x: -4rem !important;
    }
}



@media only screen and (max-width: 1260px) {
    .col-12.guide-bg-gradient {
        width: 103%;
    }
}

@media only screen and (max-width: 1250px) {
    .hero-right-column {
        padding: 11vh 2vw 2vh 26vw !important;
    }
/*    .hero-buttons {
        margin-top: 4vw;
    }*/
    .hero-title h1 {
        font-size: 1.6rem;
    }
}


@media only screen and (max-width: 1240px) {
    .col-12.guide-bg-gradient {
        width: 102%;
    }
}

@media only screen and (max-width: 1220px) {
    .col-12.guide-bg-gradient {
        width: 101%;
    }
}


@media only screen and (max-width: 1200px) {
    .col-12.guide-bg-gradient {
        width: 109%;
    }

    div.avoid-info-left div{
        font-size: 0.85rem!important;
    }

    ul.avoid-points li{
        font-size: 0.7rem;
    }
    .avoid-info-left {
        width: 58%;
    }

}

@media only screen and (max-width: 1199px) {
    .guide-button-card {
        width: 80% !important;
        top: 2.5rem !important;
        left: 21vw !important;
    }
    .guide-bg-left {
        background-position-x: -8rem !important;
    }
}

@media only screen and (max-width: 1180px) {
    .col-12.guide-bg-gradient {
        width: 108%;
    }
    .hero-container {
        /*height: 35vw;*/
        /*margin-top: 2rem;*/
    }
    .hero-right-column {
        padding: 10vh 2vw 2vh 26vw !important;
    }
}

@media only screen and (max-width: 1170px) {
    button.hero-btn {
        padding: 12px 5px !important;
    }

    .hero-right-column {
        padding: 9vh 2vw 2vh 26vw !important;
    }
}
@media only screen and (max-width: 1167px) {
    .hero-title h1 {
        font-size: 1.5rem;
    }
    }

@media only screen and (max-width: 1160px) {
    .col-12.guide-bg-gradient {
        width: 108%;
    }
}

@media only screen and (max-width: 1150px) {
    .guide-bg-left {
        background-position-x: -8rem!important;
    }
}


@media only screen and (max-width: 1140px) {
    .col-12.guide-bg-gradient {
        width: 107%;
    }
}


@media only screen and (max-width: 1124px) {
    .hero-title h1 {
        font-size: 1.4rem;
    }
    .hero-right-column {
        padding: 8vh 2vw 2vh 26vw !important;
    }
}


@media only screen and (max-width: 1120px) {
    .col-12.guide-bg-gradient {
        width: 106%;
    }
}



@media only screen and (max-width: 1100px) {
    .col-12.guide-bg-gradient {
        width: 105%;
    }
}

@media only screen and (max-width: 1080px) {
    .col-12.guide-bg-gradient {
        width: 104%;
    }
    button.hero-btn {
        padding: 10px 18px !important;
    }
}

@media only screen and (max-width: 1068px) {
/*    .hero-title h1 {
        font-size: 1.rem !important;
    }*/
    button.hero-btn {
        /*padding: 6px 10px !important;*/
        font-size: 0.8rem !important;
    }
}


@media only screen and (max-width: 1060px) {
    .col-12.guide-bg-gradient {
        width: 103%;
    }
}


@media only screen and (max-width: 1040px) {
    .col-12.guide-bg-gradient {
        width: 102%;
    }
}

/*@media only screen and (max-width: 1020px) {
    .col-12.guide-bg-gradient {
        width: 101%;
    }
}*/
@media only screen and (max-width: 1024px) {
    
    .hero {
        margin-top: 0px!important;
    }
  .guide-button-card {
      top: 1rem;
  }
  .guide-button-card {
        left: 24.5vw !important;
  }

}

@media only screen and (max-width: 1020px) {
    .col-12.guide-bg-gradient {
        width: 100%;
    }
    .guide-button-card {
        top: 2.5rem !important;
        left: 21.5vw !important;
    }
    .guide-bg-left {
        background-position-x: -10rem !important;
    }
}

@media only screen and (max-width: 1015px) {
    .hero-right-column {
        /*padding: 12vh 2vw 2vh 32vw !important;*/
        padding: 7vh 2vw 2vh 20vw !important;
    }
}

@media only screen and (max-width: 991px) {
    .col-12.guide-bg-gradient {
        width: 118%;
    }

    .guide-button-card {
        left: 29.5vw !important;
        width: 100% !important;
        top: 4.5rem !important;
    }

    .guide-bg-gradient{
        background: linear-gradient(#df3866, purple)!important;
    }
    .guide-container{
        width: 100%!important;
        background: none!important;
    }
/*    .guide-button-card {
        width: 100%!important;
        left: 31.5vw !important;
        top: 5rem!important;
    }*/
    .guide-bg-left{
        margin-left: 0.75rem !important;
        width: 50% !important;
    }
/*    .guide-button-card {
        left: 34vw !important;
        top: 5rem !important;
    }*/

    .guide-text-section {
        right: 7rem;
    }


    .avoid-img-left {
        height: 18rem !important;
        width: 16rem;
        left: -4rem;
        top: 6.7rem;
    }

    .avoid-info-left {
        top: -15rem;
    }

    ul.avoid-points li {
        font-size: 0.6rem;
    }
    div.avoid-info-left div {
        font-size: 0.75rem !important;
    }


}

@media screen and (max-width: 991px) and (min-width: 768px) {
    .hero {
        margin-top: 0px!important;
    }
}



@media only screen and (max-width: 987px) {
    .hero-title h1 {
        font-size: 1.3rem;
    }
}

@media only screen and (max-width: 980px) {
    .col-12.guide-bg-gradient {
        width: 117%;
    }

    .guide-bg-left {
        background-position-x: 0rem !important;
    }

    .guide-button-card {
        left: 40.5vw !important;
        width: 90% !important;    
    }
    .guide-bg-left {
        background-position-x: -3rem !important;
    }
    .guide-text-section {
        right: 8rem;
    }
}
@media screen and (max-width: 980px) {
/*    .guide-button-card {
        left: 32vw !important;
        top: 5rem !important;
    }
*/
/*    .guide-text-section {
        right: 7rem;
    }*/
}


@media only screen and (max-width: 974px) {
    .hero-buttons {
        margin-top: 5vw !important;
    }
    .hero-title p {
        line-height: 1.5em!important;
    }
}

@media only screen and (max-width: 960px) {
    .col-12.guide-bg-gradient {
        width: 116%;
    }
    .hero-btn-text {
        font-size: 11px;
    }
    button.hero-btn img {
        width: 80% !important;
    }

}
@media only screen and (max-width: 960px) {
/*    .hero-right-column {
        padding: 8vh 2vw 2vh 34vw!important;
    }*/
/*    .hero-buttons {
        margin-top: 4vw!important;
    }*/
/*    .hero-title p {
        line-height: 1.5rem;
    }*/
/*    button.hero-btn {
        padding: 0.5rem;
        font-size: 12px;
        width: 6rem;
    }*/
/*  button.hero-btn img {
        width: 50%!important;
    }*/
/*    .hero-title h1 {
        text-align: left;
        font-size: 2rem;
    } */      
}


@media only screen and (max-width: 940px) {
    .col-12.guide-bg-gradient {
        width: 115%;
    }
}


@media only screen and (max-width: 920px) {
    .col-12.guide-bg-gradient {
        width: 112%;
    }
}

@media only screen and (max-width: 917px) {
    .hero-title h1 {
        font-size: 1.2rem;
    }
    .hero-right-column {
        padding: 8vh 2vw 2vh 26vw !important;
    }
    .hero-title p {
        font-size: 14px;
    }
}

@media only screen and (max-width: 900px) {
    .col-12.guide-bg-gradient {
        width: 111%;
    }
}

@media only screen and (max-width: 880px) {
    .col-12.guide-bg-gradient {
        width: 110%;
    }
}
@media only screen and (max-width: 864px) {
  .hero-title p {
      line-height: 1.2rem!important;
      font-size: smaller!important;
  }
}

@media only screen and (max-width: 860px) {
    .col-12.guide-bg-gradient {
        width: 108%;
    }
/*    .guide-button-card {
        left: 34.5vw !important;
    }*/

    .guide-bg-left {
        background-position-x: -4rem !important;
    }
    .guide-button-card {
        left: 42.5vw !important;
    }
}

@media only screen and (max-width: 840px) {
    .col-12.guide-bg-gradient {
        width: 107%;
    }
}

@media only screen and (max-width: 935px) {
    .hero-right-column {
        padding: 6vh 2vw 2vh 22vw !important;
    }
}

@media only screen and (max-width: 820px) {
    .guide-button-card {
        left: 36vw !important;
    }

    .hero-right-column {
        padding: 6vh 2vw 2vh 20vw!important;
    }

    .col-12.guide-bg-gradient {
        width: 106%;
    }


}


@media only screen and (max-width: 800px) {
    .col-12.guide-bg-gradient {
        width: 105%;
    }
}

@media only screen and (max-width: 790px) {
    .hero-btn-text {
        font-size: 11px!important;
    }
    /*.hero-right-column {
        padding: 6vh 3vw 2vh 32vw !important;
    }*/
}


@media only screen and (max-width: 780px) {
/*    .hero-right-column {
        padding: 6vh 3vw 2vh 30vw !important;
    }
*/
    .col-12.guide-bg-gradient {
        width: 103%;
    }
}

@media only screen and (max-width: 767px) {

  .hero-container {
      height: 56vw !important;
  }
  .hero-right-column {
        background-image: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0), rgb(129 64 151)) !important;
        position: absolute !important;
        height: 36vw !important;
        top: 22vw !important;
        text-align: center;
        font-size: 1.2rem;
        padding: 12vw 12vw !important;
  }

  .hero-left-column {
      position: relative!important;
      height: 40vw!important
  }
  .hero-title h1{
    font-size: 1.4rem;
  }
  .hero-title h1, .hero-title p{
      text-align: center!important;
  }

  .avoid-right-column{
    margin: 5rem 0;
  }

    .col-12.guide-bg-gradient {
        width: 120%;
    }
    .guide-button-card {
        left: 38.5vw !important;
    }
/*}
@media only screen and (max-width: 767px) {*/
    .guide-bg-left {
        background-position-x: -8rem !important;
    }

  .guide-bg-left {
    background-position-x: -10rem !important;
    margin-left: 0.75rem!important;
  }

  .guide-button-card {
      left: 30vw!important;
      top: 3rem !important;
  }

  .guide-bg-gradient{
    background: linear-gradient(#df3866, purple)!important;
    
  }

  .guide-container {
    background: none!important;
  }
  .guide-text-section {
    right: 5rem;
  }

    .avoid-img-left {
        height: 22rem !important;
        width: 20rem;
        left: -4rem;
        top: 2.7rem;
    }

    .avoid-info-left {
        top: -21rem;
    }

    ul.avoid-points li {
        font-size: 0.82rem;
    }
    div.avoid-info-left div {
        font-size: 1rem !important;
    }
}


@media only screen and (max-width: 760px) {
    .col-12.guide-bg-gradient {
        width: 120%;
    }
    .guide-button-card {
        left: 38.5vw !important;
        width: 90% !important;
        top: 3.5rem !important;
    }
}


@media only screen and (max-width: 740px) {
    .col-12.guide-bg-gradient {
        width: 119%;
    }
}

@media only screen and (max-width: 722px) {
    .hero-title h1 {
        font-size: 1.2rem;
    }
    .hero-title p {
        font-size: 12px !important;
    }
}

@media screen and (max-width: 700px) {
/*  .hero-title h1 {
      font-size: 1.5rem !important;
  }
  .hero-btn-text{
      font-size: 10px!important
  }*/
}


@media only screen and (max-width: 680px) {
    .hero-right-column {
        text-align: center;
        padding: 10vw 20vw !important;
    }

    .guide-button-card {
        left: 44.5vw !important;
        top: 4rem !important;
    }

    .guide-bg-left {
        background-position-x: -7rem !important;
    }
    .guide-text-section {
        right: 7rem;
    }
}

@media only screen and (max-width: 660px) {
    .hero-btn-text {
        font-size: 10px !important;
        padding: 0px !important;
    }
}


@media only screen and (max-width: 640px) {
    .hero-right-column {
        text-align: center;
        padding: 14vw 18vw !important;
    }
}

@media screen and (max-width: 620px) {
    .hero-right-column {
        padding: 10vw 16vw !important;
    }
    .guide-button-card {
        left: 35vw !important;
    }
}


/*    .guide-button-card {
        left: 44.5vw !important;
        width: 90% !important;
        top: 4rem !important;
    }*/


@media only screen and (max-width: 600px) {
    .guide-button-card {
        left: 42.5vw !important;
        width: 90% !important;
    }
    .guide-text-section {
        right: 8rem;
    }
}

@media only screen and (max-width: 590px) {
    .hero-right-column {
        text-align: center;
        padding: 12vw 15vw !important;
    }
}

/*@media only screen and (max-width: 560px) {
    .guide-bg-left {
        margin-left: 0.75rem !important;
        width: 34rem !important;
        height: 28rem;
    }
}*/

@media only screen and (max-width: 560px) {
    .hero-right-column {
        text-align: center;
        padding: 12vw 14vw !important;
    }


    .guide-bg-left {
        margin-left: 0.75rem !important;
        width: 27rem !important;
        height: 22rem;
    }
    .guide-button-card {
        left: 43vw !important;
        width: 65% !important;
        top: 2.5rem !important;
    }
    .guide-text-section {
        right: 10rem;
    }

}

@media only screen and (max-width: 540px) {
    .hero-right-column {
        text-align: center;
        padding: 12vw 10vw !important;
    }

    .guide-button-card {
        left: 10.5vw !important;
        width: 24rem !important;
    /*}*/
    /*.guide-button-card {*/
        /*left: 38.5vw !important;*/
        top: 18rem !important;
    }
    .guide-container {
        margin-top: 5rem;
    }

    .guide-bg-left {
        background-position-x: 0rem !important;
        width: 33rem !important;
        height: 28rem;
    }
    .guide-text-section {
        right: 8rem;
    }
}

@media only screen and (max-width: 500px) {
      .hero-right-column {
        padding: 10vw 9vw !important;
      }


    .guide-button-card {
        left: 10.5vw !important;
        width: 78vw !important;
        /*left: 6vw !important;*/
        top: 16rem !important;
    }
    .guide-container {
        margin-top: 6rem;
    }
    .guide-text-section {
        right: 8rem;
    }
    .guide-bg-left {
        margin-left: 0.75rem !important;
        width: 32rem !important;
        height: 28rem;
        background-position-x: -2.96rem !important;
        /*margin-left: 0.76rem !important;*/
/*        width: 100% !important;*/
        border-radius: 0 4rem 0 0 !important;
    }
    .guide-bg-gradient {
        background: linear-gradient(135deg, #FF4846, purple) !important;
    }
}

@media only screen and (max-width: 480px) {
  .hero-left-column {
      top: auto !important;
  }
  .hero-title h1 {
      font-size: 0.8rem!important;
  }
  .hero-title p {
      line-height: 0.6rem !important;
      font-size: 0.5rem !important;
  }
  .hero-btn-text {
      font-size: 6px !important;
  }
/*  .hero-title p {
    line-height: 0.8rem!important;
      font-size: 10px!important;
  }*/
  .hero-right-column {
      width: 100%;
      padding: 15vw 22vw !important;
  }
  button.hero-btn {
      padding: 0.4rem !important;
      font-size: 6px !important;
      width: 3rem !important;
      border-radius: 10px !important;
  }
  .hero-buttons {
    margin-top: -1vw!important;
  }
  .hero-buttons.col-12 div.row div.col-3.px-2{
    padding: 0 4px !important;
  }
   /* styles for mobile browsers smaller than 480px; (iPhone) */

/*  .guide-bg-left {
      height: 24rem!important;
      background-position-x: -10rem !important;
  }
  .guide-button-card {
    left: 46vw !important;
    top: 1rem !important;
  }*/
    .guide-text-section {
        right: 7rem;
    }

    .guide-bg-left {
        height: 27rem !important;
        background-position-x: -2rem !important;
        margin-left: 0.76rem !important;
        width: 30.85rem !important;
        border-radius: 0 2rem 0 0 !important;
    }
    .guide-button-card {
        /*left: 7vw !important;*/
        /*top: 18rem !important;*/
    }

    .guide-button-card {
        left: 11vw !important;
        top: 18rem !important;
    }

    div.avoid-info-left div {
        font-size: 0.8rem !important;
    }    

    ul.avoid-points li {
        font-size: 0.75rem;
    }

}


@media only screen and (max-width:440px) {
    .avoid-img-left {
        height: 22rem !important;
        width: 19rem;
        left: -6.6rem;
        top: 2.7rem;
    }

    .avoid-info-left {
        top: -20rem;
    }
    /*div.avoid-info-left div {
        font-size: 0.75rem !important;
    }*/

    ul.avoid-points li {
        font-size: 0.7rem;
    }
}

/*@media only screen and (max-width: 420px) {
    .guide-container {
        margin-top: 4rem;
    }
}*/

@media only screen and (max-width: 412px) {
    .guide-bg-left {
        width: 25.75rem !important;
    }
    button.hero-btn {
      width: 3.4rem !important;
      padding: 0.2rem !important;
      font-size: 9px !important;
    }
}

@media only screen and (max-width: 400px) {
    div.avoid-info-left div {
        font-size: 0.65rem !important;
    }
    ul.avoid-points li {
        font-size: 0.58rem;
    }

    .avoid-img-left {
        height: 20rem !important;
        width: 19rem;
        left: -6.5rem;
        top: 4.7rem;
    }
    .avoid-info-left {
        top: -17rem;
    }
}

@media only screen and (max-width: 360px) {
    .guide-button-card {
        left: 6.5vw !important;
        width: 19.5rem !important;
        top: 15rem !important;
    }

/*    .guide-text-section {
        right: 6rem;
        margin-top: 14vh !important;
    }*/
    .guide-container {
        height: 52vh !important;
    }
    .guide-text-section {
        right: 6rem;
        margin-top: 2vh !important;
    }
    .guide-container {
        margin-top: 0rem;
    }
    .guide-bg-left {
        background-position-x: -5rem !important;
    }


}


@media screen and (max-width: 360px) {
  .guide-button-card h4{
    font-size: 1rem;
  }
  .guide-button-card  p {
      line-height: 1rem;
  }

  .guide-button-card  button {
       font-size: 0.75rem!important;
  }

  .guide-bg-left {
        height: 22rem !important;
        background-position-x: -5rem !important;
        margin-left: 0.76rem !important;
        width: 20.5rem !important;
        border-radius: 0 1rem 0 0 !important;
  }
  .guide-button-card {
    left: 46vw !important;
    top: 1.2rem !important;
  }
  .guide-text-section {
    right: 3.5rem;
    margin-top: 8vh !important;
  }
      .guide-container {
        height: 60vh !important;
    }
}


@media screen and (max-width: 360px) {
    .guide-button-card {
        left: 46vw !important;
        top: 1.2rem !important;
    }

    .guide-button-card {
        left: 6vw !important;
        top: 11rem !important;
    }

    .guide-text-section p {
        margin-top: -2vh !important;
    }

    .guide-text-section h4 {
        font-size: 1rem;
    }

    .guide-text-section  button {
       font-size: 0.75rem!important;
    }

}

@media only screen and (max-width: 320px) {
    .hero-right-column {
        height: 50vw !important;
        padding: 15vw 18vw !important;
    }

    .guide-bg-left {
        width: 20.75rem !important;
    }
    .guide-bg-left {
        height: 20rem !important;

    }


    .guide-button-card {
        left: 6.5vw !important;
        width: 17.5rem !important;
        top: 12rem !important;
    }
}

/*@media screen and (max-width: 360px) {

}*/



/*.guide-container {
        height: 50vh !important;
    }*/

/*@media only screen and (max-width: 1676px) {

}

*/

/*@media only screen and (max-width: 1150px) {
    .guide-bg-left {
        background-position-x: -8rem !important;
    }
    .guide-button-card {
        left: 23.5vw;
        top: 1rem;
    }

}*/

/*@media only screen and (max-width: 991px) {
    .guide-button-card {
        left: 42.5vw !important;
        width: 88% !important;
    }
}*/
/*@media only screen and (max-width: 1600px) {
    .col-12.guide-bg-gradient {
        width: 108%;
    }
}


@media only screen and (max-width: 1600px) {
    .col-12.guide-bg-gradient {
        width: 107%;
    }
}

@media only screen and (max-width: 1580px) {
    .col-12.guide-bg-gradient {
        width: 106%;
    }
}

@media only screen and (max-width: 1560px) {
    .col-12.guide-bg-gradient {
        width: 105%;
    }
}

@media only screen and (max-width: 1540px) {
    .col-12.guide-bg-gradient {
        width: 104%;
    }
}

@media only screen and (max-width: 1520px) {
    .col-12.guide-bg-gradient {
        width: 102%;
    }
}

@media only screen and (max-width: 1500px) {
    .col-12.guide-bg-gradient {
        width: 100%;
    }
}*/


/*@media only screen and (max-width: 1500px) {
    .col-12.guide-bg-gradient {
        width: 105%;
    }
}

@media only screen and (max-width: 1500px) {
    .col-12.guide-bg-gradient {
        width: 105%;
    }
}

@media only screen and (max-width: 1500px) {
    .col-12.guide-bg-gradient {
        width: 105%;
    }
}