/* ========================================
   RESPONSIVE DESIGN - SEEMPRIME
   ======================================== */

/* CSS Variables for responsive breakpoints */
:root {
    --mobile: 480px;
    --tablet: 768px;
    --desktop: 1024px;
    --large-desktop: 1200px;
    --xl-desktop: 1400px;
}

/* ========================================
   MOBILE FIRST APPROACH
   ======================================== */

/* ========================================
   SPECIFIC COMPONENT RESPONSIVENESS
   ======================================== */

/* Mobile Bottom Navigation Enhancements */
@media (max-width: 991px) {
    .mobile-bottom-nav {
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav .nav-item {
        font-size: 9px !important;
        min-height: 60px !important;
    }

    .mobile-bottom-nav .nav-item i {
        font-size: 14px !important;
    }

    .mobile-bottom-nav .logo-nav {
        width: 60px !important;
        height: 60px !important;
        margin: -10px 6px 0 6px !important;
    }

    .mobile-bottom-nav .logo-nav img {
        width: 38px !important;
        height: 38px !important;
    }
}

@media (max-width: 768px) {
    .status-container {
        padding: 41px 0px !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .owl-carousel.single-imgs .owl-item img {
        height: 400px !important;
    }
    .about.about4 {
        margin-bottom: 0 !important;
        padding-top: 0 !important;
    }
    .about.about4.page_about4 {
        margin-bottom: 0px !important;
    }
    .contact-us-home.contact-page {
        margin-bottom: 50px !important;
    }

    .page-title {
        font-size: 2.5rem !important;
    }

    .page-subtitle {
        font-size: 13px !important;
    }

    .page-heading {
        padding: 50px 0 !important;
    }

    .about {
        padding: 50px 0 !important;
    }

    .status-item .contetn h6 {
        font-size: 12px !important;
    }

    .hero h1 {
        font-size: 14px !important;
    }

    .hero h2 {
        font-size: 32px !important;
    }

    .status-container .col-lg-3.col-md-6.col-12 {
        width: 48% !important;
    }

    .status-item .contetn p {
        font-size: 11px !important;
    }

    .hero p {
        font-size: 12px !important;
    }

    .btn-main {
        padding: 7px 30px !important;
        font-size: 12px !important;
        clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%) !important;
    }

    .button-text {
        font-size: 12px !important;
        flex-grow: 1 !important;
        text-align: center !important;
    }

    .status-item .icon {
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        background: radial-gradient(#eaf6f5 27%, #deebea 88%) !important;
        font-size: 12px !important;
    }

    .about-mask {
        height: 414px !important;
    }

    .before {
        font-size: 14px !important;
    }

    .icon-about {
        display: none !important;
    }

    .before::before {
        left: -68px !important;
        width: 53px !important;
    }

    .hero {
        height: 53vh !important;
    }

    .about3 .v-m {
        gap: 128px !important;
    }

    .v-m .icon {
        font-size: 28px !important;
    }

    .about.about3 .diamond-about3 h2 {
        font-size: 16px !important;
        padding: 11px 0 9px 0 !important;
    }

    .about p {
        font-size: 13px !important;
    }

    .row {
        gap: 24px !important;
    }

    .status-container .row {
        gap: 0px !important;
    }

    .about h2 {
        font-size: 22px !important;
        padding: 17px 0 31px 0 !important;
    }

    .about.about2 {
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    .about.about3 {
        padding: 70px 0 !important;
        background-size: cover !important;
        padding-bottom: 100px !important;
    }

    .about.about3 h2 {
        font-size: 18px !important;
        padding: 11px 0 14px 0 !important;
    }

    img.about3-img-Vector2, img.about3-img-Vector1 {
        display: none !important;
    }

    img.about3-img-one {
        display: none !important;
    }

    .social-media, .subscribe .gap-flex, .pages {
        display: none !important;
    }

    .about.about3 .diamond-about3 p {
        max-width: 187px !important;
        font-size: 11px !important;
    }

    .diamond-about3::before {
        width: 200px !important;
        height: 200px !important;
    }

    .about.about4 h2 {
        font-size: 22px !important;
    }

    .status-section {
        padding: 20px 0 4px !important;
        margin: 50px 0 !important;
    }

    .diamond-4, .diamond-5 {
        display: none !important;
    }

    .about.about4 img.about3-img-Vector1, .about-img-one {
        display: none !important;
    }

    .diamond img {
        transform: rotate(0) !important;
    }

    .diamond:first-of-type {
        width: 100% !important;
        height: 100% !important;
        top: unset !important;
        left: unset !important;
    }

    .diamond.diamond-2 {
        width: 100% !important;
        height: 100% !important;
        top: unset !important;
        left: unset !important;
    }

    .diamond.diamond-3 {
        width: 100% !important;
        height: 100% !important;
        top: unset !important;
        left: unset !important;
    }

    .row.status-section {
        gap: 0 !important;
    }

    .text-box {
        font-size: 13px !important;
    }

    .number-box {
        font-size: 32px !important;
    }

    .row.status-section .col-md-3 {
        width: 48% !important;
        padding-bottom: 16px !important;
    }
 
    .diamond-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(3, minmax(120px, 1fr)) !important;
        gap: 10px !important;
        transform: rotate(0deg) !important;
    }

    button.owl-prev, button.owl-next {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
        transform: rotate(45deg) !important;
    }

    .about.about3.services {
        padding: 70px 0 !important;
    }

    .owl-nav {
        position: unset !important;
        transform: unset !important;
        width: fit-content !important;
        gap: 10px !important;
        margin: auto !important;
        padding-top: 10px !important;
    }

    .card-services h5.price, .card-services p.title-card {
        font-size: 16px !important;
    }

    .card-services .details {
        padding-top: 11px !important;
        margin-top: 11px !important;
        gap: 10px !important;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        font-size: 12px !important;
    }

    .contact-us-home {
        padding-top: 50px !important;
        margin-bottom: -169px !important;
    }

    .form-contact-home {
        gap: 10px !important;
        padding: 30px !important;
    }

    .contact-us-home h2 {
        font-size: 22px !important;
        padding-top: 13px !important;
    }

    .before-after::after {
        right: -60px !important;
        width: 42px !important;
    }

    .before-after::before {
        left: -60px !important;
        width: 42px !important;
    }

    .icon-wats {
        display: none !important;
    }

    section.about.about4 {
        padding-bottom: 0 !important;
    }

    .mobile-menu-content .gap-flex a i {
        transform: rotate(0deg) !important;
    }
}

/* ========================================
   TABLET SPECIFIC ADJUSTMENTS
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .about.about3 {
        flex-direction: column !important;
        text-align: center !important;
    }

    .hero h2 {
        font-size: 42px !important;
    }

    .about.about3 .right-about-3 {
        margin-top: 30px !important;
    }

    .about.about2 {
        flex-direction: column-reverse !important;
        text-align: center !important;
    }

    .about.about2 .about-img {
        margin-bottom: 30px !important;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */
@media (orientation: landscape) and (max-height: 500px) {
    .mobile-bottom-nav {
        height: 60px !important;
        padding: 6px 8px !important;
    }

    .mobile-bottom-nav .nav-item {
        min-height: 48px !important;
    }

    .mobile-bottom-nav .logo-nav {
        width: 50px !important;
        height: 50px !important;
        margin: -5px 4px 0 4px !important;
    }

    .mobile-bottom-nav .logo-nav img {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ========================================
   HIGH DPI DISPLAYS
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-nav img,
    .hero-img img,
    .about-img img {
        image-rendering: -webkit-optimize-contrast !important;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .mobile-bottom-nav,
    .nav-bar,
    .ctn-preloader {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .hero,
    .about,
    .status-section,
    .projects-section {
        page-break-inside: avoid !important;
    }
}

/* ========================================
   UTILITY CLASSES FOR RESPONSIVE
   ======================================== */
.d-none-xs {
    display: none !important;
}

.d-block-xs {
    display: block !important;
}

.d-flex-xs {
    display: flex !important;
}

@media (min-width: 576px) {
    .d-none-sm {
        display: none !important;
    }

    .d-block-sm {
        display: block !important;
    }

    .d-flex-sm {
        display: flex !important;
    }
}

@media (min-width: 768px) {
    .d-none-md {
        display: none !important;
    }

    .d-block-md {
        display: block !important;
    }

    .d-flex-md {
        display: flex !important;
    }
}

@media (min-width: 992px) {
    .d-none-lg {
        display: none !important;
    }

    .d-block-lg {
        display: block !important;
    }

    .d-flex-lg {
        display: flex !important;
    }
}

@media (min-width: 1200px) {
    .d-none-xl {
        display: none !important;
    }

    .d-block-xl {
        display: block !important;
    }

    .d-flex-xl {
        display: flex !important;
    }
}

/* Text alignment utilities */
.text-center-xs {
    text-align: center !important;
}

.text-right-xs {
    text-align: right !important;
}

.text-left-xs {
    text-align: left !important;
}

@media (min-width: 576px) {
    .text-center-sm {
        text-align: center !important;
    }

    .text-right-sm {
        text-align: right !important;
    }

    .text-left-sm {
        text-align: left !important;
    }
}

@media (min-width: 768px) {
    .text-center-md {
        text-align: center !important;
    }

    .text-right-md {
        text-align: right !important;
    }

    .text-left-md {
        text-align: left !important;
    }
}

@media (min-width: 992px) {
    .text-center-lg {
        text-align: center !important;
    }

    .text-right-lg {
        text-align: right !important;
    }

    .text-left-lg {
        text-align: left !important;
    }
}

/* Margin and padding utilities */
.m-0-xs {
    margin: 0 !important;
}

.p-0-xs {
    padding: 0 !important;
}

@media (min-width: 576px) {
    .m-0-sm {
        margin: 0 !important;
    }

    .p-0-sm {
        padding: 0 !important;
    }
}

@media (min-width: 768px) {
    .m-0-md {
        margin: 0 !important;
    }

    .p-0-md {
        padding: 0 !important;
    }
}

@media (min-width: 992px) {
    .m-0-lg {
        margin: 0 !important;
    }

    .p-0-lg {
        padding: 0 !important;
    }
}