@import url(/css/styles/index.css);
@import url(/css/layout/index.css);
@import url(/css/buttons/index.css);
@import url(/css/components/index.css);
@import url(/css/buttons/index.css);
@import url(/css/containers/phone-three-box.css);
@import url(/css/containers/three-box-small.css);
@import url(/css/containers/feature-twobox.css);
@import url(/css/components/message-banner.css);
@import url(/css/components/rate-circle.css);
@import url(/css/containers/mini-scrollbar-natural.css);
@import url(../containers/filter-menu.css);
@import url(../containers/ticker.css);
@import url(../../animation-refactored/css/index.css);

@import url(../containers/ten-box2.css);
@import url(../containers/signup-container.css);
@import url(../containers/circle-container.css);
@import url(../containers/benefit-container.css);


#calculator-section,
#guide-section,
#calculator-section-title,
#guide-section-title {
display: flex;
flex-direction: row;
justify-content: start;
text-align: left;
width: 100%;
padding: 0;

}

#calculator-section-title,
#guide-section-title {
    padding-bottom: 10px;
}

#guide-section {
    padding: 30px 0 0 0;
}


@media screen and (max-width: 767px) {
#calculator-section,
#guide-section {
width: 100%;
flex-direction: column;
padding: 45px 0 0 0;
}


    .threebox-container {
      display: flex;
      height: 100%;
      width: 100%;
      gap: 8px;
      padding-top: 10px;
      justify-content: center;
      flex-direction: column;
    }
  
      .benefit-box-container {
          margin: 60px 0 0 0;
      }
      
      .background-container2 {
        display: flex;
        flex-direction: row;
        height: auto;
        width: 100%;
        gap: 16px;
        border-radius: 10px;
      }
  
      .benefit-box.home {
        max-width: 100%;
        flex-direction: column;
        display: flex;
      }

  

      .filter2-menu-item {        
        width: fit-content;        
        min-width: 100px;
        }    
    
    .filter-menu-item-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 8px;
        }
    
        .filter2-menu-item {
            margin: 0;
            height: 34px;
            padding: 5px;
            line-height: 22px;
            font-size: 11.5px;
            }    
 
}


@media screen and (max-width: 500px) {

    .threebox-container {
      display: flex;
      height: 100%;
      width: 100%;
      gap: 8px;
      padding-top: 10px;
      justify-content: center;
      flex-direction: column;
    }
  
      .benefit-box-container {
          margin: 60px 0 0 0;
      }
      
      .background-container2 {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%;
        gap: 16px;
        border-radius: 10px;
      }
  
      .benefit-box.home {
        max-width: 100%;
        flex-direction: row;
        display: flex;
      }
  
  

  
  }