/* Responsive CSS Enhancements */

/* ========================
   Breakpoint Organization
   ======================== */

/* Extra large devices (large desktops, 1366px and up) */
@media only screen and (max-width: 1366px) {
    .ulockd-overlay-icon-l2 { top: 71%; }
}

/* Large devices (desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /* Add specific styles for XL screens if needed */
}

/* Medium devices (desktops, 992px to 1199px) */
@media only screen and (max-width: 1199px) {
    .ulockd-blog-post-details { margin-bottom: 80px; }
    .ulockd-welcm-ht::before,
    .ulockd-social-linked::before { display: none; }
    .ulockd-welcm-ht,
    .ulockd-social-linked { 
        text-align: center;
        float: none !important; 
    }
    .ulockd-social-linked { margin-bottom: 10px; }
    
    /* Slider adjustments */
    .ulockd-main-slider .caption,
    .ulockd-main-slider-style2 .caption { padding: 8%; }
    
    /* Layout adjustments */
    .ulockd-frst-divider-l2::after { right: -30%; }
    .masonry-gallery.grid-four-item .isotope-item { width: 33.33%; }
    .ulockd-about-ondetials { padding: 15px 20px; }
    .ulockd-srvc-details { padding-left: 25%; }
    .ulockd-team-mdetails { padding: 15px 18px; }
    .ulockd-overlay-icon { top: 55%; }
    .ulockd-overlay-icon-l2 { top: 60%; }
}

