/* ==================== MEDIA QUERIES ==================== */

@media (max-width: 780px) {

  .gap{
    height: 88px;
  }

  section{
    min-height: calc((100vh - 88px));
  }
  /* ==================== HOME PAGE ==================== */

  html {
    font-size: 75%;
  }

  .my-container {
    width: 80%;
    flex-direction: column;
    padding: 2rem 2rem;
  }

  
  

  /* ==================== HEADER ==================== */

  .navbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .navbar .main-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .navbar .logo {
    /* width: 100%; */
    /* justify-content: space-between; */
    padding: 0px 20px;
  }

  .navbar .my-nav {
    display: none;
    width: 100%;
    padding: 0px 20px;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .my-nav.active {
  display: flex;
}

  .nav-links {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    padding: 0;
  }

  .contact-btn {
    width: 100%;
  }

  .navbar .menu-btn {
    font-size: 2rem;
    display: block;
    cursor: pointer;
    color: var(--clr-primary);
    margin: 0px 20px ;
  }

  /* ==================== HOME PAGE ==================== */

 .hero-content {
    flex-direction: column;
    text-align: center;
  }

  .left{
    margin-bottom: 20px;
  }

  .left,
  .right {
    padding: 0;
  }

  .left h1 {
    font-size: 2.5rem;
  }

  .right img {
    width: 80%;
    max-width: 300px;
  }

  .stats {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .profile-card {
    flex-direction: column;
    text-align: center;
  }


  .profile-left img {
    width: 200px;
  }

  .profile-right{
    margin-top: 20px;
  }

  .button-group {
    flex-direction: column;
    align-items: center;
  }

  .btn-outline,
  .my-btn {
    width: 100%;
    text-align: center;
  }

  /* ==================== PORTFOLIO PAGE ==================== */
  
  .slide-btn {
    display: none;
  }
  
  /* ==================== CONTACT PAGE ==================== */

  .contact-left,
  .contact-right{
    width: 100%;
  }
  .video-box {
    min-width: 100%;
  }
  
}


@media (min-width: 780px) {
  .video-box {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
}