/* XL Device :1200px. */
@media (min-width: 1200px) and (max-width: 1449px) {


    .nav-menu {
        display: block;
    }

    .content h1 {
        width: 80%;
    }



}

/* LG Device :992px. */
@media (min-width: 992px) and (max-width: 1200px) {

    .content h1 {
        width: 90%;
    }

    .nav-menu {
        display: block;
    }

    .column {
        padding-left: 20px;
        padding-right: 20px;
    }
    #part_five_column {
        width: 48%;
        margin: auto;
    }
    .part__five-layer {
        position: absolute;
        width: 68%;
        right: 0;
        margin: auto;
        left: 0;
    }
    #part_five_container {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* MD Device :768px. */
@media (min-width: 768px) and (max-width: 991px) {

    .hero {
        height: 100vh;
        min-height: 700px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 40px;
    }

    .content {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        top: auto;
        max-width: 100%;
        width: 100%;
        padding: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .content h1 {
        font-size: 42px;
        line-height: 1.2;
        margin-bottom: 25px;
        text-align: center;
        max-width: 100%;
        width: 100%;
    }

    .content p {
        font-size: 18px;
        margin-bottom: 35px;
        text-align: center;
        max-width: 80%;
        line-height: 1.5;
    }

    .content .btn {
        padding: 14px 28px;
        font-size: 18px;
        width: auto;
        min-width: 180px;
    }

    .nav-menu {
        display: none;
    }

    .offcanvas-open {
        display: flex;
    }

    #offcanvas .auth-buttons {
        display: none;
    }

    /* About Us Section Medium Device Styles */
    .about_us_main {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

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

    .about_us_features {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* About Page Medium Device Styles */
    .about_main {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .about_content h2 {
        font-size: 2.2rem;
    }

    .mission_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .features_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .commitment_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Plans Page Medium Device Styles */
    .plans_grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .plan_card.featured {
        transform: none;
    }

    .benefits_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .faq_grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Contact Page Medium Device Styles */
    .contact_methods_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact_form_wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .office_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .part__content-text {
        right: 1%;
        top: 50%;
    }
    #part_five_column {
        width: 48%;
        margin: auto;
    }
    .part__five-layer {
        position: absolute;
        width: 68%;
        right: 0;
        margin: auto;
        left: 0;
    }
}


/* SM Small Device :320px. */
@media only screen and (min-width: 320px) and (max-width: 767px) {

    .hero {
        height: 100vh;
        min-height: 600px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .content {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        top: auto;
        max-width: 100%;
        width: 100%;
        padding: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .content h1 {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 20px;
        text-align: center;
        max-width: 100%;
        width: 100%;
    }

    .content p {
        font-size: 16px;
        margin-bottom: 30px;
        text-align: center;
        max-width: 90%;
        line-height: 1.5;
    }

    .content .btn {
        padding: 12px 24px;
        font-size: 16px;
        width: auto;
        min-width: 150px;
        margin-top: 10px;
    }

    /* Additional mobile hero improvements */
    .hero::before {
        background-attachment: scroll;
        background-size: cover;
        background-position: center center;
    }

    .header {
        position: relative;
        z-index: 10;
        background: rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
    }

    .header-row {
        padding: 15px 20px;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 86, 0, 0.2);
    }

    .logo-text {
        font-size: 1.5rem;
    }

    .nav-menu {
        display: none;
    }

    .offcanvas-open {
        display: flex;
        background: rgba(255, 86, 0, 0.1);
        border: 1px solid rgba(255, 86, 0, 0.3);
        border-radius: 8px;
        padding: 12px 16px;
        color: #ff5600;
        font-size: 18px;
        transition: all 0.3s ease;
    }

    .offcanvas-open:hover {
        background: rgba(255, 86, 0, 0.2);
        border-color: #ff5600;
    }

    .auth-buttons {
        display: none;
    }

    /* Mobile offcanvas improvements */
    .offcanvas {
        width: 280px;
        background: linear-gradient(135deg, #1a1a1a, #0f0f0f);
        border-right: 2px solid #ff5600;
    }

    .offcanvas nav ul li a {
        font-size: 16px;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .offcanvas nav ul li:last-child a {
        border-bottom: none;
    }

    /* Extra small screens (phones in portrait) */
    @media only screen and (max-width: 480px) {
        .content h1 {
            font-size: 24px;
            line-height: 1.1;
            margin-bottom: 15px;
        }

        .content p {
            font-size: 14px;
            margin-bottom: 25px;
            max-width: 95%;
        }

        .content .btn {
            padding: 10px 20px;
            font-size: 14px;
            min-width: 130px;
        }

        .hero {
            min-height: 500px;
            padding: 15px;
        }

        .header-row {
            padding: 10px 15px;
        }

        .logo-text {
            font-size: 1.2rem;
        }
    }

    /* About Us Section Mobile Styles */
    .about_us_section {
        padding: 50px 0;
    }

    .about_us_container {
        padding: 0 15px;
    }

    .about_us_header h1 {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }

    .about_us_header p {
        font-size: 1.1rem;
    }

    .about_us_main {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .about_us_text p {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .about_us_features {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about_feature {
        padding: 20px;
    }

    .about_feature strong {
        font-size: 1rem;
    }

    .about_feature p {
        font-size: 0.9rem;
    }

    /* About Page Mobile Styles */
    .about_main {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .about_content h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .about_content p {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .about_stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 30px;
    }

    .about_stats .stat_item {
        padding: 20px;
    }

    .about_stats .stat_item h3 {
        font-size: 2rem;
    }

    .about_stats .stat_item p {
        font-size: 0.9rem;
    }

    .mission_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mission_card {
        padding: 30px 20px;
    }

    .mission_icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .mission_card h3 {
        font-size: 1.3rem;
    }

    .mission_card p {
        font-size: 0.95rem;
    }

    .section_header h2 {
        font-size: 2.2rem;
    }

    .section_header p {
        font-size: 1.1rem;
    }

    .features_grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .feature_item {
        padding: 25px 20px;
    }

    .feature_icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .feature_item h4 {
        font-size: 1.2rem;
    }

    .feature_item p {
        font-size: 0.95rem;
    }

    .commitment_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .commitment_item {
        padding: 30px 20px;
    }

    .commitment_item h4 {
        font-size: 1.3rem;
    }

    .commitment_item p {
        font-size: 1rem;
    }

    .cta_content h2 {
        font-size: 2.2rem;
    }

    .cta_content p {
        font-size: 1.1rem;
    }

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

    .btn_primary, .btn_secondary {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    /* Plans Page Mobile Styles */
    .plans_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .plan_card.featured {
        transform: none;
    }

    .plan_card.featured:hover {
        transform: translateY(-10px);
    }

    .plan_header h3 {
        font-size: 1.8rem;
    }

    .plan_price .amount {
        font-size: 2.5rem;
    }

    .plan_features .feature_item {
        margin-bottom: 12px;
    }

    .plan_features .feature_item span {
        font-size: 0.95rem;
    }

    .comparison_header,
    .comparison_row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .comparison_header > div,
    .comparison_row > div {
        padding: 15px;
        text-align: center;
    }

    .feature_name {
        background: rgba(255, 86, 0, 0.1);
        font-weight: 600;
        color: #ff5600;
    }

    .benefits_grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .benefit_item {
        padding: 25px 20px;
    }

    .benefit_icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .benefit_item h4 {
        font-size: 1.2rem;
    }

    .benefit_item p {
        font-size: 0.95rem;
    }

    .faq_grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .faq_question {
        padding: 15px;
    }

    .faq_question h4 {
        font-size: 1rem;
    }

    .faq_answer {
        padding: 0 15px;
    }

    .faq_item.active .faq_answer {
        padding: 15px;
    }

    /* Contact Page Mobile Styles */
    .contact_methods_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact_method {
        padding: 30px 20px;
    }

    .contact_icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .contact_method h3 {
        font-size: 1.3rem;
    }

    .contact_method p {
        font-size: 0.95rem;
    }

    .contact_form_wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .form_info h2 {
        font-size: 2rem;
    }

    .form_info p {
        font-size: 1rem;
    }

    .contact_form {
        padding: 30px 20px;
    }

    .form_group {
        margin-bottom: 20px;
    }

    .form_group input,
    .form_group select,
    .form_group textarea {
        padding: 12px;
        font-size: 0.95rem;
    }

    .office_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .office_info {
        padding: 30px 20px;
    }

    .office_icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .office_info h3 {
        font-size: 1.3rem;
    }

    .office_details p {
        font-size: 0.95rem;
    }

    .auth-buttons {
        display: none;
    }

    .part_four .part_four_content {
        max-width: 300px;
        margin-bottom: 20px;
        margin-left: 20px;
    }


    .part__content-text {
        position: relative;
        transform: unset;
        padding-bottom: 50px;
        right: unset;
        top: 100px;
    }

    .part__fout-image {
        display: block;
        position: absolute;
        right: -50%;
        bottom: 0;
    }

    .part_six h1 {
        font-size: 33px;
    }

    .part_six {
        padding: 50px 20px;
    }
    .part__five-layer {
        position: absolute;
        width: 43%;
        right: 0;
        margin: auto;
        left: 0;
    }
    .part__five-layer {
        position: absolute;
        width: 80%;
        right: 0;
        margin: auto;
        left: 0;
    }
    .part_two.mobile {
        display: block;
    }
    .part_two{
        display: none;
    }
    .part_three-active.mobile {
        display: block;
    }
    .part_three-box{
        display: none;
    }
    .column {
        padding: 0 15px;
        margin-bottom: 50px;
    }
    #part_five_container {
        grid-template-columns: repeat(2, 1fr);
    }
    #part_five_column {
        min-height: 230px;
    }
    .part_three {
        padding-bottom: 0;
    }
}





/* SM Small Device :550px. */
@media only screen and (min-width: 576px) and (max-width: 767px) {

    .part__five-layer {
        position: absolute;
        width: 43%;
        right: 0;
        margin: auto;
        left: 0;
    }

}