@media(max-width: 1445px){
  .logo,
  nav.menu{
    padding-left: 4.9rem;
  }

  .menu-dropdown .clover-container{
    padding: 0 4.9rem;
  }

  /* ====== FOOTER ====== */
  .footer-top .clover-container,
  .footer-bottom .clover-container{
    padding: 0rem 4.9rem;
  }
}

@media (max-width: 1290px){
  /* ======== HEADER ========= */
  .logo,
  nav.menu{
    padding-left: 2.4rem;
  }

  .menu-dropdown .clover-container{
    padding: 0 2.4rem;
  }

  /* ========= FOOTER ========== */
  .footer-top .clover-container,
  .footer-bottom .clover-container{
    padding: 0rem 2.4rem;
  }

  /* ============ ARTICLES PAGE || ASIDE ========= */
  aside{
    right: 2.4rem;
  }

  /* ============= USING PAGE || TABS ================ */
  .swiper-slide.swiper-slide-active p#revalidating::after{
    width: 145%;
  } 
}

@media (max-width: 1200px){
  /* ====== HEADER ======== */
  .header.active{
    grid-template-columns: 30rem 1fr 15rem;
  }

  /* nav.menu .nav-menu{
    gap: 3rem;
  } */

  nav.menu .nav-menu li:not(:last-child){
    margin-right: 3rem;
  }

  .dropdown-txt{
    margin-right: 2.5rem;
  }

  .print-lg{
    margin-top: 5rem;
  }

  .article-page-grid{
    padding-left: 0rem;
  }
}

@media (max-width: 1150px){
  /* ======== HEADER ============ */
  .header{
    grid-template-columns: 27rem 1fr 14rem;
  }
  /* ========= INDEX UNDERSTANDING CLOVER ======= */
  .s-understanding .home_txt2{
    right: -1rem;
  }
    .s-reporting .home_txt2 {
      left: -2rem;
      }
  }

  /* ========= EDUCATION ARTICLES PAGE || ARTICLES ======== */
  .s-hero-education-articles .clover-container{
    padding: 0 1.6rem;
  }

  .s-education-articles .clover-container{
    justify-content: space-around;
    padding: 0 1.6rem;
  }

  /* ========== ARTICLE PAGE || PREVIOUS NEXT ====== */
  .previous-next .clover-container {
    padding-right: 0;
  }

@media (max-width: 1060px){

  .s-pcidss .home_txt2{
    right: -1rem !important;
  }

  div.top-dropdown_menu{
    padding: 3rem 0rem 6.1rem;
  }

  /* ======== INDEX PCIDSS ======== */
  .inner-tabs section.active{
    gap: 4rem;
  }

  /* ========== USING PAGE || CONDUCTING NETWORK */
  .tab-img-flex{
    flex-direction: column;
    gap: 7rem;
  }
}

@media (max-width: 1020px){
  main{
    margin-top: 11rem;
  }

  /* ======= HEADER ======= */
  .header{
    grid-template-columns: 28rem 1fr 12.2rem;
    grid-template-rows: 5.5rem 5.5rem;
    grid-template-areas: "logo telephone login"
                          "nav nav nav";
  }

  .logo{
    border-bottom: none;
  }

  nav.menu .nav-menu li > a::after {
    bottom: -1.8rem;
  }

  .js-menu-dropdown .menu-dropdown {
    top: 11rem;
  }

  /* ======== VIDEOS =========== */
  .s-videos .clover-container{
    grid-template-columns: 1fr;
  }

  .video-box{
    max-width: 91.46%;
  }

  .video-box:nth-child(odd),
  .video-box:nth-child(even){
    margin-right: auto;
    margin-left: auto;
  }

  .video-box:not(:last-child){
    margin-bottom: 6rem;
  }
}


