/* Media Queries */
@media (max-width: 1400px){
  #contactseg{
    padding: 50px;
  }  
}

@media (max-width: 1200px){
  #contactblock{
    flex-direction: column;
  }
  #infoblock{
    width: 100%;
  }
  #msgblock{
    margin-top: 50px;
    width: 100%;
  }  

    #footersection .top{
      padding: 50px 40px;
    }
    #headersection .top {
      display: none;
    }
    #mainnavblock{
      padding: 15px 20px;
      width: calc(100vw - 55px);
      overflow: hidden;
    }
    #pssegment{
      padding: 50px 100px;
    }
  }
  @media (max-width: 1100px){
    #mainnavbar {
      display: none;
    }
    #mainnavblock {
      justify-content: space-between;
    }
    #showmenubtn{
      display: block;
    }
  }
  
  @media (max-width: 1000px){
    #bankinfosegment{
      flex-direction: column;
      align-items: center;
    }
  
    #bankinfosegment .left,
    #bankinfosegment .right{
      width: calc(100vw - 100px);
    }
    #bankinfosegment .right{
      margin-top: 50px;
    }
  }
  
  @media (max-width: 800px){
    #logocontainer img {
      width: 200px;
    }  
    #corporateprofileblock{
      padding: 50px;
    }
    #productsandservicessection{
      padding: 0;
    }
    #footersection .top{
      flex-direction: column;
      padding: 50px
    }
    #footersection header{
      margin-top: 35px;
    }
    #footersection .top .left,
    #footersection .top .middle,
    #footersection .top .right {
      width: calc(100vw - 100px);
    }
  
    #footersection .top .left .logohouse{
      width: 60vw;
    }  
  }
  /* NAV BAR */
  @media (max-width: 768px) {
    #headersection .top, 
    #headersection .bottom {
      padding: 10px 20px;
    }
    /* Stack top bar elements vertically */
    #headersection .top {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    /* Hide desktop navbar and enable mobile toggle */
    #mainnavbar {
      display: none;
    }
    #showmobilemenucontainer {
      display: block;
    }
  }
  
  @media (max-width: 700px){
    #boardsegment{
      padding: 50px;
    }
    
    #corporateprofileblock{
      padding: 50px 0px;
    }
    #profiletext{
      padding: 0 30px;
    }
    #corporateprofileblock h2{
      font-size: 1.7rem;
    }    
    #vmblock .blocks{
      width: calc(100vw - 50px);
    }

    #pssegment{
      padding: 50px 10px;
    }
    #pssegment h2{
      font-size: 1.5rem;
    }    
    #blockhouse .blocks .descriptions{
      font-size: 1rem;
    }
    #blockhouse .blocks .headers{
      font-size: 1.2rem;
    }
  }
  @media (max-width: 600px){
    #contactseg{
      padding: 50px 20px;
    }  
  
    .overlay h2 {
      font-size: 1.6em;
    }
    .overlay p {
      font-size: 0.8em;
    }
    .overlay {
      padding: 5px;
    }
  }
  
  @media (max-width: 500px){
    #boardsegment{
      padding: 50px 0px;
    }
    #boardsegment h2{
      font-size: 1.5rem;
    }
    #boardblock{
      padding: 10px;
    }

  }

  @media (max-width: 400px){
    #mainnavblock{
      padding: 15px 20px;
      width: calc(100vw - 41px);
    }
  }