/* Small devices (tablets, 768px to 991px) */
@media only screen and (max-width: 991px) {
    /* Spacing adjustments */
    .ulockd-fprjct-column,
    .ulockd-team-member,
    .ulockd-ffact,
    .ulockd-fprjct-column-l2,
    .ulockd-service-fstcol { margin-bottom: 50px; }
    .ulockd-testi-grid { margin-bottom: 100px; }
    .ulockd-partner-thumb { margin-bottom: 30px; }
    
    /* Centering elements */
    .ulockd-welcm-ht-two,
    .ulockd-social-linked-two {
        text-align: center;
        float: none !important;
    }
    .ulockd-social-linked-two { margin-bottom: 10px; }
    
    /* Slider adjustments */
    .ulockd-main-slider .caption,
    .ulockd-main-slider-style2 .caption { padding: 5% 8%; }
    .ulockd-main-slider .ulockd-text-two,
    .ulockd-main-slider-style2 .ulockd-text-two {
        font-size: 48px;
        line-height: 48px;
    }
    .ulockd-main-slider .ulockd-text-three,
    .ulockd-main-slider-style2 .ulockd-text-three { margin-top: 10px; }
    
    /* Navbar adjustments */
    .navbar-brand .logo { height: 37px; margin-top: 0; }
    nav.navbar.bootsnav.ulockd-menu-style-one .navbar-toggle,
    nav.navbar.bootsnav .navbar-header.ulockd-ltwo .navbar-toggle {
        background-color: transparent;
        color: #fff;
    }
    nav.navbar.navbar-default.bootsnav.ulockd-menu-style-one { background: #313131; }
    nav.navbar.navbar-default.bootsnav .navbar-header.ulockd-ltwo { background: #C6A363; }
    
    /* Other layout adjustments */
    .ulockd-contact-info .ulockd-info { padding-right: 36%; }
    .ulockd-about-ondetials { margin-bottom: 30px; }
    .ulockd-testimonials { margin-top: 50px; }
    .ulockd-about-thumb-ttl { left: -20%; }
    .ulockd-frst-divider-l2::after { display: none; }
    .masonry-gallery.grid-four-item .isotope-item { width: 50%; }
    .ulockd-overlay-icon { top: 45%; }
}

/* Medium-small devices (large phones, 630px to 767px) */
@media only screen and (max-width: 767px) {
    /* Navbar adjustments */
    .navbar.bootsnav .dropdown li {
        padding: 10px 15px;
    }
    .navbar.bootsnav .dropdown li:hover > a,
    .navbar.bootsnav .dropdown li > a {
        padding-left: 15px;
        color: #fff;
        transition: all 0.3s ease;
    }
    
    /* Centering elements */
    .ulockd-contact-info,
    .ulockd-ohour-info {
        text-align: center;
    }
    .ulockd-contact-info .ulockd-icon,
    .ulockd-ohour-info .ulockd-icon {
        display: table;
        float: none;
        margin: 0 auto;
    }
    .ulockd-contact-info .ulockd-info { padding: 0; }
    
    /* Slider adjustments */
    .ulockd-main-slider .ulockd-text-one,
    .ulockd-main-slider-style2 .ulockd-text-one {
        font-size: 30px;
        line-height: 30px;
    }
    .ulockd-main-slider .ulockd-text-two,
    .ulockd-main-slider-style2 .ulockd-text-two {
        font-size: 32px;
        line-height: 32px;
    }
    .ulockd-main-slider .ulockd-text-three p,
    .ulockd-main-slider-style2 .ulockd-text-three p {
        font-size: 14px;
        line-height: 16px;
        margin-top: 0;
    }
    .ulockd-main-slider .owl-prev,
    .ulockd-main-slider .owl-next,
    .ulockd-main-slider-style2 .owl-prev,
    .ulockd-main-slider-style2 .owl-next {
        display: none !important;
    }
    
    /* Layout adjustments */
    .ulockd-srvc-details { padding-left: 15%; }
    .ulockd-srvc-column .ulockd-srv-icon { left: 4%; }
    .ulockd-team-mdetails {
        bottom: 0;
        padding: 20px;
        width: 100%;
    }
    .ulockd-team-mdetails::before { display: none; }
    .ulockd-welcm-hmddl { text-align: center; }
    .ulockd-footer::before { width: 100%; }
    .ulockd-about-thumb-ttl {
        left: 0;
        position: relative;
        transform: rotate(0deg) !important;
        top: 0;
    }
    .masonry-gallery.grid-four-item .isotope-item { width: 100%; }
    .ulockd-error { font-size: 48px; }
    .ulockd-csoon { font-size: 36px; }
}

/* Small devices (phones, 520px to 629px) */
@media only screen and (max-width: 629px) {
    .ulockd-srvc-details { padding-left: 20%; }
    
    /* Slider adjustments */
    .ulockd-main-slider .caption,
    .ulockd-main-slider-style2 .caption { padding: 2%; }
    .ulockd-home-btn { display: none; }
}

/* Extra small devices (phones, up to 520px) */
@media only screen and (max-width: 520px) {
    .col-xxs-12 { width: 100% !important; }
}

/* Tiny devices (small phones, 400px to 479px) */
@media only screen and (max-width: 479px) {
    /* Slider adjustments */
    .ulockd-main-slider .ulockd-text-three,
    .ulockd-main-slider-style2 .ulockd-text-three { margin-top: 0; }
    .ulockd-main-slider .ulockd-text-two,
    .ulockd-main-slider-style2 .ulockd-text-two {
        font-size: 30px;
        line-height: 30px;
    }
    .ulockd-home-btn { display: none; }
    .ulockd-srvc-details { padding-left: 25%; }
}

/* Very small devices (phones, up to 400px) */
@media only screen and (max-width: 400px) {
    /* Slider adjustments */
    .ulockd-main-slider .caption,
    .ulockd-main-slider-style2 .caption { padding: 4%; }
    .ulockd-main-slider .ulockd-text-one,
    .ulockd-main-slider-style2 .ulockd-text-one,
    .ulockd-main-slider .ulockd-text-two,
    .ulockd-main-slider-style2 .ulockd-text-two {
        font-size: 24px;
    }
    .ulockd-main-slider .ulockd-text-three p,
    .ulockd-main-slider-style2 .ulockd-text-three p {
        display: none;
    }
}

/* Micro devices (very small phones, up to 360px) */
@media only screen and (max-width: 360px) {
    .ulockd-dvidr-btn-l2 a { margin-top: 30px; }
}

/* Ultra micro devices (tiny phones, up to 320px) */
@media only screen and (max-width: 320px) {
    .ulockd-srvc-details { padding-left: 30%; }
    .ulockd-overlay-icon-l2 { top: 76%; }
}

/* ========================
   Enhancement Recommendations
   ======================== */

/* Consider adding these improvements: */

/* 1. Fluid typography */
@media (min-width: 576px) {
    html { font-size: calc(14px + (16 - 14) * ((100vw - 576px) / (1600 - 576))); }
}

/* 2. Mobile-first approach (consider for future updates) */
/* Base styles would be for mobile, then min-width media queries */

/* 3. Touch target sizing for better mobile UX */
a, button, .clickable-element {
    min-width: 44px;
    min-height: 44px;
}

/* 4. Performance optimizations */
img {
    max-width: 100%;
    height: auto;
}

/* 5. Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}