@media (max-width: 950px){
  /* ========== HEADER DROPDOWN =========== */
  div.top-dropdown_menu{
    flex-direction: column;
    height: 100vh;
  }

  .dropdown-txt {
    max-width: 32.7rem;
    margin: 0 0 4rem;
  }

  .dropdown-txt p{
    margin-top: 1.7rem;
  }

  .dropdown-txt p{
    margin: 0;
  }

  .menu-dropdown nav{
    flex-direction: column;
    /* gap: 2rem; */
  }

  .menu-dropdown nav ul.top-dropdown_menu:not(:last-child){
    margin-right: 0rem;
  }

  .menu-dropdown nav ul.top-dropdown_menu li > a{
    margin-bottom: 2rem;
  }

  .menu-dropdown1 .top-dropdown_menu_col1,
  .menu-dropdown1 .top-dropdown_menu_col2{
    max-width: 100%;
  }

  nav.menu .nav-menu li a::after{
    bottom: -1.9rem;
  }

  /* ===== LAYOUT ======= */
  main{
    margin-top: 11.1rem;
  }

  .clover-container{
    padding: 0 1.6rem;
  }

  /* ======= INDEX HERO ======= */
  .s-hero{
    padding: 6.4rem 1.6rem;
  }

  /* ============ USING PAGE || LOGGING ============= */  
  .logging-img-onetwo,
  .logging-img-threefour{
    flex-direction: column;
  }

  .label-print:nth-child(1){
    margin-bottom: 7.2rem;
  }

  /* ========= ARTICLE PAGE // ARTICLE CONTENT ====== */
  .article-page-grid .clover-container{
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media (max-width: 800px){
  a.btn1 button{
    font-size: 1.2rem;
  }
  /* ======== HEADER ========= */
  .logo{
    padding-left: 1.6rem;
  }

  nav.menu{
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  /* ======== FOOTER ======= */
  .footer-top .clover-container,
  .footer-bottom .clover-container{
    padding: 0rem 1.6rem;
  }

  /* ====== LAYOUT ====== */
  .clover-container{
    padding: 0 1.6rem;
  }
  .btn1 a{
    font-size: 1.3rem;
    line-height: 4.8rem;
  }
  /* ======= INDEX HERO ====== */
  .s-hero_txt{
    padding: 3.6rem;
  }

  .s-hero h1{
    font-size: 2.6rem;
    line-height: 3.4rem;
  }


  /* ======= INDEX WHY ======== */
  .s-why {
    margin-top: 11.4rem;
    margin-bottom: 6.4rem;
  }
  .s-why_content{
    flex-direction: column;
    justify-content: center;
    /* gap: 6.4rem; */
  }

  .s-why_content_box:not(:last-child){
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 6.4rem;
  }

  .s-why_content_box{
    max-width: 66%;
    margin-left: auto;
    margin-right: auto;
  }


  /* ======= INDEX WHAT IS CLOVER */
  .s-whatis{
    padding-top: 4.2rem;
    padding-bottom: 7.2rem;
  }

  .s-whatis .clover-container{
    flex-direction: column-reverse;
    padding: 0rem;
  }

  .s-whatis-img{
    max-width: 100%;
  }

  .s-whatis .home-txt{
    width: 100%;
    max-width: 58rem;
    margin-top: 3.6rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }

  .s-whatis .home-txt h1{
    font-size: 2.6rem;
  }
  /* ======== PCI DSS ======== */
  .s-pcidss{
    padding-top: 6.4rem;
    }

  /* ======== INDEX REPORTING ======== */

  .s-reporting {
    padding: 32.9rem 1.6rem;
    }
  .s-understanding {
    padding-top: 45.9rem;
  }

  .s-pcidss .home_txt2{
    bottom: -29rem;
    left: -1.4rem;
    padding: 3.6rem;
  }
  .s-understanding .home_txt2{
    bottom: -29rem;
    left: -1.4rem;
    padding: 3.6rem;
  }

  .home_txt2 h1{
    font-size: 2.6rem;
  }
  
    /* ======= CONTACT SECTION ======== */
    .s-contact-us{
        margin-top: 37rem;
        
    }

  /* ======= INDEX UNDERSTANDING CLOVER ======== */

  .s-understanding .s-understanding_content{
    background-position: 95% 100%;
  }

  .s-reporting .home_txt2{
    padding: 3.6rem;
    left: unset;
    right: -1rem;
    bottom: -25rem;
  }

  /* =========== USING PAGE || HEADER SLIDER ============ */
  .header-tabs .clover-container {
    padding: 0rem 1rem;
}

  .header-slider .tab-name h4{
    font-size: 1.4rem;
  }
   
  /* ========== USING PAGE || TEXT CONTENT============ */
  .bottom-controls{
    display: none;
  }

  .inner-tabs .mobile-controls{
    opacity: 1;
    pointer-events: all;
  }

  .s-using-content{
    padding: 6rem 0rem;
  }

  .inner-tabs-carousel{
    padding-top: 0rem;
  }

  .s-using-content .clover-container h1{
    font-size: 2.6rem;
    line-height: 2.4rem;
  }

  .s-using-content .clover-container > p{
    font-size: 1.4rem;
  }

  .highlight p,
  .highlight p span.link{
    font-size: 2rem;
  }

  .arrow{
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.9rem;
  }

  .bottom-controls{
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  /* ============ USING PAGE || LOGGING ============== */
  .inner-tabs{
    padding: 3.9rem 0 13.6rem;
  }

  .inner-tabs section.active{
    padding: 4rem 1.6rem 6rem;
  }

  .inner-tabs section.active .number-list p::before{
    left: 1.7rem;
  }

  section#logging .tab-img-area{
    display: none;
  }

  .tab-text-area{
    max-width: 100%;
    padding-bottom: 3rem;
  }

  .tab-img-mobile{
    display: block;
    padding-top: 4.4rem;
    padding-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tab-img-mobile .label-print{
    margin-left: auto;
    margin-right: auto;
  }

  .logging-img-onetwo{
    margin-bottom: 0rem;
  }

  #logging .dot-list .number-list p::after{
    display: none;
  }

  #logging p.hide-pseudo{
    margin-left: 0;
  }

  #logging p.hide-pseudo::before{
    display: none;
  }

  #logging .dot-list .number-list p::before{
    display: inline;
    left: -2.5rem;
    top: 0;
  }
  
  #logging .dot-list{
    margin-left: 0rem;
  }

  .hidden-step{
    display: none;
  }

  .tab-text-area_content h2{
    font-size: 2.2rem;
    margin-bottom: 2rem;
  }

  .tab-text-area_content p,
  .tab-text-area_content span{
    font-size: 1.5rem;
    margin-top: 1.9rem;
    margin-bottom: 1.9rem;
  }

  /* =========== USING PAGE || COMPLETING PROFILE ========= */
  .inner-tabs section#completing-profile.active{
    flex-direction: column;
    justify-content: flex-start;
  }

 

  .inner-tabs section#completing-profile .tab-img-area{
    margin-left: auto;
    margin-right: auto;
  }

  .main-image{
    margin-bottom: 0rem;
  }

  .overlapping{
    position: unset;
  }

  /* =========== USING PAGE || CONDUCTING NETWORK ========= */
  .inner-tabs section#conducting-network.active .tab-img-area{
    display: none;
  }

  .inner-tabs section#conducting-network.active .tab-img-mobile{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 95%;
    margin: 3rem auto 0;
  }

  .inner-tabs section#conducting-network.active .tab-img-mobile .tab-img-group:nth-child(2){
    margin-top: 7.6rem;
  }

  .inner-tabs section#conducting-network.active p.label{
    font-size: 1rem;
    top: -2.6rem;
    margin: 0;
  }

  .note p{
    margin: 0;
  }


  section#conducting-network.active .tab-text-area_content h4{
    margin-top: 2.4rem;
  }

  /* ========== USING PAGE || CONDUCTING GROUP ============ */
  .inner-tabs section#conducting-group.active .tab-img-area{
    display: none;
  }

  .inner-tab-highlight.nohighlight{
    font-weight: 400;
  }

  #conducting-group.active .tab-text-area .link.nohighlight{
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--black);
    cursor: none;
    text-decoration: none;
  }

  #conducting-group.active .number-list p.pseudo-six::before{
    content: '6';
  }

  .tab-img-mobile .tab-img-group .label{
    font-size: 1rem;
    margin: 0;
  }

  /* ========= USING PAGE || NETWORK SCANNING ============= */
  #network.active .tab-img-area{
    display: none;
  }

  .nodisplay{
    display: none;
  }

  .label.nodisplay{
    display: none;
  }

  p.nopseudo::before{
    display: none;
  }

  #network.active .tab-img-mobile p.label{
    margin-left: 0;
  }

  /* ========= USING PAGE || COMPLETING SECURITY ========= */
  #completing-security.active .tab-img-area{
    display: none;
  }

  #completing-security.active .tab-img-mobile{
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
  }

  #completing-security .tab-img-mobile .tab-img-group p.label {
    margin: 0;
}

  /* ========== USING PAGE || REVALIDATING ============== */
  #revalidating.active .tab-img-area{
    display: none;
  }

  #revalidating .tab-img-mobile p.label,
  #managing .tab-img-mobile p.label{
    margin-left: 0;
    top: -2.6rem;
  }

  /* ========== USING PAGE || MANAGING =================== */
  #managing.active .tab-img-area{
    display: none;
  }

  #managing.active .tab-text-area .dot-list p{
    padding-bottom: 0;
    margin: 0 0 0 2.5rem;
  }


  /* ======== USING PAGE || FAQ ===================== */
  #faq .tab-text-area{
    padding: 0 1.4rem;
  }

  #faq .accordion-header .accordion-button {
    font-size: 1.8rem;
}

  #faq .accordion-body{
    padding: 0 0 2.1rem;
  }

  #faq .accordion-body p{
    font-size: 1.5rem;
  }

  .inner-tabs section#faq.active .number-list p::before{
    left: 2.8rem;
  }

  section#faq.active .accordion-body .dot-list{
    margin-left: 1.5rem;
  }
  section#faq.active .accordion-body .dot-list p::before{
    left: -1.5rem;
  }

  .inner-tabs section#faq.active .number-list.footnote p{
    margin-left: 2.5rem;
  }

  .inner-tabs section#faq.active .number-list.footnote p::before{
    left: 2.5rem;
  }

  /* ========= UNDERSTANDING || WHAT IS ============= */
  .s-understand-security{
    padding-top: 6rem;
  }

  .s-understand-security .clover-container{
    flex-direction: column-reverse;
    gap: 0rem;
  }

  .s-understand-security_txt{
    padding-top: 3.5rem;
    padding-bottom: 0rem;
  }

  .apply-margin{
    margin-bottom: 3.5rem;
  }

  /* ===== UNDERSTANDING || BOX OF CONTENTS */
  .s-understand_boxes{
    padding-top: 6rem;
    padding-bottom: 12.8rem;
  }

  .s-understand_boxes .clover-container{
    flex-direction: column;
    /* gap: 6.1rem; */
  }

  .s-understand-boxes_box:not(:last-child){
    margin-right: 0rem;
    margin-bottom: 6.1rem;
  }

  .s-understand-boxes_box{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .s-understand-boxes_box img{
    width: 100%;
  }

  /* ========= VIDEOS PAGE || VIDEOS ======= */
  .s-videos{
    padding-top: 6rem;
    padding-bottom: 12.9rem;
  }

  /* .s-videos .clover-container{
    gap: 6rem;
  } */

  .s-hero-green-template_txt p{
    font-size: 1.8rem;
  }

  .video-box{
    max-width: 100%;
  }

  .video-box-txt h3{
    margin: 2.6rem 0 1.6rem;
    line-height: 3rem;
  }

  /* ============ EDUCATION ARTCILES PAGE || ARTICLES ===== */
  .s-education-articles{
    padding-top: 6rem;
    padding-bottom: 12.3rem;
  }

  .s-education-articles .clover-container{
    flex-direction: column;
  }

  .article{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6rem;
  }


  .s-education-articles .article.invisible{
    display: none;
  }

  /* ========== USEFUL LINKS PAGE || LINKS =========== */
  .s-links{
    padding-top: 6rem;
    padding-bottom: 12.9rem;
  }

  .s-links .clover-container{
    padding: 0 1.6rem;
    flex-direction: column;
  }

  .s-links .article:not(:last-child){
    margin-right: 0;
    margin-bottom: 6rem;
  }

  /* ============= ARTICLE PAGE || BREADCRUMBS */
  .breadcrumbs nav{
    padding-right: 0rem;
  }

  .breadcrumbs .clover-container{
    padding: 0 1.6rem;
  }

   /* ============ ARTICLE PAGE || ASIDE ========= */
   .article-page-grid{
    display: flex;
    flex-direction: column;
   }

   aside{
    min-height: auto;
    max-width: 100%;
    top: 10.9rem;
    margin-top: 0rem;
    margin-left: 0rem;
    padding: 0rem;
    background-color: var(--bg1);
    margin-bottom: 0rem;
    border-bottom: 1px solid var(--line2);
  }

  .aside-header{
    margin: 0 1.6rem;
  }

  .aside-header a{
    line-height: 4.6rem;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
  }

  .aside-header a img{
    display: inline-block;
  }

  .aside-articles_list::before,
  ul.aside-articles_list li a.active::before{
    width: 0rem;
    height: 0rem;
  }

  .aside-articles_list{
    display: flex;
    flex-direction: column;
  }

  ul{
    padding-left: 0;
    margin-bottom: 0;
  }

  ul.aside-articles_list li{
    border-bottom: 1px solid var(--line2);
    padding: 1.5rem 0;

  }

  ul.aside-articles_list li a{
    margin-left: 0rem;
    padding-top: 0rem;
    padding-left: 1.6rem;
    font-size: 1.5rem;
  }

  ul.aside-articles_list li a.active{
    color: var(--green);
  }

  ul.aside-articles_list li a:last-child{
    padding-bottom: 0rem;
  }
  
  ul.aside-articles_list li a:not(:last-child){
    margin-bottom: 0rem;
  }

  /* =========== ARTICLE PAGE || CONTENT ========== */
  .s-article-text{
    margin-right: 0rem;
    margin-bottom: 12.8rem;
  }

  .s-article-text > .clover-container{
    padding: 0;
    max-width: 100%;
  }

  .s-article-text .clover-container img{
    margin-bottom: 3.5rem;
    padding: 0 1.6rem;
  }

  .article-content h2{
    font-size: 2.4rem;
    padding: 0 1.6rem;
  }

  .article-content p{
    font-size: 1.5rem;
    line-height: 2.3rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }

  .article-content ul{
    margin-left: 1.6rem;
    padding: 0 1.6rem;
  }

  /* ===== ARTICLE PAGE || NEXT PREVIOUS ========= */
  .previous-next{
    display: none;
  }

  .s-article-text .clover-container img{
    margin-bottom: 3.5rem;
  }

  .s-article-text .previous-next-mobile{
    opacity: 1;
    pointer-events: all;
  }

  .article-content{
    margin-right: 0rem;
  }

  .previous-next-mobile .clover-container{
    padding: 0;
    display: flex;
    justify-content: space-between;
  }

  .previous-next-mobile a{
    padding: 1.8rem 1.6rem;
    font-size: 1.6rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--green);
    transition: .2s;
  }
  
  .previous-next-mobile a.inactive-link{
    color: var(--font-inactive);
  }

  .article-p-mobile{
    padding-bottom: 14.2rem;
  }

}

