/* Responsive styles for screens smaller than 1300px */
@media (max-width: 1300px) {
    .container {
        flex-direction: column;
        width: 100%;
        padding: 1rem;
    }
    
    .grid {
        width: 100%;
        padding: 0 1.5rem 1.5rem;
    }
    
    h1 {
        font-size: 28px;
    }
}


@media only screen and (max-width: 768px) {
    .hidden-mobile {
        display: none;
      }

  }
/* Additional responsive adjustments for smaller screens */
@media (max-width: 768px) {


    .services-section {
        height: auto;
        min-height: 80px;
    }
    
    .row {
        flex-direction: column;
    }
    
    .content-left, .content-right {
        width: 100%;
        padding: 15px;
    }
    
    .big-text {
        font-size: 26px;
    }
    
    .medium-text {
        font-size: 18px;
    }
    
    h1 {
        font-size: 24px;
    }

    .logo
    {
        width: 70%;
    }

    .sidebar
    {
        width: 100%;
    }

    .tagline {
        font-size: 4vw;
    }

   
    /* On mobile, reposition the overlapping text to be fully visible */
    .content-left-small {
        position: relative;
        width: 100%;
        transform: none;
        margin-bottom: 10px;
    }

    .course-container {
        flex-direction: column;
        gap: 30px;
    }

    .image-container {
        max-width: 100%;
    }

    .step {
        margin-bottom: 40px;
    }

    .step-title {
        font-size: 20px;
    }

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