@media (max-width: 700px){
    .header-back{
      height: 60px;
    }
    .sidebar{
      top: 74px;
      gap: 16px;
    }
    .sidebar.active{
      left: 10px;
    }
    .left-section{
      gap: 20px;
    }
    .right-section .quick-access, .middle-section{
      display: none;
    }
    .left-section img, .left-section div {
      height:30px;
      font-size: 26px;
    }
    .left-section{
      align-items: center;
    }
    .right-section{
      justify-content: flex-end;
    }
    .small-search{
      display: flex;
    }
    .header{
      height: 60px;
      top: 5px;
      left: 5px;
      right: 5px;
    }
    .sidebar-box img{
      height: auto;
    }
    .sidebar-box div{
      font-size: 15px;
    }
    .content{
      margin: 0;
      margin-top:64px;
    }
    .theme-switcher img{
      height: 40px;
      margin-right:8px;
      margin-left:8px;
    }
  }

    .contact-container {
        margin: 20px;
        padding: 20px;
    }

    .contact-title {
        font-size: 35px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .contact-details {
        flex-direction: column;
        gap: 15px;
    }

    .submit-button {
        width: 100%;
        padding: 15px;
    }



.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s ease-in-out infinite;
    margin-right: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}