/* responsive.css */

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
    .nav-orange-bg {
        width: 85%;
    }
    .hero-title {
        font-size: 3.5rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
    .custom-header {
        position: relative !important;
    }
    .hero {
        height: auto !important;
        padding: 100px 0 !important;
    }
    .nav-orange-bg {
        width: 100% !important;
        clip-path: none !important;
    }
    .main-navbar {
        height: auto !important;
        padding: 15px 0 !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .main-navbar > .d-flex {
        flex-direction: column !important;
        width: 100%;
    }
    .nav-dark-section {
        padding-left: 0 !important;
        margin-top: 15px !important;
        justify-content: center !important;
        width: 100%;
    }
    .nav-menu {
        margin-left: 0 !important;
        margin-top: 15px !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-left: 0 !important;
        width: 100%;
    }
    .nav-menu li {
        text-align: center;
        width: 100%;
    }
    .nav-menu li a {
        padding: 10px !important;
        display: block;
    }
    .logo-wrapper {
        margin-right: 0 !important;
        justify-content: center !important;
    }
    .top-bar {
        text-align: center;
    }
    .top-bar .d-flex {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px;
    }
    .hero-title {
        font-size: 3rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    .section-title {
        font-size: 2rem;
    }
    .page-header {
        padding: 140px 0 60px 0;
    }
    .paper-form {
        padding: 20px;
        margin: 20px auto;
    }
    .date-top {
        position: relative;
        justify-content: flex-start;
        margin-bottom: 20px;
    }
    .form-header i {
        position: relative !important;
        margin-bottom: 15px;
        display: block;
        margin: 0 auto 15px auto;
    }
    .form-title {
        font-size: 20px;
    }
    .project-input {
        width: 100%;
        margin-bottom: 10px;
    }
    .signature-section {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .signature-box {
        width: 100%;
        max-width: 250px;
    }
    .form-group-custom {
        flex-direction: column;
        align-items: flex-start;
    }
    .form-group-custom label {
        margin-bottom: 5px;
        white-space: normal;
    }
    .form-control-custom {
        width: 100%;
    }
    
    .print-btn-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .print-btn-container > div {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .print-btn-container .btn {
        width: 100%;
        margin: 0 !important;
    }
    .footer-links {
        padding-left: 0;
        margin-top: 20px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .section-title {
        font-size: 1.75rem;
    }
    .service-card {
        padding: 30px 20px;
    }
    .badge-title {
        font-size: 16px;
    }
    .logo-wrapper {
        margin-right: 0 !important;
    }
    .logo-text {
        font-size: 1.5rem;
    }
    .nav-menu li a {
        font-size: 0.85rem;
        padding: 8px;
    }
    .phone-text {
        font-size: 0.9rem;
    }
}