/* Responsive Styles for Easy Retire Asia */
/* Mobile First Approach */

/* Base Responsive Settings */
.container-fluid, .container-xxl{
    max-width: 100%;
    overflow-x: hidden;
}

/* General Responsive Utilities */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Navigation Responsive Styles */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: white;
        margin-top: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 15px;
    }
    
    .navbar-nav .nav-link {
        padding: 10px 15px;
        border-bottom: 1px solid #f8f9fa;
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
    
    .top-bar {
        text-align: center;
    }
    
    .top-bar .col-lg-6 {
        text-align: center !important;
        margin-bottom: 10px;
    }
    
    .navbar-brand img {
        width: 80px !important;
    }
}

@media (max-width: 767.98px) {
    .top-bar {
        display: none !important;
    }
    
    .fixed-top {
        position: relative;
    }
}

/* Hero Carousel Responsive */
@media (max-width: 1199.98px) {
    .carousel-caption .display-1 {
        font-size: 2.3rem;
        line-height: 1.2;
    }
}

@media (max-width: 991.98px) {
    .carousel-caption .display-1 {
        font-size: 2.5rem;
    }
    
    .carousel-caption p {
        font-size: 1rem;
    }
    
    .carousel-caption .btn {
        padding: 12px 30px;
        font-size: 1rem;
    }
}

@media (max-width: 767.98px) {
    .carousel-caption {
        position: relative;
        /* background: rgba(0,0,0,0.4); */
        padding: 20px;
        border-radius: 10px;
        margin: 20px;
        height: calc(90vh - 150px);
            align-items: end !important;
    }
    
    .carousel-caption .display-1 {
        font-size: 1.6rem;
        margin-bottom: 15px;
        background: #f0f8ff73;
        padding: 3px;
    
    }
    
    .carousel-caption p {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    
    .carousel-item img {
        min-height: 400px;
        object-fit: cover;
    }
}

@media (max-width: 575.98px) {
    .carousel-caption .display-1 {
        font-size: 1.75rem;
    }
    
    .carousel-caption .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .carousel-control-prev, .carousel-control-next {
        display: none;
    }
}

/* About Section Responsive */
@media (max-width: 991.98px) {
    .align-items-end {
        align-items: flex-start !important;
    }
    
    .col-lg-6:first-child {
        margin-bottom: 30px;
    }
    
    .border-rounded.p-4 {
        margin-top: 20px;
    }
}

@media (max-width: 767.98px) {
    .display-5 {
        font-size: 2rem;
    }
    
    .nav-tabs .nav-link {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    .border.rounded.p-4 .row.g-4 .col-lg-4 {
        margin-bottom: 20px;
    }
    
    .border.rounded.p-4 .row.g-4 .col-lg-4:last-child {
        margin-bottom: 0;
    }
}

/* Facts Section Responsive */
@media (max-width: 991.98px) {
    .facts .col-sm-6 {
        margin-bottom: 30px;
    }
    
    .facts .display-4 {
        font-size: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .facts .row.g-5 {
        margin: 0 -15px;
    }
    
    .facts .col-sm-6 {
        margin-bottom: 20px;
        padding: 0 15px;
    }
    
    .facts .display-4 {
        font-size: 2rem;
    }
    
    .facts .fa-3x {
        font-size: 2rem;
    }
}

/* Service Categories Responsive */
@media (max-width: 991.98px) {
    .service-item {
        margin-bottom: 30px;
    }
    
    .service-item:last-child {
        margin-bottom: 0;
    }
}

/* Services Section (Tabbed) Responsive */
@media (max-width: 991.98px) {
    .service .nav-pills {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        margin-bottom: 30px;
    }
    
    .service .nav-pills .nav-link {
        min-width: 200px;
        margin-right: 10px;
        margin-bottom: 0;
    }
    
    .service .nav-pills .nav-link:last-child {
        margin-right: 0;
    }
    
    .service .tab-content .row.g-4 {
        flex-direction: column-reverse;
    }
    
    .service .tab-content .col-md-6 {
        margin-bottom: 30px;
    }
    
    .service .tab-content .col-md-6:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 767.98px) {
    .service .nav-pills .nav-link {
        min-width: 150px;
        padding: 15px;
    }
    
    .service .nav-pills .nav-link h5 {
        font-size: 0.9rem;
    }
    
    .service .tab-content h3 {
        font-size: 1.5rem;
    }
}

/* Quote/Contact Form Responsive */
@media (max-width: 767.98px) {
    .quote .bg-white.rounded {
        margin: 0 10px;
        padding: 20px !important;
    }
    
    .quote .display-5 {
        font-size: 2rem;
    }
    
    .form-floating {
        margin-bottom: 15px;
    }
}

/* Testimonials Responsive */
@media (max-width: 991.98px) {
    .testimonial-item {
        margin: 0 15px;
    }
    
    .testimonial-text {
        padding: 20px !important;
    }
}

@media (max-width: 767.98px) {
    .testimonial-carousel .testimonial-item {
        text-align: center;
    }
    
    .testimonial-text {
        font-size: 0.9rem;
    }
    
    .testimonial-item img.rounded-circle {
        width: 80px;
        height: 80px;
    }
}

/* Footer Responsive */
@media (max-width: 991.98px) {
    .footer-contact {
        margin: 30px 0;
    }
    
    .bg-dark .row.g-5 {
        text-align: center;
    }
    
    .bg-dark iframe {
        width: 100%;
        height: 300px;
    }
}

@media (max-width: 767.98px) {
    .bg-dark .col-lg-3 {
        margin-bottom: 30px;
    }
    
    .bg-dark iframe {
        height: 250px;
    }
    
    .container-fluid.text-light.py-4 .row.g-0 {
        text-align: center;
    }
    
    .container-fluid.text-light.py-4 .col-md-6 {
        margin-bottom: 10px;
    }
}

/* Package Inquiry Form Responsive */
@media (max-width: 767.98px) {
    .page-header .display-3 {
        font-size: 2rem;
    }
    
    #packageForm .col-md-6 {
        margin-bottom: 15px;
    }
    
    #packageForm h5 {
        font-size: 1.2rem;
    }
}

/* Admin Panel Responsive */
@media (max-width: 991.98px) {
    .sidebar {
        position: relative;
        height: auto;
        width: 100% !important;
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .stats-card {
        margin-bottom: 15px;
    }
}

@media (max-width: 767.98px) {
    .stats-card h3 {
        font-size: 1.5rem;
    }
    
    .stats-card .fa-2x {
        font-size: 1.5rem;
    }
    
    #inquiriesTable {
        font-size: 0.8rem;
    }
    
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
    }
}