@media (max-width: 700px){
  h1{
    font-size: 3rem;
    line-height: 3.7rem;
  }

  h4{
    font-size: 2rem;
  }

  /* ===== HEADER ====== */
  nav.menu{
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .menu-dropdown .clover-container{
    padding: 0 1.6rem;
  }

  /* ======== FOOTER ========== */
  .footer-bottom{
    padding-top: 3.9rem;
    padding-bottom: 2.6rem;
  }

  .footer-bottom .clover-container{
    flex-direction: column;
    gap: 3.2rem;
  }

  .terms-privacy{
    gap: 3.4rem;
  }

  /* ====== INDEX CONTACT US ====== */
  .s-contact-us{
    margin-top: 20em;
    padding: 6.7rem 0;
  }

  .s-contact-us .clover-container{
    flex-direction: column;
    align-items: center;
    /* gap: 5.8rem; */
  }

  .s-contact-us_box:not(:last-child){
    margin-right: 0rem;
    margin-bottom: 5.8rem;
  }

  .s-contact-us_header h2{
    font-size: 2.6rem;
  }

  .phone-number{
    margin-bottom: 0;
  }

  .phone-number p,
  .phone-number p a{
    font-size: 1.8rem;
  }

  /* ============ USING PAGE || TABS ============== */
  .inner-tabs {
    padding-top: 0;
  }

  .inner-tabs .clover-container{
    padding-top: 0;
  }


  /* ========== ARTICLES PAGE || BREADCRUMBS ========== */
  .breadcrumbs{
    padding-top: 2.4rem;
    padding-bottom: 2.6rem;
  }

  .breadcrumbs ol{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .breadcrumb-item + .breadcrumb-item{
    padding-left: 0;
  }

  .breadcrumb-item:first-child::before{
    content: url(../assets/svg/breadcrumb-icon.svg);
    padding-right: 0.9rem;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    padding-left: 0;
  }

  .breadcrumb-item a{ 
    color: var(--black);
    font-size: 1.3rem;
  }
}

@media(max-width: 600px){
  /* ======= HEADER ========= */
  .header{
    grid-template-columns: 1fr 9.2rem;
    grid-template-rows: 5.5rem 5.5rem;
    grid-template-areas: "logo login"
                          "nav nav";
  }

  .login a.btn2 button {
    font-size: 1.3rem;
  } 

  nav.menu .nav-menu{
    width: 100%;
    justify-content: space-between;
    /* gap: 1rem; */
  }

  nav.menu .nav-menu > li:not(:last-child){
    margin-right: 1rem;
  }

  .home{
    display: none;
  }

  nav.menu .nav-menu li > a{
    font-size: 1.05rem;
  }

  /* DROPDOWN */
  .dropdown-txt h3 a{
    font-size: 2rem;
  }

  .menu-dropdown nav ul.top-dropdown_menu li a{
    font-size: 1.8rem;
  }

  /* ======= FOOTER ======== */
  .footer-top .clover-container,
  .footer-bottom .clover-container{
    padding: 0rem;
  }

  .footer-top nav{
    flex-direction: column;
    padding: 0rem;
    gap: 0;
    border-bottom: none;
  }

  .accordion-footer_top{
    cursor: pointer;
  }

  .accordion-footer{
    margin-left: 0rem;
    margin-right: 0rem;
  }

  .accordion-footer.active .footer-nav{
    border-bottom: 1px solid var(--line);
  }

  .footer-top p{
    display: flex;
    justify-content: space-between;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    line-height: 5.4rem;
    margin-bottom: 0;
  }

  .footer-top .accordion-footer p span{
    display: inline-block;
  }
  
  .footer-top .accordion-footer p span img{
    transition: .3s;
  }

  .footer-top .accordion-footer.active p span img{
    transform: rotate(180deg);
  }

  .footer-nav{
    display: flex;
    gap: 1.5rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    border-top: 1px solid var(--line);
  }

  .footer-top ul{
    padding: 3rem 0rem 4.5rem;
  }

  .footer-top ul li:not(:last-child) {
    margin-bottom: 2.1rem;
  }

  .footer-bottom{
    padding: 3.9rem 1.6rem 2.6rem;
    flex-direction: column;
    text-align: justify;
    gap: 3.2rem;
  }

  /* ACCORDION */
  .accordion-footer ul{
    display: none;
  }

  .accordion-footer.active ul{
    display: block;
  }

  /* ==== PATTERNS ==== */
  .btn1{
    padding: 0;
  }

  /* ====== INDEX HERO ====== */
  .s-hero .clover-container{
    width: 100%;
    max-width: 28.8rem;
    height: 38.7rem;
    right: -2rem;
  }

  .s-hero_txt{
    max-width: 28.8rem;
    left: -4rem;
    bottom: -22rem;
  }

  /* ======= INDEX WHY ====== */
  .s-why{
    margin-top: 33rem;
    margin-bottom: 6.4rem;
  }

  /* =========== USING PAGE || HERO =============== */
  .s-hero-using{
    background: url(../assets/svg/black-gradient.svg),
                url(../assets/svg/green-gradient.svg),
                url(../assets/using-clover-page-img/hero-using-mobile.png); 
    background-size: cover;
    background-position: 0% 100%, 0% 100%, 61% 12%; 
  }

  .s-hero-using_txt{
    padding: 6.6rem 0rem;
    max-width: 28.3rem;
  }

  .s-hero-using .btn1 a{
    font-size: 1.2rem;
  }

  /* =========== UNDERSTANDING || HERO ======== */
  .s-hero-understanding{
    background: url(../assets/svg/black-gradient.svg),
              url(../assets/svg/green-gradient.svg),
              url(../assets/understanding-page-img/hero-understanding-mobile.png);
    background-position: 0% 100%, 0% 100%, 61% 29%;
    background-size: cover;
  }

  .s-hero-understanding_txt{
    padding: 6.1rem 0rem 7.3rem;
    max-width: 32.7rem;
  }

  .s-hero-understanding_txt p{
    margin-top: 0.7rem;
  }

  /* ====== VIDEOS PAGE || HERO */
  .video-box-txt h3{
    font-size: 2rem;
  }
}

@media (max-width: 500px){
  /* ======== HEADER ========= */
  .login{
    width: 100%;
    max-width: 9.2rem;
    margin-left: auto;
  }

  nav.menu .nav-menu ul{
    width: 100%;
    gap: 2rem;
  }

  nav.menu .nav-menu li a img{
    display: none;
  }

  /* ======= INDEX REPORTING ====== */
  .s-pcidss .clover-container,
  .s-reporting .clover-container{
    max-width: 35.8rem;
    right: 0rem;
  }
  .s-understading.clover-container{
    max-width: 35.8rem;
    right: 0rem;
  }

  .s-reporting .home_txt2 {
   /* bottom: -33.5rem; */
    left: -1.4rem;
   /* margin-left: auto;
    margin-right: auto;*/
    }

  .s-pcidss .home_txt2,
  .s-understanding .home_txt2{
    bottom: -28rem;
  }

  /* ============== INDEX REPORTING CLOVER ======== */
  .s-reporting .s-reporting_content{
  /* max-width: 28.8rem; */
  /*  min-height: 38.7rem; */
    background-position: 77% 90%;
    right: unset;
    left: 0;
  }
  
  .s-reporting.home_txt2{
    bottom: -33.5rem;
    left: 0rem;
    margin-left: auto;
    margin-right: auto;
  }

  
}

@media (max-width: 375px){
  nav.menu .nav-menu li a::after{
    bottom: -1.8rem;
  }
}