/* Login Page Responsive */
@media (max-width: 575.98px) {
    .login-container {
        padding: 0 15px;
    }
    
    .login-card {
        padding: 1.5rem;
    }
}

/* Floating Action Buttons Responsive */
@media (max-width: 767.98px) {
    .back-to-top-call, .back-to-top-whatsapp {
        bottom: 80px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
    }
    
    .back-to-top-whatsapp {
        bottom: 140px !important;
    }
    
    .back-to-top {
        bottom: 20px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
    }
}

/* Typography Scaling */
@media (max-width: 1199.98px) {
    .display-1 { font-size: 4rem; }
    .display-5 { font-size: 2.5rem; }
}

@media (max-width: 991.98px) {
    .display-1 { font-size: 3rem; }
    .display-5 { font-size: 2rem; }
    h1 { font-size: 2rem; }
}

@media (max-width: 767.98px) {
    .display-1 { font-size: 2.5rem; }
    .display-5 { font-size: 1.75rem; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

@media (max-width: 575.98px) {
    .display-1 { font-size: 2rem; }
    .display-5 { font-size: 1.5rem; }
    h1 { font-size: 1.5rem; }
    body { font-size: 0.9rem; }
}

/* Button Responsive */
@media (max-width: 767.98px) {
    .btn-lg {
        padding: 12px 24px;
        font-size: 1rem;
    }
    
    .btn-primary {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Form Element Responsive */
@media (max-width: 767.98px) {
    .form-control, .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .form-floating {
        margin-bottom: 15px;
    }
}

/* Animation Adjustments for Mobile */
@media (max-width: 767.98px) {
    .wow {
        animation-duration: 0.8s !important;
    }
}

/* Utility Classes for Responsive Spacing */
.mobile-mt-3 { margin-top: 1rem; }
.mobile-mb-3 { margin-bottom: 1rem; }
.mobile-pt-3 { padding-top: 1rem; }
.mobile-pb-3 { padding-bottom: 1rem; }

@media (max-width: 767.98px) {
    .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .pt-5 { padding-top: 2rem !important; }
    .pb-5 { padding-bottom: 2rem !important; }
    .my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
}

/* Print Styles */
@media print {
    .navbar, .footer, .back-to-top, .back-to-top-call, .back-to-top-whatsapp {
        display: none !important;
    }
    
    .container-fluid {
        width: 100%;
        max-width: 100%;
    }
}
















.carousel-caption .display-1 {
        font-size: 2.5rem;
        margin-bottom: 15px;
        background: #f0f8ff73;
        padding: 3px;
    
    }

    .carousel-caption p {
        
        background: #f0f8ff73;
        color: black !important;
    
    }